Comment mettre en valeur les logos sur WordPress (avec/sans plugin)

Comment mettre en valeur les logos sur WordPress (avec/sans plugin)

Un logo est une représentation visuelle puissante d'une marque. Lorsque votre entreprise est liée à d'autres marques, que ce soit par le biais d'un partenariat ou d'une affiliation, vous pouvez avoir besoin d'afficher leurs logos sur votre site web afin d'instaurer un climat de confiance et de crédibilité parmi les visiteurs du site.

Par exemple, si vous avez un site de portfolio, vous devez afficher les logos des marques avec lesquelles vous avez travaillé. Il en va de même pour de nombreux autres sites web. WordPress vous permet de le faire de différentes manières simples et faciles.

Dans ce tutoriel, nous vous montrerons les deux méthodes les plus simples pour mettre en valeur des logos dans WordPress, avec et sans plugin. Commencez !

Première méthode : sans plugin (en utilisant le bloc de colonnes)

La colonne est un bloc par défaut de l'éditeur Gutenberg.

Étape 01 : Ajouter le bloc de colonnes à l'éditeur

Ajouter Bloc de colonnes dans l'éditeur en cliquant sur le bouton icône plus (+).

Ajouter le bloc Colonnes à l'éditeur

Étape 02 : Sélection d'une disposition de colonnes

Sélectionnez une disposition en colonnes. Plus vous sélectionnez de colonnes, plus vous pouvez ajouter de logos. Sélectionnons la mise en page 33/33/33.

Sélectionner une disposition de colonnes

Une fois le bloc ajouté, vous pouvez augmenter le nombre de colonnes.

Pour ce faire, cliquer les Icône de colonne dans la barre d'outilsAller à les Onglet Paramètres. Ensuite, venez au Section des colonnes.

Vous pouvez augmenter le nombre de colonnesmber en faisant glisser l'échelle ou en tapant directement un chiffre.

Augmenter le nombre de colonnes

Étape 03 : Ajouter le bloc d'images aux colonnes individuellement

Vous pouvez ajouter tous les autres blocs Gutenberg dans les colonnes. Allez dans la section première colonne et cliquer les icône plus (+).

Type d'image dans la boîte de recherche. Une fois que le bloc apparaît, ajoutez-le à la colonne.

Ajouter le bloc d'images aux colonnes individuellement

Téléchargez maintenant un logo à partir de votre disque local ou de la bibliothèque multimédia.

Télécharger le logo dans le bloc de colonnes Gutenberg

Vous pouvez voir que nous avons ajouté un logo au bloc de colonnes.

Logo ajouté au bloc de colonnes

Étape 04 : Ajouter des logos aux autres colonnes, un par un

De la même manière, ajoutez des logos aux autres colonnes du bloc.

Ajouter des logos aux autres colonnes

Étape 05 : Styliser le bloc de colonnes

Pour styliser le bloc, aller à les Onglet Styles sur la barre latérale droite.

Styliser le bloc de colonnes après l'ajout de logos

En faisant défiler l'onglet, venir à Espacement des blocs. Cette section vous permettra d'ajouter des espaces entre les logos verticalement et horizontalement. Mais dans ce cas, il est préférable d'ajouter des espaces horizontalement.

Ensuite, ajouter une bordure autour de l'ensemble du bloc de colonnes. Vous pouvez modifier la couleur et la largeur de la bordure.

Ajouter un espace entre les colonnes et une bordure

Pour une personnalisation avancée, vous devez utiliser un plugin tiers. Nous allons expliquer la méthode suivante avec un tel plugin.

Deuxième méthode : utilisation d'un plugin (Tableberg)

Tableberg est un plugin polyvalent qui permet de créer des tableaux, des boîtes d'icônes, des boîtes d'images, des boîtes de logos, etc. Vous pouvez présenter des logos avec des personnalisations avancées sur votre site web avec ce plugin. Obtenez-le à partir du coup de bannière.

Créer de belles tables
Avec l'éditeur de blocs

Une fois installé, suivez les instructions ci-dessous.

Étape 01 : Ajouter le bloc Tableberg à l'éditeur

Le plugin ajoute un bloc à la bibliothèque de blocs de Gutenberg nommé Tableberg. Ajouter le bloc à l'éditeur.

Ajouter le bloc TableBerg à votre éditeur Gutenberg

Vous devez définir des cellules de tableau pour le nombre de logos que vous souhaitez afficher. Il suffit de créer le nombre de cellules requis en spécifiant le nombre de lignes et de colonnes.

Par exemple, nous avons besoin de huit cellules pour afficher huit logos. Définir le numéro de la colonne et de la ligne 4*2.

Sélectionner le nombre de lignes et de colonnes

Le nombre requis de cellules est créé, comme vous pouvez le voir.

Cellules créées pour l'affichage de logos

Étape 02 : Commencer à ajouter des logos aux cellules Tableberg

Tableberg vous permet d'ajouter plusieurs blocs personnalisés aux cellules. Rechercher et ajouter le bloc Image à une cellule.

Ajouter des logos aux cellules Tableberg

Aujourd'hui, télécharger un logo, que ce soit par téléchargement ou à partir de la médiathèque.

Logo ajouté à la cellule Tableberg

Ajouter tous les autres logos au reste des cellules Tableberg.

Ajouter tous les logos aux cellules Tableberg

Étape 03 : Styliser les cellules

Aujourd'hui, aller à les onglet styles tout en gardant l'ensemble du tableau sélectionné. Vous pouvez modifier la couleur d'arrière-plan individuellement pour toutes les lignes et cellules. Mais comme nous n'en avons pas besoin pour ce tutoriel, nous laissons cette option de côté.

Styliser les logos affichés avec Tableberg

Venez à les Espacement des cellules en faisant défiler l'onglet vers le bas. En utilisant les options de cette section, vous pouvez ajouter des espaces entre les colonnes du logo, à la fois verticalement et horizontalement.

Ajouter de l'espace entre les cellules du logo

Bordure "Come to Table. Dans la section Bordure intérieure, vous pouvez modifier la couleur et le rayon de la bordure.

Ajouter la couleur et le rayon de la bordure

Vous pouvez ainsi donner un aspect esthétique aux colonnes du logo.

Conclusion

Tableberg est un plugin polyvalent passionnant qui vous permet de créer de nombreux designs étonnants pour votre site web. Avant de quitter le site, vous pouvez consulter d'autres tutoriels sur le plugin.



L'équipe Tableberg