Avec plus de 1.4 milliards de sites internet dans le monde en 2018, il est tout à fait normal d’avoir des difficultés de se démarquer rapidement. Bien évidemment le nombre n’est pas le seul facteur à considérer, vous vous devez d’avoir un site web impeccable pour assurer votre réussite sur l’internet. Pour cela, la conception de chacune des pages de votre site web ne doit pas être prise à la légère. En effet, les visiteurs ne vont pas forcément passer par votre page d’accueil avant d’avoir les informations qu’ils recherchent. D’ailleurs, toutes les pages indexées de votre site web sont susceptibles de bénéficier d’un trafic direct. Vous vous devez donc d’offrir une expérience utilisateur optimale autant sur la page d’accueil que sur toutes les autres. Et ceci passe évidemment par la mise en place d’un design convenable et responsive avec des informations pertinentes. Pour cela, je vais me charger de vous montrer les bonnes pratiques ainsi que les différentes étapes pour créer votre première page à partir de l’accueil. De plus, je vous invite à consulter la vidéo que j’ai ajoutée à cet article afin de suivre directement le processus.

Apprendre le marketing en ligne

Alors pour cela, je vous ai fait une rapide présentation, donc sur powerpoint afin de vous présenter les différents éléments que j’ai trouvé:

Pourquoi est-il important de bien concevoir chacune des pages de votre site web ?

A moins d’avoir un site one-page ou ne possédant qu’une page, vous avez une ou plusieurs pages qui accompagnent votre page d’accueil. Celles-ci vous permettent d’apporter beaucoup plus d’informations sur vos produits, vos services ou sur des thématiques lorsque vous avez un blog.  

Et une fois qu’elles sont indexées par les moteurs de recherche, elles apparaissent dans les résultats lorsque les internautes font des recherches en rapport avec leurs thématiques.

Par conséquent, elles sont toutes des portes d’entrée pour votre site web et vous devez prendre le soin de bien concevoir chacune d’elles. Sinon, vous risquez de perdre un trafic important à cause des pages mal-conçues surtout lorsque votre site commence à avoir de l’autorité.

Par ailleurs, gardez à l’esprit que 57% des visiteurs qui se rendent sur un site internet dont le design est mal conçu, ne le recommandent pas. Alors que votre taux de conversion peut augmenter jusqu’à 5,5 grâce aux recommandations personnalisées.  

Si vous désirez donc vite gagner en visibilité et améliorer les performances de votre site web, vous vous devez d’offrir une excellente expérience utilisateur et certaines pratiques peuvent vous aider.

Les bonnes pratiques pour avoir les meilleures pages web

Au cours de la création d’un site web, on a tendance à se fixer sur son esthétique, alors que c’est son ergonomie qui vous permettra d’améliorer son taux de conversion. Cela implique que sa structuration et son design doivent être conçus en fonction de l’expérience utilisateur.

Pour cela, je regroupe ici quelques bonnes pratiques à adopter et qui sont susceptibles de vous permettre d’avoir les meilleures pages, compte tenu du thématique de votre site web.

Faites une projection de vos pages

Le conseil principal que je peux vous donner est de réaliser au préalable une maquette de votre site web. Il s’agit d’une étape cruciale dans la création d’un votre site web puisqu’il vous permet de prendre le temps de bien réfléchir et de proposer le meilleur site web selon votre projet.

A la fin, vous aurez un résultat précis qui va vous permettre d’être beaucoup plus rapide dans la conception effective de votre site web.

Optez pour la simplicité

Votre design n’est pas l’élément que viennent admirer les visiteurs de votre site web. En effet, ils désirent y trouver des informations spécifiques ou dans certains cas, effectuer une certaine action. Je vous suggère donc de considérer la simplicité comme une règle d’or afin d’offrir une navigation facile et agréable.

Dans cette mesure, n’utilisez que les éléments qui ont une réelle fonction pour les utilisateurs et prenez soin d’éviter ceux qui peuvent rendre votre site trop complexe. Dans le cas contraire, vous risquez de nuire à l’expérience utilisateur, ce qui est susceptible d’avoir un impact très important sur les performances de votre site web.

Mettez en place une hiérarchie visuelle

