Comment créer & # 39; En – têtes globaux tournés avec Divi & # 39; Générateur de thème s

Paquet de mise en page hebdomadaire gratuit Divi! Aller à Divi Theme Builder et commencer à créer des titres globaux aller à Divi Theme Builder commence avec Divi Theme Builder sur le site WordPress. Commencez à créer un en – tête global cliquez sur Ajouter un en – tête global et sélectionnez créer un en – tête global. 2. Commencez à créer le titre global du côté rotatif ajouter une nouvelle partie de couleur de fond une fois que vous entrez dans l’éditeur de modèle, vous pouvez ouvrir la partie existante et changer la couleur de fond sur différents écrans de taille.
Couleurs de fond: rgba (0,0,0,0) (bureau), # FFFFFF (tablette et téléphone) Ensuite, changez les paramètres de taille de la section. Largeur: 5vw (bureau), 100% (tablette et téléphone mobile) hauteur minimale: 100vw (bureau), voiture (tablette et téléphone mobile) L’espacement ajoute un remplissage personnalisé en haut et en bas. Emballage supérieur: 2vw emballage inférieur: 2vw Ensuite, allez aux paramètres d’ombre de boîte et ajoutez des ombres de boîte personnalisées à différentes tailles d’écran. Position horizontale de l’ombre du cadre: 32 pixels (bureau), 0 pixels (tablette et téléphone mobile) Force de flou de l’ombre du cadre: 49 Px force de diffusion de l’ombre du cadre: 0px (bureau), 19 Px (tablette et téléphone mobile) couleur de l’ombre: rgba (0,0,0,0,12) Nous veillerons également à ce que les en – têtes globaux tournés restent fixés à gauche en ajoutant quelques lignes de code CSS aux principaux éléments de la section. Position: fixe;
En haut: 0;
Affichage: Flex;
Emballage flexible: emballage;
Aligner le contenu: centré; L’élément principal lorsque vous passez le curseur assure que la même ligne de code CSS est ajoutée à l’élément principal lorsque vous passez le curseur. Position: fixe;
En haut: 0; La visibilité par défaut augmente ensuite l’index Z dans les paramètres de visibilité. Indice Z: 99999 Visib
La capacité de déplacer la souris garantit que la même valeur est appliquée au mouvement de la souris.
Indice Z: 99999 Ajouter une nouvelle ligne – structure des colonnes une fois la configuration de la section terminée, continuer à ajouter une nouvelle ligne en utilisant la structure des colonnes suivante: Redimensionnez sans ajouter de module, ouvrez les paramètres de ligne et changez les paramètres de taille. Utiliser une largeur de gouttière personnalisée: Oui largeur de gouttière: 1 Supprime tous les remblais supérieurs et inférieurs par défaut. Remplissage supérieur: 0px remplissage inférieur: 0px Paramètres de colonne principaux éléments (tablette et téléphone) sur la tablette et le téléphone, nous cherchons une apparence complètement différente. Nous allons rassembler trois modules différents. Pour ce faire, nous devons ajouter du code CSS. Ouvrez les paramètres de colonne, allez à l’onglet avancé et saisissez la ligne de code CSS suivante dans le tableau et les principaux éléments du téléphone:
Affichage: grille;
Colonne de gabarit de grille: 33,33% ~ 33,33% ~ 33,33%; Il est temps de commencer à ajouter des modules! Le premier module dont nous avons besoin est le module image. Téléchargez le fichier image logo translucide de votre choix. Ensuite, allez à l’onglet conception et changez la largeur sur différentes tailles d’écran. Largeur: 4vw (bureau), 12vw (tablette), 16vw (téléphone) L’échelle de transformation augmente la taille du module en modifiant ensuite les paramètres d’échelle de transformation. Droite: 170% (bureau), 100% (tablette et téléphone) bas: 170% (bureau), 100% (tablette et téléphone) Convertit la transformation et pousse le module vers la droite en ajoutant une valeur de transformation inférieure sur le Bureau. En bas: 1vw (bureau), 0vw (tablette et téléphone) Ajouter un module de menu à la colonne sélectionner le menu le module suivant dont nous avons besoin est le module de menu. Sélectionner
Et changer l’alignement des modules sur différentes tailles d’écran. Alignement: gauche (bureau), droite (tablette et téléphone) Paramètres de l’icône enfin et surtout, il modifie également les paramètres de l’icône. Couleur de l’icône: # 000000 utiliser la taille de l’icône personnalisée: est la taille de la police de l’icône: 2.1vw 3. Après avoir sauvegardé les modifications du générateur et vu les résultats de tous les modules, vous pouvez enregistrer le modèle, quitter Divi Theme Builder 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 un titre Global rotatif en utilisant le nouveau générateur de thème de Divi. Nous avons également transformé la barre de menu en une version très mobile de l’appareil mobile. À moins que vous n’en choisissiez autrement, les titres globaux que nous créons seront affichés sur tous vos messages et pages. Vous pouvez également télécharger gratuitement le fichier json! Si vous avez des questions ou des suggestions, veuillez les commenter immédiatement dans la section commentaires ci – dessous! Si vous souhaitez en savoir plus sur Divi et recevoir plus de cadeaux sur Divi, assurez – vous de vous abonner à notre newsletter et à YouTube Channel afin que vous soyez toujours l’un des premiers à apprendre et à bénéficier de ce contenu gratuit.