{"id":372088,"date":"2023-05-08T13:52:00","date_gmt":"2023-05-08T10:52:00","guid":{"rendered":"https:\/\/themewp.inform.click\/?p=372088"},"modified":"2023-05-08T14:07:15","modified_gmt":"2023-05-08T11:07:15","slug":"comment-ajouter-modifier-et-personnaliser-des-colonnes-elementor","status":"publish","type":"post","link":"https:\/\/themewp.inform.click\/fr\/comment-ajouter-modifier-et-personnaliser-des-colonnes-elementor\/","title":{"rendered":"Comment ajouter, modifier et personnaliser des colonnes Elementor"},"content":{"rendered":"\n

Le plugin Elementor WordPress<\/a> est l’un des constructeurs de pages les plus populaires pour une raison. Le secret du succ\u00e8s d’Elementor r\u00e9side dans sa facilit\u00e9 d’utilisation et son interface intuitive et conviviale<\/strong>. En premier lieu, Elementor est un \u00e9diteur de page visuel et en direct. Cela signifie que vous pourrez voir instantan\u00e9ment \u00e0 quoi ressemblera votre site Web apr\u00e8s avoir appliqu\u00e9 les modifications – vous n’avez pas besoin de passer \u00e0 un mode de pr\u00e9visualisation sp\u00e9cial. Deuxi\u00e8mement, Elementor offre une fonctionnalit\u00e9 de glisser-d\u00e9poser qui vous permet de s\u00e9lectionner et de positionner des \u00e9l\u00e9ments du menu en un seul clic<\/strong>. De plus, Elementor ne n\u00e9cessite pas de connaissances en codage puisque vous pouvez ajouter et modifier imm\u00e9diatement des \u00e9l\u00e9ments en fonction de vos besoins. Avec tout cela \u00e0 l’esprit, il est \u00e9vident que n’importe qui peut cr\u00e9er un site Web Elementor WordPress r\u00e9actif<\/a>. En d’autres termes, peu importe comment vous souhaitez organiser votre contenu, vous pouvez le faire rapidement et facilement avec ce constructeur de pages. Mais si vous souhaitez sp\u00e9cifiquement organiser votre contenu dans des colonnes Elementor de style diff\u00e9rent, cet article est pour vous.<\/p>\n

Colonnes \u00e9l\u00e9mentaires<\/h2>\n

Lorsque vous souhaitez cr\u00e9er des sections distinctes d\u00e9di\u00e9es \u00e0 l’histoire de votre entreprise, \u00e0 vos services ou aux membres de votre marque<\/strong>, les colonnes Elementor vous aideront \u00e0 le faire facilement. Les colonnes peuvent \u00eatre manipul\u00e9es via les options du panneau Elementor \u00e0 gauche. Vous pouvez \u00e9galement cr\u00e9er des colonnes en cliquant avec le bouton droit sur la poign\u00e9e de la colonne et en choisissant dans le menu contextuel qui s’affiche<\/strong>.<\/p>\n

Avant tout, nous devons cr\u00e9er une rang\u00e9e. Cliquez sur le signe + comme indiqu\u00e9 dans l’image ci-dessous.<\/p>\n

\"Comment<\/a><\/p>\n

Maintenant, s\u00e9lectionnez la structure souhait\u00e9e<\/strong>, en fonction de votre direction de conception et du type de contenu. Cette fois, nous irons avec deux colonnes.<\/p>\n

\"Comment<\/a><\/p>\n

La structure s\u00e9lectionn\u00e9e appara\u00eetra instantan\u00e9ment et vous pourrez imm\u00e9diatement commencer \u00e0 ajouter des widgets<\/strong>. Vous pouvez soit faire glisser le widget souhait\u00e9 depuis le menu,<\/strong> soit cliquer sur +<\/strong> pour ajouter du contenu \u00e0 votre colonne. Des sections de texte et des images aux widgets sp\u00e9cifiques, vous pouvez ajouter tout ce que vous voulez \u00e0 votre colonne.<\/p>\n

\"Comment<\/a><\/p>\n

Mais, avant de commencer \u00e0 ajouter votre contenu\/widgets \u00e0 vos colonnes, vous pouvez ajuster la ligne et ses colonnes en fonction de vos besoins<\/strong>. Comme vous pouvez le remarquer, la ligne est marqu\u00e9e de couleur bleue apr\u00e8s avoir survol\u00e9 celle-ci.<\/p>\n

\"Comment<\/a><\/p>\n

Pour modifier notre ligne, nous ferons un clic droit sur la ligne et cliquerons ensuite sur la section Modifier<\/strong>.<\/p>\n

\"Comment<\/a><\/p>\n

Le champ Modifier la section propose 3 onglets pour la personnalisation des lignes<\/strong>. Vous pouvez d\u00e9finir le type de mise en page, le styliser ou utiliser les options avanc\u00e9es pour un r\u00e9glage fin.<\/p>\n

\"Comment<\/a><\/p>\n

Commen\u00e7ons par les options de mise en page<\/strong>. Ici, vous pouvez d\u00e9finir la structure des colonnes en fonction de diff\u00e9rents types de proportions. Cela vous permettra d’ organiser votre rang\u00e9e en fonction de vos exigences de conception en fonction de vos pr\u00e9f\u00e9rences personnelles<\/strong>.<\/p>\n

\"Comment<\/a><\/p>\n

Maintenant, \u00e9ditons la colonne. Lorsque vous survolez la colonne, le signe qui vous permet de continuer l’\u00e9dition appara\u00eetra<\/strong> (comme indiqu\u00e9 dans l’image ci-dessous).<\/p>\n

\"Comment<\/a><\/p>\n

Cliquez avec le bouton droit sur le champ que nous venons de mentionner et cliquez sur Modifier la colonne<\/strong>.<\/p>\n

\"Comment<\/a><\/p>\n

Une fois de plus, nous voyons trois onglets de personnalisation (options de mise en page, de style et avanc\u00e9es). Tout d’abord, nous devons d\u00e9finir notre disposition des colonnes<\/strong>.<\/p>\n

\"Comment<\/a><\/p>\n

Commencez par d\u00e9finir votre largeur de colonne<\/strong>. Cette option vous permet de modifier vos colonnes au cas o\u00f9 vous n’\u00eates pas satisfait des dimensions des lignes que vous avez pr\u00e9c\u00e9demment d\u00e9finies<\/strong>. Ensuite, vous pouvez d\u00e9finir l’alignement vertical du contenu de<\/strong> votre colonne. Vous pouvez choisir parmi les options Haut, Milieu, Bas, Espace entre, Espace autour et Espacer uniform\u00e9ment. Cela placera votre contenu \u00e0 l’endroit pr\u00e9d\u00e9fini dans une section de colonne. En outre, vous pouvez utiliser l’ option Alignement horizontal<\/strong> qui vous permet d’aligner horizontalement les widgets en ligne dans la m\u00eame ligne. Ici, vous pouvez choisir diff\u00e9rents positionnements en ligne, notamment le d\u00e9but, le centre, la fin, l’espace entre, l’espace autour et l’espace uniform\u00e9ment. En plus de cela, il existe une option d’espace Widget<\/strong>o\u00f9 vous pouvez d\u00e9finir l’espace entre les widgets que vous pr\u00e9voyez d’ajouter. Enfin, vous pouvez d\u00e9finir la balise HTML pour votre colonne.<\/p>\n

\"Comment<\/a><\/p>\n

Il est maintenant temps de styliser votre colonne<\/strong>. Avant tout, choisissez le type d’arri\u00e8re-plan<\/strong> – arri\u00e8re-plan classique, d\u00e9grad\u00e9 ou diaporama. La disposition d’arri\u00e8re-plan classique vous permet de d\u00e9finir une couleur ou une image d’arri\u00e8re-plan<\/strong>. En revanche, un fond d\u00e9grad\u00e9 permet de d\u00e9finir un fond d\u00e9grad\u00e9 de couleur<\/strong>. Comme son nom l’indique, un fond de diaporama permet de cr\u00e9er un fond de type diaporama<\/strong>. De plus, vous pouvez d\u00e9finir la superposition d’arri\u00e8re-plan, le mode de fusion ou jouer avec les filtres CSS<\/strong> – choisissez entre Flou, Luminosit\u00e9, Contraste et Saturation.<\/p>\n

Lorsque l’arri\u00e8re-plan de la colonne est d\u00e9fini, vous pouvez styliser la bordure de la colonne<\/strong>. Tout d’abord, d\u00e9finissez un type de bordure et un rayon de bordure. Deuxi\u00e8mement, ajoutez une ombre de bo\u00eete si votre conception l’exige<\/strong>.<\/p>\n

\u00c9tant donn\u00e9 que la typographie peut faire une r\u00e9elle diff\u00e9rence, n’oubliez pas de d\u00e9finir des couleurs de typographie<\/strong> pour votre section de colonne.<\/p>\n

\"Comment<\/a><\/p>\n

Comme vous le savez, la marge contr\u00f4le l’espace \u00e0 l’ext\u00e9rieur de la bordure de l’\u00e9l\u00e9ment que vous modifiez<\/strong>. De l’autre c\u00f4t\u00e9, le rembourrage contr\u00f4le l’espace \u00e0 l’int\u00e9rieur de la bordure et le contenu de l’\u00e9l\u00e9ment que vous modifiez<\/strong>. Ces deux options peuvent \u00eatre d\u00e9finies dans l’onglet Options avanc\u00e9es. Bien que ce champ comporte de nombreuses autres options avanc\u00e9es, nous vous recommandons de pr\u00eater attention au champ Responsive<\/strong>. Ici, vous pouvez afficher ou masquer des colonnes sur un ordinateur de bureau, une tablette ou un mobile, ce qui peut affecter l’exp\u00e9rience utilisateur de plusieurs mani\u00e8res.<\/p>\n

\"Comment<\/a><\/p>\n

R\u00e9sumons-le<\/h2>\n

L’ajout de colonnes Elementor est pratique pour de nombreuses raisons. Il vous permet d’organiser votre contenu avec plus de flexibilit\u00e9 et de personnaliser facilement ses \u00e9l\u00e9ments. Gr\u00e2ce aux fonctionnalit\u00e9s intuitives d’Elementor, vous n’avez besoin d’aucune connaissance pr\u00e9alable pour cr\u00e9er des colonnes Elementor en quelques minutes. Nous esp\u00e9rons que cet article vous aidera \u00e0 le faire encore plus rapidement !<\/p>\n

Source d’enregistrement: wpklik.com<\/a><\/div><\/p>\n","protected":false},"excerpt":{"rendered":"

L’ajout de colonnes Elementor vous permet d’organiser votre contenu avec plus de flexibilit\u00e9 et de personnaliser facilement ses \u00e9l\u00e9ments.<\/p>\n","protected":false},"author":1,"featured_media":177945,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":"","_wp_rev_ctl_limit":""},"categories":[205,568,423],"tags":[844],"class_list":["post-372088","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-elementor-4","category-les-bases-de-wordpress","category-plugins-wordpress","tag-affiai-fr"],"_links":{"self":[{"href":"https:\/\/themewp.inform.click\/fr\/wp-json\/wp\/v2\/posts\/372088","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/themewp.inform.click\/fr\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/themewp.inform.click\/fr\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/themewp.inform.click\/fr\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/themewp.inform.click\/fr\/wp-json\/wp\/v2\/comments?post=372088"}],"version-history":[{"count":0,"href":"https:\/\/themewp.inform.click\/fr\/wp-json\/wp\/v2\/posts\/372088\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/themewp.inform.click\/fr\/wp-json\/wp\/v2\/media\/177945"}],"wp:attachment":[{"href":"https:\/\/themewp.inform.click\/fr\/wp-json\/wp\/v2\/media?parent=372088"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/themewp.inform.click\/fr\/wp-json\/wp\/v2\/categories?post=372088"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/themewp.inform.click\/fr\/wp-json\/wp\/v2\/tags?post=372088"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}