Comment inclure la barre de menu principale dans la conception de la page Divi

Ale et utilisez les paramètres suivants: hauteur maximale du logo: 100 taille du texte: 18 espacement des lettres: – 1 caractère: Poppins text color: # 333333 active Link color: # f55c83 Background color: rgba (255255255,0) drop – down Background color: # FFFFFF Ajoutez une nouvelle page CSS personnalisée pour que la barre de menu principale chevauche notre conception de page et nous aurons besoin de code CSS. Vous pouvez choisir d’appliquer des dérogations à l’ensemble du site ou seulement à des pages spécifiques. Si vous choisissez de l’ajouter à une seule page, ajoutez le code CSS suivant à la configuration de la page: # main header {
Bord supérieur: 140px;
} Ajoutez une nouvelle couleur de fond partielle et commençons par le design! Ajouter une nouvelle page, passer à Visual Builder et ajouter la première section. Ouvrez certains paramètres et ajoutez rgba (255255255,0.81) comme couleur de fond. Cela vous permettra de visualiser une image de fond de notre site. L’espacement se poursuit en allant aux paramètres d’espacement et en ajoutant les marges personnalisées et le remplissage suivants: marges supérieure et inférieure: 100 Px marges gauche et droite: 60 Px marge supérieure: 135 Px marge inférieure: 0px Vous pouvez également ajouter \
Il est temps de commencer à ajouter des lignes et des modules! Utilisez deux colonnes de la même taille pour ajouter la première ligne. Redimensionner sans ajouter de module, ouvrir les paramètres de ligne et modifier les paramètres de taille:
Faire cette ligne pleine largeur: est la hauteur de colonne équilibrée: est Ajouter quelques rembourrages personnalisés plus tard: rembourrage supérieur: 250 Px (bureau), 50 Px (tablette et téléphone mobile) rembourrage inférieur: 200 Px (bureau), 100 Px (tablette), 50 Px (téléphone mobile) rembourrage gauche colonne 1: 50 Px (bureau), 0px (tablette et téléphone mobile) Ajout d’un module de texte d’en – tête à la colonne 1 Paramètres de texte H1 nous pouvons maintenant commencer à ajouter des modules. Nous commencerons par la première colonne et ajouterons un nouveau titre de formulaire texte. Police d’en – tête: Poppins poids de police d’en – tête: taille moyenne du texte d’en – tête: 120 pixels (bureau), 80 pixels (tablette), 58 pixels (téléphone) Ajoutez différentes couleurs à une partie de la copie vous pouvez facilement changer la couleur des mots dans le titre en allant à l’onglet texte et en ajoutant des couleurs aux mots que vous aimez en utilisant span tag. Ajoutez un formulaire de texte descriptif aux paramètres de texte de la colonne 1 directement sous le formulaire de texte précédent, puis ajoutez une description de formulaire de texte en utilisant les paramètres de texte suivants:
Police de texte: Poppins poids de la police de texte: taille normale du texte: 20 pixels (bureau), 15 pixels (tablette et téléphone) hauteur de la ligne de texte: 2em Espacement nous avons besoin de marges supplémentaires sous cette forme de texte: marges supérieure et inférieure: 50 px Ajouter un module bouton à la colonne 1 Paramètres du bouton le dernier module de cette colonne est un module bouton. Après avoir ajouté une copie de la demande d’action, Changer le style du bouton: utiliser un style personnalisé pour le bouton: Oui couleur du texte du bouton: # FFFFFF couleur du gradient 1: # f45085 couleur du gradient 2: # f88c7e direction du gradient: 137 degrés largeur du bord du bouton: 0px rayon du bord du bouton: 40 Px caractères du bouton: Poppins poids de la police du bouton: style de police normal: majuscules Activer les paramètres d’espacement et ajouter des marges et des remplissages aux boutons: marge inférieure: 100 Px (bureau), 20 Px (tablette et téléphone) Marge supérieure et inférieure: 15 Px marge gauche et droite: 50 px Enfin et surtout, nous utiliserons des ombres très minces pour créer plus de profondeur sur la page: Intensity Shadow Blur Box: 55px Box Shadow Spread Force: – 4px Shadow color: rgba (84,84,84,0,25) Ajouter un module image à la colonne 2 enregistrer et charger une image la deuxième colonne ne contient qu’un seul module image. Le modèle que nous utilisons fait partie de la trousse de mise en page du marketing numérique Divi. Continuez et enregistrez l’image ci – dessous sur votre ordinateur. Une fois cela fait, ajoutez – le au module image dans la deuxième colonne. Ajouter une structure de colonne de ligne # 2 Il est temps d’ajouter une deuxième ligne! Pour ce faire, sélectionnez la structure de colonne suivante: Couleur de fond de colonne 1, puis ouvrez les paramètres de ligne et ajoutez \
Colonne couleur de fond 3 pour la troisième colonne, nous utilisons la couleur de fond \