Créez votre site web en 45 minutes avec Elementor !

Avez-vous toujours rêvé de créer un site web sans avoir de connaissances en programmation, en design ou en marketing ? Bon il est vrai qu’aujourd’hui tout le monde vous raconte l’histoire qu’avec l’IA vous allez pouvoir construire une fusée pour concurrencer le petit Elon. Mais dans les fait, il est difficile à prendre en main les IA pour créer des sites et a fortiori du code quand on est pas développeur.

C’est pour cela que dans cet article, je vais vous guider pas à pas pour concevoir votre propre site. Je vais également vous présenter WordPress et son extension puissante, Elementor, pour transformer vos idées en réalité en quelques clics seulement.

Étape 1 : Obtenez un nom de domaine et un hébergement

Avant de commencer, il vous faut deux éléments indispensables :

1. Un nom de domaine : C’est l’adresse de votre site, comme www.monsite.com. Il doit être simple à retenir et refléter votre activité.
2. Un hébergement : Imaginez un serveur comme une maison pour votre site. C’est ici que seront stockés vos données, images et contenus.

Personnellement, j’ai choisi OVH pour leur performance et leur fiabilité. (Je précise que je n’ai aucun partenariat avec eux, c’est simplement le service que j’utilise, car à mon sens, ils offrent les solutions les plus performantes du marché et pas cher.) Avec OVH, le rapport qualité-prix est top, on peut faire un site pour moins de 25€ / an. De plus leurs solutions conviennent aussi bien aux débutants qu’aux professionnels exigeants.

Étape 2 : Découvrez WordPress, la base de votre site

WordPress, c’est l’outil qui va permettre de construire et de gérer votre site web. Ce CMS (Content Management System, ou Système de Gestion de Contenu) est utilisé par plus de 40 % des sites dans le monde grâce à sa flexibilité et sa simplicité. Bon pour être nuancé, il y a de plus en plus de critiques qui émergent à l’encontre de WordPress, mais pour une utilisations simple comme faire son site pour son entreprise, c’est largement suffisant et facile à utiliser.

Avec WordPress, vous pouvez :

• Créer des pages statiques (comme une page d’accueil ou une page « À propos »).
• Publier des articles de blog régulièrement.
• Gérer vos contenus multimédias (images, vidéos).
• Ajouter des fonctionnalités avancées grâce à des extensions (ou plugins).

Une fois votre hébergement configuré avec OVH, vous pouvez installer WordPress en quelques clics depuis leur tableau de bord. Y a vraiment aucune difficulté, lorsque vous achetez votre nom de domaine et hébergement, OVH vous demande si vous souhaitez installer WordPress. Il suffit de dire « oui ». Et c’est fait.

Ensuite, il suffira de vous connecter à votre tableau de bord WordPress pour commencer à personnaliser votre site. Voici les principales sections à explorer :

• Articles : Parfait pour publier des actualités ou des articles de blog.
• Pages : Idéal pour créer des pages permanentes, comme vos services ou une page contact.
• Apparence : Permet de gérer le thème et les options de design.
• Extensions : Ajoutez de nouvelles fonctionnalités à votre site (comme des galeries d’images ou des formulaires de contact).

Étape 3 : Passez au niveau supérieur avec Elementor

Il faut savoir que WordPress est fourni avec des thèmes/templates de site. Mais malheureusement, ils sont souvent moches à mon sens.

Donc maintenant que WordPress est installé, passons à l’étape suivante : Elementor.

Elementor est une extension (ou plugin) de WordPress qui transforme la création de votre site en un jeu d’enfant. Grâce à son interface en glisser-déposer, je peux personnaliser chaque élément sans coder : les textes, les images, les couleurs, les polices, tout est modifiable en temps réel.

Avec Elementor, voici ce que je peux faire :

• Construire une page d’accueil captivante avec des sections modernes et des animations.
• Créer des pages spécifiques (services, témoignages, etc.) avec des blocs prédéfinis.
• Optimiser l’apparence mobile de mon site pour garantir une navigation fluide sur smartphone.

Pour commencer, installez l’extension Elementor depuis la section Extensions de WordPress, puis activez-la. Vous êtes maintenant prêt(e) à concevoir un site unique qui reflète votre identité.

Étape 4 : Optimisez le design

Une fois les bases de votre site mises en place, l’étape cruciale est d’optimiser son design. Un site bien conçu n’est pas seulement esthétique, il doit également offrir une expérience utilisateur fluide et intuitive. Voici comment je procède pour transformer un site fonctionnel en un véritable atout visuel.

L’en-tête, ou section Hero, est généralement la première chose que les visiteurs voient lorsqu’ils arrivent sur votre site. C’est ici que je capte leur attention en quelques secondes :

