Construisez une page d’accueil professionnelle, esthétique et optimisée

🚀 1. Introduction à Elementor

Elementor est un page builder visuel très populaire dans WordPress. Il permet de créer des pages complexes sans écrire une seule ligne de code.

La page d’accueil importée depuis la démo OceanWP a déjà été créée avec Elementor. Il vous suffit de cliquer sur “Modifier avec Elementor” dans la barre d’administration en haut de la page pour commencer.

Interface d’Elementor

L’écran Elementor se compose de deux zones :

• À gauche : les éléments disponibles (boutons, images, sections, titres…) et les options de personnalisation

• À droite : la prévisualisation en temps réel de votre page

Vous pouvez glisser-déposer les widgets de gauche vers la page, et personnaliser chaque bloc à l’aide du menu contextuel.

🎯 2. Personnalisez le Hero Header

Le hero header est la première section visible sur la page d’accueil. Il doit :

• Attirer l’attention

• Être visuellement fort

• Contenir un appel à l’action clair (CTA)

• Être optimisé pour le SEO (structure HTML)

a) Structure des titres pour le SEO

Les balises HTML doivent suivre une hiérarchie logique :

• H1 : Titre principal de la page (unique)

• H2, H3 : Sous-titres

• P : Paragraphe

🔍 Astuce SEO : mettez les mots-clés importants dans vos balises H1, H2.

b) Modifier le contenu du hero

Étapes :

• Cliquez sur le titre principal

• Remplacez le texte par : Banana Design, pour des sites à croquer

• Changez la balise de titre (H2 ou H1) si besoin dans l’onglet “Contenu”

• Ajoutez un nouveau bloc Titre (H1) en dessous si nécessaire (glisser-déposer)

Style :

• Taille : 21px

• Couleur : #FFFFFF

• Marge supérieure : 20px (onglet “Avancé”)

c) Modifier l’image d’arrière-plan

• Survolez la section > cliquez sur les 6 petits points

• Dans la colonne de gauche > onglet “Style”

• Cliquez sur l’image > téléversez votre master visuel (ex : image de banane)

• Centrez l’image verticalement

• Ajoutez un overlay dégradé :

  • Type : dégradé

  • Couleur 1 : transparence (#000000 à 0%)

  • Couleur 2 : #F2295B à 40%

  • Angle : 0°

• Ajoutez une forme de séparation :

  • Onglet “Forme de séparation” > Position : Bas

  • Type : Vagues

  • Ajustez largeur/hauteur

• Ajustez la hauteur de la section :

  • Onglet “Mise en page”

  • Hauteur min : 715 px

🧲 3. Personnalisez les boutons

Les boutons doivent :

• Être visuellement attractifs

• Rediriger vers des ancres HTML ou des pages

a) Modifier un bouton existant

• Cliquez sur un bouton

• Contenu :

  • Texte : “En savoir plus”

  • Lien : #ensavoirplus

• Style :

  • Couleur fond : #63C3E9 (sky blue)

  • Couleur texte : #FFFFFF

  • Rayon de bordure : 50

  • Survol : même couleur avec opacité réduite

b) Dupliquer et personnaliser

• Supprimez le second bouton

• Clic droit sur le bouton stylisé > Copier

• Collez à droite > changez texte par : “Nous contacter”

• Lien : #contact

• Couleur : #DA658A (rose)

🎬 4. Ajoutez des animations

Rendez vos boutons plus dynamiques au chargement.

• Sélectionnez le bouton de gauche

• Onglet “Avancé” > Effets de mouvement > “Fade In Left”

• Sélectionnez le bouton de droite

• “Fade In Right”

⚠️ À éviter : trop d’animations tue l’animation. Gardez-le sobre.

📐 5. En résumé

🎯 Vous avez maintenant une page d’accueil structurée, esthétique et fonctionnelle.
Dans le prochain chapitre, vous apprendrez à personnaliser le contenu de chaque section pour construire un site entièrement professionnel.