Pas envie de lire ? Lancez l'audio pour écouter l'article !
Voiced by Amazon Polly

Saviez vous que 57% des visiteurs qui se rendent sur un site web ayant un design mal conçu ne le recommandent pas ? En plus de ce chiffre, 40% des visiteurs le quittent si le chargement prend plus de 3 secondes. Pour cela, vous vous devez de présenter un site web rapide avec un bon design afin d’offrir une excellente expérience utilisateur. Et la première page qui doit présenter cette caractéristique est bien évidemment la page d’accueil. En effet, il s’agit de la page qui est susceptible d’obtenir le plus de trafic et qui vous permettra, dans cette mesure, d’obtenir le plus de clients pour vos produits ou services. Vous ne devez donc pas négliger sa conception et je me charge de vous guider, pas à pas, dans la création  de son corps avec le plugin « Fusion Builder » du thème « Avada ». Notez que cet article fait partie d’une série, dans laquelle je vous montre comment vous lancer dans la création de site web. De plus, n’hésitez pas à consulter la vidéo qui l’accompagne afin d’avoir un visuel sur tout le processus.

Comment creer une page avec fusion builder Avada ?

Création de la page d’accueil avec Fusion Builder

Dans cette vidéo, je vous montre comment créer votre page d’accueil avec le Fusion Builder proposé par Avada:

L’importance de la page d’accueil

Il s’agit de la page principale d’un site web et qui est directement accessible depuis le nom de domaine de celui-ci. Par conséquent, votre page d’accueil doit représenter votre site internet dans son ensemble et en plus de donner accès aux autres pages du site web, elle doit présenter les informations les plus pertinentes de votre site web. Ces informations sont réparties sur différentes zones et celle qui en contient le plus est son corps ou body.

En effet, le corps de la page d’accueil est la partie qui débute juste en dessous de la ligne de flottaison. Celle-ci représente une limite virtuelle au-dessus de laquelle se trouve la partie comprenant généralement le menu de navigation ainsi qu’un slider, qui sont visibles par les visiteurs sans qu’ils ne défilent vers les bas.

Par conséquent, le corps de la page d’accueil s’aperçoit généralement une fois que les visiteurs commencent à défiler vers le bas de page et il présente souvent le plus d’informations.

Que mettre dans le corps de la page d’accueil ?

La page d’accueil peut être à la fois une porte d’entrée et un point de ralliement de ralliement des utilisateurs égarés afin de leur permettre d’accéder aux fonctions principales de votre site web. Vous devez donc proposer aux visiteurs des éléments et des modalités de navigations afin de leur faciliter la recherche d’informations.

Cette problématique varie d’un site à un autre ainsi que des thématiques traitées. Toutefois, vous vous devez de présenter les informations les plus pertinentes afin de rendre l’expérience utilisateur particulièrement agréable.

Par ailleurs, gardez à l’esprit que vous devez chercher un compromis entre « pas assez » et « trop d’informations ». En effet, plus vous apportez de liens et d’informations, comme je l’ai fait sur ma page d’accueil, plus le visiteur est susceptible de trouver rapidement l’information qu’il recherche.

En revanche, si vous en faites de trop, l’utilisateur aura du mal à se repérer et décidera probablement de quitter votre site web. Vous devez donc trouver le bon équilibre et les bonnes pratiques vous aideront.

Les bonnes pratiques pour réussir le body de votre site web

Selon une étude menée par Chartbeat et basée sur 25 millions de sessions web, la majorité des visiteurs n’attendent pas le chargement complet avant de défiler vers le bas d’une page. Ce qui implique que le corps de votre page d’accueil est la zone la plus vue des visiteurs de votre site internet. Pour cette raison, vous devez adopter les bonnes pratiques pour sa conception et sa réalisation.

Assurez un temps de chargement rapide

Avec un temps de chargement allant de 1 à 10 secondes, le taux de rebond peut atteindre les 123 % selon ThinkWithGoogle. Ce qui implique que vous devez dans un premier temps penser à la vitesse de téléchargement de votre page d’accueil et de votre site web en générale.