Les différents éléments de vos pages web doivent être bien hiérarchisés et organisés de façon visuelle. En effet, les visiteurs doivent capter automatiquement les éléments les plus importants de la page afin qu’ils puissent, de façon simple et fluide, trouver ce qu’ils recherchent.  

Agissez donc sur des aspects que les tailles, les couleurs, la disposition, les boutons, les call to action… pour réussir votre hiérarchisation et organisation.

Proposez un système de navigation intuitif

Si vous n’avez pas un site web d’une page, je vous invite à faire de telle sorte que les visiteurs puissent aisément passer d’une page à l’autre. L’idée est qu’ils puissent passer d’un point à l’autre sans aucun effort et sans se demander où cliquer.

Pour cela, optez pour une arborescence très simple à trois niveaux maximums et n’hésitez pas à user du netlinking pour relier les pages de votre site web. De plus, veillez à ce que votre menu de navigation soit bien visible et intégrez si possible un menu de navigation dans le footer de votre site web.

Votre site doit être « cohérent »

En plus d’une navigation facile, je vous invite à veiller à ce que tous les éléments de vos pages ou de tout votre site web soient cohérents. En effet, il faut une logique et une cohérence sur chaque page, mais il le faut aussi en passant d’une page à l’autre sur votre site internet.

Ceci concerne principalement les éléments graphiques de votre site web à savoir :

  • Les polices de caractères utilisées ;
  • Les couleurs ;
  • Les illustrations ;
  • Etc…

En effet, il ne s’agit pas d’avoir exactement la même mise en pages sur tout le site web, surtout lorsque vous avez un grand nombre de pages. L’essentiel est de trouver le bon équilibre et de ne pas apporter de la confusion aux utilisateurs lorsqu’ils quitteront une page à une autre.

Optimisez l’accessibilité sur les différents supports

A travers l’une de ses études, Mobify a fait le constat que 30 % des internautes avortent une transaction dans le cas où un site internet ne s’ajuste pas correctement au format de leur mobile. Et quand on sait que ce support technologique est le premier qui draine le plus de trafic internet avec une part de 51,6 %, il devient important de se pencher sur le sujet.

En effet, les pages de votre site web doivent pouvoir s’adapter à la taille de tous les écrans afin d’offrir une expérience utilisateur optimale. De plus, Google accorde une très grande attention à la responsivité des sites puisqu’il classe en premier ceux qui le sont au détriment de ceux qui ne le sont pas.

Si vous désirez que votre site web soit responsive, consultez cet article qui vous montre étape par étape comment le faire.  

Respectez les conventions ou les standards du web

Les internautes sont déjà familiers à un certain nombre de conventions en ce qui concerne le webdesign et je vous conseille de les respecter. Il s’agit entre autres de :

  • Disposer le logo en haut à gauche ou au centre de la page et de lui ajouter le lien vers la page d’accueil ;
  • Mettre le menu de navigation principal en haut ou sur le côté gauche de la page ;
  • Configurer les liens de telle sorte qu’ils changent de couleur lorsque les utilisateurs glissent leur souris sur eux.
  • Etc…

Même s’il est parfois tentant de vouloir être original, ne commettez pas l’erreur de modifier ces conventions. En effet, les changer risque de faire perdre du temps aux visiteurs ou d’apport de la confusion, ce qui nuit à l’expérience utilisateur.

Créez des pages pertinentes

Une page web est créée pour apporter une information donnée et vous devez vous assurez que ce soit le cas. En effet, si vous prévoyez d’ajouter des pages à la page d’accueil, c’est probablement parce que vous souhaitez donner plus d’informations sur vos services, vos produits ou un élément donné. Pour cela, vous devez apporter des réponses à des points tels que :

  • La pertinence de la page pour les internautes ;
  • Ce que vos visiteurs ont besoin de savoir ;
  • Les informations qui sont susceptibles de les mettre en confiance ;
  • Les informations qui les inciteront à passer à l’action.     

Se mettre à la place de ses visiteurs

Parce qu’ils estiment que les sites internet ne s’intéressent pas à leur expérience, 68 % des visiteurs ne convertissent pas, selon Vitamin T. Lorsque vous réfléchissez donc à la conception de votre site web, vous devez vous mettre à la place de vos visiteurs puisque c’est finalement pour eux que vous le faites.

