5 exemples de mises en page de section de style éditorial créées avec Divi

Les nouvelles options Divi offrent des tonnes de possibilités. Les modules, les lignes et les colonnes, plus que jamais, se renforcent mutuellement sur la voie d'une conception Web époustouflante et conviviale. L'une des choses qu'il peut faire est de créer des sections de style éditorial remarquables. Et c'est exactement ce que nous allons vous montrer dans cet article ; 5 dispositions de section de style éditorial différentes que vous pouvez utiliser dans différents sites Web. La meilleure partie? La publication est effectuée en utilisant les bons paramètres pour chaque module, ligne et colonne uniquement.

Jetons un coup d'œil aux cinq exemples que nous allons vous montrer comment créer.

Premier exemple

Bureau

Mobile

Deuxième exemple

Bureau

Mobile

Troisième exemple

Bureau

Mobile

Quatrième exemple

Bureau

Mobile

Cinquième exemple

Bureau

Mobile

5 exemples de mises en page de section de style éditorial créées avec Divi

Abonnez-vous à notre chaîne Youtube

Commencez à créer le premier exemple

Commençons par créer notre première mise en page de style éditeur.

Ajouter une nouvelle section

Ajoutez une nouvelle page, activez le Divi Builder et basculez vers Visual Builder. Une fois dans le Visual Builder, ajoutez une section standard.

Ajouter une ligne à trois colonnes

Dans cette section standard, nous aurons besoin d'une ligne à trois colonnes.

Fond dégradé

Ouvrez les paramètres de ligne et ajoutez-y l'arrière-plan dégradé suivant :

• Première couleur : #636363
• Deuxième couleur : rgba (255,255,255,0)
• Type de dégradé : Radial
• Direction radiale : Centre
• Position de départ : 0%
• Position finale : 47 %

Couleur d'arrière-plan de la colonne 2

Nous devrons également définir '#d8d8d8' comme couleur d'arrière-plan de la colonne 2.

Dimensionnement

Passez à l'onglet Conception et utilisez les paramètres suivants pour la sous-catégorie Dimensionnement :

• Utiliser la largeur personnalisée : Oui
• Largeur personnalisée : 100 %
• Utiliser une largeur de gouttière personnalisée : Oui
• Largeur de gouttière : 1

Espacement

Ouvrez la sous-catégorie Espacement et ajoutez « 50px » au rembourrage supérieur, droit, inférieur et gauche de la deuxième colonne.

Module d'image de première colonne

Fond dégradé

Ajoutez une image à la première colonne de la ligne et utilisez l'arrière-plan dégradé suivant pour cela :

• Première couleur : rgba(255,255,255,0)
• Deuxième couleur : #086191
• Type de dégradé : Linéaire
• Direction du gradient : 107 degrés
• Position de départ : 60 %
• Position finale : 60 %

Alignement

Accédez à l'onglet Conception, utilisez l'alignement d'image de gauche et activez l'option "Toujours centrer l'image sur mobile".

Espacement

Ensuite, ouvrez la sous-catégorie Espacement et utilisez les paramètres de marge et de remplissage suivants :

• Marge supérieure : 100 pixels (ordinateur de bureau), 0 pixels (tablette et téléphone)
• Rembourrage supérieur : 20 px
• Rembourrage inférieur : 20px

Module de texte de deuxième colonne

Paramètres de texte

Ensuite, ajoutez un module de texte à la deuxième colonne de la ligne. Accédez à l'onglet Conception et utilisez les paramètres suivants pour la sous-catégorie Texte :

• Taille de la police de texte : 12px
• Couleur du texte : #000000
• Orientation du texte : Centre

Dimensionnement

Ouvrez la sous-catégorie Dimensionnement, utilisez une largeur de « 84 % » et sélectionnez l'alignement du module central.

Espacement

Enfin, ajoutez « 50px » aux marges supérieure et inférieure.

Module d'image de troisième colonne

Fond dégradé

Ajoutez un autre module Image à la troisième colonne et utilisez l'arrière-plan dégradé suivant :

• Première couleur : #a36100
• Deuxième couleur : rgba (255,255,255,0)
• Type de dégradé : Linéaire
• Direction du dégradé : 73 degrés
• Position de départ : 40 %
• Position finale : 40 %

Alignement

Accédez à l'onglet Conception, sélectionnez l'alignement de l'image à gauche et activez l'option "Toujours centrer l'image sur mobile".

Espacement

Enfin, ajoutez la marge et le remplissage personnalisés suivants :