D’ailleurs, si les visiteurs quittent votre site web avant même de voir son contenu, vous aurez beaucoup à perdre. L’idée étant de conserver à tout prix leur attention, travailler à ce que vos pages se chargent rapidement. Vous pouvez vous servir de

Google Analytics qui est un outil très puissant pour suivre la vitesse de vos pages.

Pour cela, veillez à ce que vos visuels ne soient pas volumineux même s’il est souvent tentant de décorer sa page d’accueil avec des images, des vidéos, etc…

Rendez le texte facile à lire

Très peu d’internautes lisent mot à mot les textes qui figurent sur un site web. En effet, ils ont tendance à les survoler et je vous recommande :

  • De rendre vos textes concis et faciles à lire ;
  • De bien les structurer en ressortant les informations les plus importantes qui seront mises sou forme de titres, de mots en gras, etc…  

Mettez en valeur un call to action

La page d’accueil n’est pas réalisée pour que vos visiteurs s’y attardent trop. En effet, elle a pour rôle de les conduire à acheter un produit, à demander un devis, à faire appel à vos services, etc…

Pour les amener à le faire, vous devez le montrer clairement depuis votre page d’accueil et ceci via un call to action. Celui-ci se présente généralement sous la forme d’un bouton très visible par les visiteurs.

Expliquez clairement votre valeur ajoutée

Qu’est-ce que je gagne à appuyer sur tel bouton ou à effectuer telle action ? Il s’agit de la question que vont se poser vos visiteurs. Pour cela, vous devez expliquer de la façon la plus claire et la plus concise possible, ce que vous pouvez apporter à vos potentiels clients.

Faites une projection de votre page d’accueil

Pour avoir un site web bien structuré et qui offre une expérience utilisateur optimale, je vous recommande de réaliser la maquette de votre site web.

En effet, cette étape qui peut parfois être considérée comme une perte de temps, vous permet d’avoir un résultat précis lors de la création effective de votre site web.

Comment créer votre page d’accueil avec Fusion Builder Avada ?

Dans une précédente vidéo, j’ai eu l’occasion de vous montrer comment créer un menu de navigation avec « WordPress » et le thème « Avada ».

1 Utilisation fusion builder site web

Dans la même logique, j’ai décrit le processus pour avoir un « Slider Revolution ».

2 Site web avant changement fusion builder

3 Site web avant changement fusion builder

Toutefois, le « Body » ou le « corps » de la page d’accueil n’a pas encore connu de modifications.

4 Site web avant changement fusion builder

Je vais donc l’adapter en fonction de mes besoins pour mon Agence SEO, Twaino.com.

Pour le faire, je vais faire usage du plugin Fusion Builder qui est directement intégré dans Avada.

5 Maquette du site web Twaino

Du reste, notez qu’avant de créer mon site web, j’ai eu l’occasion de réaliser la maquette de mon site web. Ce qui fait que j’ai une idée claire du résultat final.

6 Presentation de la maquette du site

1) Connectez-vous au tableau de bord de votre site web

Pour effectuer les modifications dont vous avez besoin, vous devez accéder à la console de WordPress.

  7 Modifier la page du site web

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

8 Se rendre sur fusion builder

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

9 Observer les differents blocs

2) Rendez-vous sur la page d’accueil

Une fois que vous êtes dans votre tableau de bord, allez sur la page d’accueil puis, cliquez sur la fenêtre « Modifier la page ».

Elle est précédée d’une icône sous forme de crayon et situé complètement en haut de la page, juste à droite de « Créer ».

3) Allez vers les différents blocs de votre page

Une fois sur la nouvelle interface, vous allez voir la mention « Fusion Builder » qui se trouve juste en bas du bouton « Edit With Default Editor ».

A défaut, vous aurez la fenêtre « Builder » qui est sélectionnée et dont vous aurez les options. En scrollant un peu vers le bas, vous allez voir des éléments en bleus qui sont en réalité les différents blocs qui constituent votre page web.