Dans cette logique, vous devez au préalable connaître les préférences de votre cible. Mais vous pouvez toujours procéder après à des tests ou demander des feedbacks pour améliorer l’expérience utilisateur. Pour cela :

  • Demandez l’avis de vos proches ;
  • Demandez des feedbacks à vos visiteurs ;
  • Analysez le comportement de vos visiteurs grâce des outils tels que Crazy Egg ;
  • Etc…

Après que vous ayez une idée précise de la présentation de votre page, vous pouvez maintenant passer à la phase effective de sa création et voici les étapes.

Création de la page Twaino Agence SEO : Les étapes pour créer votre page wordpress

1 Presentation du site avant changement

Avant de créer la deuxième page du site internet de mon Agence SEO, Twaino.com, j’ai eu l’occasion de réaliser deux choses dont :

  • La maquette des pages de mon site web ;

5 Prendre connaissance de la maquette

  • La page d’accueil de mon site web.

Ces deux éléments me permettront de réaliser rapidement la seconde page de mon site. Et ceci, dans la mesure où la maquette me donne une idée précise du résultat et la page d’accueil me servira de modèle ou de support.

De plus, j’utilise le thème « Avada » qui me permet d’avoir le plugin « Fusion Builder » qui me sera utile afin de modifier la nouvelle page de mon site web. Notez également que pour ce processus, je dénombre trois grandes étapes dont :

  • La création d’un modèle à partir de la page d’accueil  
  • La création des blocs pour l’affichage sur les écrans moyens et larges
  • La création des blocs pour l’affichage sur les petits écrans

Toutefois, vous devez avant tout vous connecter à votre Dashboard.

Connectez-vous au tableau de bord de votre site web

Pour créer la deuxième page de votre site web, vous devez accéder à la console de WordPress.

2 Aller sur tableau de bord

Pour cela, complétez simplement dans votre navigateur, l’inscription « …./wp-admin » à l’URL de votre site web. Le mien fait donc « https://twaino.com/wp-admin ».

Sur la page de connexion, remplissez les cases avec vos identifiants et valider ensuite pour accéder au tableau de bord.

1) Créez un modèle à partir de la page d’accueil

Il s’agit de dupliquer la structure de votre page d’accueil afin de vous servir de lui comme un modèle sur une nouvelle page.

3 Aller sur toute les pages

1-1) Accédez aux constituants de votre page d’accueil  

Sur la barre latérale droite de votre Dashboard, cliquez sur la rubrique « Pages » puis sur « Toutes les pages ». Vous aurez accès à toutes les pages de votre site web parmi lesquelles il y a celle qui a le titre « Accueil » : il s’agit de votre page d’accueil.

4 Page Accueil Modifier

Cliquez ensuite sur « Modifier » qui apparaît dès que vous glissez la souris sur le titre de la page.

Vous avez sur la page qui suit, tous les constituants ou blocs de votre page d’accueil, et ce, dans le plugin « Fusion Builder ».

1-2) Créez un modèle à partir de la page d’accueil

Vérifiez que la fenêtre « Builder » soit active et cliquez sur la troisième icône qui se trouve sur la même ligne et du côté droit.

6 Appuyer sur la disquette dans fusion builder

Vous avez alors cinq fenêtres sur cette nouvelle interface à savoir :

  • Demos ;
  • Templates ;
  • Containers ;
  • Columns ;
  • Elements.

Sélectionnez « Templates », si ce n’est pas encore fait et créez un nouveau modèle à partir de la présente page.

7 Sauvegarder le template

Il s’agit de nommer ce modèle dans la case réservée à cet effet et de cliquer sur « Save Template ».

8 Le template est accessible

Moi, je nomme le mien « Twaino Home Page » et je sauvegarde.

1-3) Créez une nouvelle page

Pour créer une nouvelle page, vous pouvez cliquer sur la fenêtre « + Créer » qui se trouve complètement en haut et à côté de « Voir la page ».

9 Ajouter une page

Vous pouvez aussi créer une nouvelle page en cliquant sur l’option « Ajouter » de la rubrique « Pages » situé sur la barre latérale gauche.

10 Completer les informations nouvelle page

Nommez la nouvelle page en inscrivant son titre dans la première case située juste en dessous de « Ajouter une nouvelle page ». Moi, je nomme le mien « Agence SEO ».

