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 > Contenu de la page d'accueil (👉 Wizishop / 👉 Dropizi), 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 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éé:

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
(👉 Wizishop / 👉 Dropizi)
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 (👉 Wizishop /👉 Dropizi) . 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.

Etape 3

Retournons maintenant sur votre tableau.
Si vous souhaitez rediriger ces images vers votre fiche produit par exemple, faites un clic-droit sur l'image, et cliquez sur "Propriétés de l'image".

Cliquez sur l'onglet Lien et ajouter l'URL de votre page produit.

Résultat

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

 

Dernière mise à jour le : 19/04/2019

Avez-vous trouvé votre réponse?