• Marge supérieure : 300 pixels (ordinateur de bureau), 0 pixels (tablette et téléphone)
• Rembourrage supérieur : 20 px
• Rembourrage inférieur : 20px

Résultat

Jetons un autre coup d'œil au résultat sur le bureau :

Et sur mobile :

Commencez à créer un deuxième exemple

Le deuxième exemple ressemble à ceci sur le bureau :

Ajouter une nouvelle section

Tout d'abord, ajoutez une nouvelle section standard.

Ajouter une ligne à deux colonnes

Ensuite, ajoutez-y une ligne à deux colonnes.

Couleur d'arrière-plan de la colonne 2

Ouvrez les paramètres de ligne et ajoutez '#ededed' comme couleur d'arrière-plan de la colonne 2.

Dimensionnement

Accédez à l'onglet Conception et appliquez les modifications suivantes à la sous-catégorie Dimensionnement :

• Utiliser la largeur personnalisée : Oui
• Largeur personnalisée : 100 %
• Utiliser une largeur de gouttière personnalisée : Oui
• Largeur de gouttière : 1

Module d'image de première colonne

Alignement

Ajoutez un module d'image à la première colonne, utilisez l'alignement d'image à gauche et activez l'option "Toujours centrer l'image sur mobile".

Espacement

Ouvrez la sous-catégorie Espacement et utilisez les paramètres suivants :

• Marge supérieure : 100 pixels (ordinateur de bureau), 0 pixels (tablette et téléphone)
• Rembourrage supérieur : 0px
• Rembourrage inférieur : 0px

Module de texte de deuxième colonne

Paramètres de texte

Ensuite, ajoutez un module de texte à la deuxième colonne et appliquez les paramètres suivants à la sous-catégorie de texte :

• Police du texte : Lato
• Taille de la police de texte : 12px
• Couleur du texte : #000000
• Hauteur de la ligne de texte : 2,2 em
• Orientation du texte : Centre

Dimensionnement

Ouvrez la sous-catégorie Dimensionnement et appliquez une largeur de « 75 % ».

Espacement

Enfin, assurez-vous que les paramètres suivants s'appliquent à la sous-catégorie Espacement :

• Marge supérieure : 120 px (ordinateur de bureau), -80 (tablette et téléphone)
• Marge de gauche : -240 px (ordinateur de bureau), 80 (tablette), 45 (téléphone)
• Rembourrage en haut, à droite, en bas et à gauche : 50 pixels (ordinateur de bureau et tablette), 20 pixels (téléphone)

Résultat

Une fois cela fait, vous remarquerez le design suivant sur le bureau :

Et sur mobile :

Commencez à créer un troisième exemple

Ensuite, nous avons l'exemple suivant qui ressemble à ceci :

Ajouter une nouvelle section

Encore une fois, ajoutez une nouvelle section standard.

Ajouter une ligne à deux colonnes

La structure de colonne dont nous aurons besoin pour cette ligne est la suivante :

Colonne 1 Couleur d'arrière-plan

Ouvrez les paramètres de ligne et utilisez '#e8e8e8' comme couleur d'arrière-plan de la colonne 1.

Colonne 2 Fond dégradé

L'arrière-plan dégradé nécessaire pour la deuxième colonne est le suivant :

• Première couleur : #e8e8e8
• Deuxième couleur : rgba (255,255,255,0)
• Type de dégradé de la colonne 2 : linéaire
• Direction du gradient de la colonne 2: 147deg
• Position de départ de la colonne 2 : 25 %
• Position finale de la colonne 2 : 9%

Dimensionnement

Ouvrez la sous-catégorie Dimensionnement et utilisez les paramètres suivants :

• Utiliser la largeur personnalisée : Oui
• Largeur personnalisée : 100 %
• Utiliser une largeur de gouttière personnalisée : Oui
• Largeur de gouttière : 1

Espacement

Enfin, ajoutez « 70px » au rembourrage supérieur et inférieur de la première colonne.

Module d'image de première colonne

Alignement

Ajoutez un module d'image à la première colonne, utilisez l'alignement d'image à gauche et activez l'option "Toujours centrer l'image sur mobile".

Espacement

Ouvrez la sous-catégorie Espacement et ajoutez « -300px » à la marge de gauche.

Module de texte de deuxième colonne

Couleur de l'arrière plan

Ajoutez un module de texte à la deuxième colonne et utilisez « #3d3d3d » comme couleur d'arrière-plan.

Paramètres de texte

Accédez à l'onglet Conception et utilisez les paramètres suivants pour la sous-catégorie Texte :

