Point culminant du plugin Divi – Gestionnaire de logo Divi

Les logos sont une partie importante de chaque site Web. Ils informent vos lecteurs de votre marque et fournissent une reconnaissance de marque. Ce qu'un site Web peut faire avec un logo est généralement limité. En utilisant Divi, nous pouvons ajuster la taille et les faire rétrécir ou disparaître lors du défilement. C'est très bien pour la majorité des sites Web, mais si vous vouliez en faire plus avec votre logo ? Vous pourriez être intéressé par un plugin tiers appelé Divi Logo Manager.

Divi Logo Manager est un plugin premium pour Divi qui vous permet de modifier les logos sur votre site Web. Vous pouvez utiliser un logo différent en fonction de l'appareil (mobile, tablette ou ordinateur de bureau), passer à un logo différent lors du défilement, définir un logo par page et ajuster la quantité de surplomb. Il est compatible avec les pages, les projets et les pages de produits WooCommerce.

Dans ce point culminant du plugin, nous examinerons ce que le plugin peut faire. Les images des exemples sont tirées de Unsplash.com.

Installation et paramètres de Divi Logo Manager

Téléchargez et activez le plugin zippé. Une fois activé, il est prêt à être utilisé. Tout le travail est effectué dans le menu Paramètres, sur les pages individuelles et sur les pages de produits WooCommerce. Dans le tableau de bord, allez dans Paramètres et sélectionnez Divi Logo Manager. À partir de là, vous pouvez sélectionner la taille en surplomb, le logo mobile, le logo de la tablette, le logo du bureau et le logo de défilement.

Le logo du bureau est ajouté dans les options du thème Divi. Tous les autres logos sont ajoutés sur cette page ou sur chaque page individuellement.

Surplomb

Il existe 9 options de porte-à-faux différentes qui vont de zéro à incroyablement grand et divers niveaux entre les deux. Cela ajoute un nouvel élément de conception qui vaut la peine d'être utilisé même si vous n'avez pas besoin de changer de logo.

Par page

Divi Logo Manager ajoute un nouvel ensemble de paramètres à vos pages, projets et pages de produits WooCommerce qui vous permettent de remplacer les paramètres que vous avez définis dans le menu principal afin que vous puissiez choisir un logo spécifique pour chaque page. Vous pouvez les définir pour le bureau, le mobile, la tablette et le défilement. C'est idéal pour les pages de destination, les offres spéciales, les pages de portfolio, les produits, etc.

Exemples de gestionnaire de logo Divi

Jetons un coup d'œil au logo sur chacun des appareils et avec différents niveaux de porte-à-faux. J'utiliserai les outils de développement de Google Chrome pour émuler des appareils mobiles et des tablettes.

Bureau

Pour le logo du bureau, j'ai utilisé une image artistique d'un lion. Il s'agit de la version standard du logo sans surplomb. Ce logo doit être chargé dans les paramètres du thème de Divi.

Maintenant que j'ai téléchargé un logo, il apparaît maintenant dans les paramètres du plugin.

Surplomb

Voici un aperçu de quelques-uns des surplombs. Celui-ci a un petit surplomb. C'est juste perceptible.

Celui-ci utilise un surplomb un peu plus grand. C'est plus visible et j'aime la façon dont cela se présente sur la page.

Celui-ci est de taille moyenne. C'est une bonne taille tout autour.

Celui-ci utilise un énorme surplomb. Il pourrait être trop grand pour certains modèles.

Celui-ci utilise un surplomb incroyablement grand. Il ne conviendrait pas à tous les designs, mais pour les designs, il aurait fière allure et se démarquerait. Avec ce niveau de choix, vous pouvez facilement trouver un surplomb qui fonctionne pour n'importe quel site Web.

La fonction de surplomb fonctionne avec Extra, mais pas la fonction d'échange de logo. Voici Extra avec un grand surplomb.

Faire défiler le logo

La fonction Scroll Logo vous permet de spécifier un logo qui ne s'affichera que lors du défilement. Dans cet exemple, j'ai ajouté un logo de défilement.

Le logo change dès que l'en-tête rétrécit.

Tablette

Voici un nouveau logo qui n'apparaîtra que sur les tablettes. Jetons un coup d'œil à quelques exemples utilisant les outils de développement de Google Chrome.

