Voir une démo en direct de ce module

Comment ajouter un module de boutons à votre page

Avant de pouvoir ajouter un module de boutons à votre page, vous devez d’abord sauter dans Divi Builder. Une fois le thème Divi installé sur votre site Web, vous constaterez qu’un Utilisez Divi Builder Chaque fois que vous créez une nouvelle page, cliquez sur le bouton au-dessus de l’éditeur de publication. Cliquer sur ce bouton active le Divi Builder et vous donne accès à tous les modules de Divi Builder. Cliquez ensuite sur Utiliser le constructeur visuel Bouton pour démarrer le générateur en mode visuel. Vous pouvez également cliquer sur Utiliser le constructeur visuel Lorsque vous naviguez sur votre site Web, cliquez sur le bouton dans le front-end si vous êtes connecté à votre tableau de bord WordPress.

Module de boutons

Après être entré dans Visual Builder, vous pouvez cliquer sur le bouton gris plus pour ajouter un nouveau module à votre page. Les nouveaux modules ne peuvent être ajoutés que dans les lignes. Lorsque vous démarrez une nouvelle page, n’oubliez pas d’ajouter d’abord une ligne à votre page. Nous avons d’excellents tutoriels sur l’utilisation de Divi doubler et section Éléments.

Module de boutons

Trouvez le module bouton dans la liste des modules et cliquez dessus pour l’ajouter à votre page. La liste des modules est consultable. Ainsi, vous pouvez également taper le mot «bouton», puis appuyer sur Entrée pour trouver et ajouter automatiquement le module de boutons! Une fois le module ajouté, vous serez accueilli avec la liste des options du module. Ces options sont divisées en trois groupes principaux: teneur, conception et Avancée.

Exemple de cas d’utilisation: ajout d’un bouton CTA à la zone des héros d’une page de destination.

Il existe d’innombrables façons d’utiliser le module de boutons. Dans cet exemple, je vais vous montrer comment ajouter un bouton Plus d’infos à la zone des héros d’une page de destination.

Module de boutons

Commençons.

Utilisez Visual Builder pour ajouter une section standard avec une disposition pleine largeur (1 colonne). Ajoutez un module de texte pour ajouter et mettre en forme le titre et le sous-titre. Ajoutez ensuite le module de boutons juste en dessous du module de texte.

Module de boutons

Mettez à jour les paramètres du module comme suit:

Onglet Contenu

Texte du bouton: plus d’informations
URL du bouton: [enter URL]

Onglet Conception
Orientation clé: centre
Couleur du texte: clair
Utiliser des styles personnalisés pour le bouton: OUI
Taille du texte du bouton: 20px
Couleur du texte du bouton: #ffffff
Couleur d’arrière-plan du bouton: # 0065cb
Largeur du cadre du bouton: 9px
Couleur de la bordure des touches: # 0065cb
Rayon du bord du bouton: 100px
Espacement des lettres clés: 2px
Police du bouton: source aucune, gras, majuscules
Espacement des lettres au survol du bouton: 2px

Module de boutons

C’est ça! Ce n’est qu’une des nombreuses façons dont vous pouvez utiliser le module de boutons.

Module de boutons

Options de contenu des boutons

Dans l’onglet « Contenu », vous trouverez tous les éléments de contenu du module, par ex. B. Texte, images et symboles. Tout ce qui contrôle Quoi apparaît dans votre module et est toujours sur cet onglet.

Module de boutons

Texte du bouton

Entrez le texte du bouton souhaité.

URL du bouton

Saisissez l’URL de destination de votre bouton.

L’URL s’ouvre

Ici, vous pouvez choisir si votre lien doit s’ouvrir ou non dans une nouvelle fenêtre.

Étiquette d’administrateur

Cela modifie le nom du module dans le générateur pour une identification facile. Si vous utilisez la vue WireFrame dans Visual Builder, ces étiquettes seront affichées dans le bloc de module de l’interface Divi Builder.