11 Insertion du fusion builder

Vous allez constater qu’à défaut, « Fusion Builder » n’est pas active. Pour l’activer, cliquez sur le bouton bleu « Edit With Fusion Builder » et ses différentes options apparaissent.

1-4) Chargez le modèle sauvegardé sur la nouvelle page

Cliquez sur la troisième icône qui se trouve sur la même ligne que la fenêtre « Builder ». Dans la rubrique « Template », vous avez le modèle que vous aviez sauvegardé et appuyez sur l’option « Load ».

12 Chargement du template home page

Un menu s’affiche vous permettant de choisir comment charger le modèle en question. Il s’agit de :

  • Replace all page content : Qui remplace l’ensemble du contenu qui existe déjà sur la page ;
  • Insert above current content : Insère le contenu au-dessus du contenu ;  
  • Insert below current content : Insère le contenu en dessous du contenu.

Je prends la première option pour le template « Twaino Home Page », ce qui remplace donc tout le contenu et qui m’amène toutes les parties que j’ai eu à créer sur ma page d’accueil.

13 Chargement de la page

Ensuite, je la publie afin de voir à quoi elle ressemble. Pour le faire, cliquez sur le bouton bleu « Publish » qui se trouve dans le coin inférieur droit et cliquez ensuite sur « Preview ».

14 Publier la page

A mon niveau, j’ai bien la page « Agence SEO » avec l’URL https://twaino.com/agence-seo/, et qui se présente exactement comme la page d’accueil de mon site web.

15 Le template est bien charge

2) La création des blocs pour l’affichage sur les écrans moyens et larges

« Fusion Builder » comporte les différents éléments constitutifs de votre page web et en descendant vers le bas, vous allez voir plusieurs lignes en bleu. Il s’agit des différents blocs de la page et les modifications que vous allez effectuer à ce niveau vont seront prises en compte dans le rendu final.  

16 Changement du slider revolution

De plus, étant donné que vous avez effectué une duplication, il vous suffit de faire des modifications et non de créer chaque bloc à partir du début.

Par ailleurs, j’ai eu l’occasion de créer le « slider revolution » de cette nouvelle page et je vais simplement le charger. En effet, il s’agit de la partie de votre page web qui vient juste en dessous du menu de navigation. Elle apparaît aux utilisateurs sans qu’ils n’aient besoin de défiler vers le bas de page.

17 Nouveau slider revolution

Si vous souhaitez le réaliser, vous pouvez simplement le modifier à partir du template de votre page d’accueil. Toutefois, si vous ne savez pas comment faire, je vous invite à consulter la création du « Slider Revolution ». Suivez les démarches afin de créer le vôtre pour chacune de vos pages.

2-1) Modification du premier bloc

Il y a plusieurs blocs sur pour ce modèle, notamment le bloc de séparation que je souhaite garder. Dans ce cas, je le laisse et je vais modifier les autres blocs en tenant compte de ma maquette.

18 Template de la maquette

Je déplie le contenu du second bloc « Agence » en cliquant sur la petite flèche qui se trouve complètement à droite.  

2-1-1) Modifiez le texte

Pour modifier le texte, cliquez sur l’icône d’édition qui apparaît lorsque vous glissez le curseur sur la cellule du texte.

19 Changement du texte

En descendant légèrement un peu, vous allez voir le champ de texte dans laquelle vous pourrez saisir le nouveau texte et faire la mise en forme.

Cliquez ensuite sur « Save » pour sauvegarder le nouveau texte.

2-1-2) Insérez une image

J’ai eu l’occasion de réaliser à l’avance toutes les images que je vais utiliser et vous pouvez en faire de même pour évoluer plus rapidement.

20 Changement des images

Cliquez sur l’icône d’édition qui apparaît lorsque vous glissez le curseur sur la cellule de l’image qui se situe à côté de celle du texte.

21 Ajout des images

Sur l’interface qui d’affiche, cliquez sur le bouton « Edit » situé juste en dessous de l’ancienne image.

23 Selection des images

Vous avez ensuite votre « Bibliothèque de médias » dans laquelle vous pouvez directement sélectionner une image.

24 Chargement des images