Celui-ci est un iPad. Il conserve le chevauchement même sur les appareils mobiles et de bureau. Le logo a changé pour correspondre au réglage de la tablette.

Voici un iPad en mode horizontal. Certaines tablettes affichent le logo du bureau si l'écran est suffisamment grand.

Il s'agit d'un Nexus 10 en mode portrait.

Voici le Nexus 10 en mode horizontal. Il affiche le logo du bureau.

Voici le Nexus 10 en défilement. Le logo change sur les tablettes comme sur les ordinateurs de bureau.

Il s'agit du porte-à-faux incroyablement grand sur un iPhone 6 Plus.

Celui-ci utilise un porte-à-faux moyen sur iPhone 6 Plus.

Celui-ci utilise un grand porte-à-faux.

Celui-ci utilise un petit surplomb.

Mobile

J'ai ajouté un logo pour mobile.

Celui-ci utilise Responsive avec un grand surplomb.

Celui-ci utilise le grand porte-à-faux avec l'iPhone 6 Plus.

Il s'agit de l'iPhone 6 Plus en mode horizontal.

Il s'agit du Galaxy Note 3.

Il s'agit du Galaxy Note 3 en mode horizontal. Vous devrez peut-être expérimenter avec le surplomb pour trouver le choix parfait pour votre site sur mobile.

Pages de produits WooCommerce

Cela fonctionne également sur les pages de produits WooCommerce. Cela fonctionne exactement de la même manière que les pages normales par défaut, il n'y a donc rien à configurer. C'est le logo régulier avec Large Overhang.

Pages de projet

Divi Logo Manager fonctionne également par défaut sur les pages Projet. Voici une page de projet avec un nouveau logo Desktop. Tout comme les pages ordinaires, les pages de projet incluent la personnalisation pour choisir un logo par page.

Par page

Vous pouvez sélectionner un logo personnalisé qui ne s'affiche que sur une page individuelle de votre choix. Dans l'éditeur visuel, vous verrez une nouvelle zone de personnalisation à droite appelée Divi Logo Manager. Ici, vous pouvez sélectionner les logos pour ordinateur de bureau, mobile, tablette et faire défiler page par page.

Dans cet exemple, j'ai créé un nouveau produit. Ce produit est tellement différent des autres que le logo standard ne correspond pas. Cette page produit pourrait bénéficier de son propre logo séparé.

Voici un aperçu des logos que j'ai choisis pour cette page à afficher.

Voici le logo du bureau utilisant un grand surplomb.

Voici le logo de défilement.

Il s'agit du logo mobile utilisant l'iPhone 6 Plus.

Il s'agit de l'iPhone 6 Plus en mode horizontal.

Voici le logo de la tablette utilisant un Nexus 10.

Retour à notre page d'origine… J'ai ajouté un nouveau logo pour le scroll que je souhaite uniquement afficher sur cette page.

Cette page utilise désormais le logo personnalisé lors du défilement.

Licence, mises à jour et assistance

Le plugin peut être installé sur un nombre illimité de sites Web pour vous et vos clients. Il comprend des mises à jour à vie et une assistance de 6 mois.

Pour plus d'informations, consultez le site Web de l'éditeur à KiwiWeb.co.uk.

Dernières pensées

Divi Logo Manager est simple et simple à utiliser. Sélectionnez simplement le logo que vous souhaitez afficher par appareil et pour le défilement, et définissez la quantité de surplomb. Les logos peuvent être remplacés pour chaque page individuellement. Overhang est un excellent moyen d'ajouter du pizazz et de faire ressortir votre site. Le surplomb peut être aussi caché ou aussi évident que vous le souhaitez. La fonction de surplomb à elle seule vaut la peine d'utiliser le plugin.

Si vous souhaitez choisir des logos en fonction de l'appareil, changer le logo lors du défilement ou ajouter une fonctionnalité de surplomb, Divi Logo Manager pourrait être le plugin dont vous avez besoin.

Nous aimerions vous entendre. Avez-vous utilisé Divi Logo Manager ? Dites-nous ce que vous en pensez dans les commentaires ci-dessous !

Image en vedette via SiuWing / shutterstock.com