Création de « Sticky Notes » avec du contenu extensible avec Divi

Avec les options intégrées de Divi, il existe de nombreuses façons de présenter des services et/ou des étapes de processus sur votre site Web. Pour vous aider à vous inspirer, nous allons vous montrer comment créer des notes autocollantes avec du contenu extensible en utilisant uniquement les options intégrées de Divi. C'est une façon amusante de partager du contenu supplémentaire dès que le visiteur déclenche une interaction. Vous pouvez utiliser cette conception pour n'importe quel site Web sur lequel vous travaillez et vous pourrez également télécharger le fichier JSON gratuitement !

Allons-y !

Aperçu

Avant de plonger dans le didacticiel, jetons un coup d'œil rapide au résultat sur différentes tailles d'écran.

Bureau

Mobile

Téléchargez la mise en page Sticky Notes GRATUITEMENT

Pour mettre la main sur la mise en page gratuite des notes autocollantes, vous devrez d'abord la télécharger à l'aide du bouton ci-dessous. Pour accéder au téléchargement, vous devrez vous inscrire à notre liste de diffusion Divi Daily en utilisant le formulaire ci-dessous. En tant que nouvel abonné, vous recevrez chaque lundi encore plus de bienfaits Divi et un pack Divi Layout gratuit ! Si vous êtes déjà sur la liste, entrez simplement votre adresse e-mail ci-dessous et cliquez sur télécharger. Vous ne serez pas « réinscrit » ni ne recevrez d'e-mails supplémentaires.

Télécharger les fichiers

Télécharger gratuitement

Rejoignez la newsletter Divi et nous vous enverrons par e-mail une copie du pack ultime de mise en page de la page de destination Divi, ainsi que des tonnes d'autres ressources, trucs et astuces Divi incroyables et gratuits. Suivez-le et vous serez un maître Divi en un rien de temps. Si vous êtes déjà abonné, saisissez simplement votre adresse e-mail ci-dessous et cliquez sur télécharger pour accéder au pack de mise en page.

TÉLÉCHARGER

Vous vous êtes enregistré avec succès. Veuillez vérifier votre adresse e-mail pour confirmer votre abonnement et accéder aux packs de mise en page Divi hebdomadaires gratuits !

Commençons à recréer !

Abonnez-vous à notre chaîne Youtube

Ajouter une nouvelle section régulière

La première chose que vous devrez faire est d'ajouter une nouvelle section régulière à la page sur laquelle vous travaillez.

Ajouter une nouvelle ligne

Structure des colonnes

Continuez en ajoutant également une nouvelle ligne, en utilisant la structure de colonnes suivante :

Durée de la transition

Sans ajouter encore de modules, ouvrez les paramètres de ligne. Nous créons une transition instantanée en modifiant la durée de la transition dans l'onglet avancé.

• Durée de transition : 0 ms

Ajouter le module de texte n° 1 à la colonne 1

Ajouter du contenu

Il est temps de commencer à ajouter des modules ! Ajoutez un nouveau module de texte à la première colonne de la ligne et entrez le contenu H2 que vous souhaitez voir apparaître dans la conception du pense-bête.

Couleur de l'arrière plan

Ensuite, allez dans les paramètres d'arrière-plan et modifiez la couleur d'arrière-plan en conséquence :

• Couleur d'arrière-plan : #ffd800

Paramètres de texte H2

Passez aux paramètres de texte H2 et apportez-y également quelques modifications :

• Police de titre 2 : Indie Flower
• En-tête 2 Alignement du texte : Centre
• Titre 2 Couleur du texte : #3a0cf2
• Titre 2 Taille du texte : 40 px

Espacement

Pour créer l'apparence d'un pense-bête, nous allons ajouter des valeurs de remplissage personnalisées au module :

• Rembourrage supérieur : 150 px
• Rembourrage inférieur : 150px
• Rembourrage gauche : 20px
• Rembourrage droit : 20px