Options de conception des boutons

L’onglet Conception contient toutes les options de style du module, telles que: B. Polices, couleurs, tailles et espacement. Sur cet onglet, vous pouvez modifier l’apparence de votre module. Chaque module Divi a une longue liste de paramètres de conception que vous pouvez utiliser pour changer presque tout.

Module de boutons

Alignement des clés

Ici, vous pouvez choisir si votre bouton doit être aligné à gauche, à droite ou au milieu.

Couleur du texte

Ici, vous pouvez choisir si votre texte doit être clair ou foncé. Si vous travaillez avec un arrière-plan sombre, votre texte doit être clair. Si votre arrière-plan est clair, votre texte doit être sombre.

Utiliser des styles personnalisés pour le bouton

Lorsque vous activez cette option, vous verrez divers paramètres de personnalisation des boutons que vous pouvez utiliser pour modifier l’apparence du bouton sur votre module.

Taille du texte du bouton

Ce paramètre peut être utilisé pour augmenter ou réduire la taille du texte dans le bouton. Le bouton est mis à l’échelle lorsque la taille du texte est augmentée ou diminuée.

Bouton de couleur du texte

Par défaut, les boutons prennent la couleur de l’accent de votre thème tel que défini dans le personnalisateur de conception. Cette option vous permet d’attribuer une couleur de texte personnalisée au bouton de ce module. Sélectionnez votre couleur personnalisée à l’aide du sélecteur de couleurs pour changer la couleur du bouton.

Couleur d’arrière-plan du bouton

Par défaut, les boutons ont une couleur d’arrière-plan transparente. Cela peut être modifié en sélectionnant la couleur d’arrière-plan souhaitée dans le sélecteur de couleurs.

Largeur de la bordure du bouton

Tous les boutons Divi ont une bordure 2px par défaut. Avec ce réglage, cette marge peut être agrandie ou réduite. Les cadres peuvent être supprimés en entrant la valeur 0.

Couleur de la bordure du bouton

Par défaut, les bordures des boutons prennent la couleur de l’accent de votre thème tel que défini dans le personnalisateur de thème. Cette option vous permet d’attribuer une couleur de bordure personnalisée au bouton de ce module. Utilisez le sélecteur de couleur pour sélectionner votre couleur personnalisée afin de modifier la couleur de la bordure du bouton.

Rayon du bord du bouton

Le rayon du bord affecte l’arrondi des coins de vos boutons. Par défaut, les boutons de Divi ont un petit rayon de cadre qui arrondit les coins de 3 pixels. Vous pouvez réduire cette valeur à 0 pour créer un bouton carré ou l’augmenter de manière significative pour créer des boutons avec des bords circulaires.

Espacement des lettres clés

L’espacement des lettres influence l’espacement entre les lettres individuelles. Si vous souhaitez augmenter l’espace entre chaque lettre dans le texte de votre bouton, utilisez le curseur de plage pour ajuster l’espacement ou entrez la quantité d’espace souhaitée dans le champ de saisie à droite du curseur. Les champs de saisie prennent en charge différentes unités de mesure. Cela signifie que vous pouvez taper « px » ou « em » après la valeur de votre taille pour changer le type d’unité.

Police du bouton

Vous pouvez modifier la police du texte de votre bouton en sélectionnant la police souhaitée dans le menu déroulant. Divi est livré avec une douzaine de superbes polices prises en charge par Google Fonts. Par défaut, Divi utilise la police Open Sans pour tout le texte de votre page. Vous pouvez également personnaliser le style de votre texte à l’aide des options Gras, Italique, Majuscule et Souligné.

Ajouter un symbole de bouton

Si vous désactivez ce paramètre, les icônes seront supprimées de votre bouton. Par défaut, tous les boutons Divi affichent un symbole de flèche lors du survol.

Icône de bouton