Vous avez aussi la possibilité de les importer en cliquant sur la fenêtre « Téléverser des fichiers » située juste à côté de « Bibliothèque de médias ».

25 Ajout de limage

Appuyez sur le bouton « Sélectionnez des fichiers » et parcourez votre ordinateur pour prendre les images que vous souhaitez.

26 Fusion builder pendant changement

A ce niveau, renommez vos images, je nomme les miennes :

  • Twaino les jardiniers du SEO ;
  • Référencement naturel SEO ;
  • Clients ;

27 Ajout image avec les revues

  • Expertise Google ;

28 Ajout image expertise google

29 Texte une expertise Google

  • Alexandre MAROTEL ;
  • Mariana Seiko Sakurada ;
  • Rejoignez-nous.

Ensuite, j’insère l’image de « Twaino les jardiniers du SEO » et je sauvegarde pour insérer ensuite la deuxième image dans la troisième cellule située sur la deuxième ligne. 

Je procède aussi à l’insertion du deuxième texte « Un référencement d’excellence » en prenant soin de faire les mises en forme nécessaires.

2-1-3) Insérez d’autres lignes de textes et d’images

Au niveau de la maquette, il y a une troisième ligne comportant une image et un texte. Pour gagner du temps à ce niveau, faites une duplication des précédentes cellules.

Pour effectuer cette duplication, cliquez sur la deuxième icône qui suit directement celle de l’édition et qui apparaissent lorsque vous glissez la souris sur la cellule concernée.

A mon niveau, je duplique une cellule de texte et une autre d’image que je déplace en bas. J’utilise le même principe que précédemment pour changer le texte et l’image. J’ai donc la troisième ligne qui comprend :

  • Le texte : Une agence SEO à l’écoute de ses clients ;
  • L’image correspondante.

Je crée encore une quatrième ligne avec :

  • Le texte : Une expertise Google ;
  • L’image correspondante.

Sauvegardez les modifications et cliquez sur « Preview » pour voir le rendu. Le rendu est bien sauf l’image de « Google » qui est un peu trop grande.

30 Resultat des changements

31 Resultat des changements 33 Resultat des changements 32 Resultat des changements

2-1-4) Ajustez la taille de vos images

Lorsque vous constatez que la taille d’une image est un peu trop grande, cliquez sur l’icône d’édition de sa cellule et appuyez sur le bouton « Edit ».

 36 Verification du resultat

Sur l’interface de votre « Bibliothèque de médias », vous allez voir l’option « Taille » à droite et juste au-dessus du bouton « Insérer dans la page ». Choisissez un élément par défaut qui pourrait correspondre à ce que vous voulez.    

A mon niveau, je choisis la taille « 400 * 265 » de Avada. Le rendu est beaucoup mieux et je profite pour centrer l’image.

35 Reduire les tailles dimages

Pour cette dernière action, cliquez sur l’icône d’édition et allez sur l’option « Align » puis sélectionnez « Center » et sauvegardez.

34 Centrer les images

Je prends soin également de centrer toutes les autres images et de réduire leur taille.

2-2) Ajoutez le deuxième bloc

Juste en dessous du bloc « Agence », je vais ajouter celui de « Mon Equipe ». Pour cela, je renomme le bloc qui suit en « Notre Equipe ». Dans ce bloc, je modifie la cellule du texte déjà présente en insérant le titre « Notre Equipe » avec l’écrit qui l’accompagne. Je garde la même mise en forme puisque je souhaite avoir le même résultat.

37 Maquette notre equipe

Je vais maintenant insérer les deux images qui se suivent verticalement avec leur texte.

2-2-1) Insérez une image

Je prends la cellule qui me va me servir pour mon image et je supprimant toutes les autres cellules qui ne me serviront pas.

38 Ajout du texte notre equipe

Ensuite, je configure sa proportion en « 1/3 » en appuyant sur la première icône se trouvant sur le coin supérieur droit de la cellule.

  39 Image et texte

Pour ajouter l’image, cliquez sur « + Element » qui se trouve dans la cellule et sur la nouvelle page, recherchez l’élément « Image ». Cliquez après sur le bouton « Image » qui va apparaître et appuyez sur le bouton « Select image » qui s’affiche sur la nouvelle interface. La « Bibliothèque de médias » s’affiche et vous pouvez choisir l’image que vous souhaitez.

