Comment positionner plusieurs images sur une seule ligne ?

 
Attention : Ce tutoriel détaille l'utilisation de notre ancien système de blocs, présent sur les fiches produits, pages catégories et le blog. Si vous souhaitez créer des blocs d'images alignées sur votre page d'accueil ou sur vos pages informatives, il faudra utiliser le WiziBlock Une ou plusieurs images.
 

Nous allons voir dans ce tutoriel comment positionner 3 images sur une même ligne dans un bloc image (NB : nous n'abordons ici que ce cas le plus courant, mais plusieurs dispositions différentes sont possibles). 

 

 

Étape 1 : Création d'un tableau

Pour ajouter vos trois images côte à côte, rendez-vous dans la rubrique dans laquelle vous souhaitez ajouter votre bloc (fiche produit, page catégorie ou article de blog). Cliquez sur Ajouter un Bloc texte, ou bien rendez-vous directement dans le bloc Description longue si vous êtes sur une fiche produit.  Cliquez sur l’icône Tableau dans la barre d'outils de l'éditeur.

 

 

Une fenêtre va s'ouvrir :

 


Vous devrez modifier les paramètres suivants et les remplir comme indiqués :

Lignes = 1
Colonnes = 3
Largeur = 100% 
Espacement des cellules = 0
Taille de la bordure = 0
Marge interne des cellules = 0

Pour tous les autres champs, ne touchez à rien.

Cliquez sur OK. Un tableau sera alors créé :

 

 

Cliquez ensuite sur le bouton Source dans le coin supérieur gauche de l'éditeur. 

 

 

La première ligne de code aura une largeur paramétrée par défaut à 100px (style="width:100px;")

 

<table border="0" cellpadding="0" cellspacing="0" style="width:100px;">

 

Notez qu'une fois vos images ajoutées, vous pourrez modifier cette largeur comme vous le souhaitez, si vos images sont trop petites. Il vous suffira de changer le nombre de px dans l'élément style="width:100px;"

 
 

Étape 2 : Ajout des images

La manipulation suivante consistera à insérer vos images dans le tableau. Pour s'afficher correctement, vos images devront ici être placées dans une balise HTML qui se présentera sous la forme : 

 

<img src="url-de-l-image" />  

 

Qui devra elle-même être entourée des balises suivantes :

 

<td>    </td>


Par exemple : 

 

<td><img src="https://media.cdnws.com/_i/50025/99/471/0/pexels-photo-57690.jpeg" /></td>

 

À placer comme suit : 

 

mceclip0.png

 

Pour récupérer l'URL de vos images à ajouter dans les balises, rendez-vous dans la rubrique Configuration (roue crantée) > Ajouter du CSS. Cliquez sur Ajouter / Sélectionner une image :

 

mceclip2.png
 

Une fois le gestionnaire d'images ouvert, rendez-vous dans l'onglet Ajouter une image ou Vos images (si l'image est déjà importée) ou Importer du web >  Sélectionnez une image > Confirmer.

 

mceclip3.png
 

Une fois confirmé, le gestionnaire d'images générera une URL que vous pourrez utiliser : 

 

mceclip4.png
 

C'est cette URL qu'il faudra ici placer entre les guillemets (cf paragraphe un peu plus haut) :

 

<img src="url-de-l-image" />  
 
 

Étape 3  : valider votre ajout de code

Rendez-vous maintenant dans la rubrique Configuration (roue crantée) > Ajouter du CSS. Collez le bloc de code suivant dans l'espace CSS à ajouter ou remplacer sur votre boutique en ligne :

 

table {
  border-collapse: collapse;
  margin: 0;
  padding: 0;
  width: 100% !important;
  table-layout: fixed;
  border: 0;
}

table tr {
  padding: .35em;
}

table td {
  text-align: center;
}

.bloc table td:nth-child(2) {
    padding: 0 5px;
}

.bloc table td:nth-child(1) {
    padding: 0 10px 0 0;
}

.bloc table td:nth-child(3) {
    padding: 0 0 0 10px;
}

 

Le résultat dans votre espace administration :

 

mceclip5.png


Si vous avez déjà ajouté votre propre CSS, veillez à bien ajouter ce bloc en dessous de votre dernière ligne de code.

N'oubliez pas de cliquer sur Enregistrer pour que votre CSS personnalisé soit bien appliqué.

Attention : si vous avez déjà des tableaux personnalisés avec du CSS sur certaines pages de votre boutique, nous vous déconseillons d'utiliser ce bloc de code car vos personnalisations antérieures pourraient être modifiées.

 

Étape 4 : Ajouter un lien sur chaque image

Retournons maintenant sur votre tableau. Si vous souhaitez ajouter des liens sur chacune de vos images, il vous suffira de faire un clic-droit sur chaque image puis de cliquer sur "Propriétés de l'image".

 

 

Cliquez sur l'onglet Lien et ajoutez l'URL de votre lien.

 

 

Résultat

Voici un exemple de rendu sur une description de fiche produit (avec 3 images identiques) : 

 

mceclip6.png

 

💬 N’hésitez pas à contacter vos Business Coachs si vous avez des questions !