Lorsque les icônes sont activées, ce paramètre vous permet de choisir l’icône à utiliser dans votre bouton. Divi a le choix entre différents symboles.

Couleur de l’icône du bouton

Le réglage de ce paramètre modifie la couleur de l’icône qui apparaît sur votre bouton. Par défaut, la couleur de l’icône correspond à la couleur du texte de vos boutons. Cependant, ce paramètre vous permet d’ajuster la couleur indépendamment.

Placement des symboles de bouton

Vous pouvez choisir d’afficher l’icône de votre bouton à gauche ou à droite de votre bouton.

Afficher uniquement le symbole du survol du bouton

Par défaut, les symboles de bouton ne s’affichent que lors du survol. Si vous souhaitez que l’icône apparaisse toujours, désactivez ce paramètre.

Couleur du texte de survol du bouton

Lorsque vous survolez le bouton d’un visiteur, cette couleur est utilisée. La couleur change par rapport à la couleur de base définie dans les paramètres précédents.

Couleur d’arrière-plan du survol du bouton

Lorsque vous survolez le bouton d’un visiteur, cette couleur est utilisée. La couleur change par rapport à la couleur de base définie dans les paramètres précédents.

Couleur du cadre de survol du bouton

Lorsque vous survolez le bouton d’un visiteur, cette couleur est utilisée. La couleur change par rapport à la couleur de base définie dans les paramètres précédents.

Rayon de la bordure de survol du bouton

Lorsque vous survolez le bouton d’un visiteur, cette valeur est utilisée. La valeur change par rapport à la valeur de base définie dans les paramètres précédents.

Espacement des lettres au survol du bouton

Lorsque vous survolez le bouton d’un visiteur, cette valeur est utilisée. La valeur change par rapport à la valeur de base définie dans les paramètres précédents.

Bouton d’options avancées

L’onglet Avancé fournit des options que les concepteurs Web expérimentés peuvent trouver utiles, telles que: B. Attributs CSS et HTML personnalisés. Ici, vous pouvez appliquer du CSS personnalisé à l’un des nombreux éléments du module. Vous pouvez également attribuer des classes CSS et des ID personnalisés au module, que vous pouvez utiliser pour personnaliser le module dans le fichier style.css de votre thème enfant.

Module de boutons

ID CSS

Entrez un ID CSS facultatif à utiliser pour ce module. Un identifiant peut être utilisé pour créer un design CSS personnalisé ou pour créer des liens vers des sections spécifiques de votre page.

Classe CSS

Entrez les classes CSS facultatives à utiliser pour ce module. Une classe CSS peut être utilisée pour créer un style CSS personnalisé. Vous pouvez ajouter plusieurs classes séparées par un espace. Ces classes peuvent être utilisées dans votre thème Divi Child ou dans le CSS personnalisé que vous ajoutez à votre page ou site Web en utilisant Options de thème Divi ou les paramètres de page de Divi Builder.

CSS personnalisé

Le CSS personnalisé peut également être appliqué au module et à tous les éléments internes du module. Dans la section CSS personnalisé, vous trouverez une zone de texte dans laquelle vous pouvez ajouter du CSS personnalisé directement à n’importe quel élément. L’entrée CSS de ces paramètres est déjà incluse dans les balises de style, il vous suffit donc de saisir des règles CSS, séparées par des points-virgules.

Relation clé

Ici, vous pouvez définir un attribut rel personnalisé pour le bouton, par exemple B. rel = « nofollow ». Avec Divi, vous pouvez choisir parmi tous les attributs de lien courants.

Visibilité

Cette option vous permet de contrôler les appareils sur lesquels votre module est affiché. Vous pouvez désactiver votre module individuellement sur les tablettes, les smartphones ou les ordinateurs de bureau. Ceci est utile lorsque vous souhaitez utiliser différents modules sur différents appareils ou lorsque vous souhaitez simplifier la conception mobile en supprimant certains éléments de la page.





Source link

Recent Posts