Comment chevaucher horizontalement les bordures de lignes avec Divi

Créer des conceptions de page qui interagissent n'est pas toujours une tâche facile. En plus de vous concentrer sur l'expérience utilisateur, les principes de conception et les tendances de conception, vous devez également créer quelque chose qui correspond à l'image de marque de votre entreprise et hypnotise vos visiteurs au premier coup d'œil.

Si vous effectuez une recherche sur notre blog, vous trouverez une tonne de façons créatives d'aborder votre conception de sites Web en utilisant Divi et les options intégrées polyvalentes de Divi. Aujourd'hui, nous ajoutons une autre approche créative à cette liste. Nous allons vous montrer comment superposer de manière créative les bordures de rangées pour créer un design époustouflant. Nous nous assurons d'avoir le même type de design sur toutes les tailles d'écran.

Allons-y !

Abonnez-vous à notre chaîne Youtube

Aperçu

Nous allons créer un exemple à partir de zéro, mais avant de nous y plonger, examinons le résultat final sur différentes tailles d'écran.

Télécharger la police Mighttype gratuite

La première chose que vous devez faire est de télécharger la police manuscrite gratuite Mightype par AF studio. Accédez au lien suivant et activez le téléchargement gratuit par e-mail.

Ajouter une nouvelle section

Espacement

Une fois que vous avez téléchargé la police gratuite mentionnée à l'étape précédente, vous pouvez continuer et créer une nouvelle page. Après cela, activez Visual Builder, ouvrez la première section de votre nouvelle page et ajoutez un rembourrage personnalisé :

• Rembourrage supérieur : 250 px
• Rembourrage inférieur : 250px

Ajouter une nouvelle ligne

Structure des colonnes

Nous aurons besoin de deux lignes au total. Nous allons commencer par le premier et le cloner ensuite une fois terminé. Ajoutez une nouvelle ligne à votre section en utilisant la structure de colonnes suivante :

Colonne 1 Fond dégradé

Sans ajouter encore de modules, ouvrez vos paramètres de ligne et ajoutez l'arrière-plan dégradé de la colonne 1 suivant :

• Couleur 1 : #ffffff
• Couleur 2: rgba (0,255,233,0,25)
• Type de dégradé de colonne : radial
• Direction radiale du poteau : gauche
• Position de départ de la colonne : 59 %
• Position de fin de colonne : 59 %
• Dégradé de la colonne au-dessus de l'image d'arrière-plan : Oui

Colonne 1 Motif de fond

Continuez en enregistrant le modèle suivant sur votre ordinateur et en le téléchargeant comme image d'arrière-plan de la colonne 1 :

Une fois que vous avez téléchargé le modèle, utilisez les paramètres d'image d'arrière-plan suivants :

• Taille de l'image d'arrière-plan de la colonne : taille réelle
• Répétition de l'image d'arrière-plan de la colonne : espace

Alignement des lignes

Activez également l'alignement des lignes à droite.

Dimensionnement

Nous utilisons également des paramètres de dimensionnement personnalisés pour cette ligne :

• Utiliser la largeur personnalisée : Oui
• Largeur personnalisée : 950px

Espacement

Voici les valeurs d'espacement que vous devez ajouter ensuite :

• Marge inférieure : 100px
• Marge de droite : -30 px (tablette et téléphone)
• Rembourrage supérieur : 0px
• Rembourrage inférieur : 0px

Frontière

Enfin, ajoutez une bordure en haut, à gauche et en bas de votre ligne :

• Largeur de la bordure : 14 px
• Couleur de la bordure : #000000
• Style de bordure gauche : double

Ajouter un module de texte de titre

Ajouter une copie H2

Nous pouvons maintenant commencer à ajouter nos modules ! Ajoutez un module de texte de titre et assurez-vous que votre copie est H2.

Couleur de l'arrière plan

Nous allons interrompre la bordure gauche de notre ligne en ajoutant une couleur de fond blanc au module de texte.

Télécharger la police Mighttype

Localisez ensuite la police Mightype sur votre ordinateur et téléchargez-la dans votre bibliothèque de polices en cliquant sur le bouton de téléchargement dans votre liste de polices.

