Donnez vie à votre site avec du contenu structuré et responsive

✏️ 1. Personnalisez la première section

Votre structure est prête. Il est temps de remplir les blocs de contenu et de leur donner du style.

🔤 a) Modifier le titre principal

• Scrollez jusqu’à la première section sous le hero header

• Cliquez sur le titre existant

• Remplacez-le par : Création de sites WordPress

• Laissez la balise sur H2

• Dans l’onglet Style, changez la couleur en rose (#DA658A)

• Supprimez l’icône si elle est présente

🧩 b) Créez les blocs « Services »

Nous allons afficher 3 services dans des colonnes égales et stylisées :

Étapes :

• Créez une nouvelle section à 4 colonnes

• Supprimez-en une pour garder 3 colonnes

• Cliquez sur chaque colonne > dans l’onglet Avancé, donnez-leur une largeur de 33%

Dans chaque colonne :

• Ajoutez un titre H2 : SITES VITRINES (en majuscules)

• Centrez le texte, couleur blanche

• Ajoutez un padding haut/bas : 120px

• Cliquez sur la colonne > Onglet Style :

  • Arrière-plan : image (ex. : appareil photo)

  • Taille : Medium Large

  • Position : centrée

  • Répétition : aucune

  • Taille : Couvrir

  • Bordure arrondie : 20px

• Ajoutez une superposition dégradée si besoin

• Copiez-collez cette colonne deux fois

• Changez les titres : SITES E-COMMERCE, SITES ÉVÉNEMENTIELS

• Changez les images : bonbon, glace…

🔄 Rappel important : marges internes vs marges externes

• Padding (marge interne) : espace entre le contenu et la bordure du bloc

• Margin (marge externe) : espace entre le bloc et les autres éléments

📦 2. Personnalisez la seconde section

Nous allons maintenant travailler sur la section suivante, dédiée à vos services de visibilité.

🧹 a) Nettoyez la section

• Supprimez la colonne de droite

• Supprimez l’icône verte si présente

📝 b) Modifiez le titre et le contenu

• Remplacez le titre H2 par : Booster de visibilité

• Stylisez le texte :

  • Couleur : rose

  • Alignement centré

  • Marges haut/bas : 100px

🖼️ c) Ajoutez et stylisez l’image

• Ajoutez une image dans la section

• Positionnez-la à votre convenance (gauche, droite ou fond)

• Ajoutez une forme de séparation :

  • En haut et en bas

  • Type : vague

  • Hauteur : 60px

🔗 d) Connectez avec l’ancre du bouton

• Sélectionnez la section > Onglet Avancé

• Dans le champ ID CSS, entrez : ensavoirplus
  💡 Cela permet au bouton du hero de faire défiler la page jusqu’à cette section.

🎨 e) Stylisez la colonne

• Couleur de fond : blanc avec opacité à 90 % : #FFFFFFD9

• Marges externes : 120px

• Marges internes : 80px

🔳 f) Ajoutez des boîtes d’icônes

• Glissez le widget Boîte d’icône au-dessus du paragraphe

• Paramètres :

  • Titre : Référencement naturel (balise H3)

  • Icône : au choix (ex : graphique, SEO…)

  • Couleur icône : personnalisée

  • Couleur titre : rose, en majuscules

  • Alignement : centré

• Supprimez les autres boîtes si existantes

• Dupliquez celle que vous venez de créer pour en obtenir 3

• Modifiez les titres : Référencement payant, Community management

• Changez les icônes

📱 3. Adaptez le design à tous les écrans

Votre site doit être parfaitement lisible sur tous les appareils.

📐 Mode responsive d’Elementor

• Cliquez sur l’icône “Écrans” (en bas à gauche)

• Passez à la vue Tablette

• Ajustez polices, marges, tailles d’éléments

• Passez à la vue Mobile

• Centrez les blocs, ajustez les espacements

• Vérifiez que les titres et icônes s’affichent correctement

💡 Utilisez les icônes de responsive (ordinateur, tablette, mobile) disponibles pour chaque propriété (taille, marge, etc.)

✅ En résumé

🎉 Bravo ! Votre page d’accueil est maintenant riche en contenu, élégante et responsive.
Vous maîtrisez la construction de pages complexes avec Elementor.
Dans le prochain chapitre, vous apprendrez à intégrer des fonctionnalités avancées grâce aux extensions WordPress.