Une mise en page réutilisable pour créer des designs de cadres uniques avec Divi

Construire des conceptions de cadres uniques pour vos lignes avec Divi peut être un moyen utile (et amusant) de mettre en scène de manière créative le contenu de votre page. En combinant les diviseurs de section de Divi avec une structure de rangées compacte, vous pouvez explorer d'innombrables possibilités de conception pour encadrer votre contenu. Vous avez peut-être déjà vu cette technique présentée dans des tutoriels précédents ou dans certaines de nos mises en page prédéfinies. Mais, aujourd'hui, j'ai pensé vous montrer un moyen facile d'explorer cette technique de conception par vous-même. Dans ce didacticiel, je vais vous montrer comment créer rapidement une disposition de section réutilisable qui peut être enregistrée dans votre bibliothèque. Ensuite, vous pouvez utiliser cette mise en page pour explorer de nouvelles conceptions de cadres et de nouveaux schémas de couleurs. La disposition fonctionne en encadrant votre rangée avec un design unique, de sorte que toutes les structures de colonnes et tous les modules peuvent être utilisés à l'intérieur de la rangée.

Commençons.

Création de la disposition de conception de cadre réutilisable

Pour commencer, créons une nouvelle section avec une disposition à une colonne. Nous n'avons pas besoin d'ajouter de modules à ce stade. Au lieu de cela, nous allons d'abord concevoir notre ligne et notre section, afin que nous puissions remplir notre ligne avec le contenu que nous voulons plus tard.

Concevoir la rangée

Mettez à jour les paramètres de ligne comme suit :

Couleur d'arrière-plan : #333333
Alignement des lignes : Centre
Largeur personnalisée : 775 pixels
Largeur de gouttière : 2
Rembourrage personnalisé : 130 pixels en haut, 130 pixels en bas, 50 pixels à gauche, 50 pixels à droite
Marge personnalisée : 0 pixels en haut, 0 pixels en bas

Concevoir la section

Mettez à jour les paramètres de la section comme suit :

Couleur d'arrière-plan : #ffffff
Style de séparateur supérieur : voir capture d'écran
Couleur du séparateur supérieur : #ffffff
Style de séparateur inférieur : voir capture d'écran
Couleur du séparateur inférieur : #ffffff

Ensuite, vous allez définir le rembourrage supérieur et inférieur sur 0px et créer un espace supérieur et inférieur à l'aide d'une bordure comme suit :

Rembourrage personnalisé : 0 pixels en haut, 0 pixels en bas
Largeur de la bordure supérieure : 5vw
Couleur de la bordure supérieure : #ffffff
Largeur de la bordure inférieure : 5vw
Couleur de la bordure inférieure : #ffffff

La création de l'espacement pour la section à l'aide d'une bordure supérieure et inférieure maximisera l'espace disponible pour le séparateur de section qui chevauchera la rangée. De cette façon, vous pouvez choisir n'importe quelle hauteur de séparation pour votre conception.

Enregistrez la mise en page dans votre bibliothèque

C'est tout pour la structure de mise en page de base de votre conception de lignes encadrées. À ce stade, nous souhaitons enregistrer cette section dans la bibliothèque Divi afin d'utiliser la disposition de la section pour les conceptions futures.

Cliquez sur l'icône Enregistrer dans la bibliothèque dans le menu de la section.

Saisissez ensuite un nom pour la mise en page (quelque chose comme « Mise en page du cadre de ligne ») et cliquez sur le bouton Enregistrer dans la bibliothèque.

Terminer la conception du cadre #1

Maintenant que nous avons enregistré notre disposition de section pour de futurs efforts, ajoutons du contenu à notre ligne pour compléter le premier exemple de conception.

Modification de la structure des colonnes

Pour cette conception, je pense que l'ajout d'une galerie d'images à six colonnes sera bien. La structure en petites colonnes nous permettra de créer un petit groupe d'images bien encadrées à l'intérieur de la rangée étroite.

Pour ce faire, modifiez d'abord la structure des lignes en une disposition à six colonnes.

Ajouter du contenu à la ligne

Ajoutez ensuite trois modules d'images (avec des images) à chaque colonne. J'utilise des images avec une orientation plus portrait (plutôt que paysage) avec différentes tailles/dimensions.

Voici la conception finale.

Astuce de conception bonus

Avant de continuer à explorer d'autres possibilités de conception de cadrage, je voulais souligner une astuce simple pour étendre votre cadre d'un côté de la page. Pour ce faire, allez dans les paramètres de la section et ajoutez un dégradé de fond comme suit :

Dégradé de fond à gauche : #333333
Dégradé d'arrière-plan à droite : #ffffff
Direction du gradient : 90 degrés
Position de départ : 50 %
Position finale : 0%

Découvrez cette conception.

Personnalisation de la mise en page pour différentes conceptions de cadres et contenus

Les possibilités passionnantes de cette mise en page simple sont pour le moins nombreuses. En personnalisant le jeu de couleurs, le style de séparation, la disposition des colonnes et le contenu du module, vous pouvez créer toutes sortes de conceptions de disposition différentes. De plus, vous pouvez utiliser ces fonctionnalités intéressantes de Divi telles que « Rechercher et remplacer » pour apporter des changements de schéma de couleurs à grande échelle en quelques clics.

