Je souhaite obtenir des informations sur une formation complète concernant le thème DIVI dispensé
par un organisme de formation certifié par l’état.
Que la formation soit finançable par mon CPF (idéalement) ou autre


Divi: le thème WordPress le plus simple à utiliser

Divi: le meilleur thème WordPress de tous les temps!

Avec plus de 901000 téléchargements, Divi est le thème WordPress le plus populaire au monde. Il est complet, facile à utiliser et est livré avec plus de 62 modèles gratuits. [ Recommandé ]

Chaque semaine, Elegant Theme propose de nouveaux packs de mise en page Divi gratuits que vous pouvez utiliser pour votre prochain projet. L’un des packages de présentation utilise également un cas d’utilisation qui peut vous aider à faire passer votre site Web au niveau supérieur. Cette semaine, dans le cadre de l’initiative de design Divi en cours, nous vous montrons comment utiliser de manière créative les options de survol de Divi pour présenter les CTA sur vos pages. Nous utiliserons le pack de blanchisserie de Divi et nous couvrirons trois exemples différents de la façon de mettre en évidence votre appel à l’action.

Aperçu

Avant de plonger dans le didacticiel, jetons un coup d’œil à ce que nous créons pour vous donner une idée.

Réalisation animation divi.gif

Ajouter une nouvelle page à l’aide de la disposition Blanchisserie ou Service de blanchisserie

Tout d’abord, ajoutez une nouvelle page à votre site Web et téléchargez la page d’accueil du service de blanchisserie. Les trois exemples que nous allons créer sont basés sur cette mise en page. Une fois que vous avez l’approche, vous pouvez appliquer ces exemples à n’importe quelle mise en page sur laquelle vous travaillez.

Blanchisserie demo.jpg

Module de texte de clonage

Commençons par le premier exemple! Nous transformons un mod de texte existant en une incitation au survol. Cette approche n’apparaît que sur le bureau. Pour cette raison, nous clonons le module d’origine afin qu’il puisse être affiché sur des écrans plus petits sans effets de survol.

cloner le module text.jpg

Visibilité

Module de texte n ° 1

Continuez en masquant le premier module sur la tablette et le téléphone.

Élément de visibilité divi.jpg

Module de texte n ° 2

Et cachez le deuxième module sur le bureau.

Visibilité du bureau divi.jpg

Ajouter un effet de survol au module de texte du bureau

Ajouter le titre de contenu 3

Nous ne modifions que le premier module de texte qui apparaît sur le bureau. Ouvrez le cours et ajoutez du contenu sur le sujet 3 à la zone de contenu.

Créez facilement votre site Web avec Elementor

Elementor facilite la création de toute conception de site Web avec une apparence et une sensation professionnelles. Arrêtez de payer beaucoup d’argent pour ce que vous pouvez faire vous-même. [ Gratuit ]

Modification du premier module text.jpg

Déplacez le pointeur de la souris sur les paramètres de texte

Ensuite, allez dans les paramètres de texte et « cachez » le texte du paragraphe de votre module en ajoutant 0px à la taille du texte lors du déplacement du pointeur de la souris.

Module de texte de paramètre divi.jpg

Déplacez le pointeur de la souris sur les paramètres de texte 2

Faites de même pour les paramètres de texte de l’en-tête 2 au survol.

  • Taille du texte du titre 2: 0px

Configuration de l'en-tête 2 divi.jpg

Titre du texte standard 3

Accédez ensuite aux paramètres de texte au point 3 et effectuez les modifications.

  • Section 3 Police: Josefin Sans
  • Polices du titre 3: Semi Bold
  • Taille du texte du titre 3: 0px

3 polices en-tête configuration.jpg

Déplacez le pointeur de la souris sur les paramètres de texte du titre 3

Modifiez la taille du texte de survol.

Recherchez-vous les meilleurs thèmes et plugins WordPress?

Téléchargez les meilleurs plugins et thèmes WordPress d’Envato et créez votre site Web en toute simplicité. Déjà plus de 49 720 000 téléchargements. [EXCLUSIF]

  • Taille du texte du titre 3: 40 px

Configuration de l'en-tête 3 divi.jpg

Paramètres d’espacement par défaut

Ensuite, allez dans Paramètres d’espacement et assurez-vous que les valeurs de remplissage personnalisées suivantes sont en place:

  • Rembourrage supérieur: 80px
  • Rembourrage au sol: 50px
  • Rembourrage gauche: 40px
  • Rembourrage droit: 40px

options de remplissage.jpg

Paramètres de distance de survol

Ajoutez également une bordure de survol personnalisée.

  • Marge supérieure: 50px
  • Marge gauche: -53,5 vw

Hover Padding configuration.jpg

Paramètres par défaut du cadre

Nous ajoutons également une bordure inférieure sans bordure.

  • Largeur de la marge inférieure: 0px
  • Couleur de la bordure inférieure: # ff947f
  • Style de marge inférieure: pointillé

Configuration du cadre divi.jpg

Paramètres du cadre de survol

Modifiez la largeur du cadre flottant.

  • Largeur de la marge inférieure: 5px

Focus sur Ctas

Paramètres par défaut pour les ombres de la boîte

Ajoutez ensuite une ombre de boîte.

  • Position de l’ombre de la boîte verticale: 50px
  • Boîte Shadow Blur Force: 54px
  • Force de propagation de l’ombre de la boîte: -32px
  • Couleur de l’ombre: rgba (255,255,255,0)

Option dombres divi.jpg

Paramètres d’ombre de la zone de survol

Et changez la couleur de l’ombre de la boîte flottante.

Créez facilement votre boutique en ligne

Téléchargez gratuitement WooCommerce, les meilleurs plugins de commerce électronique pour vendre vos produits physiques et numériques sur WordPress. [Recommandé]

  • Couleur de l’ombre: rgba (0,0,0,0,2)

Configuration du cadre sur le hover divi.jpg

Les transitions

Augmentez la durée de la transition dans les paramètres de transition pour créer une transition douce.

  • Temps de transition: 750 ms

Transition Divi Builder Block texte.jpg

Continuer

Enfin, ce tutoriel consistait à créer une animation mettant en évidence une section de notre page Divi. Les possibilités avec Divi sont presque illimitées. En utilisant les différentes options (combinaisons de plusieurs options différentes), vous pouvez créer des interfaces avec une animation dynamique et attrayante. Comme ce n’est pas encore terminé, nous aborderons la deuxième partie de ce tutoriel plus tard. D’ici là, si vous avez des questions, n’hésitez pas à les poser dans la section commentaires.



Source link

Recent Posts