Ajouter & # 39; En – tête fixe personnalisé pour les appareils mobiles utilisant Divi

Si cela est fait correctement, l’installation d’un titre fixe (ou d’une navigation) sur votre téléphone peut améliorer la disponibilité du site. En général, la navigation fixe semble être 22% plus rapide que le titre standard. Dans ce monde de haute technologie, c’est une statistique considérable, même si elle n’est que de moitié. De plus, avec Divi, il suffit de quelques lignes de css pour ajouter un titre fixe au site. Divi vous a permis de personnaliser les en – têtes mobiles en utilisant le personnalisateur de thème, mais il n’y a actuellement aucun paramètre intégré pour déployer des en – têtes mobiles fixes. Dans ce tutoriel, je vais vous montrer comment ajouter des en – têtes fixes personnalisés à votre appareil mobile, y compris:
LOGO différent de la version Bureau (mieux adapté aux appareils mobiles). Titre plus court pour permettre plus d’espace de visualisation disponible. Une icône de navigation plus grande et plus cliquable à Hambourg simplifie le déploiement des navigateurs mobiles. Un fond translucide rend le titre plus intrusif lors de la visualisation du site. Voici un aperçu du titre. Ce réglage est similaire à mon dernier post sur le changement de logo sur un titre fixe. Avant de commencer, assurez – vous de remplir ce qui suit:
Assurez – vous que la dernière version de Divi est installée. Créez un menu principal actif pour votre site. À partir de l’arrière – plan du site WordPress, allez à Theme Customer > title and Navigation > title format et assurez – vous que le style de titre par défaut est sélectionné. Créez deux versions logo 200 x 131 et ajoutez – les à la médiathèque WordPress. Un logo sera utilisé pour l’en – tête principal et un pour fixer l’en – tête. Si vous le pouvez, faites une version d’intest
EDIA (largeur maximale: 980px)
\/ * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
Style déplacer le titre fixe
* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
– Oui. Et \ \ u fixe \ \ u NAV # Titre principal. Et en – tête fixe
Position: fixe;
Contexte: rgba (255255255,0,8);
Hauteur: 55px;
}
– Oui. Et sécurisez l’en – tête. LOGO _ Container {
Hauteur: 55px;
}
– Oui. Et sécurisez l’en – tête. Barre de menu mobile {
Fond de remplissage: 5px;
}
\/ * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
Agrandir l’icône de navigation du titre fixe mobile
* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
– Oui. Et sécurisez l’en – tête. Mobile _ Menu Bar: précédent {
Taille de la police: 45px;
}
– Oui. Et _ header style left. Et titre fixe
Haut du joint: 5px;
}
– Oui. Et _ fixe NAV #
– conversion webkit: aucune;
– transition MOZ: aucune;
Transition: aucune;
}
\/ * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
Augmenter la hauteur pour déplacer et déplacer la zone du logo sur le titre fixe
* * * * * * * * * * * * * * * * * * * * * * * * * * * *
Logo. Et titre fixe # logo
Hauteur maximale: 80%;
}
}
Enregistrez vos paramètres. Vous avez maintenant un en – tête fixe mobile qui fonctionne. Changer le logo sur un en – tête fixe mobile si vous voulez utiliser un logo différent pour un en – tête fixe mobile, vous pouvez le faire facilement avec quelques jquery. Tout ce dont vous avez besoin est l’URL des deux logos que vous allez utiliser. La première URL d’image du logo doit être le logo par défaut que vous avez utilisé pour votre site. La deuxième URL de l’image du logo doit être le logo à utiliser pour déplacer l’en – tête fixe. Assurez – vous de télécharger les deux logos dans la médiathèque et de récupérer l’URL.
Avec deux URL, allez sur le tableau de bord WordPress, puis allez sur Divi > thèmes > intégration. Trouvez la zone d’entrée ajouter du Code au début du blog et saisissez le script jquery suivant: Var imageurl =
« Saisissez l’URL de l’image du logo du Bureau »,
« Saisissez l’URL de l’image du logo mobile»,
G);
Jquery (Windows). On (‘roll’, Function () {
Var $header = jquery (\
Valeur à risque