Des moyens simples et créatifs d'afficher les logos d'entreprise dans Divi

Il existe de nombreuses raisons d'afficher des logos d'entreprise sur votre site Web. Une section « En vedette » des logos d'entreprise pourrait avoir de l'emprise sur les investisseurs ou partenaires potentiels. Ou une section « Nos clients incluent » pourrait établir une preuve sociale précieuse avec les visiteurs. Mais quelle qu'en soit la raison, il est important de savoir comment ajouter ces logos à votre site Web. Dans ce tutoriel, je vais passer en revue trois méthodes différentes pour ajouter des logos d'entreprise à votre site Web avec Divi. Je vais même vous montrer comment ajouter des galeries de logos à n'importe quel module Divi !

Voici ce qui sera couvert dans ce tutoriel :

• Préparer vos images de logo
• Utiliser le module Divi Gallery pour afficher des logos avec un simple glisser-déposer
• Utilisation de la galerie WordPress intégrée pour afficher des logos
• Utiliser le Divi Builder pour créer une mise en page personnalisée pour les logos

Commençons!

Aperçu

Voici un aperçu de quelques-unes des conceptions possibles en utilisant les techniques de ce tutoriel.

Préparer vos images de logo

Lors de la préparation de vos logos à afficher sur votre site Web, il est important que vous preniez le temps de dimensionner vos images à l'aide d'un éditeur de photos avant de les ajouter à votre site. Cela vous évitera d'avoir à essayer de dimensionner et de positionner vos logos avec des largeurs, un rembourrage ou des marges personnalisés. Croyez-moi. Vous ne voulez pas emprunter cette voie si vous n'y êtes pas obligé.

Étant donné que chaque logo a une taille unique, il est pratiquement impossible de les faire tous avoir les dimensions exactes. C'est là qu'un éditeur de photos est utile. Par exemple, en utilisant Photoshop, vous pouvez créer un nouveau fichier et définir les dimensions du document à la taille souhaitée pour toutes les images de votre logo (dans ce cas 226 px par 100 px).

Ajoutez ensuite l'image du logo au document, redimensionnez et positionnez l'image directement au centre. Assurez-vous qu'il s'agit d'un fichier image png avec un fond transparent.

Exportez ensuite l'image en tant que fichier png pour conserver l'arrière-plan transparent.

Répétez ensuite le processus pour le reste de vos logos.

