{"id":367239,"date":"2023-02-18T11:31:00","date_gmt":"2023-02-18T08:31:00","guid":{"rendered":"https:\/\/themewp.inform.click\/?p=367239"},"modified":"2023-05-08T14:07:23","modified_gmt":"2023-05-08T11:07:23","slug":"comment-creer-un-site-web-wordpress-elementor-reactif","status":"publish","type":"post","link":"https:\/\/themewp.inform.click\/fr\/comment-creer-un-site-web-wordpress-elementor-reactif\/","title":{"rendered":"Comment cr\u00e9er un site Web WordPress Elementor r\u00e9actif"},"content":{"rendered":"\n

Avec la plupart des utilisateurs acc\u00e9dant \u00e0 Internet \u00e0 l’aide d’appareils mobiles, votre site Web peut-il vraiment se permettre de ne pas \u00eatre r\u00e9actif\u00a0?<\/p>\n

Qu’est-ce que le Responsive Design, vraiment ?<\/h2>\n

Ainsi, dans le contexte d’un site Web, responsive signifie que le site r\u00e9agit \u00e0 divers rapports d’aspect<\/strong>, c’est-\u00e0-dire qu’il n’a pas la m\u00eame apparence sur diff\u00e9rents appareils mais s’adapte plut\u00f4t \u00e0 l’appareil du visiteur<\/strong>. En 2019, plus d’utilisateurs ont acc\u00e9d\u00e9 \u00e0 Internet \u00e0 l’aide de leurs appareils mobiles<\/a> que d’ordinateurs de bureau, mais la conception ax\u00e9e sur le mobile<\/a> – la pratique consistant \u00e0 cr\u00e9er des sites Web principalement pour les utilisateurs mobiles – existe depuis bien plus longtemps.<\/p>\n

Avec une conception Elementor r\u00e9active, vous redimensionnez et r\u00e9organisez essentiellement tous les composants de votre site Web pour les adapter \u00e0 un \u00e9cran<\/strong> diff\u00e9remment agenc\u00e9 – ordinateur de bureau, tablette (768px) et mobile (360px) – sans rien perdre de la qualit\u00e9. Et avec WordPress \u00e9tant le syst\u00e8me de gestion de contenu le plus populaire, il n’est pas \u00e9tonnant que tant de d\u00e9veloppeurs se mettent en quatre pour cr\u00e9er des th\u00e8mes WordPress r\u00e9actifs<\/a>, bien que cela ne soit pas non plus une garantie.<\/p>\n

Comment acc\u00e9der \u00e0 diff\u00e9rentes mises en page dans Elementor ?<\/h2>\n

Vous trouverez l’ ic\u00f4ne de l’\u00e9cran dans le coin inf\u00e9rieur gauche<\/strong>. Le s\u00e9lectionner ouvrira le sous-menu de pr\u00e9visualisation. Vous y trouverez les options d’aper\u00e7u pour les mises en page pour tablette et mobile.<\/p>\n

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

La vue du bureau est la valeur par d\u00e9faut, mais vous pouvez la modifier facilement. Vous devriez remarquer que lorsque vous modifiez votre aper\u00e7u, il change pour s’adapter \u00e0 un appareil plus petit et agenc\u00e9 diff\u00e9remment<\/strong>, avec un rapport d’aspect diff\u00e9rent, afin que vous puissiez avoir une id\u00e9e de la fa\u00e7on dont la mise en page de votre site Web appara\u00eet sur chaque appareil.<\/p>\n

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

La chose importante dont vous devez vous souvenir est que, quelle que soit la fa\u00e7on dont vous modifiez vos options de conception cosm\u00e9tique en mode tablette ou mobile, votre mode de bureau et votre mise en page ne sont pas affect\u00e9s<\/strong>. De cette fa\u00e7on, aucun de vos travaux sur n’importe quelle mise en page n’est jamais perdu.<\/p>\n

Quels \u00e9l\u00e9ments puis-je r\u00e9gler\u00a0?<\/h2>\n

Avant toute chose, clarifions simplement une chose – vous pouvez ajuster chaque \u00e9l\u00e9ment marqu\u00e9 de l’ic\u00f4ne ci-dessous. Pour ces \u00e9l\u00e9ments, nous pouvons ajuster ind\u00e9pendamment les valeurs de chaque \u00e9l\u00e9ment s\u00e9par\u00e9ment pour les formats de bureau, tablette et mobile.<\/p>\n

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

La fa\u00e7on dont vos visiteurs voient vos \u00e9l\u00e9ments de texte est tr\u00e8s importante. Si vos polices ne sont pas adapt\u00e9es aux mobiles, vos visiteurs peuvent trouver le site Web illisible<\/strong>, ce qui affectera \u00e0 son tour votre r\u00e9f\u00e9rencement (optimisation pour les moteurs de recherche). Avec la quantit\u00e9 d’informations que vos visiteurs glanent simplement par le texte, c’est quelque chose que vous ne pouvez pas ignorer. Un site Web lisible a l’air soign\u00e9, ordonn\u00e9 et professionnel.<\/p>\n

Jetez un \u0153il \u00e0 ce confessionnal, par exemple :<\/p>\n

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

Cela semble parfaitement bien dans une disposition de bureau, en particulier avec un \u00e9cran large. Mais sur un appareil plus petit, en particulier lorsqu’il est affich\u00e9 en orientation portrait, toutes les sections de texte favorisant l’horizontale appara\u00eetront floues et illisibles<\/strong>.<\/p>\n

Vous pouvez r\u00e9soudre ce probl\u00e8me en s\u00e9lectionnant l’appareil dont vous souhaitez modifier la disposition. Si vous \u00eates satisfait de l’option par d\u00e9faut (bureau), vous avez encore quelques ajustements \u00e0 administrer pour les tablettes et les mobiles.<\/p>\n

Comme tout \u00e9l\u00e9ment, un \u00e9l\u00e9ment textuel poss\u00e8de des attributs. La premi\u00e8re chose \u00e0 garder \u00e0 l’esprit est la balise HTML. Ne modifiez pas la balise HTML<\/strong>. Celles-ci sont tr\u00e8s importantes pour le r\u00e9f\u00e9rencement et, une fois bien configur\u00e9es, ne doivent pas \u00eatre modifi\u00e9es. Pour modifier la taille du texte, vous souhaitez consulter l’onglet Style.<\/strong><\/p>\n

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

Localisez les param\u00e8tres de typographie. L\u00e0, vous pouvez modifier la police, sa taille, son poids, la hauteur de ligne et l’espacement des lettres. Si vous souhaitez modifier l’alignement de votre texte, vous pouvez trouver cette option en s\u00e9lectionnant l’onglet Contenu.<\/p>\n

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

Gardez \u00e0 l’esprit que certaines modifications, telles que la transformation en majuscules, seront \u00e9galement r\u00e9percut\u00e9es sur d’autres appareils<\/strong>. Les options de typographie sont sp\u00e9cifiques \u00e0 l’appareil. Une consid\u00e9ration importante \u00e0 garder \u00e0 l’esprit est \u00e9galement que les \u00e9l\u00e9ments de texte doivent \u00eatre ajust\u00e9s en proportion.<\/strong> Ce que vous voulez rechercher, c’est le rapport de dimension de tous les \u00e9l\u00e9ments de texte.<\/p>\n

Voici \u00e0 quoi ressemble une section modifi\u00e9e proportionnellement\u00a0:<\/p>\n

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

Elementor construit la structure de base de votre contenu \u00e0 l’aide de sections ou de lignes<\/strong>. La hauteur des rang\u00e9es est donc tr\u00e8s importante. Une fois d\u00e9finie, la hauteur de rang\u00e9e peut \u00eatre ajust\u00e9e pour chaque appareil<\/strong>. Ce que vous voulez surveiller, c’est la distance entre le contenu de votre \u00e9l\u00e9ment et le bord de la ligne.<\/p>\n

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

Ce qui peut sembler beau sur un appareil de bureau prend beaucoup d’espace vertical sur mobile et tablette. Pour ajuster la hauteur de ligne, s\u00e9lectionnez la ligne, puis s\u00e9lectionnez l’option de modification<\/strong>.<\/p>\n

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

S\u00e9lectionnez ensuite l’onglet Disposition et ajustez le curseur Hauteur minimale comme bon vous semble. Vous pouvez avoir diff\u00e9rentes hauteurs pour diff\u00e9rentes dispositions d’affichage<\/strong>. Ceci est particuli\u00e8rement important si vous ajustez \u00e9galement la taille de vos polices.<\/p>\n

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

Marges et remplissage<\/h3>\n

Ce que vous devez \u00e9galement garder \u00e0 l’esprit, ce sont les marges et le rembourrage. Une marge est l’espace entre les \u00e9l\u00e9ments, tandis que le rembourrage est l’espace entre les bords d’un \u00e9l\u00e9ment et son contenu<\/strong>. Que vous ayez cr\u00e9\u00e9 votre site Web \u00e0 partir de z\u00e9ro ou que vous travailliez sur un mod\u00e8le pr\u00eat \u00e0 l’emploi pour<\/a> Elementor<\/strong>, vous ne devriez avoir aucun probl\u00e8me \u00e0 naviguer dans les \u00e9l\u00e9ments. Chaque \u00e9l\u00e9ment d’une section s\u00e9lectionn\u00e9e affiche une bordure bleue en survol – d\u00e9placez simplement votre souris sur un \u00e9l\u00e9ment et vous verrez sa bordure<\/strong>. C’est un bon moyen de se faire une id\u00e9e de la structure d’une section.<\/p>\n

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

S\u00e9lectionnez un \u00e9l\u00e9ment, puis s\u00e9lectionnez l’onglet Avanc\u00e9. Pour le rembourrage et les marges, vous trouverez quatre options\u00a0: haut, droite, bas et gauche<\/strong>. C’est ici que vous entrez vos valeurs de remplissage et de marge. L’ ic\u00f4ne de lien \u00e0 droite du sous-menu les verrouille les unes par rapport aux autres<\/strong>: vous pouvez choisir qu’elles aient toutes la m\u00eame valeur, ou qu’elles aient une valeur diff\u00e9rente pour chaque marge ou padding.<\/p>\n

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

La cr\u00e9ation de colonnes<\/a> peut entra\u00eener des probl\u00e8mes d’affichage lorsqu’elle n’est pas optimis\u00e9e pour diff\u00e9rents appareils. Vos param\u00e8tres pr\u00e9f\u00e9r\u00e9s d\u00e9pendront du nombre de colonnes et de leur contenu<\/strong>.<\/p>\n

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

Par d\u00e9faut, Elementor empile les colonnes les unes sous les autres sur les appareils mobiles<\/strong>. Cela signifie que les colonnes ne seront pas coll\u00e9es ensemble et que leur contenu restera lisible.<\/p>\n

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

Pour rendre les colonnes plus faciles \u00e0 lire pour les utilisateurs mobiles, vous pouvez inverser l’ordre des colonnes dans n’importe quelle ligne<\/strong> – s\u00e9lectionnez simplement la section, puis l’onglet Avanc\u00e9, le sous-menu Responsive, et basculez les bascules Inverser les colonnes pour la mise en page tablette et mobile comme voulu.<\/p>\n

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

Si vous s\u00e9lectionnez un \u00e9l\u00e9ment dans la vue du bureau, par exemple, puis s\u00e9lectionnez l’onglet Avanc\u00e9, s\u00e9lectionnez le sous-menu R\u00e9actif, vous verrez trois bascules afficher\/masquer\u00a0: pour les appareils mobiles, tablettes et ordinateurs de bureau. Vous pouvez les utiliser pour afficher ou masquer des \u00e9l\u00e9ments ou des sections en fonction du type d’appareil sur lequel ils sont affich\u00e9s. Cette option n’est pratique que pour certains \u00e9l\u00e9ments ou sections que vos visiteurs pourraient trouver inint\u00e9ressants ou superflus selon l’appareil qu’ils utilisent, bien que vous puissiez l’utiliser pour mettre en page trois pages compl\u00e8tement diff\u00e9rentes si vous le souhaitez.<\/p>\n

Et voil\u00e0: adapter la conception de votre page Web pour les mobiles et les tablettes – et inversement – n’a jamais \u00e9t\u00e9 aussi facile. Et gardez \u00e0 l’esprit que la cr\u00e9ation de sites Web r\u00e9actifs Elementor n’est qu’une des nombreuses fonctionnalit\u00e9s d’Elementor. Nous sommes l\u00e0 pour vous aider \u00e0 les explorer.<\/p>\n

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

Cr\u00e9ez un site Web Elementor r\u00e9actif en quelques \u00e9tapes simples, pour une meilleure exp\u00e9rience des visiteurs.<\/p>\n","protected":false},"author":1,"featured_media":363491,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":"","_wp_rev_ctl_limit":""},"categories":[568],"tags":[844],"class_list":["post-367239","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-les-bases-de-wordpress","tag-affiai-fr"],"_links":{"self":[{"href":"https:\/\/themewp.inform.click\/fr\/wp-json\/wp\/v2\/posts\/367239","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=367239"}],"version-history":[{"count":0,"href":"https:\/\/themewp.inform.click\/fr\/wp-json\/wp\/v2\/posts\/367239\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/themewp.inform.click\/fr\/wp-json\/wp\/v2\/media\/363491"}],"wp:attachment":[{"href":"https:\/\/themewp.inform.click\/fr\/wp-json\/wp\/v2\/media?parent=367239"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/themewp.inform.click\/fr\/wp-json\/wp\/v2\/categories?post=367239"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/themewp.inform.click\/fr\/wp-json\/wp\/v2\/tags?post=367239"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}