Avant toute chose, je vous invite à lire la documentation sur la « création d’un bloc article ».

Voyons maintenant comment créer et aligner deux articles sur une même ligne tout en garantissant un affichage responsive sur mobile.

Ci-dessous, un exemple de ce que nous voulons éviter :

Comme vous pouvez le voir, sur ordinateur, le rendu est correct, nous avons deux articles par ligne. En revanche, sur mobile, le responsive n’affiche pas les éléments comme espérés.

Ce n’est pas un bug, mais le comportement classique du HTML. Dans la librairie de bloc de l’éditeur de template, nous avons ajouté ce qu’il vous faut pour éviter ce type de déconvenue.

Ci-dessous, un exemple du rendu que nous voulons obtenir :

À noter :
Cette méthode est indispensable si vous souhaitez ajouter deux colonnes dédiées aux articles. Si vous ne souhaitez pas ajouter les images des articles alors, vous n’avez pas besoin de procéder comme suit.

2. Définissez les blocs selon le rendu que vous souhaitez avoir. Dans cet exemple, nous allons utiliser pour les deux blocs de la ligne 1 des images et pour les deux blocs de la ligne 2 des paragraphes.

3. Ensuite, nous allons créer un article avec l’image et le paragraphe situés à gauche. Puis nous ferons de même sur les blocs à droite.

4. Automatiquement, l’aperçu est complété par des contenus disponibles dans le flux.

5. Nous voyons qu’il y a uniquement les descriptions des articles qui sont renseignés, nous allons donc insérer la variable « Titre » (car nous souhaitons récupérer le titre et non la description de l'article) depuis les « Variables article » de l’éditeur de texte.

6. Pour respecter un alignement parfait des articles, il est conseillé de tronquer le texte que vous avez inséré via les variables. Ainsi, le nombre de caractères sera identique des deux côtés et l'alignement horizontal sera parfait.

Pour vérifier le rendu de la newsletter après avoir configuré vos blocs, je vous invite à vous envoyer une newsletter de test.
​