12 Maquette site web ligne verte

Vous pouvez les déplier en cliquant sur la petite flèche située complètement à droite et sur la même ligne que leur nom. A l’intérieur, vous avez la structure des différents éléments du bloc sélectionné.

4) Vérifiez la correspondance de chaque bloc sur votre page d’accueil

Pour voir comment ces éléments se présentent sur la page d’accueil, regardez leur contenu et allez vérifier sur votre page d’accueil. Je vous conseille d’ouvrir une autre fenêtre dans votre navigateur sur laquelle vous allez ouvrir votre page d’accueil afin de vérifier au fur et à mesure le rendu des modifications.

10 Ouvrir les blocs fusions builder

A mon niveau, j’ai au niveau du bloc « Meet The New Avada SEO Demon », la section « Meet the New Agency SEO » suivi de « Template Form The Avada Team ».

11 Regarder le resultat du bloc

Sur ma page d’accueil, je retrouve exactement la même structure et les mêmes textes. Il y a également le « content box » du bloc qui est représenté par l’image du bureau qui se trouve juste en dessous.   

5) Insérez une ligne de couleur pour faire une séparation

Entre le « Slider Revolution » et le bloc qui le suit directement, je souhaite insérer une ligne de couleur différente qui va servir de transition entre les deux blocs.

5-1) Créez un nouveau container

Pour cela, appuyez sur le bouton « + Container » qui se trouve juste en bas des blocs et dans le coin droit.

13 Creation container

Sélectionner le premier rectangle qui présente d’ailleurs une couleur beaucoup plus claire que les autres.

17 Renomer le bloc separation   14 Inserer un contenair vide

En effet, il s’agit d’un container vide et vous allez le déplacer simplement en haut, juste en bas du « Slider Revolution ».

16 Mettre le bloc en haut

Faites alors sur ce nouveau container, un clic gauche que vous maintenez pour le glisser tout en haut.

15 Replier le bloc pour le deplacer

Vous pouvez le nommer comme vous voulez en cliquant sur son titre. Moi, je nomme le mien « Séparation ».

18 Cliquer sur les paramatres du bloc

5-2) Insérez une couleur de fond

Je clique sur l’icône d’édition sous forme de crayon qui se trouve sur la même ligne que le nom de mon nouveau bloc.

19 Naviguer sur les parametres du bloc

Vous avez ensuite les options concernant le bloc qui dispose de trois fenêtres :

  • General ;
  • Background ;
  • Design.

Rendez vous dans background et cliquez sur « Sélectionner une couleur » de l’option « Container Background Color ». Choisissez la couleur qui vous convient ou prenez le code de la couleur que vous souhaitez et collez-le dans la case réservée à cet effet.

 20 Identifier la couleur

A mon niveau, je copie le code de couleur à partir de la maquette de mon site web, et ce, dans mon logiciel Adobe Illustrator.

21 Inserer la couleur dans le background du bloc

5-3) Ajustez sa taille

Il faut donner une certaine taille ou hauteur au séparateur. Pour le faire, allez dans la fenêtre « Design » et sur l’option « Padding ». A mon niveau, j’inscris « 10 » dans l’avant dernière case en partant de la gauche. Ce qui me donne une ligne droite de séparation avec la couleur que je souhaite avoir.

22 Ajouter un pading de 10

Pour vérifier comment est-ce que le résultat se présente, appuyez sur le bouton « Preview » et une nouvelle fenêtre s’ouvrira dans votre navigateur pour vous montrer votre page d’accueil avec les changements.

23 Resultat ajout de la ligne de bloc

6) Ajoutez un nouveau container ou bloc

Après le bloc de séparation, vous pouvez maintenant ajouter les autres blocs contenant vos textes et vos illustrations ou vidéos.

24 Creer le bloc agence

Je vais faire de même en créant le bloc pour la partie « Twaino : Agence SEO » présente sur la maquette.   

Pour cela, créez également un nouveau container et nommez-le comme vous le souhaitez. Moi, je nomme le mien « Agence » et je vais ajouter du contenu.

