Téléchargez une section de chronologie GRATUITE réalisée avec les options de transformation de Divi
Publié: 2019-04-25Lorsqu'il s'agit de structurer le contenu, la création d'une chronologie est un excellent moyen de garder les informations intéressantes et engageantes pour vos visiteurs. Cela les aide également à naviguer et à traiter les informations qu'ils lisent beaucoup plus rapidement. Et lorsque vous utilisez un joli design, cela améliore également l'apparence générale de votre page. Dans cet article, nous allons vous montrer comment créer une section de chronologie époustouflante avec les options de transformation de Divi. Le design que nous allons recréer restera réactif sur des écrans de plus petite taille.
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 GRATUITEMENT la mise en page de la section de la chronologie
Pour mettre la main sur la mise en page gratuite de la section chronologie, vous devrez d'abord la télécharger en utilisant le 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 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.
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
Espacement
Créez une nouvelle page ou ouvrez une page existante et ajoutez-y une section régulière. Ouvrez les paramètres de la section, accédez aux paramètres d'espacement et ajoutez des rembourrages haut et bas personnalisés.
- Rembourrage supérieur : 12vw
- Rembourrage inférieur : 0vw
Ajouter la ligne n° 1
Structure des colonnes
Continuez en ajoutant une nouvelle ligne à la section en utilisant la structure de colonnes suivante :
Dimensionnement
Sans ajouter encore de modules, ouvrez les paramètres de ligne. Accédez aux paramètres de dimensionnement dans l'onglet Conception et laissez la ligne occuper toute la largeur de l'écran.
- Utiliser une largeur de gouttière personnalisée : Oui
- Largeur de gouttière : 1
- Largeur : 100 %
- Largeur maximale : 100 %
Visibilité
Nous utiliserons cette ligne pour ajouter une illustration dans les prochaines étapes. Nous n'avons besoin de cette illustration que pour le bureau, cependant. C'est pourquoi nous masquerons toute la ligne sur tablette et téléphone.
Ajouter un module d'images
Télécharger une illustration
Comme mentionné à l'étape précédente de cet article, la seule raison pour laquelle nous avons besoin de cette ligne est d'ajouter l'illustration de la chronologie. Vous pouvez le trouver dans le dossier que vous avez téléchargé au début de cet article. Une fois que vous l'avez localisé, téléchargez-le dans un nouveau module Image.
Dimensionnement
Pour nous assurer que tout reste réactif sur toutes les tailles d'écran, nous allons activer l'option « Forcer la pleine largeur » dans les paramètres de dimensionnement du module Image.
- Forcer la pleine largeur : Oui
Ajouter la ligne n° 2
Structure des colonnes
Continuez en ajoutant une deuxième ligne à la section, en utilisant la structure de colonnes suivante :
Dimensionnement
Sans ajouter encore de modules, ouvrez les paramètres de la ligne et laissez la ligne occuper toute la largeur de l'écran.
- Utiliser une largeur de gouttière personnalisée : Oui
- Largeur de gouttière : 1
- Largeur : 100 %
- Largeur maximale : 100 %
Espacement
Ensuite, allez dans les paramètres d'espacement. Ici, nous voulons limiter l'espace occupé par la ligne (sur le bureau) en supprimant tous les rembourrages haut et bas personnalisés. Nous conservons certains rembourrages en haut et en bas sur des écrans de plus petite taille.
- Rembourrage supérieur : 0px (ordinateur de bureau), 15vw (tablette et téléphone)
- Rembourrage inférieur : 0px (ordinateur de bureau), 15vw (tablette et téléphone)
Ajouter le module Blurb à la colonne 1
Ajouter du contenu
Il est temps de commencer à ajouter des modules ! Ajoutez un module Blurb à la colonne 1. Saisissez le contenu de votre choix.
Sélectionnez l'icône
Continuez en sélectionnant une icône de votre choix.
Fond dégradé
Ajoutez également un arrière-plan dégradé.
- Couleur 1 : #a5c4ff
- Couleur 2 : #ffffff
- Position de départ : 40 %
- Position finale : 40 %
Paramètres des icônes
Ensuite, allez dans l'onglet conception et modifiez les paramètres de l'icône.
- Couleur de l'icône : #ffffff
- Placement de l'icône : en haut
- Utiliser la taille de la police de l'icône : Oui
- Taille de la police des icônes : 5vw (ordinateur de bureau), 17vw (tablette), 18vw (téléphone)
Paramètres du texte du titre
Passez aux paramètres du texte du titre et modifiez les options en conséquence :
- Police du titre : Didact Gothic
- Poids de la police du titre : gras
- Alignement du texte du titre : Centre
- Taille du texte du titre : 1.1vw (ordinateur de bureau), 2.7vw (tablette), 4vw (téléphone)
- Hauteur de la ligne de titre : 2,8 em
Paramètres du corps du texte
Faites la même chose pour les paramètres du corps du texte.
- Police du corps : Open Sans
- Alignement du corps du texte : Centre
- Taille du corps du texte : 0.7vw (ordinateur de bureau), 1.5vw (tablette), 2.1vw (téléphone)
- Hauteur de la ligne du corps : 2 em
Espacement
Nous ajoutons également des valeurs de marge et de remplissage personnalisées que nous personnaliserons en fonction de différentes tailles d'écran.
- Marge gauche : 3vw
- Marge droite : 3vw
- Marge inférieure : 5vw (tablette), 7vw (téléphone)
- Rembourrage supérieur : 2vw (ordinateur de bureau), 6vw (tablette et téléphone)
- Rembourrage inférieur : 2vw (ordinateur de bureau), 6vw (tablette et téléphone)
- Rembourrage gauche : 3vw (ordinateur de bureau), 9vw (tablette et téléphone)
- Rembourrage droit : 3vw (ordinateur de bureau), 9vw (tablette et téléphone)
Frontière
Passez aux paramètres de bordure et ajoutez « 20px » à chacun des coins.
Boîte ombre
Enfin, créez de la profondeur sur la page en ajoutant une ombre de boîte subtile au module Blurb.
- Force du flou d'ombre de la boîte: 80px
- Couleur de l'ombre : rgba(0,0,0,0.1)
Cloner le module Blurb trois fois et placer les doublons dans les colonnes restantes
Une fois que vous avez terminé de créer et de personnaliser le module Blurb, vous pouvez le cloner trois fois. Placez les doublons dans les colonnes restantes de la ligne.
Changer l'arrière-plan dégradé du doublon #1
Ouvrez le premier doublon (Module Blurb dans la colonne 2) et modifiez la première couleur du fond dégradé.
- Couleur 1 : #ffa5ae
Changer l'arrière-plan dégradé du doublon #2
Faites la même chose pour le module Blurb dans la colonne 3.
- Couleur 1 : #f7e3a0
Changer l'arrière-plan dégradé du doublon #3
Et modifiez également l'arrière-plan dégradé du dernier module Blurb.
- Couleur 1 : #caa5ff
Ajouter des paramètres de transformation aux modules Blurb
Ajouter Transformer Traduire en module Blurb #1
Maintenant que nous avons tous les éléments de conception dont nous avons besoin, nous pouvons commencer à transformer leur position ! Pour ce faire, nous utiliserons l'option transform translate. Ouvrez le module Blurb dans la colonne 1 et modifiez les valeurs en conséquence :
- En bas : 2vw (ordinateur de bureau), 0vw (tablette et téléphone)
- À droite : -106vw (ordinateur de bureau), 0vw (tablette et téléphone)
Ajouter Transformer Traduire en module Blurb #2
Passez au deuxième module Blurb et modifiez les valeurs de conversion de transformation en conséquence :
- Bas : 16.6vw (bas), 0vw (tablette et téléphone)
- Droite : -78vw (droite), 0vw (tablette et téléphone)
Ajouter Transformer Traduire en Blurb Module #3
Ouvrez ensuite le module Blurb dans la colonne 3 et utilisez les valeurs de conversion de transformation suivantes :
- En bas : 17vw (ordinateur de bureau), 0vw (tablette et téléphone)
- À droite : -46vw (ordinateur de bureau), 0vw (tablette et téléphone)
Ajouter Transformer Traduire en module Blurb #4
Faites la même chose pour le dernier module Blurb, en utilisant les valeurs suivantes :
- En bas : -66vw (ordinateur de bureau), 0vw (tablette et téléphone)
- À droite : -24vw (ordinateur de bureau), 0vw (tablette et téléphone)
Ajouter une marge inférieure négative à la ligne 2
L'utilisation de l'option transform translate ne supprimera pas l'espace initialement occupé par les modules Blurb de la ligne. Pour se débarrasser de cet espace, nous pouvons ajouter une marge inférieure négative à la ligne et le tour est joué !
- Marge inférieure : -15vw (ordinateur de bureau), 0vw (tablette et téléphone)
Aperçu
Maintenant que nous avons parcouru toutes les étapes, jetons un dernier coup d'œil au résultat.
Bureau
Mobile
Dernières pensées
Dans cet article, nous vous avons montré comment créer une belle section de chronologie à l'aide des nouvelles options de transformation de Divi. Au début du tutoriel, vous avez pu télécharger gratuitement le fichier JSON et l'illustration ! Cela devrait vous aider à démarrer tout de suite. Si vous avez des questions ou des suggestions, assurez-vous de laisser un commentaire dans la section commentaires ci-dessous.