Frontière

Nous ajoutons également une bordure supérieure à l'aide des paramètres suivants :

• Largeur de la bordure supérieure : 20 px
• Couleur de la bordure supérieure : #ffc300

Ajouter un module diviseur à la colonne 1

Visibilité

Le prochain module dont nous avons besoin dans la première colonne est un module diviseur. Assurez-vous que l'option « Afficher le diviseur » est activée.

• Afficher le diviseur : Oui

Couleur

Ensuite, allez dans l'onglet conception et changez la couleur du séparateur.

• Couleur : #ffc300

modes

Modifiez également les paramètres de styles du diviseur.

• Style de diviseur : pointillé

Dimensionnement

Et modifiez également les paramètres de taille.

• Poids du diviseur : 5px
• Hauteur : 0px

Espacement

Pour créer de l'espace entre le module précédent et celui-ci, nous ajoutons une marge supérieure.

• Marge supérieure : 150 px

Transformer Rotation

Comme vous pouvez le remarquer dans l'aperçu de cet article, nous cherchons à créer un séparateur vertical au lieu d'un séparateur horizontal. Pour ce faire, nous allons modifier la valeur de gauche dans les paramètres de rotation de transformation du module Divider :

• Gauche : 270 degrés

Visibilité

Nous voulons également nous assurer que le module de séparation apparaît sous le module de texte. Pour ce faire, nous allons diminuer l'index z du diviseur dans l'onglet avancé.

• Indice Z : -99

Ajouter le module de texte n° 2 à la colonne 1

Ajouter un symbole à la zone de contenu

Le prochain et dernier module dont nous avons besoin dans la première colonne est un autre module de texte. Ajoutez le caractère « ● » à la zone de contenu.

Paramètres de texte

Ensuite, passez à l'onglet Conception et modifiez les paramètres de texte.

• Police de texte : Open Sans
• Couleur du texte : #3a0cf2
• Taille du texte : 100 pixels
• Hauteur de la ligne de texte : 1 em
• Orientation du texte : Centre

Espacement

Créez le chevauchement souhaité en ajoutant ensuite une marge supérieure négative.

• Marge supérieure : -50px

Ajouter le module de texte n° 3 à la colonne 2

Ajouter du contenu H3

Passons à la deuxième colonne. Ici, le premier module dont nous avons besoin est un module de texte. Saisissez du contenu H3 de votre choix.

Paramètres de texte H3

Accédez à l'onglet Conception et modifiez les paramètres de texte H3 en conséquence :

• Police de la rubrique 3 : Indie Flower
• Titre 3 Couleur du texte : #3a0cf2
• Titre 3 Taille du texte : 30px

Espacement

Ajoutez ensuite une marge supérieure personnalisée :

• Marge supérieure : 400 pixels (ordinateur de bureau), 200 pixels (tablette), 150 pixels (téléphone)

Ajouter le module de texte n° 4 à la colonne 2

Ajouter du contenu

Passons au module suivant, qui est un autre module de texte. Entrez le contenu du paragraphe de votre choix.

Paramètres de texte

Ensuite, allez dans l'onglet conception et modifiez les paramètres du texte.

• Police de texte : Open Sans
• Taille du texte : 13 pixels
• Hauteur de la ligne de texte : 2 em

Dimensionnement

Modifiez ensuite la largeur du module.

• Largeur : 78 %

Espacement

Et ajoutez une marge supérieure et inférieure.

• Marge supérieure : 10px
• Marge inférieure : 50px

Ajouter un module de bouton à la colonne 2

Ajouter une copie

Le dernier module dont nous avons besoin dans la deuxième colonne est un module de bouton. Entrez une copie de votre choix.

Paramètres des boutons

Ensuite, allez dans l'onglet conception et stylisez le bouton.

