Comment envelopper du texte autour des images dans Divi (3 façons)

L'habillage de texte autour des images est une technique de conception courante que l'on trouve le plus souvent dans les médias imprimés comme les magazines et les journaux. Mais vous pouvez également trouver cela utilisé sur le Web, en particulier pour les articles de blog. L'habillage de texte autour d'une image est en fait une partie assez standard de WordPress impliquant un simple ajustement de l'alignement sur l'éditeur WYSIWYG. Le seul problème est qu'il est difficile de personnaliser le style de votre page en utilisant l'éditeur WordPress par défaut. C'est là que Divi peut vous aider !

Dans ce tutoriel, je vais vous montrer 3 façons dont vous pouvez utiliser Divi pour envelopper du texte autour des images. Cela vous permettra de créer des mises en page de style d'impression classiques avec la puissance de Divi pour vous aider dans la conception. Voici ce que nous allons couvrir :

1. Comment envelopper du texte autour d'images (et de guillemets) dans un module de texte avec l'éditeur WYSIWYG
2. Comment envelopper du texte autour d'une image en faisant flotter un module d'image à côté d'un module de texte dans Divi
3. Comment envelopper du texte autour d'une image centrée pour une mise en page unique à deux colonnes

Bien que ce tutoriel se concentre sur les images, vous pouvez en fait utiliser ce même processus pour envelopper du texte autour de n'importe quel module de Divi.

Aperçu

Voici un aperçu de la conception principale que nous allons construire aujourd'hui.

Commençons!

Abonnez-vous à notre chaîne Youtube

Téléchargez GRATUITEMENT la mise en page d'habillage du texte autour des images

Pour mettre la main sur les designs de ce tutoriel, vous devrez d'abord le télécharger en utilisant le bouton ci-dessous. Pour accéder au téléchargement, vous devrez vous inscrire à notre liste de diffusion Divi Daily en utilisant le formulaire ci-dessous. En tant que nouvel abonné, vous recevrez chaque lundi encore plus de bienfaits Divi et un pack Divi Layout gratuit ! Si vous êtes déjà sur la liste, entrez simplement votre adresse e-mail ci-dessous et cliquez sur télécharger. Vous ne serez pas « réinscrit » ni ne recevrez d'e-mails supplémentaires.

Télécharger les fichiers

Télécharger gratuitement

Rejoignez la newsletter Divi et nous vous enverrons par e-mail une copie du pack ultime de mise en page de la page de destination Divi, ainsi que des tonnes d'autres ressources, trucs et astuces Divi incroyables et gratuits. Suivez-le et vous serez un maître Divi en un rien de temps. Si vous êtes déjà abonné, saisissez simplement votre adresse e-mail ci-dessous et cliquez sur télécharger pour accéder au pack de mise en page.

TÉLÉCHARGER

Vous vous êtes enregistré avec succès. Veuillez vérifier votre adresse e-mail pour confirmer votre abonnement et accéder aux packs de mise en page Divi hebdomadaires gratuits !

Pour importer la mise en page sur votre page, extrayez simplement le fichier zip et faites glisser le fichier json dans le Divi Builder.

Passons au tutoriel, voulez-vous ?

Ce dont vous avez besoin pour commencer

Pour commencer, il vous suffit de Divi et de quelques images.

• Divi – Assurez-vous que le thème Divi est installé et actif. Nous allons créer nos designs à partir de zéro en utilisant le Divi Builder sur le front-end (constructeur visuel).
• Images - Assurez-vous également d'avoir au moins une image de 400 pixels sur 250 pixels à utiliser pour le didacticiel.

Lorsque vous êtes prêt, accédez à votre tableau de bord WordPress et accédez à Pages > Ajouter un nouveau. Donnez un titre à votre nouvelle page et déployez le Divi Builder sur le front-end. Sélectionnez l'option « Créer à partir de zéro ». Maintenant, vous êtes prêt à partir!

Comment envelopper du texte autour d'images et de citations dans un module de texte avec l'éditeur WYSIWYG

WordPress facilite l'habillage du texte autour des images à l'aide de l'éditeur WordPress par défaut (WYSIWYG). Et parce que le module de texte de Divi a le même éditeur WordPress WYSIWYG intégré, nous pouvons utiliser la même méthode que les utilisateurs de WordPress ont toujours utilisée pour envelopper le texte autour des images.

Voici comment procéder.

Créez une section régulière avec une ligne à une colonne, puis ajoutez un module de texte à la ligne.

Mettez à jour le contenu du module de texte avec votre copie. Pour l'instant, j'utilise quelques paragraphes de lorem ipsum.

