Tutoriel Divi Builder

Tutoriel Divi Builder – WhiteLabelSEO

Salut Divi Nation! Dans ce tutoriel Divi Builder, je vais vous montrer comment ajouter une animation CSS aux sections, lignes, colonnes ou modules Divi.

Cette méthode est simple et rapide. De plus, il ne charge pas votre serveur et les animations sont fluides.

Obtenez Elementor Pro:

Tutoriel CSS personnalisé Divi:

** Étapes à suivre: **

Modifier une page / un article / un CPT avec Divi Builder – Construire sur le devant – Dans l’interface visuelle – Cliquez sur Paramètres pour n’importe quelle section / colonne / ligne / module – Avancé – CSS personnalisé – Élément principal – Ajoutez le code CSS ci-dessous

** Étapes à suivre: **

** Retrouvez le code CSS ci-dessous pour les différentes animations ci-dessous: **

** Animation n ° 1 – couleur d’arrière-plan, position animée **
/ * Le code commence par le bas – * /

/ * Propriétés initiales ici * /
Couleur de fond: noir;
Position: relative;
/ * Changer les valeurs de chaque préfixe comme moz o webkit * /
-webkit-animation-name: exemple; / * Safari 4.0 – 8.0 * /
-webkit-animation-durée: 4s; / * Safari 4.0 – 8.0 * /
-webkit-animation-iteration-count: infini; / * Safari 4.0 – 8.0 * /
-webkit-animation-direction: normal;
-Fonction de synchronisation d’animation de Webkit: linéaire;

-moz-animation-name: exemple; / * Pour le navigateur Mozilla * /
-Durée de l’animation Moz: 4s; / * Safari 4.0 – 8.0 * /
-moz-animation-iteration-count: infini; / * Safari 4.0 – 8.0 * /
-Direction de l’animation Moz: normale;
-Fonction de synchronisation d’animation de Moz: linéaire;

-o nom de l’animation: exemple; / * Pour les navigateurs Opera * /
-o durée de l’animation: 4s; / * Safari 4.0 – 8.0 * /
-o-animation-iteration-count: infini; / * Safari 4.0 – 8.0 * /
-o direction de l’animation: normale;
-o fonction de synchronisation d’animation: linéaire;

Nom de l’animation: exemple;
Durée de l’animation: 4s;
Nombre d’itérations d’animation: 2;
/ * Nombre d’itérations d’animation: infini; * /
Direction de l’animation: inverse;
/ * Les autres valeurs pour la direction de l’animation sont normales, alternées, ou inversées * /
Fonction de synchronisation d’animation: linéaire;
/ * Les autres valeurs des fonctions de synchronisation d’animation sont linéaires, faciles, faciles à insérer, à sortir, à insérer facilement * /

}}

/ * Safari 4.0 – 8.0 * /
Exemple de @ -webkit-keyframes {
0% {couleur d’arrière-plan: rouge; gauche: 0px; ci-dessus: 0px;}
25% {couleur de fond: jaune; gauche: 200px; ci-dessus: 0px;}
50% {couleur d’arrière-plan: bleu; gauche: 200px; ci-dessus: 200 px;}
75% {couleur d’arrière-plan: vert; gauche: 0px; ci-dessus: 200 px;}
100% {couleur d’arrière-plan: rouge; gauche: 0px; ci-dessus: 0px;}
}}

Exemple @ -moz-keyframes {
0% {couleur d’arrière-plan: rouge; gauche: 0px; ci-dessus: 0px;}
25% {couleur de fond: jaune; gauche: 200px; ci-dessus: 0px;}
50% {couleur d’arrière-plan: bleu; gauche: 200px; ci-dessus: 200 px;}
75% {couleur d’arrière-plan: vert; gauche: 0px; ci-dessus: 200 px;}
100% {couleur d’arrière-plan: rouge; gauche: 0px; ci-dessus: 0px;}
}}
@ -o exemple d’images clés {
0% {couleur d’arrière-plan: rouge; gauche: 0px; ci-dessus: 0px;}
25% {couleur de fond: jaune; gauche: 200px; ci-dessus: 0px;}
50% {couleur d’arrière-plan: bleu; gauche: 200px; ci-dessus: 200 px;}
75% {couleur d’arrière-plan: vert; gauche: 0px; ci-dessus: 200 px;}
100% {couleur d’arrière-plan: rouge; gauche: 0px; ci-dessus: 0px;}
}}

