5 Exemples de mise en page de style d’édition créés avec Divi

Les exemples sur le Bureau sont similaires: Ajouter une nouvelle section avant d’ajouter une nouvelle section standard. Ajoutez des lignes à deux colonnes, puis ajoutez des lignes à deux colonnes. Colonne Background color 2 ouvre les paramètres de ligne et ajoute « # EDED » comme couleur de fond de colonne 2. Allez à l’onglet conception et appliquez les modifications suivantes à la Sous – catégorie dimensions:
Utiliser la largeur personnalisée: Oui largeur personnalisée: 100% utiliser la largeur personnalisée de la gouttière: Oui largeur de la gouttière: 1 Alignement de la première colonne du module image ajoutez le module image à la première colonne, utilisez l’alignement de l’image à gauche et activez l’option déplacer l’image toujours centrée. Espacement ouvrez l’espacement des sous – catégories et utilisez les paramètres suivants: espace de bord supérieur: 100 Px (bureau), 0 Px (tablette et téléphone) espace de bord supérieur: 0px espace de bord inférieur: 0px Formatage du texte pour la deuxième colonne ensuite, ajoutez le formatage du texte à la deuxième colonne et appliquez les paramètres suivants à la Sous – catégorie du texte:
Police de texte: taille de la police de texte latéral: 12px couleur du texte: # 000000 hauteur de la ligne de texte: 2.2 emtext direction: Centre Ouvrez la Sous – catégorie taille et appliquez une largeur de 75%. Espacement Enfin, assurez – vous que les paramètres suivants s’appliquent à l’espacement des sous – catégories: espacement supérieur: 120 Px (bureau), – 80 (tablette et téléphone mobile) Espacement gauche: – 240 Px (bureau), 80 (tablette), 45 (téléphone mobile) Remplissage supérieur, droit, inférieur et gauche: 50 pixels (bureau et tablette), 20 pixels (téléphone mobile) Une fois les résultats terminés, vous remarquerez ce qui suit sur le Bureau: Sur son portable: Voici quelques exemples: Ajoutez une nouvelle section et une nouvelle section standard. Ajouter r
Uesto: Attends, au téléphone: Commencez à créer un quatrième exemple le quatrième exemple que nous allons créer est similaire à ceci: Tout d’abord, ajoutez une section standard à la page que vous travaillez. Ajoutez des lignes à deux colonnes, puis ajoutez des lignes à deux colonnes. Redimensionner la Sous – catégorie ouverte et apporter les modifications suivantes: utiliser une largeur personnalisée: est une largeur personnalisée: 60% utiliser une largeur personnalisée de gouttière: est une largeur de gouttière: 1 Première colonne alignement de la première image ajoutez un module image dans la première colonne, utilisez l’alignement correct de l’image, et activez l’option toujours déplacer l’image au Centre. Allez dans la Sous – catégorie taille du module image, utilisez une largeur de 89% et sélectionnez l’alignement correct du module. Visibilité allez à l’onglet avancé et désactivez le module image sur votre téléphone et votre tablette. Nous le ferons pour les 3 modules d’image utilisés. Vous pouvez décider vous – même lequel afficher sur votre tablette et votre téléphone, dans notre cas, sera l’image en haut à droite. Première colonne deuxième alignement d’image ajouter un autre module d’image, utiliser le bon alignement d’image et activer l’option toujours centrer l’image sur l’appareil mobile. Bordure défiler vers le bas et utiliser la bordure suivante: utiliser la bordure: est la couleur de la bordure: # FFFFFF largeur de la bordure: 5px style de la bordure: solide Visibilité Enfin, allez à l’onglet avancé et désactivez le module image sur votre téléphone et votre tablette. Premier module d’image pour l’alignement de la deuxième colonne ajoutez un module d’image à côté de la deuxième colonne, utilisez l’alignement de l’image à gauche et activez l’option toujours centrer l’image sur l’appareil mobile. La bordure fait défiler vers le bas, ouvre la Sous – catégorie de bordure et applique les paramètres suivants: utiliser la bordure: est la couleur de la bordure: # FFFFFF largeur de la bordure: 4px style de bordure: solide Deuxième colonne.
L’alignement du deuxième module d’image d’Onna ajoute le dernier module d’image à la deuxième colonne, utilise l’alignement de l’image de gauche et active l’option déplacer l’image toujours centrée. Ensuite, ouvrez la Sous – catégorie Redimensionner, réglez la largeur à 89%, puis sélectionnez l’alignement du formulaire à gauche. Ce module d’image est également désactivé sur le téléphone et la tablette. Une fois que vous avez terminé d’ajouter une ligne à une colonne, continuez à ajouter une autre ligne. Cette fois, la ligne n’a besoin que d’une seule colonne. Allez à l’onglet conception des paramètres de ligne, activez l’option Utiliser la largeur personnalisée et utilisez 581px comme largeur personnalisée. Ajoutez le formulaire texte à la nouvelle ligne et sélectionnez rgba (255255255,0.92) comme couleur de fond. Paramètres de texte passez à l’onglet conception et appliquez les paramètres suivants aux sous – catégories de texte: police de texte: taille de police de texte latéral: 12px couleur de texte: # 000000 hauteur de ligne de texte: 2.2 emtext direction: Centre Ensuite, ouvrez la Sous – catégorie dimensions, ajoutez 75% à la largeur et sélectionnez l’alignement du module central. Espacement Enfin, appliquez les paramètres suivants à l’espacement des sous – catégories: espacement supérieur: – 580px (bureau), – 200 (tablette et téléphone mobile) Espacement gauche: – 180 Px (bureau), 80 (tablette), 50 (téléphone mobile) Espacement supérieur, droit, inférieur et gauche: 50 px Une fois les résultats terminés, vous pourrez voir les résultats suivants sur votre bureau: Sur son portable: Commencez à créer le cinquième exemple le dernier exemple que nous allons vous montrer comment recréer est le suivant: Tout d’abord, ajoutez une section pleine largeur à la page. Module d’image pleine largeur dans cette section pleine largeur, ajouter un module de GI