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


Étape 1 : 

Pour ajouter trois images côte à côte sur votre page d'accueil (la même méthode pourra être utilisée pour une page libre ou dans un article de blog), rendez-vous dans la rubrique Contenu > Contenus > Contenu de la page d'accueil, puis cliquez sur Ajouter un Bloc texte. 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 uniquement :

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éé:

La manipulation suivante consistera à y insérer vos images. Pour cela, cliquez sur le bouton Source dans le coin supérieur gauche de l'éditeur. 

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" />  

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

 <td>    </td>


Comme ceci par exemple : 

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


Pour remplir les 3 cases de votre tableau, vous aurez donc ici besoin de 3 lignes de <td>, dans lesquelles vous placerez les urls de vos images. 

Voici comment récupérer l'url de votre image dans le gestionnaire d'images: 

Rendez-vous dans la rubrique Configuration (roue crantée) > Ajouter du css > Télécharger une image à insérer dans votre CSS personnalisé > cliquez sur ajouter / sélectionner une image :

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.

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

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

Étape 2 : 

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;
}


Si vous avez déjà ajouté votre propre CSS, ajoutez alors 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.

Voici un exemple de rendu sur la page d'accueil : 

 

Date de mise à jour : le 20/12/18.

Avez-vous trouvé votre réponse?