6-1) Sélectionnez un type de colonne   

Pour effectuer cette action, cliquez sur le bouton « + Columns » qui se trouve en bas et à droite de « + Container » du bloc sur lequel vous êtes.

Sur l’interface qui s’affiche, sélectionnez le type de présentation que vous souhaitez selon le résultat que vous désirez. En ce qui me concerne, j’ai choisi le rectangle « ½ et ½ » qui me permet d’avoir deux colonnes de dimensions égales.

De façon automatique, vous aurez ensuite des colonnes vides qui se présentent selon le type de présentation que vous avez sélectionné.

6-2) Ajoutez un texte au bloc

Appuyez sur le bouton « + Element » qui vous permet de choisir le type de contenu que vous voulez.

25 Creer des colonnes pour inserer les informations

Vous pouvez naviguer pour choisir l’option idéale ou taper directement dans la barre de recherche, l’élément que vous désirez.  

26 Prendre une colonne 50 50

En recherchant « Text », je vois automatiquement le bouton « Text Block » qui me permet de traiter et d’ajouter un texte.

27 Cliquer sur element

J’ajoute le titre « Twaino : Agence SEO » suivi d’un sous-titre et d’un texte.

28 Choisir un builder element

Cliquez sur « Save » pour l’enregistrer et vous verrez une miniature de votre texte dans la colonne, ce qui veut dire que le texte a été bien inséré.

29 Rechercher dans builder element text 31 Ajouter le texte dans le builder

6-3) Ajoutez une image au bloc

Si vous voulez par contre ajouter une image, recherchez “image” dans les éléments et vous appuyez sur le bouton « Image » qui vous permet de l’insérer.

30 Selectionner image dans le builder element

Cliquez ensuite sur le bouton « Upload image » qui s’affiche sur la nouvelle interface et parcourez votre « Bibliothèque de médias » pour la sélectionner ou la téléverser.

33 Ajout image builder

34 Choix de la bonne image

Après, cliquez sur « Save » pour enregistrer les changements. 

35 Ajouter un media

6-4) Ajoutez une vidéo

Juste en dessous des deux colonnes précédentes, je vais insérer une vidéo qui est accompagnée d’un texte.

37 Parametrer correctement

Il s’agit donc aussi de deux colonnes que vous pouvez encore choisir aussi en suivant l’étape 6-1.

38 Inserer lien Youtube et centrer

Pour insérer la vidéo YouTube, il vous suffit de rechercher dans les éléments « YouTube » et d’appuyer sur le bouton « YouTube » qui apparaît.

Ensuite, coller l’URL de votre vidéo dans la partie « Video ID » et d’effectuer quelques régales. En ce qui me concerne, j’ai centré la vidéo en cliquant sur « Center » au niveau de l’option « Alignment ».

6-5) Ajoutez un bouton au bloc

Pour ajouter un bouton comme mon bouton bleu foncé portant la mention « AGENCE », appuyez sur « + Element » de la cellule et recherchez l’élément « Button ».

40 Constater le resultat dans le builder

41 Ajouter un bouton dans le builder

Vous allez pouvoir paramétrer le bouton sur l’interface qui suit en :

  • Ajoutant un lien avec « Button URL » : Vous pouvez directement coller le lien dans la partie réservée à cet effet ou cliquer sur « Select Link » qui regroupe tous les liens des pages de votre site web ;

42 Parametrer le bouton

  • Ajoutant le texte du bouton avec « Button Text » : Écrivez le texte qui apparaîtra sur le bouton. Dans mon cas, c’est bien « Agence ».
  • Choisissant si la nouvelle page s’ouvrira dans le même onglet du navigateur ou dans un autre onglet avec l’option « Button Target ». Sachez que le « _sell » ouvre la nouvelle page sur le même onglet contrairement à « _blank » qui l’ouvre dans un autre ;

44 Configurer le bouton

  • Centrant le texte du bouton avec « Alignment » : Sélectionnez « Center » ou une autre option si vous le voulez.