Maintenant, si vous ne l'avez pas déjà fait, sélectionnez l'onglet visuel dans l'éditeur de contenu. Assurez-vous ensuite de cliquer en haut de la zone de contenu où vous souhaitez ajouter une image et cliquez sur le bouton Ajouter un média.

Dans la fenêtre contextuelle de la bibliothèque multimédia, sélectionnez l'image que vous souhaitez utiliser. Et sous les paramètres d'affichage des pièces jointes, choisissez la gauche ou la droite pour l'option d'alignement. Pour cet exemple, je veux positionner l'image vers la gauche.

WordPress ajoutera une classe à votre image (appelée « alignleft ») qui fera flotter l'image vers la gauche. La propriété float qui est ajoutée permettra au texte de s'enrouler autour de l'image. WordPress ajoutera également un tampon autour de l'image en utilisant des marges pour créer un petit espacement entre l'image et le texte environnant.

Et, bien sûr, si vous donnez à l'image un alignement à droite, l'image flottera vers la droite permettant au texte de s'enrouler autour de l'image.

Vous pouvez également utiliser une technique similaire pour envelopper du texte autour d'une citation de bloc dans un module de texte. Pour ce faire, créez un blockquote à l'aide de l'éditeur de contenu.

Ensuite, stylisez le blockquote à l'aide des paramètres de modules de texte intégrés pour un blockquote.

Revenez ensuite dans l'éditeur de contenu et passez à l'onglet texte. Ajoutez ensuite un style en ligne à la balise blockquote pour créer un espace autour du blockquote et faites-le flotter vers la gauche. Votre blockquote html devrait ressembler à ceci.

<blockquote style="margin: 0 15px 15px 0; float:left;">This is a <br> blockquote</blockquote>

Maintenant, le texte s'enroulera autour du blockquote.

Comment envelopper du texte autour d'une image en faisant flotter un module d'image à côté d'un module de texte dans Divi

Pour envelopper le texte autour d'un module d'image, nous pouvons faire flotter le module d'image entier à côté d'un module de texte. Cela peut être une méthode préférée pour utiliser l'éditeur WordPress ci-dessus car il vous permet un contrôle total sur le style de votre image à l'aide des paramètres du constructeur Divi au lieu d'ajouter un style en ligne ou un css externe à une balise d'image.

Voici comment procéder.

Créez une nouvelle section régulière avec une ligne à une colonne. Ajoutez ensuite un module d'image à la ligne avec l'image de votre choix. L'image que j'utilise provient du Charity Layout Pack et mesure 400px par 250px.

Ajoutez ensuite un module de texte sous le module d'image avec du contenu de texte fictif.

Maintenant que les deux modules sont en place, nous devons faire flotter l'image à gauche du module de texte. Pour ce faire, ouvrez les paramètres du module image et ajoutez le CSS personnalisé suivant à l'élément principal :

float:left;

Mettez ensuite à jour la marge personnalisée de l'image pour créer le tampon dont nous avons besoin pour l'habillage du texte autour de l'image :

Marge personnalisée : 2% en haut, 2% en bas, 2% à droite

Voici le résultat.

Et, si vous souhaitez faire flotter l'image vers la droite, ouvrez les paramètres du module d'image et remplacez le css par ce qui suit :

float:right;

Et mettez à jour l'espacement des marges comme suit :

Marge personnalisée : 2% en haut, 2 $ en bas, 2% restants

Voici le résultat.

Utilisation de cette conception sur plusieurs colonnes

Vous pouvez également utiliser cette configuration dans plusieurs colonnes pour créer une conception d'habillage de texte pour présenter vos services. Pour ce faire, modifiez la disposition des colonnes de votre ligne en deux colonnes.

Donnez ensuite à l'image une valeur de pourcentage de largeur maximale afin qu'elle réponde à différentes largeurs de navigateur.

Largeur maximale : 33,33 % (ordinateur de bureau), 100 % (téléphone)

Copiez le module image et texte de la première colonne et collez-les dans la colonne 2. Mettez ensuite à jour le contenu et les images si nécessaire.

C'est ça. Voici le résultat.

Comment envelopper du texte autour d'une image ou d'un module centré pour une mise en page unique à deux colonnes

Dans cet exemple, je vais vous montrer comment envelopper deux colonnes de texte autour d'un module d'image centré. Cela vous permet de créer une mise en page unique de style magazine ou journal. Mais, comme il n'y a pas de propriété css "float: center", nous devrons faire preuve d'un peu de créativité avec la mise en page pour que cette conception fonctionne.

Voici comment procéder.

Création du contenu de la première ligne avec une image centrée

Pour commencer, créez une nouvelle section régulière avec une ligne à une colonne. Ajoutez ensuite un module d'image à votre ligne. Téléchargez une image de 400px par 250px. Le dimensionnement doit être exact pour cette conception.