Vous pouvez conserver la couleur d'origine du logo ou utiliser un éditeur de photos pour les changer en la couleur de votre choix. Si vous envisagez d'ajouter vos logos à l'aide d'un Divi (c'est-à-dire le module d'image ou la galerie d'images), vous pouvez toujours utiliser les effets de filtre intégrés de Divi pour ajuster également les couleurs.

Abonnez-vous à notre chaîne Youtube

#1 Utilisation du module Divi Gallery pour afficher les logos de l'entreprise (un simple glisser-déposer)

Cette première méthode pour ajouter des logos d'entreprise sur votre site avec Divi est à peu près aussi simple que possible. À l'aide de la fonction glisser-déposer de Divi, vous pouvez faire glisser tous les logos de l'entreprise dans Divi Builder pour créer instantanément une galerie d'images pour afficher vos logos dans une grille.

Pour ce faire, créez une nouvelle page et déployez le Divi Builder pour construire sur le front-end. Sélectionnez l'option « Créer à partir de zéro ». Une fois le constructeur Divi opérationnel, ouvrez le dossier contenant toutes vos images et sélectionnez-les. Ensuite, faites-les simplement glisser dans la fenêtre du navigateur avec le Divi Builder.

Divi ajoutera automatiquement ces images à un nouveau module de galerie et ouvrira les paramètres de la galerie pour démarrer le processus de personnalisation pour vous.

Étant donné que j'ajoute 8 images de logo et que je ne souhaite afficher aucun titre, légende ou pagination, je peux mettre à jour les éléments suivants :

Nombre d'images : 8
Afficher le titre et la légende : NON
Afficher la pagination : NON

Par défaut, le module de galerie ajoutera une superposition de survol avec une icône pour chaque image. Vous pouvez ajuster les paramètres de superposition pour la couleur de l'icône de zoom, la couleur de superposition de survol ou l'icône de survol.

Pour que les choses restent propres et simples, vous pouvez vous débarrasser de la superposition de survol en définissant la couleur de l'icône de zoom et la couleur de superposition sur transparent.

Après cela, vous pouvez explorer toutes les options de conception pour créer des conceptions uniques pour votre galerie d'images. Par exemple, vous pouvez ajouter une bordure avec une ombre de boîte subtile.

Largeur de la bordure de l'image : 1px
Couleur de la bordure de l'image : #dddddd
Image Box Shadow : voir capture d'écran

Voici à quoi ressemblerait la conception finale sur différentes tailles de navigateur.

Et comme cette galerie peut être ajoutée à n'importe quelle structure de colonnes, vous pouvez facilement créer des mises en page uniques pour les logos de votre entreprise. Voici un exemple de mise en page sur deux colonnes avec un module texte à gauche et le module galerie d'images (avec les logos) à droite. J'ai ajouté un dégradé de fond juste pour vous montrer un look différent.

#2 Utilisation de la galerie WordPress intégrée pour afficher les logos de l'entreprise (avec n'importe quel module Divi)

Vous pouvez également ajouter des logos d'entreprise à votre site Web à l'aide du shortcode WordPress Image Gallery. C'est étonnamment facile à faire et c'est parfait pour les logos car dans la plupart des cas, vous n'aurez pas besoin d'ajouter des styles personnalisés aux images. Ce qui est génial avec cette méthode, c'est que vous pouvez déployer jusqu'à 9 colonnes pour vos logos qui s'adaptent à la fenêtre de votre navigateur, ce qui vous permet également de conserver votre structure de colonnes sur mobile.

Voici comment faire.

Dans le Divi Builder, créez une nouvelle section avec une structure de colonne un quart trois quarts.

Supposons que vous souhaitiez avoir du texte à gauche des logos de votre entreprise dans une galerie de six colonnes. Ajoutez d'abord un module de texte dans la colonne de gauche et mettez à jour les éléments suivants :

Contenu : "Comme présenté dans"
Police du texte : Montserrat
Poids de la police de texte : gras
Taille du texte du texte : 26px
Orientation du texte : centre

Ajoutez maintenant un autre module de texte dans la colonne de droite. Sous l'onglet Contenu, supprimez le contenu fictif actuellement présent et cliquez sur le bouton "Ajouter un média" en haut de la boîte de l'éditeur de contenu.

Cela fera apparaître la fenêtre contextuelle Media Gallery. Cliquez ensuite sur le lien Créer une galerie à gauche de la fenêtre contextuelle. Sélectionnez ensuite les images du logo que vous souhaitez inclure dans la galerie (j'utilise huit images pour cet exemple). Cliquez ensuite sur le bouton Créer une galerie.

Cela fera apparaître la page Modifier la galerie dans la fenêtre contextuelle. Mettez à jour les paramètres de la Galerie dans la barre latérale droite comme suit :

Lien vers : Aucun
Colonnes : 8 (cela doit être égal au nombre d'images dans la galerie pour qu'elles restent sur une ligne)
Taille: Pleine Taille

Cliquez ensuite sur le bouton Créer une nouvelle galerie.

Cela intégrera le shortcode de galerie nécessaire intégré à WordPress et affichera la galerie dans le module de texte.

Ouvrez maintenant les paramètres de ligne et mettez à jour les éléments suivants :

Faire cette ligne pleine largeur : OUI
Utiliser une largeur de gouttière personnalisée : OUI
Largeur de gouttière : 1
Égaliser les hauteurs de colonne : OUI

Avec cette configuration, vous avez plus d'espace pour que vos logos respirent. Il ne reste plus qu'à ajuster le texte de gauche pour qu'il soit aligné verticalement avec les logos de droite. Vous pouvez ajouter le rembourrage personnalisé nécessaire à la colonne de gauche pour accomplir cela, mais afin de garantir que les deux modules restent centrés verticalement, vous pouvez ajouter le CSS personnalisé suivant à l'élément principal sous l'onglet Avancé des paramètres de ligne.

align-items: center;

Ce CSS fonctionne car nous définissons Equalize Column Heights sur YES, activant ainsi la propriété « display:flex » pour la ligne. Pour plus d'informations à ce sujet, découvrez comment aligner verticalement le contenu dans Divi.

Et pour supprimer la bordure grise autour de nos images, nous devons ajouter l'extrait CSS suivant à nos paramètres de page :

.gallery img {
border: none !important;
}

Voici la conception finale.

Le voici avec un fond noir ajouté à la rangée.

Sur mobile, les colonnes ne se cassent sur aucune taille d'écran. Les images s'adaptent simplement à une taille plus petite. J'admet. Huit colonnes, c'est probablement trop sur smartphone car les images deviennent très petites.

Intégrer des galeries de logos dans n'importe quel module Divi

Comme il s'agit d'une intégration de shortcode, vous pouvez ajouter cette galerie à presque n'importe quel module Divi, ce qui ouvre de nombreuses possibilités.

Par exemple, vous pouvez ajouter des images de logo à l'intérieur d'un module à bascule, d'un accordéon ou même d'un module d'onglets.

Voici un exemple de ce à quoi cela ressemblerait lorsque vous ajoutez le shortcode de la galerie wordpress de vos logos à deux onglets différents.
Pour cet exemple, j'ai sélectionné 6 logos avec 3 colonnes pour chaque galerie.

Cela peut être utile pour les sites nécessitant beaucoup de logos.

#3 Utiliser le Divi Builder pour créer une mise en page personnalisée pour les logos d'entreprise

Si vous souhaitez être un peu plus créatif avec la mise en page du logo de votre entreprise, vous pouvez utiliser le Divi Builder pour concevoir à peu près tout ce que vous pouvez imaginer. L'élément de ligne de Divi prend en charge les mises en page de colonnes jusqu'à 6 colonnes, ce qui est plus que suffisant pour la plupart des mises en page de logo d'entreprise. J'aime mieux les mises en page à 6 et 4 colonnes pour les logos, en grande partie pour leur réaction sur mobile.

Dans la conception suivante, je vais vous montrer quelques conseils sur la façon de faire passer la mise en page du logo de votre entreprise au niveau supérieur.

Tout d'abord, commençons par créer une nouvelle section avec une rangée de six colonnes.

Avant de commencer à ajouter quoi que ce soit à nos colonnes, accédez aux paramètres de ligne et mettez à jour les éléments suivants :

Largeur personnalisée : 90 %
Largeur de gouttière : 1
Égaliser les hauteurs de colonne : OUI

Rembourrage personnalisé : haut 4vw, bas 4vw

Enregistrer les paramètres.

Ajoutez ensuite un module d'image à votre première colonne puis sélectionnez l'une de vos images de logo.

Continuez ensuite à ajouter des images de logo à chaque colonne comme suit :

Colonne 1 : 1 logo
Colonne 2 : 2 logos
Colonne 3 : 3 logos
Colonne 4 : 3 logos
Colonne 5 : 2 logos
Colonne 6 : 1 logo

Maintenant, avec cette configuration, vous pouvez ajuster l'alignement vertical à l'aide d'un extrait de CSS personnalisé. Si vous vouliez centrer verticalement le contenu, vous pouvez ajouter le même extrait CSS que nous ajoutons pour centrer verticalement notre texte à côté de la galerie de logos dans #2 ci-dessus. Ouvrez les paramètres de ligne et ajoutez le CSS suivant à l'élément principal.

align-items: center;

Comme vous pouvez le voir, cela crée une disposition arrondie pour les logos.

Mais pour cette mise en page, je vais aligner les modules en bas de la rangée. Remplacez donc l'extrait de code "align-items: center" par ce qui suit :

align-items: flex-end;

Cela aligne tous les modules au bas de la rangée, ce qui fonctionnera bien avec la section Diviseurs que nous ajouterons.

Nous sommes maintenant prêts à personnaliser notre section. Ouvrez les paramètres de la section et mettez à jour les éléments suivants :

Arrière-plan : #2a3443

Style de séparateur supérieur : voir capture d'écran
Couleur du séparateur supérieur : rgba (255,255,255,0,03)
Hauteur du diviseur supérieur : 13vw
Haut diviseur Flip: vertical

Remplissage personnalisé : 0px en haut, 0px en bas

Pour notre rubrique, nous allons créer une nouvelle section et la placer au-dessus de la section que nous venons de créer. Créez une nouvelle section régulière avec une structure de ligne à une colonne.

Mettez à jour les paramètres de la section comme suit :

Couleur de fond : #2a3443

Style de séparateur inférieur : voir capture d'écran
Couleur du séparateur inférieur : rgba (238,238,238,0,09)
Hauteur du diviseur inférieur : 13vw

Rembourrage personnalisé : 0px en bas

Enregistrez maintenant vos paramètres et ajoutez un module de texte à la ligne et mettez à jour les éléments suivants :

Pour le contenu, ajoutez ce qui suit :

<h2>As Featured In</h2>

Police de la rubrique 2 : Montserrat
Poids de la police de l'en-tête 2 : gras
Titre 2 Alignement du texte : au centre
Titre 2 Couleur du texte : #ffffff
Titre 2 Taille du texte : 32 px

Marge personnalisée : 0px en bas

Enfin, ajoutez un module d'image sous le module de texte avec un logo d'entreprise que vous souhaitez démarquer des autres. Ensuite, mettez à jour les éléments suivants :

Alignement de l'image : centre
Marge personnalisée : -75px

Découvrez le résultat final.

Dernières pensées

Créer une section sur votre site Web pour les logos d'entreprise est en fait assez simple. Une fois que vous avez correctement dimensionné les images du logo à l'aide d'un éditeur de photos, Divi peut s'occuper du reste. Les méthodes abordées dans ce didacticiel devraient vous fournir tout ce dont vous avez besoin pour créer la mise en page que vous souhaitez obtenir avec un minimum d'effort. Et avec la puissance de Divi dans votre coin, vous devriez vous amuser à créer vos propres mises en page uniques.

J'ai hâte de vous entendre dans les commentaires.

À votre santé!