Point culminant du plugin Divi : Divi Mobile

Divi Mobile est un plugin tiers pour Divi qui facilite la création de menus mobiles personnalisés pour les sites Web Divi. Tous les paramètres se trouvent dans le personnalisateur de thème, vous pouvez donc voir un aperçu en direct de vos conceptions de menu mobile. C'est un plugin facile à utiliser et il peut créer à peu près n'importe quel type de menu dont vous pourriez avoir besoin. Dans ce point culminant du plugin Divi, nous allons parcourir les fonctionnalités de Divi Mobile pour vous aider à décider si vous en avez besoin dans votre boîte à outils Divi.

Menu par défaut de Divi Mobile

A titre de comparaison, voici le menu mobile par défaut de Divi. Le menu change automatiquement pour afficher un menu de hamburgers. Un clic sur le menu révèle un menu déroulant avec tous les liens. Ce n'est pas réglable séparément du menu standard.

Personnalisateur de thème

Un nouveau menu est ajouté au personnalisateur de thème appelé Divi Mobile. Il est bleu foncé avec du texte vert pour qu'il se démarque. Tous les réglages sont effectués dans ce menu. J'utilise le pack de mise en page Financial Advisor.

Dans une vue mobile, comme la vue tablette dans l'exemple ci-dessus, le menu est automatiquement réglé sur les paramètres par défaut de Divi Mobile. Il comprend un menu de hamburgers en blanc dans un cercle bleu foncé. Je survole le menu Divi Mobile, qui a désormais changé de couleur.

Cliquer sur le menu hamburger ouvre le menu, qui glisse sur le côté et couvre tout le côté de l'écran. J'ai ouvert le menu dans le personnalisateur de thème pour afficher les onglets. D'autres éléments apparaîtront en fonction des sélections que vous choisissez. Regardons les principaux ajustements.

Style de menu et paramètres

Menu Style and Settings propose plusieurs options pour sélectionner les menus. Les options de mise en page incluent le menu apparaissant depuis l'extérieur de l'écran (la vue par défaut), s'étendant à partir d'une forme et la navigation en bas. Le style de menu d'écran extérieur ajoute des animations ouvertes et des styles entièrement ouverts au menu. Chacune des trois mises en page comprend différentes options.

L'exemple ci-dessus montre le même menu que l'exemple précédent, mais j'ai sélectionné Plein écran pour le style de menu. Un mode Aperçu définit quel mode est affiché par défaut. J'aime ça parce que ça éclaire le fond.

L'expansion à partir d'une forme couvre tout l'écran en commençant dans le coin supérieur droit. Il peut également s'étendre par le haut en s'étirant vers le bas. Cela ajoute des icônes sur l'arrière-plan et place les liens en dehors de l'arrière-plan comme je l'ai dans l'exemple ci-dessus. Vous pouvez ajuster les couleurs et les icônes dans d'autres paramètres dans un autre menu appelé Paramètres d'étirement du cercle.

Bottom Navigation affiche des icônes en bas de l'écran. Ceci est ajusté dans un autre menu appelé Paramètres de navigation inférieurs.

En ajustant le point d'arrêt, vous pouvez le faire afficher le menu mobile sur le bureau.

En-tête personnalisé

L'en-tête personnalisé vous donne un contrôle total sur l'en-tête. La première section est l'apparence de l'en-tête. Ajoutez un nouveau logo, ajustez sa taille, ajustez la couleur d'arrière-plan, la longueur de l'ombre, le rayon de flou, la couleur de l'ombre, etc. J'ai ajouté un nouveau logo et modifié la couleur d'arrière-plan dans cet exemple.

La section suivante est l'apparence de l'en-tête sur le défilement. Réglez le menu sur fixe, ajustez la hauteur, la taille du logo, la position de l'icône du hamburger et la couleur d'arrière-plan. J'ai apporté des modifications à chacun de ces paramètres.