• Police du texte : Lato
• Taille de la police de texte : 12px
• Couleur du texte : #FFFFFF
• Hauteur de la ligne de texte : 2,2 em
• Orientation du texte : Centre

Dimensionnement

Ouvrez la sous-catégorie Dimensionnement et utilisez « 75 % » pour la largeur.

Espacement

Enfin, utilisez les paramètres suivants pour la sous-catégorie Espacement :

• Marge supérieure : 130 px (ordinateur de bureau), -200 (tablette et téléphone)
• Marge de gauche : -180px (ordinateur de bureau), 80 (tablette), 50 (téléphone)
• Rembourrage en haut, à droite, en bas et à gauche : 50 pixels (ordinateur de bureau et tablette), 20 pixels (téléphone)

Résultat

Une fois terminé, le résultat sur le bureau ressemblera à ceci :

Et comme ça sur mobile :

Commencez à créer un quatrième exemple

Le quatrième exemple que nous allons créer ressemble à ceci :

Ajouter une nouvelle section

Commencez par ajouter une section standard à la page sur laquelle vous travaillez.

Ajouter une ligne à deux colonnes

Ensuite, ajoutez-y une ligne à deux colonnes.

Dimensionnement

Ouvrez la sous-catégorie Dimensionnement et apportez les modifications suivantes :

• Utiliser la largeur personnalisée : Oui
• Largeur personnalisée : 60 %
• Utiliser une largeur de gouttière personnalisée : Oui
• Largeur de gouttière : 1

Première colonne Première image Module

Alignement

Ajoutez un module d'image à la première colonne, utilisez le bon alignement d'image et activez l'option "Toujours centrer l'image sur mobile".

Dimensionnement

Accédez à la sous-catégorie Dimensionnement de ce module d'image, utilisez une largeur de « 89 % » et sélectionnez le bon alignement de module.

Visibilité

Accédez à l'onglet Avancé et désactivez le module Image sur le téléphone et la tablette. Nous le ferons pour 3 des modules image qui sont utilisés. Vous pouvez décider vous-même lequel vous souhaitez afficher sur votre tablette et votre téléphone, dans notre cas, ce sera l'image dans le coin supérieur droit.

Première colonne Deuxième module d'image

Alignement

Ajoutez un autre module d'image, utilisez le bon alignement d'image et activez l'option "Toujours centrer l'image sur le mobile".

Frontière

Faites défiler vers le bas et utilisez la bordure suivante :

• Utiliser la bordure : Oui
• Couleur de la bordure : #FFFFFF
• Largeur de la bordure : 5 px
• Style de bordure : solide

Visibilité

Enfin, accédez à l'onglet Avancé et désactivez le module Image sur le téléphone et la tablette.

Deuxième colonne Premier module d'image

Alignement

Ajoutez le module d'image suivant à la deuxième colonne, utilisez l'alignement d'image à gauche et activez l'option "Toujours centrer l'image sur mobile".

Frontière

Faites défiler vers le bas, ouvrez la sous-catégorie Bordure et appliquez les paramètres suivants :

• Utiliser la bordure : Oui
• Couleur de la bordure : #FFFFFF
• Largeur de la bordure : 4px
• Style de bordure : solide

Deuxième colonne Deuxième module d'image

Alignement

Ajoutez le dernier module d'image à la deuxième colonne, utilisez l'alignement d'image à gauche et activez l'option "Toujours centrer l'image sur mobile".

Dimensionnement

Ensuite, ouvrez la sous-catégorie de dimensionnement, utilisez une largeur de « 89 % » et sélectionnez l'alignement de module de gauche.

Visibilité

Désactivez également ce module d'image sur le téléphone et la tablette.

Ajouter une ligne à une colonne

Une fois que vous avez terminé la ligne précédente, continuez et ajoutez-en une autre. Cette fois, la ligne n'aura besoin que d'une colonne.

Dimensionnement

Accédez à l'onglet Conception des paramètres de ligne, activez l'option "Utiliser la largeur personnalisée" et utilisez "581px" comme largeur personnalisée.

Module de texte

Couleur de l'arrière plan

Ajoutez un module de texte à cette nouvelle ligne et sélectionnez 'rgba(255,255,255,0.92)' comme couleur d'arrière-plan.

Paramètres de texte

Passez à l'onglet Conception et appliquez les paramètres suivants à la sous-catégorie Texte :

• Police du texte : Lato
• Taille de la police de texte : 12px
• Couleur du texte : #000000
• Hauteur de la ligne de texte : 2,2 em
• Orientation du texte : Centre

