Comment créer des conceptions de coins flottants pour le contenu dans Divi

La création de conceptions de coins flottants est un moyen simple et facile d'ajouter un peu de style créatif aux modules Divi que vous n'auriez peut-être pas pensé possible sans code personnalisé. Bonnes nouvelles! Avec Divi, vous pouvez utiliser des séparateurs et des textes de présentation pour styliser les quatre coins de votre module à l'aide des options intégrées de Divi. Et, il peut être assez amusant d'essayer les différentes possibilités.

Dans ce tutoriel, je vais vous montrer comment créer des designs de coins flottants pour votre contenu dans Divi. Une fois que vous avez les éléments en place, vous pouvez styliser ces coins avec d'innombrables formes, icônes et couleurs !

Commençons!

Aperçu

Voici un aperçu des conceptions de coins flottants possibles à partir de ce didacticiel.

Téléchargez GRATUITEMENT la mise en page des exemples de conception de bordure flottante

Pour mettre la main sur la disposition des motifs de bordure flottante, vous devrez d'abord la télécharger à l'aide du bouton ci-dessous. Pour accéder au téléchargement, vous devrez vous inscrire à notre liste de diffusion Divi Daily en utilisant le formulaire ci-dessous. En tant que nouvel abonné, vous recevrez chaque lundi encore plus de bienfaits Divi et un pack Divi Layout gratuit ! Si vous êtes déjà sur la liste, entrez simplement votre adresse e-mail ci-dessous et cliquez sur télécharger. Vous ne serez pas « réinscrit » ni ne recevrez d'e-mails supplémentaires.

Télécharger le fichier

Télécharger gratuitement

Rejoignez la newsletter Divi et nous vous enverrons par e-mail une copie du pack ultime de mise en page de la page de destination Divi, ainsi que des tonnes d'autres ressources, trucs et astuces Divi incroyables et gratuits. Suivez-le et vous serez un maître Divi en un rien de temps. Si vous êtes déjà abonné, saisissez simplement votre adresse e-mail ci-dessous et cliquez sur télécharger pour accéder au pack de mise en page.

TÉLÉCHARGER

Vous vous êtes enregistré avec succès. Veuillez vérifier votre adresse e-mail pour confirmer votre abonnement et accéder aux packs de mise en page Divi hebdomadaires gratuits !

Pour importer la mise en page sur votre page, extrayez simplement le fichier zip et faites glisser le fichier json dans le Divi Builder.

Passons maintenant au tutoriel, voulez-vous ?

Commencer

La seule chose dont vous avez besoin pour ce tutoriel est Divi. Nous allons construire ces exemples à partir de zéro sur le front-end du Divi Builder.

Pour commencer, créez une nouvelle page et donnez un titre à votre page. Cliquez pour utiliser le Divi Builder sur le front-end et choisissez l'option « Build from Scratch ».

Maintenant, vous êtes prêt à partir!

Création du modèle de mise en page de conception de coin flottant

Comme il y aura d'innombrables possibilités de conception avec cette conception, il est logique de créer la mise en page de base (ou modèle) à partir de laquelle travailler.

Pour ce modèle, nous allons ajouter quatre séparateurs à chaque coin d'un module de texte. Ensuite, une fois la mise en page en place, vous pourrez explorer de nouvelles façons de personnaliser ces séparateurs pour des conceptions uniques.

Tout d'abord, créez une nouvelle section régulière avec une ligne à une colonne.

Avant d'ajouter le module de texte, mettez à jour les paramètres de ligne comme suit :

Largeur personnalisée : 640px
Rembourrage personnalisé : 0px en haut, 0px en bas

Ajoutez ensuite un module de texte à la ligne et mettez à jour les éléments suivants :

Taille du texte du texte : 20px
Hauteur de la ligne de texte : 1,8 em
Marge personnalisée : -25px en haut, -25px en bas, 25px à gauche, 25px à droite
Rembourrage personnalisé (bureau) : 10 % en haut, 10 % en bas, 10 % à gauche, 10 % à droite
Rembourrage personnalisé (téléphone) : 20 % en haut, 20 % en bas
Largeur de la bordure : 4px
Couleur de la bordure : #eeeeee