/ * Syntaxe standard * /
Exemple @keyframes {
0% {couleur d’arrière-plan: rouge; gauche: 0px; ci-dessus: 0px;}
25% {couleur de fond: jaune; gauche: 200px; ci-dessus: 0px;}
50% {couleur d’arrière-plan: bleu; gauche: 200px; ci-dessus: 200 px;}
75% {couleur d’arrière-plan: vert; gauche: 0px; ci-dessus: 200 px;}
100% {couleur d’arrière-plan: rouge; gauche: 0px; ci-dessus: 0px;}
}}
/ * Le code se termine ci-dessus * /

Dans le premier commentaire, recherchez le code pour l’animation n ° 2 et l’animation n ° 3

Amusez-vous à concevoir

Jetez un œil à notre service Conception de sites Web SEO Temple

Description du tutoriel Divi Builder

Tutoriel Divi Builder – WhiteLabelSEO. Catégorie: Conception WordPress avec Divi, Tags: Création d’un site Web, Création d’un site Web avec WordPress, Tutoriel Divi 3.0, Divi B.

Balises du didacticiel Divi Builder

Website Builder, Website Builder avec WordPress, Tutoriel Divi 3.0, Divi Builder, Plugin Divi Builder, Tutoriel Divi Builder, Classes CSS Divi, Astuces CSS Divi, Tutoriel CSS Divi, Tutoriel Thème Divi, Tutoriel Divi, Tutoriel Divi 2019, Tutoriel Divi pour les débutants , Tutoriel CSS WordPress, WordPress pour les débutants, Tutoriel WordPress, Tutoriel WordPress pour les débutants, Tutoriel WordPress pour les débutants étape par étape 2019, Tutoriels WordPress, Site Web WordPress

Regardez le tutoriel Divi Builder: ajoutez pas à pas une animation CSS à votre site WordPress | Étape par étape sur YouTube

Articles connexes sur le blog MayanSEO

  • Tutoriel sur le thème WordPress Divi

    Tutoriel WordPress Divi – MayanSEO.com. Catégorie: WordPress Design avec Divi, Tags: Divi Design, Thème Divi, Tutoriel Divi, WordPress

  • Hébergement Divi - MayanSEO.com

    Hébergement Divi – MayanSEO.com. Catégorie: WordPress Design avec Divi, Tags: Divi 4.0, Tutoriel Divi 4.0, Divi Builder, Tutoriel Divi Builder, Tutoriel Thème Divi,

  • Tutoriel de thème Divi: Thème Divi Builder vs Divi - MayanSEO

    Tutoriel du thème Divi: Thème Divi Builder vs Divi – MayanSEO. Catégorie: WordPress Design avec Divi, Mots clés: Augustine Mak, Cours Divi 3.0, Tutoriel sur le thème Divi 3.0

  • Utilisation de Divi Builder dans WordPress - MayanSEO.com

    Utilisation de Divi Builder dans WordPress – MayanSEO.com. Catégorie: WordPress Design avec Divi, Tags: Augustine Mak, Création d’un site WordPress, Divi, Divi 3.0 Cour

  • Tutoriel Divi Builder 2020 Premiers pas avec le thème Divi

    Tutoriel Divi Builder 2020 Premiers pas avec le thème Divi. Catégorie: WordPress Design avec Divi, Mots clés: Divi, Divi 2020, Tutoriel Divi 3.0, Divi 4, Divi 4.0,

  • Tutoriel Divi Theme Builder - Quoi de neuf dans Divi 4

    Tutoriel Divi Theme Builder – Quoi de neuf dans Divi 4.Catégorie: WordPress Design avec Divi, Tags: Björn, Tutoriel Divi 3.0, Divi 4, Tutoriel Divi 4, Divi 4.0, D.

Table des matières – MayanSEO.com



Source link

Recent Posts