Sélectionnez le fichier de police Mighttype, donnez un nom à votre police et téléchargez-la dans votre bibliothèque de polices.

Paramètres de texte H2

Une fois que vous avez ajouté la nouvelle police, continuez et apportez d'autres modifications aux paramètres de texte H2 :

• Police de l'en-tête 2 : Mighttype
• Couleur du texte de l'en-tête : #000000
• Titre 2 Taille du texte : 150 px (ordinateur de bureau), 100 px (tablette), 60 px (téléphone)

Espacement

Pour chacun des modules que vous souhaitez chevaucher les bordures des lignes, vous devrez ajouter une marge négative. Cette marge négative n'affectera que le module en question, pas la ligne dans laquelle il a été placé. La marge négative que vous devrez ajouter dépend du nombre de caractères utilisés dans votre copie.

• Marge supérieure : 200px
• Marge inférieure : 100px
• Marge gauche : -35%
• Rembourrage supérieur : 50px
• Rembourrage inférieur : 50px

Mode de fusion

Et pour vous assurer que la couleur d'arrière-plan du module de texte n'affecte que la bordure de la ligne, et non l'arrière-plan de la colonne 1, activez le mode de fusion « Multiplier » dans les paramètres des filtres.

Ajouter un module de texte de description

Couleur de l'arrière plan

Juste en dessous du titre Module de texte, allez-y et ajoutez une description Module de texte avec une couleur de fond blanc.

Paramètres de texte

Accédez aux paramètres de texte et apportez quelques modifications :

• Taille du texte : 22px (ordinateur de bureau), 18px (tablette), 15px (téléphone)
• Hauteur de la ligne de texte : 1,8 em
• Orientation du texte : Centre

Dimensionnement

Diminuez ensuite la taille de ce module de texte à « 96 % ».

Espacement

Ajoutez également de l'espacement :

• Marge inférieure : 200px
• Marge gauche : -50%
• Rembourrage supérieur : 20 px
• Rembourrage inférieur : 20px

Mode de fusion

Et utilisez le mode de fusion « multiplier » ici aussi.

Cloner la ligne

Nous avons fini de modifier la première ligne ! Créons le même résultat mais de l'autre côté de la page. Pour gagner du temps, nous allons cloner la ligne que nous avons déjà et apporter quelques modifications en cours de route.

Modifier les paramètres de ligne

Colonne 1 Fond dégradé

La première chose que vous devrez changer est l'arrière-plan dégradé de la colonne 1 :

• Couleur 2: rgba (255,187,0,0.33)
• Direction radiale de la colonne : droite

Alignement des lignes

Nous voulons que la ligne apparaisse de l'autre côté, c'est pourquoi nous choisirons Alignement de ligne à gauche.

Espacement

Nous ajustons également les paramètres d'espacement :

• Marge de gauche : -25% (tablette et téléphone)

Frontière

Supprimez la bordure gauche qui a été appliquée à votre ligne et appliquez-la plutôt sur le côté droit :

• Largeur de la bordure droite : 14 px
• Couleur de la bordure droite : #000000
• Style de bordure droite : double

Modifier les paramètres du module de texte de titre

Espacement

Modifiez ensuite les paramètres d'espacement de votre module de texte de titre :

• Marge de gauche : 52 % (ordinateur de bureau et tablette), 58 % (téléphone)
• Marge de droite : 52 % (ordinateur de bureau et tablette), 58 % (téléphone)

Modifier les paramètres du texte de description

Espacement

Enfin et surtout, la description du module de texte a également besoin d'autres valeurs d'espacement :

• Marge gauche : 50 %
• Marge droite : -50%

Aperçu

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

Dernières pensées

Le chevauchement des bordures de lignes à l'aide des options intégrées de Divi peut apporter à votre site Web la personnalisation et la personnalisation que vous recherchiez. Dans cet article, nous vous avons montré exactement comment procéder. Nous avons recréé un bel exemple à partir de zéro. Cet exemple a fière allure sur toutes les tailles d'écran et nous n'avons utilisé que les options intégrées de Divi ! Si vous avez des questions ou des suggestions, assurez-vous de laisser un commentaire dans la section commentaires ci-dessous!