La façon dont vous Concevez les titres donne le ton au reste du site. C’est pourquoi il est important de réfléchir à la façon d’ajouter des éléments et d’interagir. Bien sûr, nous vous recommandons d’inclure des éléments de base tels que des logos et des éléments de menu, mais vous voudrez probablement inclure d’autres invitations à agir. Cependant, plus vous ajoutez d’éléments au titre, plus le titre peut devenir encombré. Si vous cherchez un moyen simple et interactif d’afficher différentes invitations à l’action dans le titre, vous apprécierez certainement ce tutoriel. Aujourd’hui, nous allons vous montrer comment utiliser l’icône Switch pour économiser de l’espace d’en – tête. Vous pouvez également télécharger gratuitement le fichier json!
On y va. Aperçu avant d’aller plus loin dans ce tutoriel, jetons un coup d’oeil rapide aux résultats sur différents écrans de taille. Bureau Mobile Téléchargement gratuit d’un modèle de titre global pour obtenir un modèle de titre Global gratuit, vous devez d’abord le 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 accéder à l’édition hebdomadaire du pain Divi
Sur le Bureau, retournez à « 100% sur la table et le téléphone » en appliquant un CSS personnalisé à l’élément de colonne primaire. Bureau: largeur: 88%! Tablettes et téléphones importants: largeur: 100%! Important
Colonne set 2 Background color Next, we will open the set for column 2 and change the Background color to White. Couleur de fond: # FFFFFF Espacement nous ajouterons également des valeurs de remplissage de réaction aux paramètres d’espacement de cette colonne.
Remplissage en haut: Bureau: tablette de 50 pixels et téléphone mobile: 20px remplissage en bas Bureau: tablette de 50 pixels et téléphone mobile: 20px remplissage à gauche: 1% remplissage à droite: 1% Nous allons également changer la taille de la deuxième colonne sur le Bureau. Nous reviendrons à 100% sur des écrans plus petits. Bureau: affichage: Flex;
Placer les éléments: Centre;
Largeur: 12%! Important Tablette et téléphone: largeur: 100%! Important Ajouter un module de menu au menu de sélection de colonne 1 Il est temps d’ajouter un module, en commençant par le module de menu dans la colonne 1. Sélectionnez le menu que vous avez sélectionné.
Télécharger le logo télécharger le logo suivant. Supprime ensuite la couleur de fond, puis supprime la couleur de fond par défaut. Paramètres du texte du menu passer à l’onglet conception du module et modifier les paramètres du texte du menu en conséquence: caractères du menu: affichage du menu affichage des caractères du texte du menu: affichage du menu Couleur du texte du menu: # 000000 taille du texte du menu: 19px hauteur de la ligne du menu: 1.4emtext Alignment: Right Ensuite, changez la couleur de la ligne de menu déroulant. Couleur de la ligne de menu déroulant: # FFFFFF Les paramètres de l’icône changent également la couleur de l’icône dans les paramètres de l’icône.
Couleur de l’icône du panier: # 000000 recherche couleur de l’icône: # 000000 hamburger menu Couleur de l’icône: # 000000 La dimension e complète la configuration du module en modifiant les paramètres de dimension
À propos des médias sociaux: titre – item – 3 Ajoutez des positions absolues à tous les éléments de commutation, et e transforme chaque élément de commutation absolu un par un. Il est recommandé de passer en mode wireframe pour ce faire. Position: absolue: en haut à droite Ajouter un formulaire de code à la première colonne de la section 1 maintenant que tous les identifiants CSS sont prêts, nous pouvons ajouter du Code pour que la fonction de clic fonctionne correctement. Ajouter un nouveau module de code directement sous le module de menu de la colonne 1. Ajoutez les lignes de code CSS suivantes à l’étiquette de style comme indiqué sur l’écran d’impression ci – dessous: [ID * = \
Curseur: pointeur;
}
[ID * = \
Visibilité: cachée;
Opacité: 0;
– transition webkit: toutes les 0.5s sont faciles;
– transition MOZ: toutes les 0,5 secondes sont faciles;
O – transition: toutes les mesures d’atténuation de 0,5 s;
MS transition: All 0.5s mitigation;
Transition: toutes les mesures d’atténuation de 0,5 s;
}
– Oui. Afficher les éléments
Visibilité: visible;
Opacité: 1;
}
– Oui. Mettre en évidence l’icône
Couleur: # 000! Important
} Saisissez le Code jquery nous avons également ajouté un code jquery personnalisé. Ajoutez du Code entre les balises de script, comme indiqué sur l’écran d’impression ci – dessous. Jquery (fonction ($)
USD (file). Ready (Function () {
$(‘[ID * = \
Variable $Selector = $(ceci). Propriété (\
Variable $item = $(\
$Project. Toggleclass (« show item»);
$(‘[ID * = \
Variable $icône = $(ceci). Rechercher (\
Variable $allicons = $([ID * = \
Icône $. Toggleclass (\
$allicons. Non ($icon). Removeclass (\
});
});
}); 4. Rendre le titre + activer l’élément collant rendre la section # 1 collante enfin et surtout, vous pouvez également changer le titre et activer ou désactiver l’élément collant. Pour créer le résultat désiré, vous devez vous assurer que les deux parties sont collées et