La marge et le rembourrage personnalisés vont aider à aligner nos modules de séparation que nous ajouterons sous peu. Étant donné que les séparateurs auront une hauteur et une largeur de 50px, les marges supérieure et inférieure de -25px tireront ces séparateurs à mi-chemin dans le module de texte pour un joli design symétrique (vous verrez).

Ajout des deux premiers séparateurs d'angle flottants

Une fois le module de texte en place, nous pouvons commencer à ajouter les deux conceptions de coin flottantes supérieures à l'aide de modules de séparation.

Créez un nouveau module de séparation et faites-le glisser vers le haut du module de texte.

Ensuite, mettez à jour les paramètres du diviseur comme suit :

Afficher le diviseur : NON

Couleur d'arrière-plan : #7cda24 (ou la couleur de votre choix)
Hauteur : 50px
Largeur : 50px

La hauteur et la largeur de 50 pixels nous donnent le carré parfait que nous pouvons utiliser pour notre bordure flottante.

Maintenant, ajoutez une ombre de boîte au séparateur pour créer l'effet flottant comme suit :

Box Shadow : voir capture d'écran
Position verticale de l'ombre de la boîte : 0px
Force du flou de l'ombre de la boîte : 0px
Force de propagation de l'ombre de la boîte: 20px
Couleur de l'ombre : #ffffff

Pour nous assurer que le module de séparation reste au-dessus du module de texte (et ne se cache pas derrière lui), nous devons ajouter un extrait de CSS à l'élément principal comme suit :

Élément principal CSS :

position: relative

Ensuite, mettez à jour l'index Z à 1.

Ensuite, dupliquez le module diviseur et mettez à jour les paramètres du diviseur dupliqués comme suit :

Alignement du module : à droite
Marge personnalisée : -50px haut

Cela aligne le diviseur vers la droite et le tire vers le haut à la hauteur exacte du module diviseur situé au-dessus. Cela crée le placement de coin exact que nous recherchons.

Ajout des séparateurs de coin inférieurs

Pour ajouter les deux séparateurs de coin inférieurs, déployez le mode d'affichage filaire et copiez les séparateurs gauche et droit que vous venez de créer et collez-les sous le module de texte (en vous assurant que le séparateur gauche reste empilé sur le séparateur droit comme indiqué dans l'image au dessous de).

C'est ça! Voyons la conception finale de notre mise en page de base.

Explorer de nouvelles conceptions de coins flottants

Avec ce modèle en place, nous pouvons explorer différentes conceptions possibles. Vous pouvez enregistrer toute cette section dans la bibliothèque Divi afin de pouvoir la conserver comme modèle à l'avenir. Mais pour l'instant, dupliquons simplement la section et explorons un nouveau design.

Formes de diamant avec des arrière-plans dégradés

Avec un duplicata de notre modèle en place, utilisez la fonction de sélection multiple pour sélectionner les quatre modules de séparation. Cliquez ensuite sur l'icône d'engrenage des paramètres sur l'un des diviseurs sélectionnés pour déployer le modal des paramètres de l'élément. Il peut être utile d'utiliser le mode clic pour cette étape.

Dans les paramètres de l'élément, mettez à jour les éléments suivants :

Couleur de fond dégradé à gauche : #7cda24
Couleur de fond dégradé à droite : #edf000
Direction du gradient: 45deg

Utilisez ensuite les options de transformation pour faire pivoter le séparateur en forme de losange.

Transformer Rotation Axe Z: 45deg

Voici la conception finale.

Diviseurs en biais

Vous pouvez également utiliser l'option Transformer l'inclinaison pour incliner les séparateurs pour un design encore plus unique. Vous pouvez soit ajouter une conception d'inclinaison distincte pour chaque diviseur, soit utiliser la multisélection pour mettre à jour l'inclinaison de transformation pour les quatre en même temps de -37 degrés sur les axes X et Y.

Voici à quoi cela ressemblerait.

Motifs de fond sombre