• Titre accrocheur : J’utilise un titre clair, concis et impactant qui répond immédiatement à une question clé ou souligne la valeur ajoutée de mes services. Par exemple : « Simplifiez votre quotidien grâce à nos solutions innovantes. »
• Image ou vidéo de fond : Une image de qualité ou une vidéo immersive en arrière-plan donne immédiatement du dynamisme à la page. Je m’assure que l’image est optimisée pour le web afin de ne pas ralentir le chargement du site.
• Appel à l’action (CTA) : Un bouton clair et visible, comme « Découvrez nos services » ou « Contactez-nous », guide l’utilisateur vers la prochaine étape.

La cohérence visuelle est essentielle pour donner une image professionnelle. Voici comment je procède :

• Choix de 3 à 4 couleurs principales :
  • Une couleur dominante qui reflète l’identité de la marque (ex. : bleu pour la confiance, vert pour l’écologie).
  • Une couleur secondaire pour les accents (boutons, liens).
  • Une ou deux couleurs neutres (gris, blanc) pour équilibrer l’ensemble.
• Harmonie des contrastes : Je m’assure que le texte est toujours lisible sur les images ou arrière-plans grâce à un contraste suffisant.

Astuce : J’enregistre ces couleurs comme « globales » dans Elementor pour les réutiliser facilement sur tout le site.

Les polices que j’utilise doivent être lisibles et correspondre à l’identité de mon site :

• Polices modernes et claires : Montserrat ou Lato pour les textes principaux.
• Hiérarchisation : J’attribue des tailles et styles spécifiques à chaque type de contenu :
  • H1 (titres principaux) : Grands et audacieux pour attirer l’attention.
  • H2 et H3 (sous-titres) : Moins imposants mais bien visibles pour structurer l’information.
  • Corps de texte : Taille standard (16-18 px) pour un confort de lecture optimal.
• Conseil supplémentaire : J’utilise au maximum deux polices pour éviter de surcharger visuellement la page.

Un site bien structuré est agréable à parcourir. Voici mes bonnes pratiques :

• Espacement : Je laisse suffisamment d’espace (padding et marges) entre les éléments pour éviter un effet « serré ». L’utilisateur doit se sentir à l’aise visuellement.
• Blocs bien définis : Chaque section doit avoir un objectif clair : présenter un service, raconter une histoire, ou inciter à une action.
• Transitions fluides : J’utilise des séparateurs ou des lignes pour guider l’œil de l’utilisateur d’une section à l’autre.

Les médias visuels jouent un rôle clé dans l’attrait d’un site, mais ils doivent être optimisés pour éviter de ralentir le chargement. Voici comment je m’y prends :

• Compression des images : Avant d’uploader une image, je la compresse avec des outils comme TinyPNG pour réduire sa taille sans perdre en qualité.
• Format adapté : J’utilise les formats modernes comme WebP pour un meilleur équilibre entre qualité et rapidité.
• Dimensions spécifiques : Je redimensionne les images selon leur usage (ex. : bannière pleine largeur ou miniature).

Les animations peuvent ajouter une touche moderne à votre site, à condition qu’elles soient utilisées avec parcimonie :

• Effets au survol : Boutons qui changent de couleur ou images qui zooment légèrement lorsque l’on passe la souris dessus.
• Animations de contenu : Texte ou images qui apparaissent progressivement au défilement de la page.
• Attention : J’évite les animations trop rapides ou répétitives, qui pourraient distraire ou irriter les visiteurs.

Aujourd’hui, plus de 50 % des visites se font depuis un smartphone. J’adapte systématiquement mon site pour qu’il soit aussi agréable à utiliser sur mobile que sur un ordinateur :

• Adaptation des polices : Les titres trop grands sur desktop sont réduits pour s’afficher correctement sur un écran de téléphone.
• Espacement vertical : J’évite les sections trop espacées pour réduire le nombre de défilements nécessaires.
• Menus simplifiés : Un menu hamburger (icône à trois lignes) est souvent préférable pour les appareils mobiles.
• Chargement rapide : Je teste la vitesse de chargement sur mobile avec des outils comme Google PageSpeed Insights et j’optimise si nécessaire.

L’optimisation d’un design est un processus continu. Une fois le site lancé, je collecte des retours des utilisateurs pour identifier les points à améliorer. Voici ce que je vérifie :

Temps de chargement : Les pages s’affichent-elles en moins de 3 secondes ?

Lisibilité : Le contenu est-il facilement compréhensible ?

Navigation intuitive : Les visiteurs trouvent-ils ce qu’ils cherchent rapidement ?

Prêt à vous lancer ? N’hésitez pas à partager le résultat et faire un peu de pub pour votre site 🙂 !