Table des matières
Avez-vous besoin de placer du texte autour de l'image de manière élégante ? Apprenez à le faire facilement sans expérience de codage et de conception. L'éditeur Gutenberg apporte plus d'options pour envelopper du texte autour du texte dans WordPress.
Vous pouvez obtenir simultanément un site Web attrayant et une routine d'édition de contenu facile. Choisir l'éditeur Gutenberg pour votre site Web WordPress vous donne le meilleur outil à long terme. Vous aurez plus d'options pour envelopper le texte autour des images différemment. Gutenberg apporte de nombreux avantages comme un code source plus clair du site Web, la vitesse, la sécurité et la convivialité.
Comment enrouler du texte autour de l'image dans WordPress ?
L'éditeur et les blocs Gutenberg rendent le contenu du site Web plus léger, moderne et lisible sans effort. Nous vous montrons également d'autres façons d'envelopper du texte autour de l'image dans les types de pages WordPress, de publication et de publication personnalisée. Il existe différents blocs, et vous pouvez également les utiliser en combinaison, comme un ensemble de pièces et de fonctionnalités qui vous offrent des options supplémentaires pour l'enveloppe.
Vous pouvez sélectionner le bloc pour le texte enveloppé autour de l'image en fonction de la sous-page et de son type de contenu. Vous pouvez choisir un style pour la page de présentation et un autre pour un article de blog. Tenez également compte du type de contenu qui représente l'image. S'agit-il d'une image de description ou d'un média plus représentatif ou vendeur ?
Envelopper le texte autour de l'image - Sélection de blocs
Il existe 4 blocs que vous pouvez utiliser pour envelopper un bloc de texte autour d'une image. Nous les décrivons tous :
- Bloc d'image et bloc de paragraphe en savoir plus ci-dessous
- Bloc Média et texte en savoir plus ci-dessous
- Bloc de colonnes en poste individuel
- Bloc de cluster dans un message individuel (fonctionnalité disponible uniquement avec Plugin Citadela Pro)
Enveloppez le texte et l'image pour une meilleure expérience de lecture
Il y a plusieurs raisons pour lesquelles vous devriez utiliser ce bloc. Vous l'apprécierez le plus si vous écrivez des articles de blog. Les images font partie intégrante de l'histoire. Peu importe si vous écrivez un blog de voyage ou un magazine sur l'actualité informatique. Ainsi, lorsque vous ajoutez des photos dans votre contenu, pensez à l'alignement des images. Les lecteurs seront en mesure de mieux comprendre ce que vous écrivez.
Dans de nombreux cas, il est nécessaire d'insérer l'image et le texte côte à côte. Ce qui est important?
- Cela doit avoir un sens. L'image doit être à côté du bon texte.
- Il doit être bien aligné.
- Il doit s'adapter à l'ensemble de la mise en page du site Web.
Blocs Image et Paragraphe
Alors que dans le Éditeur classique vous pouvez également placer du texte à côté de l'image, vous ne pouvez pas parler d'un bel alignement. Surtout si l'image était petite et que vous mettez plus de texte à côté. Le texte recouvrait l'image et ça n'avait pas l'air sympa.
Éditeur Gutenberg et son bloc Image apportent une fonctionnalité intéressante - le redimensionnement de l'image. Faites glisser des points autour de l'image pour modifier automatiquement sa taille et l'alignement du texte.
Bloc média et texte – WordPress aligne le texte à côté de l'image
- Enveloppez le texte et les images avec le bloc Média et texte
- Comment ajouter un bloc média et texte dans l'éditeur
- Comment fonctionne ce bloc
- Paramètres de bloc de médias et de texte
- Que signifie "Pile sur mobile " moyenne
- Bonus : Comment justifier du texte dans WordPress
Comment aligner le texte à côté de l'image ?
Commencez maintenant
Paiement unique. Garantie de remboursement de 30 jours.
Le bloc Média et texte est une fonctionnalité fantastique. Le bloc Média et texte résout ce problème et assure un alignement parfait du texte sur l'image sans perturber la composition et la mise en page. C'est la raison pour laquelle vous devriez utiliser ce bloc.
Il améliore également la conception de sites Web sur les appareils mobiles. Ce bloc d'emballage aide le thème WordPress à couvrir différentes mises en page mobiles. Sur smartphone, chaque partie du site doit être clairement visible et lisible. À quoi ressemblera le bloc Media & Text sur les téléphones mobiles et les poignées de table Fonction "Empiler sur mobile" que nous examinerons ci-dessous.
Dans peu de temps, vous pourrez utiliser le bloc Media & Text dans notre nouveau thème WordPress appelé Citadela. En savoir plus sur le thème Citadela dans un article séparé.
Comment ajouter un bloc Média & Texte dans l'éditeur de blocs ?
L'ajout d'un bloc de médias et de texte est aussi simple que l'ajout de n'importe quel autre bloc. C'est un bloc de base qui signifie que vous n'avez pas besoin de télécharger ou d'installer quoi que ce soit.
En utilisant l'icône "+" dans le panneau supérieur ou n'importe où dans l'éditeur et en sélectionnant le bloc Média et texte.
La dernière option est de taper "/" et d'écrire "media" après. WordPress vous montrera automatiquement les blocs sélectionnés correspondant à ce que vous avez recherché.
Comment fonctionne le bloc Médias et texte ?
Le bloc Média et texte regroupe essentiellement 2 types de contenu différents en un seul. Le premier est moyen, par exemple une image ou une vidéo que vous pouvez ajouter via :
- Télécharger
- Médiathèque
- Glisser-déposer
Le deuxième est l'espace pour le contenu du texte. Vous pouvez y écrire des paragraphes de texte, des listes à puces ou des titres. Vous pouvez également y ajouter Bloc de boutons dont nous parlions tout à l'heure.
Le bloc Média et texte aligne toujours l'image et le texte côte à côte, quelle que soit la quantité de texte que vous écrivez. Comment ça marche? L'image s'ajuste automatiquement en fonction de la hauteur du contenu dans la colonne de texte.
Paramètres de bloc média et texte
Paramètres généraux du bloc
1. Barre d'outils supérieure
La barre d'outils au-dessus du bloc offre plusieurs options. Si votre thème actif le prend en charge, vous pouvez définir le bloc Média et texte sur large ou pleine largeur. Vous pouvez également choisir où vous souhaitez placer l'image ou la vidéo en cliquant sur :
- Afficher le média à gauche
- Afficher le média à droite
Dans la barre d'outils supérieure, il y a aussi une icône pour éditer le support où vous pouvez définir le texte alternatif, le titre, la légende ou la description. En savoir plus sur l'édition d'images dans notre article Travailler avec le bloc d'images WordPress.
2. Barre latérale droite
La barre latérale droite offre un paramètre supplémentaire pour le bloc Média et texte. Il est possible d'ajouter ici un texte alternatif, de définir une couleur d'arrière-plan ou d'ajouter une classe CSS supplémentaire. Vous pouvez également activer la fonction "Empiler sur mobile".
Qu'est-ce que Stack sur mobile ?
Grâce à cette fonction, l'image et le texte sont bien affichés sur les appareils mobiles. Si vous désactivez "Empiler sur mobile", l'image et le texte resteront côte à côte et seront difficilement lisibles en version responsive.
Si vous activez cette fonction, le contenu du téléphone mobile sur le côté gauche sera affiché au-dessus du contenu qui se trouve sur le côté droit.
Alignement du texte
Une partie du bloc Média et texte est associée à une image ou à une vidéo, ainsi qu'à du contenu textuel. Il peut s'agir de l'un des types de contenu suivants :
1. Paragraphe
Dans la barre d'outils supérieure, vous pouvez définir l'alignement du texte, mettre le texte en gras, en italique ou ajouter un lien URL.
Dans la barre latérale sur le côté droit, vous pouvez choisir la taille de la police, la couleur de la police ou la couleur du paragraphe. La fonction intéressante est « Drop Cap » qui mettra en évidence le premier caractère du texte. C'est une fonctionnalité intéressante dans les messages bloqués pour rendre le texte plus intéressant.
2. Cap
Le titre est très similaire au paragraphe. Vous pouvez également configurer son apparence, mettre en gras ou en italique et insérer un lien URL. La différence est que vous pouvez choisir le type de titre - H2, H3, H4.
D'autres tailles de titre et paramètres d'alignement sont disponibles dans la barre latérale sur le côté droit.
3. Liste
Si vous ajoutez un bloc de liste à votre contenu, il peut s'agir de puces, d'une liste numérotée ou d'une liste à plusieurs niveaux. Vous pouvez également mettre du texte en gras, en italique et ajouter un lien URL.
4. Bloc de boutons
Ce bloc qui ajoute un bouton au contenu peut être ajusté à la conception du site Web. La couleur et le style des boutons ou la couleur d'arrière-plan peuvent être configurés dans la barre latérale sur le côté droit.
N'oubliez pas de lire l'article sur Bloc de boutons.
Basculer entre les types de blocs
Dans le bloc Média et texte, il est possible de convertir un type de bloc de contenu en un autre. Vous pouvez également modifier le bloc Média et texte en bloc Image et la partie texte sera supprimée.
Dans le contenu textuel, il est possible de changer le bloc Paragraphe en bloc Titre ou Liste.
Bonus : Comment justifier du texte dans WordPress
L'utilisation d'un texte justifié a ses avantages et ses inconvénients. Le texte justifié se trouve généralement dans les livres ou les journaux, mais il n'est plus utilisé sur les sites Web. Pourquoi?
Il y a plusieurs années, la fonction Justify était intégrée directement dans l'éditeur WordPress Classic. Texte justifié utilisé pour causer des problèmes de visibilité dans divers navigateurs ou appareils mobiles. Il est également lié à la lisibilité difficile du texte justifié. Cette fonction a donc été dépréciée et supprimée.
Cette fonctionnalité particulière n'existe pas non plus dans le nouvel éditeur de blocs (Gutenberg).
Alors, comment justifier un texte si vous le voulez vraiment ?
La solution consiste à ajouter un code CSS simple en quelques étapes :
- Il y a un paramètre pour le bloc CSS supplémentaire de classe de paragraphe dans la barre latérale sur le côté droit
- Écrivez-y le nom de la classe „justifier"
- Publier une page ou un article
- Si vous le prévisualisez, cliquez sur Personnaliser dans la barre supérieure principale
- Sur le côté gauche, il y a une nouvelle barre latérale avec des paramètres
- Cliquez sur CSS supplémentaire
- Insérez le code CCS suivant :
p.justifier { text-align : justifier ; }
Fait. Désormais, le texte de votre bloc Média et texte est justifié.
WordPress est devenu plus utilisable sans constructeurs de pages tiers, grâce à l'éditeur Gutenberg. Il a une excellente valeur pour votre site Web d'un point de vue à long terme et lors de la création ou de la refonte d'un site Web. Les blocs Gutenberg offrent une large gamme de styles, mais vous pourriez trouver la main Code WordPress pour envelopper du texte autour des images.
Quelle est votre opinion sur le bloc Media & Text ? L'avez-vous déjà utilisé ? Comment aimez-vous travailler avec? Faites-le nous savoir dans les commentaires ci-dessous.
En général, j'aime le système de blocs, mais à moins qu'il ne me manque quelque chose, c'est un pas en arrière. Je cherche actuellement à faire simplement flotter une image à gauche ou à droite et à faire envelopper le texte, ce qui devrait être si facile à faire, mais il semble que WordPress ne veuille tout simplement pas que cela se produise. Pourquoi pas? L'utilisation du bloc média et image ne fonctionne que si le texte est de la bonne longueur. Une page comme celle-ci par exemple ne veut pas être refaite avec un espacement impair entre les paragraphes si le texte n'est pas exactement de la bonne longueur pour la taille de l'image.
http://www.thorntonincraven.co.uk/our-village/welcome-to-the-village/
Bonjour,
Merci beaucoup pour votre retour. Cela semble être une très bonne idée, donc je voudrais vous demander de nous donner une minute de votre temps pour répondre à 4 questions simples : https://aitthemes.typeform.com/to/vc7arn qui peuvent aider notre équipe à fabriquer de meilleurs produits avec fonctionnalités uniques plus rapidement.
Merci beaucoup pour votre temps et votre compréhension.
Meilleures salutations!
Zlatko
L'équipe ACI
Oui, je n'arrive pas à envelopper le texte. Ces combinaisons de blocs de texte semblent inutiles.
Cette idée est nulle car c'est la seule façon d'insérer des images dans un blog – je n'arrive pas à bien emballer le texte et ce n'est pas la même taille, peu importe ce que je fais. Bonne idée pour CERTAINES situations, mais pas pour tout. Parfois, vous voulez juste une image avec les paragraphes qui l'entourent, plutôt que de dire quelque chose à propos de l'image.
Comment ajouter un wrapper et utiliser le contenu en pleine largeur yar sérieusement comment couvrir complètement puis y prendre un conteneur .. le constructeur est très déroutant comment ajouter un wrap de conteneur très mauvais éditeur yar
Bonjour,
Merci pour tes compliments. N'hésitez pas à consulter notre page de blog https://www.ait-themes.club/blog/ où vous trouverez de nombreux conseils utiles pour rédiger des articles attrayants et utiles.
Meilleures salutations!
Zlatko
L'équipe ACI
Bonjour Abder,
Merci beaucoup pour votre commentaire, il est très apprécié par notre équipe !
Cordialement.
Zlatko
L'équipe ACI
J'ai le même problème que plusieurs personnes sur ce fil. Dans le passé, je pouvais facilement enrouler du texte autour d'une image comme dans notre page "à propos de nous" où nous avons des photos et des biographies. peut-être que j'utilisais l'ancien éditeur. Je ne m'en souviens pas. mais, j'essaie maintenant de mettre à jour notre site avec de nouvelles photos et biographies et je n'ai pas trouvé de moyen d'envelopper facilement le texte comme sur nos précédentes combinaisons bio/photo. J'ai essayé de passer à l'éditeur classique, mais le site m'a averti que j'avais des sections "nouvel éditeur de blocs" et que je devais rester avec le nouveau mode d'édition. pouvez-vous me dire comment faire en sorte que nos nouvelles biographies et photos ressemblent à nos publications précédentes ? merci.
Salut,
Si vous souhaitez désactiver Gutenberg et continuer avec l'éditeur WordPress classique, veuillez envisager un plugin de l'équipe principale de WordPress qui vous permet de le faire avec "Classic Editor Plugin".
Cordialement!
Zlatko
L'équipe ACI
Pour ceux qui veulent juste un simple habillage de texte autour de l'image, vous pouvez le faire en insérant le bloc de texte classique (basé dans la première partie des blocs lorsque vous cliquez sur Parcourir. Vous pouvez utiliser l'éditeur classique dans un seul bloc et oui , qui permet d'insérer une image puis de choisir l'option d'habillage. Problème résolu 🙂
MERCI London SEO Guy !!! Une solution simple mais je l'avais oublié !
Et puis… utilisez simplement l'option Convertir en blocs.
Puisque cela fonctionne, l'éditeur de blocs a la capacité mais ne trouve pas comment le configurer correctement. En attendant, ce fudge fonctionne.
Même problème ici. Cette nouvelle version est horrible - aucun moyen d'envelopper correctement le texte ou même de réduire la taille de la photo, à moins que vous ne vouliez simplement recadrer.
Je suis capable d'envelopper mon texte autour d'une image dans l'éditeur de blocs WordPress. Il ressemble exactement à ce que je veux qu'il apparaisse dans "Aperçu". Cependant, lorsque je publie mon blog et que WordPress l'envoie par e-mail à mes abonnés, ils le reçoivent avec l'image en haut et le texte sous l'image. Cela se produit également sur les ordinateurs de bureau, pas seulement sur les petits téléphones portables. Je le veux emballé, pas empilé.
Bonjour,
Merci d'avoir écrit. Le bloc n'enroulera pas le texte autour de l'image dans WordPress comme vous vous y attendiez. Veuillez consulter les instructions suivantes, car elles pourraient vous être utiles : https://motopress.com/blog/how-to-wrap-text-around-images-in-gutenberg/
Cordialement!
Zlatko
L'équipe ACI
Je fais tout cela, et mon blog s'intègre parfaitement dans Preview. Quand je le publie, il a fière allure sur ma page de blog. Mais lorsque WordPress l'envoie par e-mail à mes abonnés et qu'ils ouvrent cet e-mail, ils ne le voient pas enveloppé. Les photos sont au-dessus du texte. C'est très peu professionnel. Je n'ai jamais eu ce problème avec l'ancien éditeur classique. Maintenant que j'utilise l'éditeur de blocs, il ne me permet pas de revenir à l'éditeur classique, même s'il existe une option classique sur laquelle cliquer.
Bonjour,
Merci d'avoir écrit.
Nous aimerions vous demander de consulter notre base de connaissances et/ou notre documentation avec des didacticiels vidéo :
https://www.ait-themes.club/ait-themes-documentation/
Ou n'hésitez pas à poster des questions techniques directement dans notre système de ticket d'assistance dédié. Veuillez vous connecter à votre compte sur https://system.ait-themes.club/support/add-question.
Le support client est fourni pendant les jours ouvrables de 8h00 à 17h00, heure d'Europe centrale.
De plus, il existe un plugin qui vous permet d'utiliser l'éditeur précédent. Vous devez installer et activer "l'éditeur classique".
Sincèrement!
Zlatko
L'équipe ACI
Je ne suis pas d'accord avec cela, c'est supérieur à l'édition classique, car les options sont plus limitées. Je trouve que ce bloc, parce qu'il utilise des polices différentes et qu'il est plus large qu'un bloc de texte, est visuellement choquant. Être capable d'envelopper du texte en douceur autour d'une image tout en conservant les mêmes paramètres de police, de taille et de marge apporte le professionnalisme d'une page de magazine. Ce n'est qu'un exemple de la raison pour laquelle je suis profondément déçu par cette version de wordpress.
Salut Térence
Merci pour votre avis. Avez-vous essayé notre version d'essai Citadela ? Nous avons des blocs uniques qui pourraient vous aider à ajuster le texte et les images. Quoi qu'il en soit, vous pouvez tester la version complète - toutes les fonctionnalités, gratuitement.
Passe une bonne journée.