\n
Comment pr\u00e9visualiser la version mobile de votre site Web<\/h2>\n
Un th\u00e8me WordPress responsive garantit de nombreux avantages mais encore faut-il v\u00e9rifier en temps r\u00e9el \u00e0 quoi ressemble votre site sur les smartphones<\/strong>. Il existe de nombreuses variations possibles dans les tailles d’\u00e9cran et les navigateurs, de sorte qu’aucun des aper\u00e7us mobiles ne peut vous fournir un aper\u00e7u parfait et pr\u00e9cis \u00e0 100 %<\/strong>. Vous devez toujours vous fier \u00e0 l’exp\u00e9rience r\u00e9elle que vous obtenez en consultant votre site sur un smartphone ou un appareil mobile r\u00e9el. Cela pourrait vous inciter \u00e0 optimiser vos pages de destination cl\u00e9s et \u00e0 cr\u00e9er diff\u00e9rentes versions optimis\u00e9es pour l’exp\u00e9rience mobile.<\/p>\n Voyons donc comment vous pouvez pr\u00e9visualiser si vous avez un site compatible avec les mobiles WordPress de deux mani\u00e8res diff\u00e9rentes.<\/p>\n La premi\u00e8re et la plus simple fa\u00e7on de voir l’aper\u00e7u de la version mobile est d’utiliser le personnalisateur de th\u00e8me de WP. La proc\u00e9dure est simple. Connectez-vous \u00e0 votre<\/a> tableau de bord WordPress et acc\u00e9dez \u00e0 Apparence > Personnaliser<\/strong>.<\/p>\n Apr\u00e8s avoir cliqu\u00e9 sur WordPress Theme Customizer et l’avoir ouvert, vous verrez toutes les options dans le menu de gauche<\/strong>. Il peut y avoir des variations dans les options propos\u00e9es en fonction du th\u00e8me que vous utilisez.<\/p>\n Remarquez l’ic\u00f4ne mobile en bas de l’\u00e9cran<\/strong>. Cliquez dessus et vous verrez un aper\u00e7u de l’apparence de votre site sur les appareils mobiles<\/strong>.<\/p>\n Si les symboles d’\u00e9dition bleus vous confondent, ne vous inqui\u00e9tez pas. Ils ne sont visibles que dans l’aper\u00e7u et jamais sur votre site en ligne.<\/p>\n Astuce: Si vous n’avez pas encore lanc\u00e9 votre blog ou s’il est en mode maintenance, cette m\u00e9thode de pr\u00e9visualisation est tr\u00e8s pratique car elle vous permet d’apporter des modifications et de v\u00e9rifier leur apparence avant de mettre en ligne votre site<\/strong>.<\/p>\n Si vous ne vous sentez pas \u00e0 l’aise avec l’outil de personnalisation de th\u00e8me WP pour une raison quelconque, vous pouvez toujours v\u00e9rifier si WordPress est compatible avec les mobiles avec le navigateur Google Chrome<\/strong>. C’est aussi une proc\u00e9dure tr\u00e8s simple et facile qui se compose de quelques \u00e9tapes.<\/p>\n Ouvrez simplement votre navigateur Google Chrome comme vous le faites habituellement et acc\u00e9dez \u00e0 la page que vous souhaitez consulter. Ensuite, faites un clic droit sur la page et choisissez Inspect<\/strong>.<\/p>\n Notez que de cette fa\u00e7on, vous pouvez voir un aper\u00e7u de n’importe quelle page sur n’importe quel site<\/strong>, pas seulement le v\u00f4tre. Il pourrait m\u00eame s’agir du site Web de votre concurrent.<\/p>\n Sur votre droite, un nouveau volet s’ouvrira et ressemblera \u00e0 ceci\u00a0:<\/p>\n La vue du d\u00e9veloppeur vous permet de voir le code source HTML de votre site Web. Vous remarquerez quelques changements dans l’aper\u00e7u mobile\u00a0: votre site Web est r\u00e9duit pour s’adapter \u00e0 la taille de l’\u00e9cran mobile et d’autres changements peuvent avoir lieu. Regardez et notez attentivement les diff\u00e9rences et notez ce que vous devriez changer.<\/p>\n V\u00e9rifiez ce qui se passe lorsque vous essayez de passer le curseur de votre souris sur la vue mobile – cela devient un cercle.<\/p>\n Le but du cercle est d’imiter l’\u00e9cran tactile sur un appareil mobile.<\/p>\n Conseil\u00a0: Si vous souhaitez voir comment l’\u00e9cran de votre mobile effectue un zoom avant et arri\u00e8re, maintenez la touche Maj enfonc\u00e9e, puis cliquez et d\u00e9placez votre souris<\/strong>.<\/p>\n L’avantage d’utiliser cette m\u00e9thode pour pr\u00e9visualiser votre site Web mobile est qu’elle vous permet de voir \u00e0 quoi ressemble la page sur diff\u00e9rents types de smartphones. Ces options suppl\u00e9mentaires se trouvent au-dessus de la vue mobile de votre site. Quel que soit le type d’aper\u00e7u que vous avez ouvert lorsque vous avez cliqu\u00e9 sur Basculer la barre d’outils de l’appareil, vous pouvez modifier ici la taille de l’\u00e9cran de l’appareil.<\/p>\n Conseil\u00a0: utilisez l’ic\u00f4ne de rotation dans le coin sup\u00e9rieur droit pour faire pivoter l’\u00e9cran du mobile. Vous pouvez \u00e9galement inspecter des \u00e9l\u00e9ments sur la page<\/a><\/strong> en cliquant sur le clic droit et en s\u00e9lectionnant l’option Inspecter.<\/p>\n RWD est quelque chose auquel vous devez r\u00e9fl\u00e9chir attentivement d\u00e8s le d\u00e9but de la cr\u00e9ation de votre site Web. Il y a beaucoup de choses \u00e0 analyser lorsque vous devez rendre votre site aussi attrayant, navigable et efficace sur diff\u00e9rentes tailles d’\u00e9cran. Les constructeurs de pages WordPress<\/a> ont un r\u00f4le d\u00e9terminant dans ce processus, ils vous fournissent les pierres angulaires du design de votre site, vous devez donc bien vous informer avant de faire votre choix<\/strong>. Ainsi, en investissant du temps dans la recherche sur les constructeurs de pages, vous gagnerez en fait beaucoup de temps que vous pourrez consacrer \u00e0 la cr\u00e9ation de votre site Web.<\/p>\n D’apr\u00e8s notre exp\u00e9rience, WPBakery<\/a> et Elementor<\/a> sont d’excellents choix, car ils peuvent satisfaire un large \u00e9ventail de besoins diff\u00e9rents.<\/p>\n Si vous avez un budget limit\u00e9, Elementor est votre meilleur pari<\/strong>. Il s’agit d’un plugin simple \u00e0 utiliser et convivial pour les d\u00e9butants qui a une version gratuite tr\u00e8s g\u00e9n\u00e9reuse avec un ensemble solide d’\u00e9l\u00e9ments. Il s’int\u00e8gre \u00e9galement bien avec d’autres plugins<\/strong> et services WP de premier plan tels que MailChimp<\/a>, WooCommerce<\/a>, HubSpot<\/a>, Yoast SEO<\/a>, etc. Si vous pouvez vous permettre un plugin premium, WPBakery Page Builder<\/strong> ne vous d\u00e9cevra jamais. Il est livr\u00e9 avec une collection incroyablement large d’\u00e9l\u00e9ments, une pl\u00e9thore de blocs et d’options. Il est \u00e9galement facile \u00e0 utiliser et permet beaucoup de cr\u00e9ativit\u00e9.<\/p>\n Bien que les constructeurs de pages soient essentiels pour RWD, le th\u00e8me que vous pr\u00e9voyez d’utiliser est \u00e9galement important car il peut offrir des fonctionnalit\u00e9s \u00e9tonnantes<\/strong>. Comme vous le savez peut-\u00eatre, les auteurs de th\u00e8mes d\u00e9veloppent des widgets et des \u00e9l\u00e9ments sp\u00e9cifiques qui peuvent \u00eatre ajust\u00e9s s\u00e9par\u00e9ment des constructeurs de pages. Beaucoup de ces \u00e9l\u00e9ments vous permettent de d\u00e9finir la r\u00e9activit\u00e9 en fonction de vos besoins. Pour cette raison, vous devez choisir le th\u00e8me d\u00e9velopp\u00e9 par des auteurs connus et dignes de confiance<\/strong>. Ceci est particuli\u00e8rement important si vous souhaitez utiliser un th\u00e8me WordPress gratuit. Pour \u00e9conomiser votre temps et vos nerfs, nous avons test\u00e9 des tonnes de th\u00e8mes gratuits. Donc, si vous souhaitez utiliser un th\u00e8me gratuit r\u00e9actif, riche en fonctionnalit\u00e9s et fiable, nous vous recommandons d’essayer le th\u00e8me Qi<\/a>.<\/p>\n Il est prudent de dire qu’Elementor est de loin le meilleur constructeur de pages lorsqu’il s’agit de modifier la version mobile de votre site Web. Il se peut que vous ayez manqu\u00e9 de remarquer cette petite ic\u00f4ne, appel\u00e9e Viewport Icon, dans les param\u00e8tres<\/strong> :<\/p>\n Cette ic\u00f4ne indique que toute valeur qui l’a \u00e0 c\u00f4t\u00e9 peut \u00eatre modifi\u00e9e s\u00e9par\u00e9ment pour la version de bureau et pour la version du site mobile<\/strong>. Prenons par exemple les param\u00e8tres de largeur de colonne – vous pouvez ajuster la valeur pour le bureau, le mobile et la tablette<\/strong>. La valeur que vous entrez pour chaque appareil ne sera valide que pour cet appareil s\u00e9lectionn\u00e9. Notez que la balise HTML n’a pas l’ic\u00f4ne \u00e0 c\u00f4t\u00e9, ce qui signifie qu’elle a la m\u00eame valeur pour chaque appareil.<\/p>\n Si vous souhaitez modifier la valeur de l’appareil mobile, il vous suffit de choisir l’option de mise en page mobile et d’entrer les valeurs souhait\u00e9es<\/strong> (ces valeurs seront impl\u00e9ment\u00e9es uniquement sur les appareils mobiles). Sur le c\u00f4t\u00e9 droit de l’\u00e9cran, vous avez l’aper\u00e7u en direct de toutes les modifications que vous apportez, afin que vous puissiez voir imm\u00e9diatement \u00e0 quoi ressembleront les nouvelles valeurs sur l’appareil.<\/p>\n Pour revenir \u00e0 la vue du bureau, vous devez passer \u00e0 l’option de disposition du bureau<\/strong>. Vous pouvez le faire, comme nous l’avons mentionn\u00e9 ci-dessus ou en utilisant cette petite ic\u00f4ne dans le menu du bas de la page<\/strong> :<\/p>\n Une autre chose importante \u00e0 mentionner concernant la r\u00e9activit\u00e9 est que les colonnes et les lignes peuvent \u00eatre d\u00e9sactiv\u00e9es pour des appareils individuels<\/strong>, c’est-\u00e0-dire que nous pouvons dire qu’elles ne seront pas visibles (ou seront visibles) sur certaines tailles d’\u00e9cran.<\/p>\n Pour acc\u00e9der \u00e0 cette option, suivez le chemin\u00a0:<\/p>\n Cette option est tr\u00e8s importante dans le cas o\u00f9 nous avons une section dont nous savons qu’elle n’a de sens que pour \u00eatre affich\u00e9e sur le bureau, nous l’annulerons donc sur d’autres appareils. Et pour compenser son absence, nous pouvons cr\u00e9er une section qui sera visible sur tous les autres appareils, \u00e0 l’exception du bureau.<\/p>\n En ce qui concerne les colonnes, nous pouvons \u00e9galement trouver l’ option Inverser la colonne<\/strong> (Tablette \/ Mobile). Il est pr\u00e9f\u00e9rable d’expliquer cela par un exemple. Disons que nous avons une section comme celle-ci sur le bureau o\u00f9 le contenu est divis\u00e9 en deux colonnes avec des images suivies d’un bref texte<\/strong> :<\/p>\n Naturellement, sur les appareils mobiles, le contenu sera r\u00e9organis\u00e9 comme dans l’image ci-dessous, en suivant l’ordre d’origine depuis le bureau\u00a0:<\/p>\n L’ option de colonne invers\u00e9e nous permet de changer l’ordre d’une certaine section pour les appareils mobiles ou les tablettes<\/strong>. Lorsque nous le faisons pour la premi\u00e8re section sur des appareils plus petits, le r\u00e9sultat est un contenu affich\u00e9 plus efficacement\u00a0:<\/p>\n T\u00f4t ou tard, vous serez tent\u00e9 d’utiliser une vari\u00e9t\u00e9 de plugins qui vous permettront d’ajouter facilement une barre lat\u00e9rale, un CTA, un widget ou un \u00e9l\u00e9ment similaire \u00e0 votre site. C’est le moment o\u00f9 beaucoup oublient qu’une barre lat\u00e9rale ou tout autre \u00e9l\u00e9ment qui fonctionne parfaitement sur un \u00e9cran de bureau peut ne pas \u00eatre aussi g\u00e9nial sur mobile<\/strong>. Donc, avant de profiter de ces outils pratiques, v\u00e9rifiez s’ils sont \u00e9galement r\u00e9actifs. La v\u00e9rit\u00e9 est que beaucoup d’entre eux le sont et peuvent r\u00e9ellement vous aider \u00e0 am\u00e9liorer l’exp\u00e9rience utilisateur. Mais pour en \u00eatre s\u00fbr, lisez les critiques ou trouvez une d\u00e9mo avant d’en installer. Tant que le plugin se comporte bien sur mobile, vous pouvez \u00eatre s\u00fbr que votre site Web est sur la voie du succ\u00e8s. N’oublions pas non plus que vos options varient beaucoup en fonction du th\u00e8me que vous utilisez<\/strong>. Un th\u00e8me premium<\/a>garantit certainement beaucoup plus de possibilit\u00e9s.<\/p>\n Le menu est le pilier de l’exp\u00e9rience utilisateur. C’est la premi\u00e8re ou l’une des premi\u00e8res choses sur lesquelles quelqu’un clique lorsqu’il visite votre site. Cela affecte la rapidit\u00e9 avec laquelle le visiteur trouvera ce pour quoi il est venu, combien de temps il restera et de nombreux autres aspects de l’UX<\/strong>. Il est important d’avoir un beau menu bien structur\u00e9 qui rend la navigation fluide, mais ce n’est pas aussi simple qu’il n’y para\u00eet. Vous pouvez avoir un excellent menu qui fonctionne parfaitement sur un ordinateur de bureau mais qui est trop lourd pour un mobile. Une solution dans ce cas consiste \u00e9galement \u00e0 ajuster votre version de bureau \u00e0 la taille de l’\u00e9cran mobile. Mais que se passe-t-il si cela implique de perdre trop d’informations utiles\u00a0? Dans ce cas, vous pouvez cr\u00e9er un menu diff\u00e9rent, personnalis\u00e9 uniquement pour la taille de l’\u00e9cran mobile. De nombreux th\u00e8mes WP offrent la possibilit\u00e9 de le faire. Si votre th\u00e8me n’en fait pas partie, ne vous inqui\u00e9tez pas, il y en a beaucoupexcellents plugins pour les menus r\u00e9actifs<\/a><\/strong>. Notre recommandation est le plugin Responsive Menu<\/a> qui comprend plus de 150 options de personnalisation et ne n\u00e9cessite aucune connaissance en codage. Il vous permet d’ajouter des animations, des images d’arri\u00e8re-plan, de d\u00e9finir la position des boutons de menu et bien plus encore. Il est incroyablement facile \u00e0 utiliser, il est donc particuli\u00e8rement pratique pour les d\u00e9butants.<\/p>\n Une image parle des milliers de langues, alors assurez-vous que la v\u00f4tre soit aussi belle sur n’importe quelle taille d’\u00e9cran<\/strong>. Nous vivons dans une culture tr\u00e8s visuelle, et quel que soit le cr\u00e9neau dans lequel vous vous trouvez, de superbes photos sont indispensables. Mais, quelle que soit la qualit\u00e9 de vos images, si elles se chargent lentement ou ne sont pas bien pr\u00e9sent\u00e9es, vous risquez de perdre un pourcentage important de votre public. Donc, pour vous assurer d’\u00e9viter ce sc\u00e9nario, nous vous recommandons le plugin Envira Gallery Lite<\/a> qui vous aidera \u00e0 cr\u00e9er des galeries puissantes comme un pro<\/strong>. Certains de ses avantages sont qu’il est hautement optimis\u00e9 pour les performances du Web et du serveur, ce qui est une excellente nouvelle pour votre r\u00e9f\u00e9rencement.<\/p>\n Lorsque vous avez un excellent menu r\u00e9actif et de superbes galeries, la prochaine chose \u00e0 prendre en compte sont les boutons de partage social<\/a>. Leur taille doit \u00eatre adapt\u00e9e \u00e0 l’appareil<\/strong>. Un gros bouton sur un petit \u00e9cran fait cliquer le visiteur \u00e0 l’occidentale, ce qui est assez \u00e9nervant. D’un autre c\u00f4t\u00e9, les petits boutons sur un grand \u00e9cran ne sont pas si faciles \u00e0 reconna\u00eetre. Un plugin qui peut vous aider \u00e0 avoir des boutons personnalis\u00e9s est le plugin Sassy Social Share<\/a>. Facile \u00e0 utiliser, totalement gratuit et adapt\u00e9 aux d\u00e9butants, il facilite le partage \u00e0 la fois pour vous et pour les visiteurs de votre site.<\/p>\n Dans les situations o\u00f9 vous avez besoin de rendre votre site mobile r\u00e9actif rapidement, il n’y a pas de meilleure solution qu’un plugin comme WPtouch<\/a>. Ce plugin est con\u00e7u de telle mani\u00e8re qu’il ajoute automatiquement un th\u00e8me mobile simple et \u00e9l\u00e9gant \u00e0 votre site WP<\/strong>. Le fait qu’il soit recommand\u00e9 par Google en dit long sur son efficacit\u00e9. Ainsi, m\u00eame si vous n’avez pas de version mobile de votre site, un plugin comme celui-ci peut instantan\u00e9ment activer une version mobile de votre site Web, afin que vous ne perdiez pas votre classement. Il vous permet \u00e9galement de personnaliser de nombreux aspects de l’apparence du site.<\/p>\n La vitesse de chargement des pages est \u00e9galement un aspect tr\u00e8s important de l’exp\u00e9rience utilisateur, en particulier sur les appareils mobiles. Si vous rencontrez des difficult\u00e9s dans ce domaine, envisagez d’utiliser le plug-in Accelerated Mobile Pages<\/a>, car il s’agit de l’un des moyens les plus rapides et les plus simples d’am\u00e9liorer la vitesse de chargement de votre site.<\/p>\n Les popups sont rarement amusants, mais ils sont particuli\u00e8rement irritants sur les mobiles. Ils couvrent une grande partie de l’\u00e9cran et obligent le visiteur \u00e0 les fermer avant d’acc\u00e9der au contenu de la page. Par cons\u00e9quent, il est pr\u00e9f\u00e9rable de les \u00e9viter compl\u00e8tement dans la version mobile de votre site<\/strong>. La fa\u00e7on dont vous allez les \u00e9viter d\u00e9pend principalement de votre fournisseur de services, mais la majorit\u00e9 d’entre eux ont la possibilit\u00e9 de d\u00e9sactiver les popups intrusifs sur les mobiles. Gardez \u00e9galement \u00e0 l’esprit que Google p\u00e9nalise les sites qui ont des popups tr\u00e8s intrusifs<\/strong>.<\/p>\n \u00c9tant donn\u00e9 que le nombre de personnes qui utilisent des smartphones pour acc\u00e9der \u00e0 Internet est en constante augmentation, il est logique d’attendre beaucoup plus de solutions et d’options pour les versions mobiles des sites. Les concepteurs travaillent dur pour r\u00e9pondre \u00e0 la pl\u00e9thore de mod\u00e8les d’utilisation, mais les bases de RWD sont les m\u00eames – assurez-vous de choisir un th\u00e8me WP adapt\u00e9 aux mobiles<\/a> et un constructeur de pages qui a toutes les options dont vous avez besoin.<\/p>\n Alors, \u00e0 quel point votre site est-il r\u00e9actif\u00a0? Devez-vous faire beaucoup de changements pour le rendre plus mobile? Partagez vos r\u00e9ponses avec nous et n’h\u00e9sitez pas \u00e0 demander plus d’informations dans la section des commentaires.<\/p>\nUtilisation du personnalisateur de th\u00e8me de WordPress<\/h3>\n
![\"Comment](\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2022\/10\/post-348075-633e7731a65d0.jpg\")
<\/a><\/p>\n![\"Comment](\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2022\/10\/post-348075-633e773537821.jpg\")
<\/a><\/p>\n![\"Comment](\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2022\/10\/post-348075-633e7739771d3.jpg\")
<\/a><\/p>\nUtilisation du mode appareil des outils de d\u00e9veloppement de Google Chrome<\/h3>\n
![\"Comment](\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2022\/10\/post-348075-633e773c37a6b.jpg\")
<\/a><\/p>\n![\"Comment](\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2022\/10\/post-348075-633e773fcd9ce.jpg\")
<\/a><\/p>\n
\nMaintenant, cliquez sur le bouton Basculer la barre d’outils de l’appareil<\/strong> pour voir la vue mobile.<\/p>\n![\"Comment](\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2022\/10\/post-348075-633e7742207a5.jpg\")
<\/a><\/p>\n![\"Comment](\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2022\/10\/post-348075-633e7744a51d5.jpg\")
<\/a><\/p>\n![\"Comment](\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2022\/10\/post-348075-633e7746b6c41.jpg\")
<\/a><\/p>\nPourquoi Page Builder est-il important pour RWD<\/h2>\n
Comment modifier la version mobile de votre site dans Elementor<\/h2>\n
![\"Comment](\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2022\/10\/post-348075-633e77496f309.jpg\")
<\/a><\/p>\n![\"Comment](\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2022\/10\/post-348075-633e774c823e7.jpg\")
<\/a><\/p>\n![\"Comment](\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2022\/10\/post-348075-633e774f43937.jpg\")
<\/a><\/p>\n\n
![\"Comment](\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2022\/10\/post-348075-633e7751c005c.jpg\")
<\/a><\/p>\n![\"Comment](\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2022\/10\/post-348075-633e7754550c7.jpg\")
<\/a><\/p>\n![\"Comment](\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2022\/10\/post-348075-633e7756d019f.jpg\")
<\/a><\/p>\n![\"Comment](\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2022\/10\/post-348075-633e775976759.jpg\")
<\/a><\/p>\nComment modifier la version mobile de votre site avec des plugins<\/h2>\n
Menu r\u00e9actif – La premi\u00e8re impression compte<\/h3>\n
Images et galeries<\/h3>\n
Boutons de partage social<\/h3>\n
Sites Web Mobile Firendly<\/h3>\n
\u00c9vitez d’ajouter des fen\u00eatres contextuelles sur les appareils mobiles<\/h3>\n
En conclusion<\/h3>\n