Vous pouvez même essayer d'ajouter une couleur d'arrière-plan sombre au module de texte pour un design de coin flottant unique. Voici un exemple de module de texte avec une couleur d'arrière-plan de #002130 en utilisant le sans transformation, rotation ou inclinaison.

Coins arrondis

Pour mettre des coins arrondis sur le dessin, vous pouvez simplement ajouter des coins arrondis à la rangée comme suit :

Coins arrondis : 20px

Coins flottants circulaires

Pour transformer ces coins carrés en cercles, vous pouvez ajouter l'extrait suivant de CSS personnalisé à l'élément principal de chaque séparateur :

border-radius: 50%;

Étant donné que les séparateurs mesurent 50 pixels sur 50 pixels, cela créera un design de cercle parfait.

Comme vous pouvez le voir, il existe une tonne de façons différentes de modifier ces éléments pour d'innombrables nouveaux designs d'angle.

Maintenant, explorons l'utilisation d'icônes de présentation pour les coins flottants au lieu de modules de séparation.

Créer des coins flottants avec des icônes Blurb

L'ajout d'icônes Blurb à chaque coin du module de texte peut vous donner des designs encore plus uniques. Vous pouvez utiliser le même modèle de mise en page que nous avons créé au début du didacticiel. La seule différence sera l'utilisation de modules de présentation au lieu de modules de séparation pour les quatre coins.

Allez-y et obtenez un duplicata du modèle de mise en page de section déployé.

Supprimez ensuite les modules de séparation au-dessus et en dessous du module de texte.

Ajout des deux premiers coins de l'icône de présentation

Étant donné que nous allons uniquement vouloir utiliser le module de présentation pour afficher une seule icône, nous devons nous assurer que la taille et l'espacement sont corrects.

Ajoutez un module de présentation au-dessus du module de texte et retirez le titre et le corps du texte. Cliquez ensuite pour utiliser une icône au lieu d'une image et sélectionnez l'icône cercle facebook.

Mettez ensuite à jour les paramètres de présentation suivants (ces paramètres sont très similaires aux paramètres que nous avons ajoutés au module diviseur dans le premier exemple) :

Couleur d'arrière-plan : #ffffff
Taille de la police de l'icône : 50px
Largeur : 50px
Marge personnalisée : 0px en bas
Coins arrondis : 50 %
Box Shadow : voir capture d'écran
Position verticale de l'ombre de la boîte : 0px
Force du flou de l'ombre de la boîte : 0px
Force de propagation de l'ombre de la boîte: 20px
Couleur de l'ombre : #ffffff

Élément principal CSS :

position: relative;

CSS de l'image de présentation :

margin-bottom: 0px

Indice Z : 1

Ensuite, dupliquez le module de présentation pour en créer un autre juste en dessous du texte de présentation actuel et mettez à jour les éléments suivants :

Alignement du module : à droite
Marge personnalisée : -50px haut

Copiez ensuite les deux premiers modules de présentation et collez-les sous le module de texte (en vous assurant que le texte de présentation de gauche reste empilé au-dessus du texte de présentation de droite).

Ensuite, vous pouvez mettre à jour les icônes de chaque texte de présentation comme vous le souhaitez.

Voici la conception finale.

Découvrez d'autres modèles avec les coins flottants de l'icône Blurb

Avec cette configuration, vous pouvez explorer de nombreux modèles uniques. Vous pouvez modifier les icônes, utiliser différentes combinaisons de couleurs et même les mettre à l'échelle ou les faire pivoter avec des options de transformation.

Voici un exemple de conception utilisant une couleur de fond sombre pour le module de texte et différentes couleurs d'icônes.

Fonctionne dans des dispositions à plusieurs colonnes

Tant que vous gardez les éléments ensemble, vous pouvez ajouter ces dispositions de coins flottants dans plusieurs colonnes.

Emballer

La création de conceptions de coins flottants pour votre contenu dans Divi met vraiment en valeur la puissance de Divi Builder. Avec toutes les options intégrées disponibles, vous pouvez créer d'innombrables variantes de conception à partir d'un modèle de mise en page de base. J'espère que cela vous incitera à vous amuser à explorer de nouveaux designs.

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

À votre santé!