• Utiliser des styles personnalisés pour le bouton : Oui
• Taille du texte du bouton : 20px
• Couleur du texte du bouton : #3a0cf2
• Couleur d'arrière-plan du bouton : #ffd800
• Largeur de la bordure du bouton : 0px
• Rayon de la bordure du bouton : 0px
• Police des boutons : Abhaya Libre

Espacement

Ajoutez également des valeurs de remplissage personnalisées.

• Rembourrage supérieur : 20 px
• Rembourrage inférieur : 20px
• Remplissage gauche : 60px
• Rembourrage droit : 60 px

Cloner la ligne deux fois

Une fois que vous avez terminé d'ajouter tous les modules, vous pouvez continuer et cloner la ligne deux fois.

Modifier la ligne en double n° 1

Changer la couleur d'arrière-plan du module de texte n°1

Nous modifions la palette de couleurs des deux doublons, en commençant par le premier. Ouvrez le premier module de texte dans la colonne 1 et modifiez la couleur d'arrière-plan.

• Couleur de fond : #00ffee

Modifier la couleur de la bordure supérieure du module de texte n° 1

Modifiez également la couleur de la bordure supérieure.

• Couleur de la bordure supérieure : #00e0c2

Changer la couleur du séparateur

Ensuite, utilisez le code de couleur suivant pour le séparateur :

• Couleur du séparateur : #00e0c2

Changer la couleur d'arrière-plan du module de bouton

Et changez la couleur d'arrière-plan du bouton.

• Couleur d'arrière-plan du bouton : #00ffee

Modifier la ligne en double n° 2

Changer la couleur d'arrière-plan du module de texte n°1

Passez à la deuxième ligne en double, ouvrez le premier module de texte dans la colonne 1 et modifiez la couleur d'arrière-plan.

• Couleur d'arrière-plan : #42ff21

Modifier la couleur de la bordure supérieure du module de texte n° 1

Modifiez également la couleur de la bordure supérieure.

• Couleur de la bordure supérieure : 1de524

Changer la couleur du séparateur

Ensuite, ouvrez le module de séparation et utilisez la couleur de séparation suivante :

• Couleur du séparateur : 1de524

Changer la couleur d'arrière-plan du module de bouton

Et enfin, modifiez la couleur d'arrière-plan du bouton :

• Couleur d'arrière-plan du bouton : #42ff21

Créer du contenu extensible

Ajouter la taille de ligne par défaut à toutes les lignes

Maintenant que nous avons personnalisé toutes les lignes de notre section, il est temps de rendre le contenu extensible. Pour ce faire, ouvrez chacune des lignes et appliquez la hauteur maximale suivante :

• Hauteur maximale : 397 pixels

Ajouter la taille des lignes de survol à toutes les lignes

Modifiez la hauteur maximale au survol en « 100 % ». Cela permettra à la ligne de reprendre sa taille initiale.

• Hauteur maximale : 100 %

Modifier le débordement pour toutes les lignes

Assurez-vous de masquer également les débordements de chacune des lignes et le tour est joué !

• Débordement horizontal : masqué
• Débordement vertical : caché

Aperçu

Maintenant que nous avons parcouru toutes les étapes, jetons un dernier coup d'œil au résultat sur différentes tailles d'écran.

Bureau

Mobile

Dernières pensées

Dans cet article, nous vous avons montré comment créer des notes autocollantes avec des notes extensibles en utilisant uniquement les options intégrées de Divi. Il s'agit d'une façon créative et ludique de présenter des services sur votre site Web. Si vous avez des questions ou des suggestions, assurez-vous de laisser un commentaire dans la section commentaires ci-dessous!

Si vous souhaitez en savoir plus sur Divi et obtenir plus de cadeaux Divi, assurez-vous de vous abonner à notre newsletter par e-mail et à notre chaîne YouTube afin que vous soyez toujours l'une des premières personnes à connaître et à tirer parti de ce contenu gratuit.