45 Aligner le bouton

A la fin, sauvegardez vos modifications en cliquant sur « Save ».

Remarque : Je vous recommande de réduire à chaque fois les blocs sur lesquels vous ne travaillez pas. Cette action vous permet de suivre correctement votre travail et de ne pas commettre des erreurs.

7) Créez un bloc avez des flèches encastrées et cliquables

Je vais maintenant créer un nouveau bloc « Methode » qui comprendra des flèches encastrées horizontalement et qui sont cliquables. Sachez que ces flèches sont en réalités des images sur lesquelles il est possible d’insérer des liens.

Pour cela, créez un autre « Container » vide dans lequel vous allez ajouter des colonnes avec le même principe qu’à l’étape 6.

7-1) Changez l’arrière-plan du bloc

Afin d’ajouter une couleur de fond pour ce bloc, cliquez sur l’icône d’édition en forme de crayon et qui se trouve juste après le titre du bloc.

46 Changer le fond du bloc

Rendez-vous ensuite sur la fenêtre « Background » pour :

  • Sélectionner une couleur avec l’option « Container Background Color » ;
  • Choisir une image comme fond avec l’option « Background image ».

47 Rajouter une background image

Moi, je choisi la deuxième option en insérant une image en forme de gradient de couleur. Aussi, je mets un « Padding » de « 5% » pour la distance.

48 Inserer un pading

Par la suite, je crée une colonne pleine pour le texte de ce bloc, ce que vous pouvez faire en suivant les consignes de l’étape 6-2.

7-2) Ajoutez un bloc vide

Pour le bloc « Methode », je ne souhaitais pas que le texte ainsi que les flèches prennent toute la largeur de la page. Pour cela, je crée des colonnes vides ayant une proportion de « 1/5 » chacune. En disposant la colonne du texte entre ces deux colonnes vides, j’ai bien un peu d’espace à gauche et à droite. Ce qui fait au total trois colonnes sur la même ligne.

7-3) Création des textes et des flèches

Après le titre et le texte principale du bloc « Methode ».

49 Editer le texte du bloc

50 Inserer du texte bloc  52 Verifier le code en blanc 51 Ajout du texte en blanc

53 Resultat apres changement du bloc

Il y a juste en bas les mentions « Etape 1 », « Etape 2 » et « Etape 3 ». Ce sont évidemment des textes et vous pouvez désormais créer en suivant le même principe.

55 Ajout du texte dans le bloc etape 1

   56 Texte en noir modification a apporter

Sauf qu’ici, la colonne ne devrait pas être de « 3 », mais de « 5 » puisqu’il y a les deux cellules d’espaces vide qui se trouve sur la même ligne. Pour cela, vous allez sélectionner une colonne avec « 5 » parties et ayant une proportion de « 1/5 » chacune.

54 Section etape par etape

Ensuite, il suffit d’ajouter la colonne composée de trois parties pour les trois flèches.

57 Changer la couleur du texte

Il faut qu’elles aient les même proportion « 1/5 » afin de rester directement sous chaque étape et d’avoir des espaces à gauche et à droite.

58 Resultat apres changement de texte

Ajoutez ensuite les images dans chaque cellule comme au niveau de l’étape 6-3. N’oubliez pas d’enregistrer vos modifications afin de voir le rendu.

8) Ajoutez un autre bloc comprenant plusieurs images

Après le bloc « Methode », j’ai le bloc « Services » sur ma maquette que je souhaite ajouter et qui comporte du texte et plusieurs images.

60 Renommer le bloc service

Pour cela, je crée encore un autre « Container » que je renomme en « Services ». Je le déplace à la bonne place juste en dessous de « Methode ».

J’ajoute premièrement du texte en suivant le même principe que celui de l’étape 6-2 et je prends soin d’effectuer les mises en forme.

64 Maquette du site couleur

En faisant ensuite « Preview », je constate que le texte prend toute la largeur du site. Ce qui n’est pas forcément attrayant et je vais le rendre compact.

8-1) Rendez le texte compact  