Mettez ensuite à jour les paramètres de conception comme suit :

Largeur maximale : 400 px (ordinateur de bureau), 100 % (tablette)
Alignement du module : centre
Rembourrage personnalisé : 2 % en haut, 2 % en bas, 2 % à gauche, 2 % à droite

Ensuite, enregistrez vos paramètres et ouvrez les paramètres de ligne. Retirez le rembourrage inférieur de la rangée.

Rembourrage personnalisé : 0px en bas

Créer la ligne de texte à deux colonnes

Sous la ligne contenant l'image, créez une nouvelle ligne avec une disposition en deux colonnes.

Dans la colonne 1, ajoutez un module de texte avec du contenu fictif.

Copiez ensuite le module de texte et collez-le dans la colonne 2 pour une deuxième colonne de texte.

Créer un espace vide avec des séparateurs flottants

Pour créer l'espace dont nous avons besoin pour l'image, nous pouvons utiliser des modules de séparation. Sur la colonne de gauche, nous allons créer un module diviseur qui fait la moitié de la taille de l'image et le faire flotter vers la droite afin que notre module de texte s'enroule autour du diviseur. Ensuite, dans la colonne de droite, nous allons créer un autre diviseur qui fait la moitié de la taille de l'image et le faire flotter vers la gauche.

Pour ce faire, créez un module de séparation et placez-le directement au-dessus du module de texte dans la colonne 1.

Mettez ensuite à jour les paramètres du module diviseur comme suit :

Afficher le diviseur : NON
Largeur : 200px
Hauteur : 250px

Assurez-vous que la hauteur est la même que celle de l'image que vous avez créée précédemment et que la largeur est exactement la moitié de la largeur de l'image.

Pour le mobile, nous souhaitons désactiver les séparateurs sur tablette et téléphone. Pour ce faire, mettez à jour les paramètres de visibilité pour désactiver l'affichage de la tablette et du téléphone.

Maintenant que notre premier diviseur est créé, copiez le module diviseur et collez-le au-dessus du module de texte dans la colonne 2.

Ensuite, nous devons faire flotter nos diviseurs. Pour ce faire, ouvrez les paramètres du séparateur dans la colonne 1 et ajoutez le CSS personnalisé suivant à l'élément principal :

float: right;

Ensuite, ouvrez les paramètres du module diviseur dans la colonne 2 et ajoutez le CSS personnalisé suivant à l'élément principal :

float: left;

Déplacer l'image en place avec une marge personnalisée

Il ne nous reste plus qu'à faire descendre notre image dans la première rangée pour qu'elle s'insère dans l'espace que nous avons créé avec nos séparateurs.

Ouvrez les paramètres du module d'image et ajoutez les marges personnalisées suivantes :

Marge personnalisée : -250 pixels en bas (ordinateur de bureau), 20 pixels (tablette)

Voici le résultat à ce jour.

Ajouter un titre à la section

Cette dernière étape est facultative, mais si vous souhaitez ajouter un titre à la section, créez un module de texte et positionnez-le au-dessus de l'image.

Ajoutez ensuite le contenu suivant au module de texte :

<h2>Learn more about how to give</h2>

Mettez ensuite à jour les paramètres de texte comme suit :

Couleur d'arrière-plan : #000000
Police du titre 2 : affichage Playfair
Titre 2 Alignement du texte : au centre
titre 2 Couleur du texte : #ffffff
En-tête 2 Hauteur de ligne : 2 em

Justifier le texte pour une conception d'habillage de texte plus propre

Lors de l'habillage du texte autour des images, en particulier si le texte est centré comme ceci, c'est toujours une bonne idée d'utiliser justifier le texte environnant. Dans ce cas, tout ce que nous avons à faire est de modifier l'orientation du texte pour justifier les deux modules de texte contenant notre contenu de texte d'habillage.

Résultat final

Voici le résultat final.

Et le voici sur l'écran de la tablette et du téléphone.

Dernières pensées

Savoir comment envelopper efficacement le texte autour des images peut vraiment donner à votre contenu un aspect professionnel et facile à lire. Le concept est assez simple. Tout ce que vous avez à faire est de faire flotter votre image vers la droite ou la gauche, puis d'utiliser un espacement personnalisé autour de l'image pour le tampon. Et ce que j'aime, c'est que vous pouvez faire flotter n'importe quel module (pas seulement des images) pour envelopper du texte autour de n'importe quel type de contenu dans Divi. J'espère que cela vous donnera un peu d'inspiration pour votre prochain projet.

J'ai hâte de vous entendre dans les commentaires.

À votre santé!