40 Resultat texte et image

2-2-2) Insérez un texte

Pour insérer le texte qui suit cette image, dupliquez la cellule et donnez-lui a proportion « 2/3 ». Cliquez ensuite sur « + Element » et recherchez cette fois-ci le bouton « Text ».

Appuyez sur l’élément et sur l’interface de configuration qui suit, ajoutez votre texte et procédez à sa mise en forme.

Pour l’image suivant et son texte, il vous suffit de dupliquer les précédents et de procéder aux changements.

A ce niveau, j’ai :

  • Mon image et un texte qui me décrit : « Alexandre MAROTEL,……… »
  • L’image de Mariana et un texte qui la décrit : « Mariana Seiko Sakurada,…… ».

Sauvegardez les modifications et faites un preview pour voir le rendu.

2-3) Modifiez un bloc avec une couleur de fond et un bouton

Afin de gagner du temps, je vous invite à prendre les anciens blocs qui ressemble le plus à ceux que vous désirez créer. A mon niveau, le bloc « Rejoignez-Nous » que je souhaite créer à les mêmes traits que le « BLOG » du modèle.

41 Partie recrutement

J’opte donc pour la modification du bloc « BLOG » et je supprime les blocs intermédiaires dont je n’ai plus besoin. Il s’agit par exemple de :

  • Services ;
  • Services Mobile ;
  • Séparateur.
2-3-1) Insérez le texte et l’image

Pour « Rejoignez-nous », il y a trois éléments à insérer :

  • Une image ;
  • Un texte avec titre ;
  • Un bouton.

Dans un premier temps, je supprime les cellules dont je n’ai pas besoin.

42 Editer le fusion builder pour image

J’insère mon texte en modifiant l’ancien contenu avec le même principe.

43 Ajouer image dans fusion builder

Je change aussi l’image et je prends soin de donner la proportion de « ½ » à chacune des deux cellules.

44 Resultat fusion builder

Ensuite, je dispose la cellule de l’image à gauche et celle du texte à droite.

2-3-2) Insérez un bouton

Pour l’insertion du bouton, cliquez sur « + Element » situé sur la cellule du texte et recherchez l’élément bouton grâce à la barre de recherche. Cliquez sur « Button » qui vous conduit vers l’interface de configuration.

45 Ajouter un texte et un bouton

Vous avez par défaut les options de la fenêtre « General » et si vous avez déjà le lien de votre bouton, vous pouvez le mettre dans la case réservée à cet effet, au niveau de l’option « Button URL ».

46 Selectionner un bouton

Inscrivez le texte qui va s’afficher sur le bouton avec l’option « Button Text ».

47 Paramaetrer un bouton

Au niveau de « Alignment » sélectionnez « Center » pour que le texte soit centré sur le bouton.

48 Ajouter le texte du bouton

49 Centrer le bouton

2-3-3) Ajoutez de l’espace entre le bouton et le texte

La distance entre le texte et le bouton étant très petite, je vais mettre un peu de distance entre eux. Pour cela, je vais créer un séparateur qui sera placer entre ces deux éléments.

51 Inserer une separation

Cliquez donc sur « + Element » et recherchez l’élément « Separator », puis cliquez sur son bouton. Sur l’interface qui vient, sélectionnez pour l’option « Style », le menu « No Style » dans la fenêtre « General ».

52 Insertion marge pour separation

Ensuite, sélectionnez la fenêtre « Design » et au niveau de « Margin », mettez la distance que vous souhaitez. Moi, j’inscris une valeur de 5% et je place le séparateur entre le bouton et le texte.

53 Fusion builder apres bouton et separation

Je vérifie après si le rendu est agréable en cliquant sur « Preview », ce qui est le cas.

54 Verification apres changement

3) La création des blocs pour l’affichage sur les petits écrans

Notez que l’affichage au niveau des ordinateurs n’est pas toujours optimisé pour l’affichage au niveau des téléphones portables. Pour cela, vous devez créer des blocs qui vont être consacrés à un affichage optimisé pour mobile. Vous pouvez faire recours à mon article sur le sujet qui donne beaucoup plus de détails.55 Slider revolution version telephone