Pour le faire, créez des colonnes vides et placez-les à gauche et à droite de celle du texte. Pour gagner du temps, dupliquez la colonne du texte deux fois de suite en prenant soin d’effacer le contenu des deux nouvelles colonnes.

61 Choix du builder element text   

Pour la duplication cliquez sur l’icône se trouvant au milieu de celles qui se trouve en haut à gauche de la colonne.

63 Changement des couleurs du texte

En revanche pour la suppression du contenu, cliquez sur l’icône de la corbeille situé totalement à droite lorsque vous glissez votre curseur sur le contenu de la colonne.

62 Ajout du texte

Pour l’ancienne colonne comportant le texte, mettez sa proportion à « 2/3 » en cliquant sur la première icône se trouvant sur la même ligne que celle de la duplication. Sélectionnez donc « 2/3 » parmi les proportions qui s’affichent.

Utilisez le même processus pour donner les proportions de « 1/6 » au deux nouvelles colonnes et placez-les à gauche et à droite de la colonne du texte.       

En appuyant sur « Preview », le nouveau rendu est beaucoup mieux.

8-2) Changez la couleur du background du bloc  

Je change la couleur de l’arrière-plan, ce que vous pouvez faire en suivant le processus décrit à l’étape 7-1.

65 Changement du background du bloc  66 Recreer la maquette correctement

A mon niveau, je copie le code de la couleur à partir du logiciel Adobe Illustrator que je viens coller dans l’espace réservé à cet effet au niveau de l’option « Container Background ».

67 Voir le resultat sur le site

8-3) Insérez les images

68 Recentrer le contenu avec des blocs

Ensuite, je vais insérer une première image portant la mention « REFERENCEMENT NATUREL » et qui couvre toute la largeur du bloc.

69 Ajouter des elements

Je duplique donc une colonne en prenant soin de donner la bonne proportion « 2/3 » pour qu’elle puisse avoir la même largeur que le texte.

70 Ajout des images dans le builder

J’utilise le même principe qu’au niveau de l’étape 6-3 pour ajouter l’élément l’image. Sauf qu’au niveau de la « Bibliothèque de médias », sélectionnez la taille originale de votre image au lieu de la taille par défaut de « Avada ».

71 Ajout image builder

Pour cela, cliquez sur l’option « Taille » située complètement en bas à droite, au-dessus du bouton bleu « Insérer dans la page » et sélectionnez la taille originale.

Je prends soin de cocher « Lift Up » au niveau de l’option « Hover Type » dans l‘interface de configuration qui apparaît juste après avoir sélectionné l’image.

Ce paramètre permet à l’image de s’agrandir légèrement lorsque vous passez le curseur dessus, un effet assez intéressant. Aussi, descendez et sur l’option « Align » et sélectionnez « Center » pour centrer l’image.

79 Penser a centrer les images

8-4) Insérez trois images sur la même ligne

Ensuite, je vais insérer trois images juste en bas de celle dernière. Pour cela, je refais le même processus avec la duplication en prenant cette fois-ci des dimensions de « 1/3 » puisque les images doivent être sur la même ligne.

81 Ajouter un element en plus

Mes trois images cliquables ont les mentions :

  • AUDIT SEO ;
  • REDACTION WEB ;
  • ILLUSTRATIONS ET INFOGRAPHIES.

Tout est désormais bien centré avec un bon rendu.

80 Resultat apres avoir centre

8-5) Ajoutez un séparateur

Un trait vient juste en-dessous des trois images et pour le faire, dupliquez une colonne et prenez soin de supprimer l’image qu’elle contient.

83 Ajouter une couleur de separation

Cliquez ensuite sur « + Element » et recherchez l’élément « Separator » puis appuyez sur le bouton comportant son inscription.

84 Centrer la separation

Sur l’interface de configuration, sélectionnez « Single Border Solid » au niveau de l’option « Style » de le fenêtre « General ».

85 Regarder le resultat de la separation

Dans la fenêtre « Design », sélectionnez la couleur que vous désirez avec l’option « Separator color ».

