Comment positionner absolument les boutons pour créer une disposition unique des boutons dans Divi

L’option de localisation intégrée de Divi est un outil de conception pratique pour localiser avec précision tous les éléments de Divi, y compris les boutons – poussoirs. Dans la plupart des cas, nous dépendons de l’emplacement statique par défaut des boutons derrière le flux du document (ou de la page). Cependant, si nous savons comment positionner absolument les boutons, nous pouvons créer des mises en page de boutons uniques et pratiques pour le contenu Divi. Dans ce tutoriel, nous vous montrerons comment créer 4 différentes mises en page de boutons pour mettre en évidence de façon unique le module Blurb de Divi. Cela peut être très utile lorsque vous utilisez des profils sur votre site Web.
On y va. Jetez un coup d’oeil rapide à la disposition des quatre boutons que nous allons créer dans ce tutoriel. Téléchargement gratuit mise en page des boutons Divi pour obtenir la mise en page des boutons dans ce tutoriel, vous devez d’abord télécharger en utilisant les boutons ci – dessous. Pour accéder au téléchargement, vous devez vous abonner à notre liste de diffusion quotidienne Divi en utilisant le tableau ci – dessous. En tant que nouvel utilisateur, vous recevrez plus de Divi Goods et un paquet gratuit Divi Layout le lundi! Si vous êtes déjà sur la liste, il vous suffit de saisir votre adresse e – mail ci – dessous et cliquez sur télécharger. Vous ne serez pas « ré – abonné » ou vous recevrez un courriel supplémentaire.
Télécharger le fichier Inscrivez – vous à Divi Newsletter et nous vous enverrons par courriel une copie du dernier paquet de mise en page de la page d’atterrissage Divi, ainsi qu’un grand nombre d’autres ressources, conseils et astuces Divi gratuits. Suivez – nous et vous serez bientôt maître Divi. Si vous êtes déjà abonné, entrez votre adresse e – mail ci – dessous et cliquez sur télécharger pour accéder au paquet Layout. Vous vous êtes inscrit avec succès. Vérifiez votre adresse e – mail pour confirmer votre abonnement et Obtenez gratuitement le paquet hebdomadaire Divi Layout! Pour importer une mise en page dans une page, il suffit d’extraire le fichier zip et de faire glisser
Fichiers json dans na Divi Builder.
Commençons le tutoriel. Que devez – vous commencer? Pour commencer, vous devez faire ce qui suit: si ce n’est pas déjà fait, installez et activez le thème Divi. Créez une nouvelle page dans WordPress et utilisez Divi Builder pour éditer la page à l’avant (Visual Builder). Sélectionnez l’option créer à partir de zéro. Ensuite, vous aurez une toile vierge à concevoir dans Divi. Créer la disposition du bouton 1: Double bouton en bas Pour la première des quatre configurations de boutons, nous allons créer deux boutons sous le module Blurb. Il s’agit d’un bon choix pour présenter du contenu qui nécessite deux DEC (p. ex., un service). De plus, il s’agit d’un bon moyen de verrouiller les boutons au bas des colonnes de hauteur égale.
Pour commencer, ajoutez une ligne et deux colonnes (0 \/ 2 \/ 2) à la section. Paramètres de ligne utilisant la largeur de marge personnalisée: s largeur de marge: 2 hauteur de colonne égale: s largeur: 100% marge: 50px remplissage du Bas: 0px haut, 0px bas Colonne set 1 Background color: # 2e3858 fill: 50px bottom Lorsque nous ajoutons un bouton placé absolument, le remplissage en bas crée l’espace nécessaire. La conception du module Blurb ajoute ensuite le module Blurb à la colonne 1. L’image est ensuite téléchargée dans le module Blurb comme suit: Aller aux paramètres de conception et mettre à jour ce qui suit: alignement de l’image \/ de l’icône: caractère de titre gauche: PT sans poids du caractère de titre: couleur du texte de titre en gras: # FFFFFF taille du texte de titre: 38px espacement des lettres de titre: 2px couleur du texte: # FFFFFF largeur de l’image: 40% largeur du contenu: 100% largeur: 100% Remplissage: 50 pixels, en haut, 50 pixels en bas, 30 pixels à gauche, 30 pixels à droite Ajouter le bouton double inférieur # 1 est conçu pour ajouter un nouveau module bouton sous le module Blurb. Ensuite, mettez à jour les paramètres du bouton comme suit:
Taille du texte du bouton: 16 Px couleur du texte du bouton: # ffffffff couleur de fond du bouton: # 2dc3a3 largeur de la bordure du bouton: 0px rayon de la bordure du bouton: 0px espacement des lettres du bouton: 2px caractères du bouton: PT sans poids de la police du bouton: gras style de police du bouton: tt marge: 0px remplissage du Bas: 1EM haut, 1EM bas, 1,5em gauche, 2,5em à droite Position absolue du bouton 1 pour placer définitivement le bouton dans le coin inférieur gauche de la colonne, mettre à jour ce qui suit: position: position absolue: coin inférieur gauche Divi facilite les opérations grâce à une grille de position cliquable intégrée. Comme nous voulons que le bouton soit rincé au bas de la colonne, aucune valeur offset n’est nécessaire. Conception et emplacement du bouton 2 créer le bouton 2, copier le module précédent du bouton. La copie sera directement empilée au – dessus du bouton précédent, donc si vous utilisez Visual Builder, il peut sembler que rien ne s’est passé. Cliquez sur le bouton ouvrir le module pour définir et mettre à jour ce qui suit: couleur de fond: # df4570 Emplacement: coin inférieur droit Supprimez maintenant la colonne 2 qui est actuellement vide et Copiez la colonne 1 pour obtenir un duplicata précis, même dans la colonne de droite. Résultats de la vérification de la disposition des boutons 1. Notez que le contenu de la colonne de droite pousse la colonne vers le bas de la page, mais comme nos boutons sont absolument positionnés, ils continuent à s’accrocher au bas pour créer un beau design symétrique. Créer la disposition des boutons 2: trois boutons latéraux Pour la prochaine disposition des boutons, nous placerons trois boutons à droite du module Blurb dans une colonne. Pour commencer la mise en page du bouton suivant, copiez la ligne précédente. Paramètres
– Oui. 15) Taille du texte: 20px Marges: 50px en haut Position du bouton 1 décalage vertical: 8% décalage horizontal: – 7% Bouton # 2 position de positionnement: décalage vertical supérieur droit: 34% décalage horizontal: – 10% Échelle de transformation: 80% Bouton # 3 position de positionnement: décalage vertical inférieur droit: – 3% décalage horizontal: 5% Échelle de transformation: 138% Largeur de l’espacement des lignes: 4 largeur: 80% (bureau) Disposition des boutons n.3 contrôle des résultats résultat final. Créer la disposition des boutons 4: boutons avec étiquette Velcro Pour la dernière disposition du bouton, nous allons créer quelques onglets dans le coin supérieur droit de Blurb. Pour démarrer un projet, copiez la ligne de mise en page du bouton 2. Paramètres de la colonne ensuite, mettez à jour les paramètres de fond de la colonne 1 comme suit: couleur de fond (bureau): aucune (par défaut) couleur de fond (téléphone): # 2e3858 Dans l’onglet avancé, mettez à jour l’option visibilité pour masquer le débordement sur l’écran du téléphone. Débordement horizontal (téléphone): masquer le débordement vertical (téléphone): masquer Placez le bouton extraire l’onglet 1 maintenant, nous pouvons utiliser les trois boutons actuels dans la colonne comme boutons tirer l’onglet. Active les paramètres du bouton supérieur et met à jour ce qui suit: décalage vertical: 0px décalage horizontal: 0px Comme nous utiliserons ce bouton pour créer la carte, nous devons laisser de la place à l’icône de droite pour qu’elle apparaisse au centre chaque fois qu’elle est mise en évidence de l’arrière du module Blurb. Continuer à mettre à jour le remplissage du bouton comme suit: padding: 2em left, 3em right, puis ajouter le CSS personnalisé suivant: padding left Element: 10px; Ensuite, mettez à jour l’offset horizontal sur votre téléphone comme suit: offset horizontal (téléphone): – 134px ceci cache le côté gauche du pu