Izia crée une section de couleur de fond de titre Global une fois dans l’éditeur de modèle, vous remarquerez une section sur la page. Ouvrez la section et changez la couleur de fond en une couleur entièrement transparente. Cela permettra d’afficher tout le contenu sous cette section.
Couleur de fond: rgba (0,0,0,0)
Index Z e pour s’assurer que la section reste au premier plan de tout le contenu de la section héros, nous devons ajouter l’index Z de la section aux paramètres de visibilité. Indice Z: 99999 Ajouter une nouvelle ligne – structure de colonne une fois que vous avez terminé de définir la section, vous pouvez ajouter une nouvelle ligne en utilisant la structure de colonne suivante:
Redimensionner sans ajouter de module, ouvrir les paramètres de ligne et modifier les paramètres de taille comme suit: hauteur de colonne équilibrée: Oui largeur: 100% largeur maximale: 100% Puis ajoutez un remplissage personnalisé en haut et en bas. Remplissage supérieur: 2vw remplissage inférieur: 0vw Ensuite, allez à l’onglet avancé et assurez – vous que les colonnes sont disposées côte à côte sur un écran plus petit en ajoutant une ligne de code CSS à l’élément principal de la ligne.
Affichage: Flex; Colonne 2 la couleur de fond continue en activant les paramètres de la colonne 2 et en changeant la couleur de fond en translucidité. Couleur de fond: rgba (255255255,0,71) Bordure ajoute également une bordure sous la colonne. Largeur du bord inférieur: 2px couleur du bord inférieur: # f4583f La boîte e Shadow crée un effet flottant en ajoutant des ombres minces à la boîte. Position verticale
Boutons continuer à modéliser les boutons en conséquence: chaque bouton utilise un style personnalisé: Oui bouton taille du texte: 0,9vw (bureau), 1,5vw (tablette), 2,5vw (téléphone) bouton couleur du texte: # FFFFFF bouton couleur de fond: # f4583f bouton largeur de la bordure: 0px bouton couleur de la bordure: # f4583f bouton rayon de la bordure: 0px
Police du bouton: Muli police du bouton poids: gras Espacement il complète la configuration du module en ajoutant un remplissage personnalisé à différentes tailles d’écran. Remplissage supérieur: 1vw (bureau), 2vw (tablette), 3vw (téléphone) Remplissage inférieur: 1vw (bureau), 2vw (tablette), 3vw (téléphone) Remplissage gauche: 2vw (bureau), 3vw (tablette), 4vw (téléphone) Remplissage droit: 2vw (bureau), 3vw (tablette), 4vw (téléphone) Une fois la conception globale terminée, il reste encore une chose à faire. En plaçant la section en haut du contenu de la page. Pour ce faire, nous devons ajouter deux lignes de code CSS aux principaux éléments de cette section.
Position: absolue;
En haut: 0; Lorsque vous survolez l’élément principal, assurez – vous d’ajouter la même ligne de code CSS à l’option lorsque vous survolez l’élément principal. Cela empêchera la Section de clignoter lorsque vous passez. Position: absolue;
En haut: 0; 3. Une fois que vous avez terminé d’enregistrer les modifications du générateur et de voir les résultats, vous pouvez enregistrer le titre global et voir les résultats sur le site Web! Aperçu maintenant que nous avons terminé toutes les étapes, regardons enfin les résultats sur les différents écrans de taille.
Bureau Mobile Dans cet article, nous vous avons montré comment créer une barre de menu mobile en utilisant Divi Theme Builder. C’est une bonne façon de combiner les titres et les parties héroïques. Le titre est au – dessus de la première partie de la page, ou
Affichage: Flex;
Boutons continuer à modéliser les boutons en conséquence: chaque bouton utilise un style personnalisé: Oui bouton taille du texte: 0,9vw (bureau), 1,5vw (tablette), 2,5vw (téléphone) bouton couleur du texte: # FFFFFF bouton couleur de fond: # f4583f bouton largeur de la bordure: 0px bouton couleur de la bordure: # f4583f bouton rayon de la bordure: 0px
Position: absolue;
En haut: 0;
En haut: 0;
Bureau