86 Augmenter la taille de la separation

Pour sa grandeur, cochez un pourcentage au niveau de « Separator Width », 50% pour moi. Augmentez le « Border Size », j’inscris « 4 » à mon niveau.

87 Rajouter du pading

Pour le centrer, assurez-vous aussi d’avoir « Center » coché au niveau de « Alignment ».

88 Reprendre la maquette

8-6) Réglez la distance entre les colonnes

Je souhaite que la distance entre le séparateur et les trois images soit augmentée. Pour cela, cliquez sur l’icône d’édition de la conne du séparateur qui se trouve en haut à gauche de sa colonne.

Sélectionnez la fenêtre « Design » et dans l’option « Padding » inscrivez la distance que vous voulez. Notez qu’à ce niveau, il se peut que vous ayez à tâtonner pour trouver la bonne distance pour le meilleur rendu.

Dans mon cas, j’inscris « 40 » dans la première et la troisième case de cette option. Le rendu est acceptable, mais il me faudra faire quelques ajustements après.

8-7) Ajoutez une autre ligne d’image et de texte

Pour l’ajout d’une autre ligne d’image et de texte, il vous suffit de dupliquer les colonnes de textes et d’images que vous avez déjà créé auparavant.

Pour cela, je duplique la colonne de texte et d’image du bloc « Agence » que j’avais déjà créé. Ensuite, je les déplace en dessous du séparateur.

Je modifie le texte en le remplaçant par mon nouveau texte et je procède à sa mise en forme. Je procède aussi au changement de l’image en suivant le même principe pour le changement des images.

Ajoutez ensuite à la colonne du texte, deux boutons en appuyant sur « + Element ». Cochez ensuite le rectangle de deux colonnes au niveau de la fenêtre « Nested Columns ». Notez qu’elle vous permet d’avoir deux boutons côte à côte.

Suivez ensuite les opérations décrites à l’étape 6-5 pour configurer le premier bouton. Ensuite, dupliquez et modifiez seulement le texte du deuxième bouton ainsi que le lien.

A mon niveau, j’ai deux différents boutons dont :

  • Formation en ligne ;
  • Conférence.

9) Faites un deuxième bloc de séparation

Pour cela, dupliquez le premier qui a été déjà réalisé à l’étape 5. Après cette duplication, renommez-le et déplacez-le juste après le bloc « Services ».

10) Création du bloc « BLOG »

Pour la création de ce bloc, je vais utiliser le même processus que pour les précédents blocs.

Je crée un nouveau container en le nommant « BLOG » que je déplace juste en dessous du deuxième bloc séparateur.

Changez sa couleur de fond en suivant les mêmes opérations que celles de l’étape 8-3.

10-1) Ajoutez un texte et une image

Pour l’ajout de texte, dupliquez les mêmes types de colonnes que vous aviez eu l’occasion de réaliser et qui présentent les options que vous souhaitez avoir pour le présent texte.

90 Deplacer les elements

   92 Changer le texte

Dans mon cas, le texte doit être de couleur blanche, je duplique donc la colonne de texte du bloc « Methode » que je déplace pour l’insérer dans le présent bloc.

93 Adapter le texte

Je modifie donc l’ancien texte en mettant à sa place, le nouveau texte du bloc « BLOG ».

89 Reprendre les elements avec le meme style

Créez ensuite la colonne de l’image et prenez soin d’insérer l’image réservée à cette partie. Suivez le processus présenté à l’étape 6-3. De plus, prenez soin de choisir les bonnes proportions pour chaque colonne.

Dans mon cas, je choisis « 1/2 » pour la colonne du texte et « 1/2 » pour la colonne de l’image.

94 Ajouter des colonnes

Sauvegardez les modifications et faites une « Preview » pour voir le rendu.

91 Faire de meme avec les images

10-2) Ajoutez un espace entre l’image et le bord du bloc

Pour effectuer ce changement, cliquez sur l’icône d’édition du bloc « BLOG » et rendez-vous sur la fenêtre « Design ». Inscrivez les distances dans le « Padding », je remplis « 5% » dans la première et la troisième case.

