[et_pb_section fb_built= »1″ _builder_version= »4.9.3″ _module_preset= »default » global_colors_info= »{} » theme_builder_area= »post_content »][et_pb_row column_structure= »1_2,1_2″ disabled_on= »on|on|off » _builder_version= »4.9.3″ _module_preset= »default » width= »100% » custom_margin= »-51px|auto||auto|| » locked= »off » global_colors_info= »{} » theme_builder_area= »post_content »][et_pb_column type= »1_2″ _builder_version= »4.9.0″ _module_preset= »default » global_colors_info= »{} » theme_builder_area= »post_content »][et_pb_image src= »https://agence-rafale.fr/wp-content/uploads/2021/05/firmbee-com-gcsNOsPEXfs-unsplash.jpg » alt= »texte-en-cercle » title_text= »firmbee-com-gcsNOsPEXfs-unsplash » _builder_version= »4.9.10″ _module_preset= »default » width= »63% » module_alignment= »center » global_colors_info= »{} » theme_builder_area= »post_content »][/et_pb_image][/et_pb_column][et_pb_column type= »1_2″ _builder_version= »4.9.0″ _module_preset= »default » global_colors_info= »{} » theme_builder_area= »post_content »][et_pb_image src= »https://agence-rafale.fr/wp-content/uploads/2021/08/design-texte-anime-divi.jpg » alt= »achats-en-ligne » title_text= »design-texte-anime-divi » _builder_version= »4.9.10″ _module_preset= »default » width= »63% » filter_saturate= »58% » filter_brightness= »93% » global_colors_info= »{} » theme_builder_area= »post_content »][/et_pb_image][/et_pb_column][/et_pb_row][et_pb_row _builder_version= »4.9.3″ _module_preset= »default » global_colors_info= »{} » theme_builder_area= »post_content »][et_pb_column type= »4_4″ _builder_version= »4.9.3″ _module_preset= »default » global_colors_info= »{} » theme_builder_area= »post_content »][et_pb_text _builder_version= »4.9.10″ _module_preset= »default » text_font= »Montserrat|||||||| » text_font_size= »15px » text_orientation= »justified » custom_padding= »||0px||| » global_colors_info= »{} » theme_builder_area= »post_content »]
Être au courant des tendances dans le secteur du web design est l’un des meilleurs moyens de rester à jour en tant que web designer. Cela vous permet de créer des sites Web modernes qui impressionneront vos clients et vous aideront à faire passer vos compétences au niveau supérieur. Dans ce tutoriel nous allons vous montrer comment vous familiariser avec le concept de création des textes en cercles animés. Désormais vous serez capable de l’intégrer sur vos pages Divi.
[/et_pb_text][/et_pb_column][/et_pb_row][et_pb_row _builder_version= »4.9.3″ _module_preset= »default » custom_margin= »|auto|-28px|auto|false|false » custom_padding= »1px||||false|false » border_width_all= »6px » border_color_all= »#322269″ global_module= »3908″ saved_tabs= »all » locked= »off » global_colors_info= »{} » theme_builder_area= »post_content »][et_pb_column type= »4_4″ _builder_version= »4.9.0″ _module_preset= »default » global_colors_info= »{} » theme_builder_area= »post_content »][et_pb_text _builder_version= »4.9.10″ _module_preset= »default » text_font= »Montserrat|||||||| » text_font_size= »16px » link_font= »|||||||| » ul_text_align= »center » text_orientation= »center » custom_margin= »12px||||| » custom_padding= »||0px||| » global_colors_info= »{} » theme_builder_area= »post_content »]
SOMMAIRE
Intégration du design sur Divi
[/et_pb_text][/et_pb_column][/et_pb_row][et_pb_row _builder_version= »4.9.3″ _module_preset= »default » custom_margin= »30px||30px||true|false » global_colors_info= »{} » theme_builder_area= »post_content »][et_pb_column type= »4_4″ _builder_version= »4.9.3″ _module_preset= »default » global_colors_info= »{} » theme_builder_area= »post_content »][et_pb_text _builder_version= »4.9.10″ _module_preset= »default » text_font= »Montserrat|||||||| » text_font_size= »15px » text_orientation= »justified » global_colors_info= »{} » theme_builder_area= »post_content »]
Pour en créer un, il vous suffit d’avoir
– Un compte ordinaire de Canva
– Le thème Divi installé et activé sur votre WordPress
– Une page en front end (visual builder) de Divi
[/et_pb_text][et_pb_text module_id= »chap1″ _builder_version= »4.9.10″ _module_preset= »default » text_font= »Montserrat|||||on||| » text_font_size= »25px » text_letter_spacing= »1px » header_3_text_color= »#322269″ header_3_font_size= »25px » custom_margin= »||16px||| » custom_padding= »||0px||| » locked= »off » global_colors_info= »{} » theme_builder_area= »post_content »]
Création du design sur Canva
[/et_pb_text][et_pb_text _builder_version= »4.9.10″ _module_preset= »default » text_font= »Montserrat|||||||| » width= »73% » global_colors_info= »{} » theme_builder_area= »post_content »]
Afin de créer le texte courbé, accédez à votre compte Canva, cliquez sur “Créer un design”, ensuite “Dimension personnalisée” et remplissez les champs, en indiquant 230px pour la largeur et 240px pour l’hauteur.
[/et_pb_text][/et_pb_column][/et_pb_row][et_pb_row _builder_version= »4.9.3″ _module_preset= »default » global_colors_info= »{} » theme_builder_area= »post_content »][et_pb_column type= »4_4″ _builder_version= »4.9.3″ _module_preset= »default » global_colors_info= »{} » theme_builder_area= »post_content »][et_pb_image src= »https://agence-rafale.fr/wp-content/uploads/2021/08/canva-creer-une-image.png » title_text= »canva-creer-une-image » _builder_version= »4.9.10″ _module_preset= »default » width= »60% » global_colors_info= »{} » theme_builder_area= »post_content »][/et_pb_image][et_pb_image src= »https://agence-rafale.fr/wp-content/uploads/2021/08/canva-dimension-personnalisee-.png » title_text= »canva-dimension-personnalisee- » _builder_version= »4.9.10″ _module_preset= »default » width= »60% » global_colors_info= »{} » theme_builder_area= »post_content »][/et_pb_image][/et_pb_column][/et_pb_row][et_pb_row _builder_version= »4.9.3″ _module_preset= »default » global_colors_info= »{} » theme_builder_area= »post_content »][et_pb_column type= »4_4″ _builder_version= »4.9.3″ _module_preset= »default » global_colors_info= »{} » theme_builder_area= »post_content »][et_pb_text _builder_version= »4.9.10″ _module_preset= »default » text_font= »Montserrat|||||||| » width= »73% » global_colors_info= »{} » theme_builder_area= »post_content »]
Accédez à la section “Texte” et cliquez sur “Ajouter un sous titre”.
[/et_pb_text][et_pb_image src= »https://agence-rafale.fr/wp-content/uploads/2021/08/canva-design.png » title_text= »canva-design » _builder_version= »4.9.10″ _module_preset= »default » width= »65% » global_colors_info= »{} » theme_builder_area= »post_content »][/et_pb_image][et_pb_text _builder_version= »4.9.10″ _module_preset= »default » text_font= »Montserrat|||||||| » global_colors_info= »{} » theme_builder_area= »post_content »]
Personnalisez votre texte en cliquant deux fois sur le texte apparu. Ensuite cliquez sur “Effets” en haut à droite de votre page. Sur le côté gauche vous verrez des différents effets, dont l’effet “Courber”. Choisissez cette option et ensuite vous pouvez mettre en forme votre texte en cercle comme vous le souhaitez en ajoutant un arrière-plan, changeant la couleur du texte ou d’arrière- plan, ou le police de votre texte. Tenez en compte que pour avoir un cercle parfait, il vous faudra utiliser environ 40 caractères, dépendant de votre police utilisée.
[/et_pb_text][et_pb_image src= »https://agence-rafale.fr/wp-content/uploads/2021/08/texte-en-cercle-design-canva.png » alt= »texte-en-cercle-canva » title_text= »texte-en-cercle-design-canva » _builder_version= »4.9.10″ _module_preset= »default » width= »60% » global_colors_info= »{} » theme_builder_area= »post_content »][/et_pb_image][et_pb_text module_id= »ch2″ _builder_version= »4.9.10″ _module_preset= »default » text_font= »Montserrat|||||||| » width= »73% » global_colors_info= »{} » theme_builder_area= »post_content »]
Après avoir fait toutes les modifications, vous pouvez télécharger votre image en format PNG en cliquant sur le bouton “Télécharger” en haut à droite.
[/et_pb_text][et_pb_text module_id= »chap2″ _builder_version= »4.9.10″ _module_preset= »default » text_font= »Montserrat|||||on||| » text_font_size= »25px » text_letter_spacing= »1px » header_3_text_color= »#322269″ header_3_font_size= »25px » custom_margin= »||16px||| » custom_padding= »||0px||| » locked= »off » global_colors_info= »{} » theme_builder_area= »post_content »]
Intégration du design sur Divi
[/et_pb_text][et_pb_text module_id= »ch2″ _builder_version= »4.9.10″ _module_preset= »default » text_font= »Montserrat|||||||| » width= »73% » global_colors_info= »{} » theme_builder_area= »post_content »]
Maintenant, nous allons nous rendre sur la page WordPress pour insérer notre image sur le site.
Sur votre page Divi, créez une nouvelle section et nouvelle ligne, ensuite insérez un module “Image”. Après avoir chargé votre image, vous pouvez l’aligner, changer la taille, etc.
Ajustez le dimensionnement de votre image en vous rendant sur Style – Dimensionnement – Largeur maximale en le baissant jusqu’à 20%.
[/et_pb_text][et_pb_image src= »https://agence-rafale.fr/wp-content/uploads/2021/08/changer-le-dimensionnement-d-image.png » alt= »personaliser-le-dimensionnement-d-image » title_text= »changer-le-dimensionnement-d-image » _builder_version= »4.9.10″ _module_preset= »default » width= »39% » global_colors_info= »{} » theme_builder_area= »post_content »][/et_pb_image][et_pb_text module_id= »ch2″ _builder_version= »4.9.10″ _module_preset= »default » text_font= »Montserrat|||||||| » width= »73% » global_colors_info= »{} » theme_builder_area= »post_content »]
Afin d’ajouter l’animation à votre image, ouvrez les paramètres d’image et cliquez sur Avancé – Personnaliser CSS”. Copiez et collez le code suivant sur le champ « Elément principal” .
[/et_pb_text][et_pb_image src= »https://agence-rafale.fr/wp-content/uploads/2021/08/ajouter-annimation-avec-css.png » alt= »tutoriel-text-en cercle » title_text= »ajouter-annimation-avec-css » _builder_version= »4.9.10″ _module_preset= »default » width= »30% » global_colors_info= »{} » theme_builder_area= »post_content »][/et_pb_image][et_pb_text _builder_version= »4.9.10″ _module_preset= »default » text_font= »Montserrat|||||||| » text_font_size= »15px » background_color= »#FFFFFF » text_orientation= »center » custom_padding= »|10px||10px|false|false » border_width_all= »3px » border_color_all= »#09E1C0″ box_shadow_style= »preset2″ locked= »off » global_colors_info= »{} » theme_builder_area= »post_content »]
animation: rotation 8s infinite linear;
}
@keyframes rotation {
from {
transform: rotate(0deg);
}
to {
transform: rotate(359deg);
}
[/et_pb_text][et_pb_text module_id= »ch3″ _builder_version= »4.9.10″ _module_preset= »default » text_font= »Montserrat|||||||| » width= »73% » global_colors_info= »{} » theme_builder_area= »post_content »]
Vous pouvez changer la vitesse de rotation, ainsi que la direction.
[/et_pb_text][et_pb_image src= »https://agence-rafale.fr/wp-content/uploads/2021/08/La-meilleure-solution-pour-refroidir-votre-maison-en-Occitanie.gif » alt= »texte-en-cercle » title_text= »La meilleure solution pour refroidir votre maison en Occitanie » align= »center » _builder_version= »4.9.10″ _module_preset= »default » width= »30% » global_colors_info= »{} » theme_builder_area= »post_content »][/et_pb_image][et_pb_text module_id= »ch3″ _builder_version= »4.9.10″ _module_preset= »default » text_font= »Montserrat|||||||| » width= »73% » global_colors_info= »{} » theme_builder_area= »post_content »]
Et voilà votre texte en cercle animé est prêt.
[/et_pb_text][/et_pb_column][/et_pb_row][/et_pb_section]
