Comment créer un design d'en-tête élégant avec des parallélogrammes dans Divi

L'ajout d'un nouveau design d'en-tête élégant à votre page est un moyen efficace d'impressionner vos visiteurs. Et concevoir un arrière-plan unique pour votre en-tête est un excellent point de départ. Dans ce tutoriel, je vais vous montrer comment utiliser Divi pour ajouter des parallélogrammes à votre conception d'en-tête en utilisant des arrière-plans dégradés de manière créative. Cela ajoute un bel élément de texture à la conception qui rompt avec la disposition traditionnelle de la boîte.

Commençons.

Aperçu

Voici un aperçu de la conception que nous allons construire.

Ce dont vous aurez besoin

Pour créer ce design, vous aurez besoin de choses principales :

1. Le thème Divi
2. The Interior Design Company à propos de la mise en page (disponible à partir de Divi Builder)

Configurer la page

Pour ce tutoriel, je vais utiliser la société de design d'intérieur à propos de la mise en page sur une nouvelle page. Accédez à votre tableau de bord WordPress et accédez à Pages > Ajouter un nouveau. Donnez ensuite un titre à votre page et cliquez pour utiliser le Divi Builder. Cliquez ensuite sur le bouton pour déployer le générateur visuel. Sélectionnez l'option "Choisir une mise en page prédéfinie". Ensuite, recherchez et sélectionnez le pack de mise en page de design d'intérieur. Choisissez la mise en page À propos, puis cliquez enfin sur « Utiliser cette mise en page ».

Une fois la page chargée sur la page, vous êtes prêt à commencer l'édition.

Retirez le rembourrage supérieur de la section et remplacez l'image d'arrière-plan

C'est une première étape facile. Tout ce que vous avez à faire est de survoler la partie supérieure de la section d'en-tête supérieure de la page. Vous verrez que le rembourrage supérieur actuel est défini sur 10 %. Faites simplement glisser le rembourrage jusqu'à 0%. Ou vous pouvez toujours accéder aux paramètres de la page et définir également le rembourrage supérieur personnalisé sur 0%.

Vous pouvez également modifier l'image d'arrière-plan à ce stade, mais ce n'est pas nécessaire. Pour ce faire, accédez aux paramètres de la section et modifiez l'image d'arrière-plan sous l'onglet contenu. Retirez ensuite le dégradé de fond. Cela aidera à rendre le texte (qui sera blanc) plus lisible sur mobile puisqu'il y aura du texte chevauchant l'image d'arrière-plan.

Ajuster la taille et le remplissage des lignes

Ensuite, accédez aux paramètres de ligne et sous l'onglet Conception, mettez à jour les éléments suivants :

Utiliser la largeur personnalisée : OUI
Largeur personnalisée : 100 %
Rembourrage personnalisé : 0px haut, 10vw bas

Ajouter un arrière-plan dégradé à la ligne et à la colonne

Pour créer ce design élégant, nous allons superposer des arrière-plans dégradés avec différentes positions de départ et d'arrêt. Nous devons d'abord ajouter un fond dégradé à la ligne, puis à la colonne.

Accédez aux paramètres de ligne sous l'onglet contenu et mettez à jour les éléments suivants :

Couleur d'arrière-plan du dégradé de gauche : #1a1a1a
Dégradé d'arrière-plan à droite : rgba(255,255,255,0)
Direction du gradient: 45deg
Position de départ : 60 %
Position finale : 0%

Colonne 1 Dégradé de fond à gauche Couleur : rgba (244,88,63,0,83)
Colonne 1 Dégradé de fond à droite Couleur : rgba(255,255,255,0)
Direction du gradient de la colonne : 45 deg
Position de départ de la colonne : 66 %
Position de fin de colonne : 0%

Le dégradé orange que nous avons ajouté à la colonne sera utilisé pour le premier parallélogramme de notre conception d'en-tête. Pour créer le parallélogramme, nous devons raccourcir le dégradé orange avec un côté gauche incliné à 45 degrés pour correspondre au côté droit. Nous allons le faire en ajoutant un dégradé au module d'appel à l'action.

Ajuster la taille et l'espacement du texte du module d'appel à l'action

Avant d'ajouter notre dégradé d'arrière-plan au module d'appel à l'action, obtenons d'abord l'espacement et les styles de texte.

Accédez aux paramètres du module d'appel à l'action et mettez à jour les éléments suivants sous l'onglet Conception :