10-3) Ajoutez quatre images sur la même ligne

Selon la maquette, j’ai le texte « SEO » qui est suivi de quatre images après la ligne précédente.

110 Copier texte maquette

Je crée donc la colonne du texte « SEO » dans un premier temps avec la proportion « 1/1 ».

107 Builder container 50 50

108 Renommer bloc BLOG

Créez ensuite une colonne de proportion « ¼ » afin d’insérer une première image en suivant la même procédure qu’au niveau de l’étape 8-4.

118 Resultat partie Blog

Dupliquez trois fois de suite cette colonne en prenant soin d’insérer la bonne image et de sélectionner l’option « Lift Up ».

114 Ajout image

124 Fusion builder apres changement 123 Ajout image 122 Configuration fusion builder image 121 Image Robot

J’ai bien les 4 images :

  • ROBOT ;
  • ON SITE ;
  • OFF SITE ;
  • EXPERIENCE UTILISATEUR.

106 Inserer une separation  126 IMages dans le fusion builder 125 Ajout du texte dans le builder 120 Ajout image fusion builder 119 Changement text fusion builder  117 Ajout du padding 116 Editer fusion builder blog 115 Resultat partie Blog  113 Image blog 112 Changement du texe 111 Ajuster texte partie blog

Je refais la même chose pour le texte « Création de site web » et les deux images « WORDPRESSE » et « SITE WEB ».

109 Ajouter une couleur background

A ce niveau, je place deux colonnes vide à gauche et à droite pour que les images soient centrées.

127 Presentation resultat fusion builder

Sauvegardez vos modifications pour vérifier les changements.

11) Création d’un autre bloc d’une ligne

Je vais maintenant créer le bloc « AUDIT » en créant un nouveau « Container ». Je le place sous le précédent en prenant soin de le nommer.

128 Partie Audit maquette site        129 Creation du container

Changez sa couleur de fond en utilisant le même principe qu’à l’étape 8-2.

130 Renommer le builder bloc

J’effectue pratiquement les mêmes modifications que dans la précédente étape. Autrement dit, je duplique la colonne de « Création de site web » que je viens modifier en « AUDIT SEO ».

136 Derniere partie contact form 7

Pour insérer le texte et l’image dans ce bloc, faites aussi de même en dupliquant et en les modifiant.

131 Ajout des images dans la partie audit

132 Configuration du texte

Insérez aussi le bouton en suivant le principe de l’étape 6-5.

133 Ajout dun bouton

Augmentez le « Padding » du bloc en allant dans la fenêtre « Design » et remplissez la première et la troisième case avec les dimensions verticales.

J’inscris à mon niveau « 5% » et « 5% ».

135 Changement dans le padding

134 Resultat a modififer dans builder

12) Enregistrez vos modifications et faites une dernière vérification

Après toutes ces modifications, cliquez sur la touche « Update » qui se trouve dans le coin bas à droite. Ensuite, allez sur la page d’accueil et faites une dernière vérification pour voir si tout fonctionne correctement.

Dans le cas où il y a encore des problèmes, procédez à des corrections en fonction du bloc.

Et voilà ! Vous venez de créer le body de votre page d’accueil avec « Fusion Builder ».

Conclusion

La page d’accueil fait partie des premières pages créées lors de la création d’un site web. Et comme il s’agit de la page principale, elle est susceptible de connaître le plus de visite. Pour cette raison, vous devez prendre le soin de bien concevoir chacune de ses parties et faire en sorte qu’elle offre la meilleure expérience utilisateur. Notamment au niveau de son body qui doit présenter les informations les plus pertinentes de façon claire et facile à lire. En plus de veiller à son design qui doit être attrayant, je vous recommande d’apporter une grande attention à la vitesse de chargement de la page. Ce dernier point est crucial et peut soit augmenter ou diminuer votre taux de rebond, ce qui impactera inévitablement le nombre de clients que vous aurez.

A bientôt pour d’autres articles !