Les éléments d'en-tête vous permettent d'ajouter des éléments à l'en-tête et d'ajuster leur position, leur taille et leur couleur. J'ai déplacé le logo vers la droite et l'ai réglé légèrement plus bas que la normale (vous pouvez le régler aussi bas que vous le souhaitez pour chevaucher l'en-tête ou le contenu). J'ai également ajouté le panier WooCommerce, activé l'icône de recherche, les ai placés à gauche, les ai changés en rouge et augmenté leur taille.

Choisissez le menu Burger

Choisir le menu Burger vous offre de nombreuses options par rapport à l'icône du menu hamburger. Réglez à droite ou à gauche, sélectionnez parmi trois icônes (trois lignes, deux lignes ou trois points), choisissez des styles d'animation et choisissez la direction de l'animation. Je l'ai placé à gauche et sélectionné deux lignes.

Burger Menu General vous permet d'ajuster la hauteur du menu, de définir la distance entre l'icône de hamburger et le bord et le haut, et d'ajuster son opacité de survol. J'ai modifié chacun de ces ajustements dans cet exemple.

Les ajustements de l'icône du menu Burger vous permettent d'ajuster la taille et la couleur des lignes ou des points sur l'icône du hamburger pour les positions fermée et ouverte. Vous avez également le contrôle sur la hauteur de la ligne, le rayon de la bordure et l'espacement des lignes. C'est la position fermée. J'ai mis la couleur des lignes au rouge.

J'ai défini la couleur de l'icône ouverte sur or.

Pour celui-ci, j'ai placé l'icône du menu à droite et sélectionné trois lignes. J'ai ajusté les couleurs, la hauteur de la ligne, le rayon de la bordure et la position des trois lignes.

Vous pouvez également ajouter du texte. Il vous donne un contrôle total sur le texte, y compris la position horizontale et verticale, la taille de la police, la couleur et le style. Cet exemple inclut l'option avec trois points.

Burger Menu Background et Burger Menu Background Shadow fournissent des paramètres similaires aux boutons Divi. Ils incluent la couleur, la largeur, la hauteur, le rayon de la bordure, la longueur horizontale et verticale de l'ombre, le rayon de flou et la couleur de flou. J'ai ajusté la plupart des paramètres de cet exemple, en faisant de l'icône un carré plutôt qu'un cercle.

Injecter des mises en page

Injecter des mises en page vous permet de sélectionner des mises en page de votre bibliothèque Divi à injecter à divers endroits sur votre en-tête. Placez les mises en page au-dessus du menu, en dessous du menu ou au-dessus de l'en-tête personnalisé mobile.

Pour cet exemple, j'ai ajouté des sections du pack de mise en page que j'utilise pour placer un formulaire de contact au-dessus du menu et des informations de contact sous le menu. J'ai fait le menu en plein écran pour qu'il soit plus facile à voir.

Apparence du menu

L'apparence du menu vous permet de modifier la couleur d'arrière-plan, l'emplacement des liens, la taille de la police, la famille, la couleur, la couleur de survol, le côté de l'écran sur lequel il apparaît et la largeur de la zone de menu. J'ai déplacé le menu vers la gauche, modifié l'arrière-plan, augmenté la taille de la police, modifié la position à partir du haut de l'endroit où les liens apparaissent et centré les liens.

Pour celui-ci, j'ai réduit la zone de menu, augmenté les liens, justifié à droite les liens et ajusté la couleur de survol de la police.

Dans celui-ci, j'ai déplacé le menu vers la droite, l'ai élargi, justifié le texte à gauche, changé la couleur et injecté un formulaire de contact sous le menu.

Apparence du sous-menu

Il existe plusieurs styles d'affichage des sous-menus. C'est le style imbriqué de repli. J'ai laissé les paramètres par défaut. Vous pouvez également ajuster l'apparence, supprimer la bordure et modifier l'icône.

C'est Overlap Slide In. Vous pouvez ajuster la taille de la police, la couleur, la hauteur, la couleur de survol, la zone de contenu, etc. J'ai ajusté la plupart de ces paramètres pour cet exemple.

Il s'agit du style de sous-menu Côte à côte. Il place une icône de flèche, pointant vers les éléments du sous-menu. Vous pouvez régler la hauteur, la position, la couleur, etc. de l'icône d'ouverture et de fermeture. J'ai ajusté les paramètres de l'icône ouverte.

Arrêter l'empilement

L'un des problèmes avec l'injection de mises en page est que les modules s'empilent. Divi Mobile inclut un module Divi que vous pouvez ajouter à la mise en page qui l'empêchera de s'empiler. L'exemple ci-dessus est une disposition avec des éléments qui s'empilent.

Ajoutez simplement le module à la ligne. Rien d'autre n'est nécessaire.

Les colonnes ne s'empilent plus. En fonction de votre mise en page, vous devrez peut-être ajuster la largeur de votre menu pour que tout s'adapte comme vous le souhaitez. Il fonctionne également avec les autres dispositions et conceptions de menu. C'est une excellente façon de faire un méga menu.

Où acheter

Divi Mobile est disponible sur le site Web du développeur. Vous avez le choix entre plusieurs licences :

Annuel

• 1 site 12 £
• 2 à 5 emplacements 36 £
• 64 £ illimités

Durée de vie

• 1 emplacement 40 £
• 196 £ illimités

Il comprend 1 an de support. Vous recevrez des mises à jour tant que la licence est activée sur votre site Web.

Mettre fin aux pensées

C'est notre regard sur le plugin Divi Mobile. C'est un excellent plugin pour concevoir des menus mobiles. Je n'ai fait qu'effleurer la surface de ce qui peut être fait avec. Il est facile à utiliser et propose de nombreux réglages. J'aime qu'il utilise le personnalisateur de thème pour voir les changements en direct.

Il y a eu quelques fois où j'ai dû enregistrer et recharger la page pour voir les changements, mais cela aurait pu être mon serveur. J'aimerais voir un bouton de réinitialisation par défaut afin que vous puissiez facilement revenir aux paramètres par défaut comme vous le pouvez avec les commandes Divi standard. Cela pourrait ne pas être nécessaire, cependant.

J'ai été impressionné par ce que je pouvais faire avec Divi Mobile. Si vous êtes intéressé par un plugin Divi pour créer des menus mobiles personnalisés, Divi Mobile vaut le détour.

Nous voulons de vos nouvelles. Avez-vous essayé Divi Mobile ? Dites-nous ce que vous en pensez dans les commentaires.

Image en vedette via venimo / shutterstock.com