Dimensionnement

Ensuite, ouvrez la sous-catégorie Dimensionnement, ajoutez « 75 % » à la largeur et sélectionnez l'alignement du module central.

Espacement

Enfin, appliquez les paramètres suivants à la sous-catégorie Espacement :

• Marge supérieure : -580px (ordinateur de bureau), -200 (tablette et téléphone)
• Marge de gauche : - 180px (ordinateur de bureau), 80 (tablette), 50 (téléphone)
• Remplissage en haut, à droite, en bas et à gauche : 50 px

Résultat

Une fois cela fait, vous pourrez assister au résultat suivant sur le bureau :

Et les suivantes sur mobile :

Commencez à créer un cinquième exemple

Le dernier exemple que nous allons vous montrer comment recréer est le suivant :

Ajouter une section pleine largeur

Commencez par ajouter une section pleine largeur à votre page.

Module d'image pleine largeur

Dans cette section pleine largeur, ajoutez un module d'image pleine largeur.

Ajouter une nouvelle section

Juste en dessous de la section précédente, ajoutez une autre section. Cette fois, la section doit être standard au lieu de pleine largeur.

Ajouter une ligne à trois colonnes

Ajoutez une ligne à trois colonnes à cette nouvelle section standard.

Couleur de fond des colonnes 1, 2 et 3

Ouvrez les paramètres de ligne et attribuez les couleurs d'arrière-plan suivantes aux colonnes :

• Colonne 1 : #eaeaea
• Colonne 2 : rgba(12 113 195 0,17)
• Colonne 3 : rgba(131,0,233,0,09)

Dimensionnement

Accédez à l'onglet Conception et apportez les modifications suivantes à la sous-catégorie Dimensionnement :

• Faire cette ligne en pleine largeur : Oui
• Utiliser une largeur de gouttière personnalisée : Oui
• Largeur de gouttière : 1

Espacement

Ensuite, ouvrez la sous-catégorie Espacement, ajoutez "-60px" à la marge supérieure et "50px" au remplissage inférieur de chaque colonne.

Module de texte de la première colonne

Couleur de l'arrière plan

Continuez en ajoutant un module de texte à la première colonne et en utilisant 'rgba(255,255,255,0.89)' comme couleur d'arrière-plan.

Paramètres de texte

Accédez à l'onglet Conception et appliquez les paramètres suivants à la sous-catégorie Texte :

• Police du texte : Lato
• Taille de la police de texte : 12px
• Couleur du texte : #000000
• Hauteur de la ligne de texte : 2,2 em
• Orientation du texte : Centre

Frontière

Ouvrez la sous-catégorie Bordure et utilisez les paramètres suivants :

• Utiliser la bordure : Oui
• Couleur de la bordure : #FFFFFF
• Largeur de la bordure : 17px
• Style de bordure : solide

Dimensionnement

Ensuite, utilisez une largeur de « 75 % » et sélectionnez l'alignement du module central dans la sous-catégorie Dimensionnement.

Espacement

Enfin, ouvrez la sous-catégorie Espacement et appliquez les paramètres suivants :

• Marge supérieure : -300px (ordinateur de bureau), 0px (tablette et téléphone)
• Rembourrage en haut, à droite, en bas et à gauche : 50 pixels (ordinateur de bureau et tablette), 20 pixels (téléphone)

Cloner le module de texte deux fois et le placer dans deux autres colonnes

Allez-y et clonez deux fois le module de texte. Ensuite, placez chacun des clones dans les deux colonnes restantes.

Modifier l'espacement du module de texte de la deuxième colonne

Nous devrons changer la marge supérieure du module de texte placé dans la deuxième colonne en "-220px".

Modifier l'espacement du module de texte de la troisième colonne

Même chose pour le module de texte dans la troisième colonne, mais la valeur est plutôt "-140px".

Résultat

Et voici le résultat sur le bureau :

Et sur mobile :

Dernières pensées

Dans cet article, nous vous avons montré de belles et amusantes mises en page de sections de style éditorial que vous pouvez utiliser sur votre propre site Web. Ces exemples montrent à quel point les options de Divi sont flexibles et à quel point vous pouvez être créatif. Si vous avez des questions ou des suggestions ; assurez-vous de laisser un commentaire dans la section commentaires ci-dessous!

Assurez-vous de vous abonner à notre newsletter par e-mail et à notre chaîne YouTube pour ne jamais manquer une grande annonce, un conseil utile ou un cadeau Divi !

Image présentée par Julia Tim / shutterstock.com