Pour vérifier l’affichage sur mobile de la page, vous pouvez :

  • Utiliser votre téléphone portable pour voir directement à quoi il ressemble ;
  • Réduire l’onglet de votre navigateur d’environ « 2/3 » de la largeur de l’écran de votre ordinateur.

3-1) Dupliquez et modifiez le premier bloc   

Pour aller plus rapidement, il vous suffit de dupliquer les blocs que vous avez créé pour l’affichage par défaut.

56 Partie agence SEO version telephone

Dans mon cas, je duplique le bloc « Agence » et je renomme le second « Agence Mobile »Pour ce bloc qui vient d’être créé, je passe à sa modification en cliquant sur la petite flèche de droite pour afficher son contenu.

57 Changement pour adapter telephone

J’effectue ensuite une réorganisation des textes et des images du bloc en séparant chaque image par des textes.

58 Renomer les blocs pour telephone

Aussi, je clique sur l’icône d’édition des cellules de texte afin de diminuer leurs tailles.

Pour cela, je mets la taille des titres à « 40 pixels » en lieu et place des « 50 pixels ».

3-2) Activez l’affichage sur mobile

Pour voir les changements effectués, vous devez activer l’affichage sur mobile. Cliquez donc sur l’icône d’édition du bloc et dans la fenêtre « General », descendez au niveau de « Container Visibility » pour voir les trois options d’affichage :

  • Small Screen : Pour l’affichage sur les supports de petit écran comme les téléphones ;
  • Medium Screen : Pour les supports ayant dans écrans moyens comme les tablettes ;
  • Large Screen : Pour les supports ayant des écrans larges comme les ordinateurs.

59 Container visibility small screen

Sélectionnez la première et prenez soin de désélectionner les deux autres. Vous aurez donc la première option qui devient bleu et les deux autres grises.

Cette action permet d’afficher cette configuration uniquement sur les écrans de petite taille dont les téléphones.

Sauvegardez ensuite et faites un preview pour voir le rendu.

3-3) Créez le deuxième bloc mobile

Je souhaite créer un nouveau bloc Mobile pour « Notre équipe ». Pour cela, je le duplique et je le mets en mode téléphone avec la même méthode que précédemment.

   61 Parametrage du texte pour adapter au telephone

A ce niveau, mon image est déjà trop grande pour un affichage sur téléphone. Pour qu’elle soit de taille petite, je vais l’insérer directement dans la cellule du texte qui l’accompagne.

60 Changement telephone notre equipe

Cliquez donc sur l’icône d’édition de la cellule de texte et juste au-dessus du champ de texte, appuyez sur le bouton « Add Media ».

62 Texte et image adaptees au telephone

Choisissez ensuite l’image que vous désirez et moi, je prends mon image que j’aligne à gauche tout en prenant soin de réduire sa taille à « 80 pixels ».

63 Version telephone de equipe

Par contre, déplacez le texte juste en dessous de l’image dans le champ afin d’avoir un rendu agréable. Je fais la même chose avec la deuxième image et son texte tout en prenant soin d’activer l’affichage sur mobile.

Par ailleurs, le dernier bloc « Recrutement Mobile » présente déjà une bonne disposition et je n’ai plus besoin de le modifier. Tout ce qu’il y a à faire est d’activer l’affichage mobile.

4) Vérifiez vos modifications

Après toutes ces modifications, prenez le soin de vérifier l’affichage de la page sur les différents supports. Ce qui vous permet de déceler le moindre problème et d’apporter les corrections nécessaires.

64 Partie recrutement pour telephone

Et voilà, vous venez de créer la deuxième page de votre site web.

Conclusion

Après la création de la page d’accueil, vous devez généralement créer les autres pages de votre site web. Celles-ci vont se charger d’apporter à vos visiteurs des informations supplémentaires sur vos produits, vos services ou encore de présenter les articles de votre blog. Et une fois qu’elles sont indexées par les moteurs de recherche, ces pages deviennent des portes d’entrée pour les visiteurs. Pour cette raison, vous devez veiller à ce que chacune d’elles soient bien conçues et offrent une expérience utilisateur optimale. Afin d’aboutir rapidement à ce résultat, je vous suggère de créer premièrement la page d’accueil parfaite que vous allez simplement dupliquer par la suite afin de vous en servir comme modèle.

A bientôt pour un autre article !