Créez des expériences sur mesure, puissantes et flexibles sans toucher au code

🚧 1. Créez une page d’attente personnalisée avec Elementor

Pourquoi une page d’attente ?
Pendant les phases de développement, il est recommandé de masquer le site au public. Pour cela, vous pouvez créer une page de maintenance élégante et professionnelle.

🛠 Étapes de mise en place

• Créez un modèle Elementor

• Allez dans Modèles > Ajouter

• Type : Page, nom : Attente

• Dans les réglages de la page, choisissez Elementor Canvas

• Personnalisez votre page

• Créez-la vous-même ou utilisez un modèle de type “Maintenance” via l’icône “dossier”

• Activez le mode maintenance

• Dans WordPress : Elementor > Outils > Mode Maintenance

• Sélectionnez le mode “Arrive bientôt”

• Associez le modèle « Attente »

• Résultat : seuls les utilisateurs connectés peuvent accéder au site

🔝 2. Créez un header et un footer personnalisés

Grâce au thème OceanWP, vous pouvez personnaliser totalement l’en-tête et le pied de page avec Elementor.

📌 Créez un en-tête personnalisé

• OceanWP > Ma bibliothèque > Ajouter un nouveau

• Nommez-le Header puis cliquez sur Modifier avec Elementor

• Sélectionnez le modèle Elementor pleine largeur

• Ajoutez le menu avec le widget “Nav Menu” de Royal Elementor (icône violette “R”)

• Publiez

📌 Intégrez-le à votre site

• Allez dans Apparence > Personnaliser > En-tête > Menu

• Choisissez En-tête personnalisé

• Sélectionnez le modèle “Header”

• Répétez le processus pour créer un footer personnalisé via Widgets de pied de page

💡 Astuce : Avec Elementor Pro, vous pouvez gérer toute la structure du site (templates, archives, articles, etc.) sans dépendre d’un thème tiers, en utilisant le thème ultra-léger Hello Theme.

🎨 3. Ajoutez du CSS personnalisé

À quoi ça sert ?
Quand Elementor ou OceanWP ne proposent pas l’option visuelle que vous souhaitez, vous pouvez la créer vous-même grâce au CSS personnalisé.

🎯 Étapes pour ajouter du CSS

• Cibler l’élément

• Cliquez droit sur l’élément dans votre navigateur > Inspecter

• Copiez la classe CSS ou attribuez une classe dans l’onglet « Avancé » d’Elementor (ex. : .ma_classe_personnalisee)

• Ajouter une règle CSS

• Allez dans Apparence > Personnaliser > CSS/JS personnalisé

• Collez le sélecteur et ajoutez une règle, par exemple :
  .ma_classe_personnalisee { background-color: red !important; }

📌 Pour apprendre les bases du CSS, consultez le cours gratuit “Apprenez à créer votre site web avec HTML5 et CSS3” sur OpenClassrooms.

📁 4. Créez des types de contenus personnalisés (CPT)

Pourquoi les CPT ?
Les Custom Post Types permettent de gérer des contenus spécifiques comme :

• Témoignages

• Réalisations

• Portfolios

• Offres d’emploi

• Annonces, etc.

🛠 Étapes pour créer un CPT “Réalisations”

• Installez l’extension CPT UI

• Dans le dashboard, cliquez sur CPT UI > Ajouter un type de publication

• Slug : realisation

• Pluriel : Réalisations

• Singulier : Réalisation

• Activez les catégories

• Validez. Une nouvelle rubrique Réalisations apparaît.

• Ajoutez vos réalisations avec des titres, images, descriptions et catégories (ex. : logo, site web, plaquette…).

📌 Affichez vos réalisations avec Elementor

• Le widget “Posts” est réservé à la version Pro d’Elementor, mais vous pouvez utiliser une extension gratuite :

• Installez Livemesh Addons for Elementor

• Éditez votre page avec Elementor

• Ajoutez le widget Posts Grid

• Dans les réglages :

  • Post Type : Réalisations

  • Catégories : filtrez selon vos besoins

• Vos contenus “Réalisations” s’affichent automatiquement, avec des options de style avancées.

✅ En résumé

🎯 Prochaine étape ?
Votre site est maintenant professionnel, personnalisable, structuré, et enrichi de fonctionnalités avancées.

➡️ Dans le prochain chapitre, nous allons finaliser la mise en ligne, optimiser les paramètres de sécurité et préparer le référencement SEO de votre site.