Voici le processus de base pour mettre à jour la mise en page :

1. Charger la mise en page de la section enregistrée sur la page
2. Mettez à jour le schéma de couleurs de la section à l'aide de « Rechercher et remplacer ».
3. Changer le style de séparation
4. Personnalisez la ligne avec un nouvel arrière-plan et une nouvelle structure de colonnes.
5. Ajouter des modules à vos colonnes

Avec ce processus, explorer de nouvelles conceptions devrait être assez amusant ! Nous allons continuer.

Conception de cadre #2

Pour cette prochaine conception, nous allons utiliser la disposition de section enregistrée que nous avons créée précédemment. Pour ce faire, cliquez pour ajouter une nouvelle section dans le générateur visuel. Sélectionnez ensuite l'onglet Ajouter à partir de la bibliothèque et cliquez sur la disposition de la section dans la liste.

Nous sommes maintenant prêts à personnaliser la section pour un nouveau design.

Afin de modifier le schéma de couleurs utilisé pour cette mise en page, nous pouvons invoquer certains pouvoirs de conception de Divi en utilisant la fonction Rechercher et remplacer. Allez dans les paramètres de la section dupliquée et faites un clic droit sur la couleur d'arrière-plan et sélectionnez "Rechercher et remplacer".

Dans le modal Rechercher et remplacer, mettez à jour les éléments suivants :

Dans : Cette section
Remplacer par : #443850
Sélectionnez Remplacer tout

Cela remplacera la couleur blanche utilisée pour l'arrière-plan de la section, la bordure et les séparateurs par une nouvelle couleur.

Mettez maintenant à jour les paramètres de la section avec un nouveau style de séparateur :

Ensuite, mettez à jour les paramètres de ligne avec une couleur d'arrière-plan blanche et une ombre de boîte pour terminer la nouvelle conception de cadre pour la ligne.

Pour le contenu, essayons une mise en page à cinq colonnes avec quelques textes de présentation. Allez-y et mettez à jour la disposition des colonnes de votre ligne en une disposition à cinq colonnes.

Ajoutez ensuite un texte de présentation à la première colonne. Retirez le texte du contenu par défaut et ne laissez que le texte du titre. Remplacez ensuite l'image de présentation par une icône en forme d'étoile. Mettez à jour les paramètres de conception comme suit :

Couleur de l'icône : #7d8491
Taille de la police de l'icône : 80px
Orientation du texte : Centre

Dupliquez le module de présentation et mettez à jour les paramètres comme suit :

Couleur de l'icône : #8cd845
Taille de la police de l'icône : 50px

Maintenant, dupliquez ou copiez et collez ces deux modules dans un modèle dans vos cinq colonnes avec trois modules dans chaque colonne.

Voici la conception finale.

Conception de cadre #3

Pour la troisième conception de cadre, nous devons d'abord charger notre disposition de section enregistrée comme nous l'avons fait précédemment pour la deuxième conception.

Après cela, nous pouvons utiliser rechercher et remplacer sur la couleur d'arrière-plan de la section (comme nous l'avons fait dans la conception précédente) pour remplacer la couleur blanche utilisée pour l'arrière-plan de la section, le séparateur et la bordure par une belle couleur bleue. Pour ce faire, allez dans les paramètres de la section, faites un clic droit sur la couleur d'arrière-plan et sélectionnez rechercher et remplacer. Ensuite, mettez à jour les éléments suivants :

Dans : Cette section
Remplacer par : #1e3888
Sélectionnez Remplacer tout

Mettez ensuite à jour le séparateur de section avec un nouveau style de séparateur supérieur et inférieur (les nuages) :

Ensuite, allez dans les paramètres de ligne. Donnez à la ligne un arrière-plan dégradé comme suit :

Couleur du dégradé de fond à gauche : par défaut (#2b87da)
Dégradé d'arrière-plan à droite : #1E3888 (même couleur que l'arrière-plan de la section)
Type de dégradé : Radial (pour donner à la rangée une sensation « comme un nuage » arrondie)
Position finale : 83 % (pour masquer un peu les bords de la ligne)

Maintenant, tout ce que nous avons à faire est d'ajouter du contenu à notre ligne encadrée. Ajoutons un module d'appel à l'action à la ligne et mettons à jour les paramètres comme suit :

Ajoutez « # » à la zone de saisie du lien pour afficher le bouton
Utiliser la couleur d'arrière-plan : NON

Couleur du texte du titre : #ffc338
Couleur du texte du bouton : #ffc338

Voici la conception finale.

Qu'en est-il des mobiles ?

Au cas où vous vous poseriez la question. Voici à quoi ressembleront les designs sur les appareils mobiles.

Dernières pensées

Les conceptions de cadres créées dans ce didacticiel sont destinées à mettre en évidence les possibilités de conception plutôt que de présenter des pièces de conception complètement raffinées. Pour cette raison, je me suis concentré sur la conception des cadres et j'ai utilisé des exemples de contenu de base. Espérons qu'ils vous inspireront au moins à explorer de nouveaux designs en jouant avec différents diviseurs de section, schémas de couleurs et contenus.

J'ai hâte de vous entendre dans les commentaires.

À votre santé!