Créez un design Professionnel sur WPDistrib
Points essentiels à connaître avant de commencer ce tutoriel
Créez un design professionnel sur WPDistrib en quelques étapes simples pour donner un aspect soigné et optimisé à votre site WordPress.
Bien que WPDistrib facilite la création rapide de sites, structurer correctement ses pages est essentiel pour un rendu professionnel.
Ce tutoriel vous guide à travers les étapes nécessaires pour concevoir une page attrayante avec Spectra, un outil intégré à WPDistrib, sans nécessiter de compétences avancées en design.
Grâce à ce guide, vous apprendrez à :
- Créer une nouvelle page sur WordPress.
- Sélectionner et appliquer un modèle de design adapté.
- Personnaliser votre page pour obtenir un résultat unique et professionnel.
Contexte et notions de base
La création d’une page web nécessite un minimum de structuration pour garantir une mise en page esthétique et une navigation intuitive pour les visiteurs. WordPress, combiné avec WPDistrib, facilite grandement ce processus en intégrant des outils comme Spectra, un éditeur de blocs avancé permettant de concevoir des mises en page dynamiques et modernes.
Pour bien démarrer, il est recommandé de comprendre les éléments suivants :
- Les pages WordPress : Ce sont les éléments statiques de votre site (Accueil, Services, Contact, etc.).
- Les blocs Spectra : Ils permettent d’ajouter facilement du contenu visuel et interactif à votre page.
- L’éditeur de page Gutenberg : L’espace de travail où vous allez ajouter et organiser votre contenu.
Prérequis
Avant de commencer, assurez-vous que vous avez bien :
- Un site WordPress fonctionnel avec WPDistrib installé.
- L’extension Spectra activée (elle est incluse par défaut dans WPDistrib).
- Un accès à l’administration WordPress.
Si Spectra n’est pas activé, vous pouvez l’activer en allant dans Extensions > Extensions installées et en cliquant sur « Activer » sous Spectra.
Les étapes principales
1️⃣ Créer une nouvelle page
Cliquez pour explorer les détails du tutoriel
🎯 Dans cette étape, vous allez créer une nouvelle page pour votre site WordPress. Cette page, que nous nommerons Page d’accueil, servira de base pour y insérer du contenu et des éléments visuels.
Accès au tableau de bord → Se connecter à WordPress et accéder au tableau de bord.
🪝 Menu d’administration (à gauche) → Pages > Ajouter une page
Fenêtre de suggestions Gutenberg :
Lors de la première création d’une page, une fenêtre proposant des compositions prêtes à l’emploi s’affiche. Ce n’est pas l’objet de ce tutoriel, fermez-la en cliquant sur la croix en haut à droite.
🪝 Voici l’Éditeur Gutenberg
Saisissez Page d’accueil à la place de “Saisissez le titre”.
2️⃣ Sélectionner et appliquer un design
Cliquez pour explorer les détails du tutoriel
🎯 Cette étape consiste à choisir un modèle prédéfini grâce à l’extension Spectra, incluse dans WPDistrib. Ces modèles permettent de démarrer rapidement avec une mise en page professionnelle. Vous sélectionnerez le modèle qui correspond le mieux à vos besoins et l’appliquerez à la Page d’accueil créée précédemment.
🪝 Menu bandeau (Éditeur Gutenberg) :
Dans le menu en haut de l’éditeur Gutenberg, cliquez sur Bibliothèque de design.
Note : Ce menu est disponible grâce à l’installation de l’extension Spectra.
Fenêtre de la Bibliothèque de design :
Une fenêtre s’ouvre, affichant la Design Library.
Cliquez sur l’onglet Kits dans le menu supérieur.
Parcourez les modèles proposés.
- Astuce : Ces modèles sont limités en nombre, ce qui permet aux débutants de démarrer facilement et rapidement avec une page bien structurée.
Sélection du modèle Spectra :
Faites défiler pour trouver un modèle qui vous convient.
Exemple : Le modèle Personal Portfolio est une bonne option.
Attention : Les modèles marqués Premium nécessitent une version payante de Spectra. Choisissez un modèle sans cette mention pour continuer gratuitement.
Sélection du modèle :
Choisissez un modèle qui ne soit pas marqué Premium. Cliquez sur le modèle de votre choix.
Aperçu en direct (Live Preview) :
En bas à droite, cliquez sur Live Preview pour voir un aperçu du modèle appliqué à votre page.
Note : L’option Customize est disponible, mais elle nécessite une version payante de Spectra pour être utilisée. Passez cette étape.
Insertion du modèle :
Une fois satisfait du modèle, cliquez sur Insert Template (Insérer le modèle).
Attendez quelques instants que Spectra charge le contenu.
Le modèle sélectionné apparaîtra dans l’éditeur Gutenberg au centre de la page.
Prévisualisation du résultat :
Dans le menu bandeau (éditeur Gutenberg), cliquez sur l’icône représentant un écran d’ordinateur.
Sélectionnez Prévisualiser dans un nouvel onglet.
Un nouvel onglet s’ouvrira, affichant le résultat de votre page.
Note : Il est normal que certains styles, comme les couleurs, ne correspondent pas encore exactement au modèle. Ces ajustements seront abordés plus tard dans le tutoriel.
Retour à l’éditeur Gutenberg :
Pour revenir à l’éditeur, vous pouvez:
- Fermer l’onglet de prévisualisation.
- Ou, dans le bandeau d’administration visible sur la page prévisualisée, cliquer sur Modifier la page.
3️⃣ Personnaliser la page
Cliquez pour explorer les détails du tutoriel
🎯Dans cette dernière étape, vous apprendrez à modifier le contenu du modèle inséré dans votre page. Vous commencerez par changer les textes, puis vous prévisualiserez le résultat avant de publier la page, rendant ainsi votre contenu accessible à tous.
Modifier les blocs de texte :
Titre principal : Cliquez sur le titre principal au centre de la page.
Dans la barre latérale gauche de l’éditeur Gutenberg, vous verrez un bloc nommé Infobox.
Double-cliquez sur le texte actuel (I’m web developer Nathalie Watson) et remplacez-le par Je suis heureux ou Je suis heureuse.
Texte (Infobox) : Double-cliquez sur le texte latin du bloc. Remplacez-le par Je viens d’éditer mon premier bloc !
Bouton : Cliquez sur le bouton situé sous le texte. Ce bloc s’affiche sous le nom Bouton dans la barre latérale. Double-cliquez sur le texte actuel et remplacez-le par Cliquez ici !
Enregistrer les modifications:
Dans le menu bandeau en haut, cliquez sur Enregistrer le brouillon pour sauvegarder votre travail.
Prévisualiser la page :
Cliquez sur l’icône représentant un écran d’ordinateur dans le menu bandeau.
Sélectionnez Prévisualiser dans un nouvel onglet.
Un nouvel onglet s’ouvre, affichant les modifications.
Fermez l’onglet pour revenir à l’éditeur Gutenberg.
Publier la page:
Dans le menu bandeau, cliquez sur Publier.
Une fenêtre de confirmation s’affiche. Cliquez à nouveau sur Publier pour rendre la page accessible au public.
Note : Publier une page signifie qu’elle sera visible par tous les visiteurs de votre site.
Publication et options après publication:
Une fois la page publiée, une notification s’affiche dans la barre latérale droite de Gutenberg indiquant que la page Page d’accueil est désormais en ligne.
Voici ce que vous pouvez faire ensuite :
Voir la page : Cliquez sur l’option pour visualiser votre page directement dans le navigateur.
Ajouter une nouvelle page : Redémarrez le processus pour créer une autre page en utilisant un nouveau modèle.
Partager la page : Grâce à l’extension RankMath, vous pouvez copier le lien de votre page ou la partager directement sur vos réseaux sociaux (Twitter, Facebook) ou par e-mail.
Points essentiels à retenir avant de continuer
Compétences développées :
Dans ce tutoriel d’introduction, vous avez appris à :
- Créer une nouvelle page sur WordPress.
- Sélectionner un visuel adapté et l’appliquer grâce à l’extension Spectra.
- Personnaliser le texte de certains blocs qui composent une page.
- Prévisualiser les modifications pour vérifier le rendu final.
- Publier une page, rendant votre contenu visible au public.
Vous avez également constaté que les styles, comme les couleurs, ne correspondent pas encore parfaitement au modèle initial. Cela est normal et sera traité dans la prochaine étape.
Pour aller plus loin :
Avant de passer à la suite, vous pourriez :
- Créer de nouvelles pages, si nécessaire, en répétant les étapes précédentes.
- Compléter le texte de votre page actuelle pour qu’il corresponde pleinement à votre objectif.
- Expérimenter avec l’éditeur Gutenberg pour mieux comprendre ses possibilités.
- Tester l’ajout de nouvelles animations, effets visuels ou blocs pour explorer davantage les fonctionnalités de Spectra.
Problèmes ou questions fréquentes
Voici quelques problèmes courants et leurs solutions :
- Le modèle ne s’affiche pas correctement après l’importation : Vérifiez que Spectra est bien activé et que vous avez bien appliqué le modèle à la bonne page.
- Les modifications ne sont pas visibles en ligne : Pensez à enregistrer et publier vos changements. Vous pouvez aussi vider le cache de votre navigateur.
- Le style du modèle ne correspond pas parfaitement à l’aperçu: C’est normal. À l’étape suivante, vous découvrirez pourquoi et comment y remédier. Vous aurez alors deux options:
- Reproduire fidèlement le modèle : Une solution simple à mettre en œuvre pour obtenir un rendu identique.
- Personnaliser librement l’apparence : Une approche offrant une flexibilité totale sur le design, nécessitant un peu plus d’apprentissage.
Étape suivante : Personnaliser votre site à 100%
Dans le prochain tutoriel, vous apprendrez à personnaliser votre site en profondeur :
- Modifier les couleurs, polices et styles globaux.
- Ajuster les paramètres pour rendre le design unique.
- Gérer les éléments graphiques pour un site totalement personnalisé.
Rendez-vous dans la suite pour aller encore plus loin dans la création de votre site WordPress avec WPDistrib ! 🚀