Orientation du texte : à gauche
Couleur du texte : clair
Taille du texte du titre : 4.5vw (ordinateur de bureau), 42px (tablette)
Couleur du texte du bouton : #1a1a1a
Couleur d'arrière-plan du bouton : #ffffff
Largeur : 100 %
Réinitialiser les marges
Rembourrage personnalisé (bureau): dessus 10vw, 5% à gauche, 45% à droite
Rembourrage personnalisé (tablette) : 38 % à droite
Rembourrage personnalisé (smartphone) : 5 % à droite

Nous pouvons maintenant ajouter notre dégradé d'arrière-plan à notre module. Pour accélérer ce processus, accédez aux paramètres de la ligne, cliquez avec le bouton droit et copiez le dégradé d'arrière-plan de la ligne.

Accédez ensuite aux paramètres du module d'appel à l'action, sous l'onglet Contenu, puis faites un clic droit et collez le dégradé d'arrière-plan dans le module. Réglez ensuite la position de départ à 47 %.

Comme vous pouvez le voir, cela crée l'effet d'un long rectangle incliné chevauchant le fond dégradé sombre pour un élément de design unique.

Ce serait une excellente conception dans l'état actuel des choses, mais allons de l'avant et soyons encore plus créatifs en ajoutant un parallélogramme supplémentaire chevauchant le bas de notre rangée.

Création d'un parallélogramme supplémentaire à l'aide de modules de texte vides

Le concept de cette phase finale de la conception de l'en-tête consiste à créer deux modules de texte côte à côte chacun avec un dégradé personnalisé qui, une fois combinés, montre une seule «boîte» avec des côtés également inclinés à droite et à gauche. Pour ce faire, nous devons d'abord créer une ligne à une colonne pour contenir nos modules de texte. Ensuite, nous pouvons dimensionner et positionner nos modules pour qu'ils se tiennent côte à côte.

Ajoutez une ligne à une colonne directement sous la section contenant notre module d'appel à l'action dans la même section.

Ajoutez ensuite un module de texte dans la colonne de gauche et mettez à jour le module de texte comme suit :

Effacez tout le contenu de la zone de contenu (nous allons utiliser un module de texte vide)
Couleur d'arrière-plan du dégradé de gauche : rgba(255,255,255,0)
Dégradé d'arrière-plan à droite : rgba (58,80,107,0,83)
Direction du gradient: 45deg
Position de départ : 50 %
Position finale : 0%

Sautez maintenant sur l'onglet Conception et mettez à jour les éléments suivants :

Hauteur de la ligne de texte : 0em (cela supprimera tout espacement indésirable)
Largeur : 50 %
Marge personnalisée : -8vw en haut, 0 px en bas
Rembourrage personnalisé : haut 8vw, bas 8vw

Enregistrer les paramètres.

À partir du générateur visuel, dupliquez le module et mettez à jour les paramètres du module de texte pour le nouveau module comme suit :

Passez la souris sur l'aperçu du dégradé d'arrière-plan et cliquez sur l'icône « Changer de dégradé » pour basculer les couleurs du dégradé de gauche à droite.

Alignement du module : à droite
Marge personnalisée : -16vw en haut, 0px en bas

Enregistrer les paramètres.

Maintenant que nos modules sont alignés, nous pouvons ajuster les paramètres de ligne pour positionner nos modules et les redimensionner pour s'adapter à la conception. Ouvrez les paramètres de ligne et mettez à jour les éléments suivants :

Alignement des lignes : à gauche
Utiliser la largeur personnalisée : OUI
Largeur personnalisée : 45 %
Marge personnalisée : 30 % restants
Rembourrage personnalisé : 0 pixels en haut, 0 pixels en bas

C'est à peu près ça! Découvrez les résultats finaux.

Le voici sur tablette et smartphone.

Dernières pensées

J'espère que cette technique de conception vous donnera un peu d'inspiration sur la façon dont vous pouvez utiliser les options d'arrière-plan dégradé de Divi pour incorporer des parallélogrammes élégants dans votre propre conception d'en-tête. Et, bien sûr, cette conception ne se limite pas aux en-têtes. N'hésitez pas à explorer de nouveaux domaines où cette conception fonctionnera pour vous. Pour plus d'inspiration, découvrez quelques secrets de conception de grille brisée qui peuvent vous aider en cours de route.

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

À votre santé!