Dans ce tutoriel, nous allons voir en détail étape par étape comment créer avec Divi et son constructeur de page intégré une page d’accueil de style magazine, dignes d’un site professionnel.
Qu’est-ce qu’une page d’accueil de style magazine exactement ?
Imaginez une vitrine bien organisée où chaque article, chaque image et chaque bout de texte a sa propre place, tout en formant un ensemble harmonieux. Dans le contexte d’un site web, une page d’accueil de style magazine est conçue pour captiver et guider les lecteurs à travers différents articles et catégories en un coup d’œil. Si votre site contient beaucoup de contenu et que vous souhaitiez mettre en avant vos dernières actualités, vos reportages photo ou vos articles de fond, cette disposition est faite pour vous.
Planification de la disposition de votre page d'accueil
Une conception efficace commence toujours par une planification soignée. Avant de plonger tête baissée dans Divi Builder et commencer à ajouter des modules, il est crucial de réfléchir à la structure de votre page.
- Objectifs de la page d’accueil
- Avant toute chose, demandez-vous ce que vous souhaitez accomplir avec cette page d’accueil. Souhaitez-vous augmenter le trafic vers certains articles ? Mettre en avant un événement spécial ? Ou peut-être présenter une variété d’articles pour fidéliser vos lecteurs ?
- Sélection des catégories d’articles
- Identification des catégories principales : Chaque magazine ou site d’actualités a ses propres sections ou catégories. Que ce soit l’actualité, le sport, la culture ou la technologie, identifiez les vôtres.
- Priorisation des catégories : Certaines catégories nécessiteront une présence plus dominante sur la page d’accueil. Décidez lesquelles méritent ce traitement spécial.
- Esquisse de la mise en page
- Croquis initial : Prenez une feuille de papier et esquissez une ébauche brute de la façon dont vous imaginez la page. Cela n’a pas besoin d’être parfait, mais cela donne une base de travail.
- Disposition des éléments : Identifiez où vous voulez placer votre en-tête, vos articles en vedette, vos sections de catégorie, et d’autres éléments comme les widgets ou les publicités.
- Hiérarchie visuelle
- Éléments dominants : Quels sont les éléments ou les sections que vous voulez vraiment mettre en avant ? Cela pourrait être un gros titre pour un article de fond ou une grande image pour une histoire visuelle.
- Balancement et flow : Assurez-vous que la page est équilibrée, que le regard du visiteur est guidé naturellement à travers le contenu, et qu’il n’y a pas de zones surchargées ou vides.
- Réflexion sur l’interactivité
- Effets au survol : Comment les éléments réagiront-ils lorsque le curseur passera dessus ? Cela pourrait être un changement de couleur, un zoom sur une image, etc.
- Éléments cliquables : Assurez-vous que les utilisateurs sachent instinctivement où cliquer. Utilisez des boutons, des liens, et d’autres indicateurs.
Choix du modèle de la page d'Accueil avec Divi Builder
Maintenant que vous avez un plan solide en main, il est temps de passer à l’action et de commencer à créer votre page d’accueil tant attendue.
- Naviguer vers les pages : Dans le menu latéral gauche du tableau de bord WordPress, cliquez sur “Pages”, puis sur “Ajouter”.
- Nommer la page : Dans le champ du titre en haut, tapez « Accueil » ou un autre titre de votre choix. Ce titre peut être modifié plus tard si nécessaire.
- Passer en mode Divi Builder : Au-dessus de l’éditeur de texte, vous verrez un bouton violet indiquant “Utiliser Divi Builder”. Cliquez dessus pour passer en mode éditeur visuel de Divi.
Choisir un modèle (facultatif)
Pour ce tutoriel nous allons créer une page d’accueil à partir de zéro, mais sachez que Divi offre une large gamme modèles préconçus pour différentes niches.
Après avoir cliqué sur “Utiliser Divi Builder” une fenêtre s’ouvre vous proposant 3 options différentes :
- Construire une page à partir de zéro.
- Cloner un page existante
- Choisir la mise en page.
Si vous souhaitez utiliser un des modèles préconçus, cliquez sur “Choisir la mise en page“ puis parcourez la bibliothèque pour trouver un modèle qui vous convient. : Si vous trouvez un modèle qui vous plaît, cliquez dessus puis sur « Utiliser ce modèle (use this layout) » Vous pourrez ensuite le modifier à votre guise pour qu’il corresponde à vos besoins.
Pour les besoins de ce tutoriel nous allons sélectionner l’option « Continuer à partir de zero« .
Le module blog
Avant de commencer à créer notre page d’accueil, voyons en détail le module Blog. Ce module est le plus important de tous lorsqu’on souhaite créer une page d’accueil de style magazine.
Pour commencer ajoutons le à notre page. Pour ce faire, suivez la procédure suivante :
- Ajout de la section : Dans Divi Builder, cliquez sur le + bleu en bas pour ajouter une nouvelle section. Sélectionnez « Section standard ».
- Rangé : Sélectionner le style de rangé que vous désirez (nombre de colonnes).
- Sélectionnez le module : Placer le module « Blog ».
Le module Blog contient une multitude d’options de personnalisation qui se divise en 3 parties : Contenu, Style, Avancé.
L’onglet contenu
L’onglet « Contenu » du module « Blog » de Divi-Builder est l’endroit où vous configurez quels sont les articles et pages que vous souhaitez afficher sur votre page d’accueil. Il vous donne un contrôle complet sur les articles qui apparaissent et comment ils sont présentés. Jetons un œil approfondi sur ses options.
On peut bien sûr ajouter plusieurs modules « Blog » sur une page et leur donner des configurations différentes.
On peut voir que cet onglet est lui-même divisé en différentes sections : Contenu, Éléments, Lien, Fond, Étiquette Admin.
La section contenu :
- Type de post: pour déterminer quel type de publication vous souhaitez afficher. Article, Pages, Fichier Media, Projets. Pour notre exemple on choisit Articles.
- Nombre de post: pour déterminer nombre de post à afficher.
- Catégories incluses : pour permet de déterminer la catégories d’où on veut afficher les articles.
- Format de dates : sous quel format vous souhaitez afficher la date de l’article.
- Longueur du contenu : sélectionner ici « Monter un extrait », pour afficher le début de votre article.
- Utiliser des extrait : Laissez cette options cochez a moi que vous ne gêneriez d’autre extrait.
- Longueur de l’extrait : Comme son nom l’indique, cela permet de définir la lgonguer de l’extrait (la valeur par défaut est 270).
La section Élément
- Montrer l’image principale : Déterminez si vous voulez afficher l’image principale de chaque article.
- Montrer le bouton En lire plus : ce bouton dirige vos lecteurs vers l’article complet lorsqu’ils cliquent dessus.
- Afficher l’auteur : Affiche le nom de l’auteur de l’article.
- Afficher la date : Indique quand l’article a été publié.
- Afficher les catégories : Affichez les catégories associées à chaque article.
- Afficher le nombre de commentaires : Montrez le nombre de commentaires que chaque article a reçus.
- Afficher la pagination : Pour afficher les post précédents ou suivants.
La section Liens
- URL du lien de module : Cela vous permet de décider si un clic sur l’article le dirigera vers le post complet ou non.
- Cible lien du module : Cette option permet de choisir si le lien vers l’article va s’ouvrir dans la même fenêtre ou dans un nouvel onglet de navigateur.
La section Fond
- Couleur / Image / Vidéo d’arrière-plan, Masques : Ici, vous pouvez personnaliser l’arrière-plan de l’ensemble du module. C’est particulièrement utile si vous voulez faire ressortir le module sur votre page.
Étiquette Admin
- Permet changer le titre du Module (blog) par un autre nom.
L’onglet Style
L’onglet « Style » du module « Blog » de Divi est le lieu où vous allez pouvoir définir en profondeur l’apparence visuelle des articles ou pages que vous allez afficher et faire en sorte que votre section de blog ne se contente pas de fournir de l’information, mais soit aussi visuellement attrayante.
Les options de personnalisation sont si large qu’il serait difficile de toutes les énumérés, en voici un résumé.
- Superposition
- Choisir une couleur pour la superposition qui apparaît généralement lorsqu’un visiteur survole un article.
- Activer une icône qui apparaîtra au-dessus de l’image lorsqu’un utilisateur survole un article. Vous pouvez personnaliser cette icône et sa couleur.
- Image
- Ajuster l’espacement autour de l’image, en définissant les marges et les rembourrages.
- Arrondir les coins de l’image en vedette pour un look plus doux ou moderne.
- Ajouter une ombre pour donner à l’image un effet de profondeur ou pour la distinguer du fond.
- Texte
- Aligner votre texte à gauche, au centre, à droite ou justifié.
- Ajouter une ombre pour rendre le texte plus lisible sur des fonds variés.
- Titre texte
- Personnaliser la police, ajuster sa taille et choisir une couleur pour le titre de chaque article.
- Ajuster l’espacement autour du titre pour qu’il respire ou soit plus proche des autres éléments.
- Corps Texte
- Sélectionner la police pour le corps de l’extrait, sa taille et sa couleur.
- Modifier l’espacement autour de l’extrait pour un agencement optimisé.
- Métadonnées Texte
- Définir le style pour les métadonnées, comme la date, l’auteur, et les catégories.
- Ajuster l’espace entre les métadonnées et les autres éléments pour une clarté optimale.
- Afficher la pagination texte. Police
- Personnaliser le look de vos boutons ou liens de pagination pour qu’ils s’intègrent bien avec le reste du design.
- Choisir une couleur de fond pour la pagination, surtout si vous utilisez des boutons.
- Animations
- Créer différentes animation de toutes sortes lorsque le module s’active.
L’onglet Avancé
L’onglet « Avancé » du module « Blog » offre des options supplémentaires pour les utilisateurs qui souhaitent avoir plus de contrôle sur des aspects spécifiques de leur design, ou qui veulent intégrer des personnalisations plus avancées via CSS. Voici un aperçu détaillé des options disponibles.
Vous pourrez :
- Ajouter un identifiant unique à ce module en particulier. C’est très utile pour cibler ce module spécifique avec du code CSS ou JavaScript personnalisé.
- Ajouter des classes personnalisées à ce module. Vous pouvez ajouter plusieurs classes séparées par un espace.
- Désactiver le module sur des tablettes, smartphones ou ordinateurs de bureau. Cela peut être utile si vous voulez créer des versions différentes de votre page pour différents appareils.
- Si vous n’avez pas déjà configuré d’animations dans l’onglet « Style« , vous pouvez également le faire ici. Vous pouvez définir la durée de la transition, la courbe de vitesse, et le délai.
- Changer la position du module avec les options relatives, absolues, fixées, ou par défaut.
- Si vous avez des éléments qui se chevauchent, le Z-index vous permet de déterminer quel élément doit apparaître en haut.
- Créer des effets défilement.
Je vous invite à créer une page test pour bien vous exercer sur ce module avant de passer à la suite. En testant les multiples options, il est très probable que vous découvriez des possibilités que vous ne soupçonniez même pas.
Construction d’une page d’accueil à partir de zéro
Bien commençons maintenant à créer le design de notre page d’accueil. Nous allons y intégrer différents modules pour lui donner un rendu professionnel.
Après avoir cliqué sur « Commencer à construire », un nouvelle fenêtre apparait dans laquelle vous allez devoir choisir la première rangé de votre page.
Ajout d’un slider
Une fois la rangée créée, une nouvelle fenêtre s’ouvre, vous demandant de choisir un module, parmi la liste disponible, pour notre exemple, nous allons choisir le module Diapo, pour créer placer une sorte de slider en haut de page.
Libre à vous ensuite de personnaliser ce premier élément comme bon vous semble avec les options du module.
Ajout des articles avec le module Blog
On va maintenant créer une rangée avec une disposition spéciale, composé de deux colonnes avec deux autres colonnes situé sous la deuxième colonne (voir vidéo ci-dessous).
Ajout d'un titre pour chaque catégorie
- Utilisez le module « Texte » pour ajouter un titre de section qui identifie la catégorie. Par exemple, « Actualités », « Voyages », « Technologie », etc.
- Écrivez le titre, puis dans le menu déroulant situe sous la boite paragraphe sélectionnez le type de titre que vous désirez (h2 a h6).
- Personnalisez le texte à votre convenance : taille, couleur, marges, etc.
Maintenant en dans le première colonne sous le module texte, on va placer le module blog et sélectionner :
- Type de post : Article
- Nombre de post : 2
- Catégorie incluse : Dans notre exemple, le nom de la catégorie est : Catégorie 1.
Dans la seconde colonne, on va intégrer une barre de recherche avec le module Chercher.
Dans chacune des deux colonnes situées en dessous, on va placer des modules Texte et Blog comme on l’a fait dans la colonne de gauche, s’en sélectionnant cette fois-ci deux nouvelles catégories et en affichant 1 seul article par catégorie.
Nous avons réalisé une ébauche de page d’accueil, somme toute assez basique, mais cela vous donne aperçu des possibilités offertes par Divi-Builder pour réaliser une page de style magazines.
Libre à vous maintenant de faire parler votre sens créatif en :
- Personnalisant l’apparence des articles : superposition, espacement, bordure, ombre, etc.
- Adaptez la typographie, les couleurs pour qu’ils correspondent au design global de votre site.
- Ajouter de nouveau éléments en utilisant les différents modules disponibles.
Aller plus loin avec le thème Extra
Le thème Extra est un autre produit phare d’Elegant Themes, tout comme Divi. Il est spécifiquement conçu pour les magazines en ligne et les sites d’actualités, offrant des mises en page et des widgets qui mettent l’accent sur la catégorisation et la segmentation des contenus.
- Particularités du thème Extra:
- Mise en page axée sur les magazines : Extra utilise le Divi Builder mais est livré avec des modules et des mises en page adaptés aux sites de magazines.
- Catégories en vedette : Possibilité de mettre en avant certaines catégories sur la page d’accueil pour attirer l’attention sur les sujets les plus importants.
- Mise en place de la page d’accueil avec Extra:
- Contrairement à Divi, Extra possède des modules spécifiques pour montrer les articles par catégorie sous forme d’onglets et pour créer des mises en page dynamiques pour chaque catégorie.
- Widgets spécifiques à Extra:
- « Recent Posts » avec des options de filtrage par catégorie.
- « Posts Carousel » pour afficher les articles sous forme de carrousel.
Aller plus loin avec le plugin Divi Blog Extras
Le module « Divi Blog Extras » est un produit premium offert par Divi Extended et disponible sur Divi Cake, une marketplace pour les produits Divi. Il est conçu pour améliorer et étendre les capacités d’affichage du blog de Divi.
- Plusieurs mises en page de blog : Le module offre plus de six mises en page de blog différentes, y compris la grille, le masonry, le bloc, le timeline, etc.
- Pagination : Contrairement au module de blog standard de Divi, le « Divi Blog Extras » supporte la pagination, permettant aux utilisateurs de naviguer facilement entre différents ensembles d’articles.
- Filtrage par catégorie : Vous pouvez afficher des articles d’une catégorie spécifique ou de plusieurs catégories.
- Mises en page responsives : Les mises en page sont optimisées pour tous les appareils, garantissant une belle apparence sur les ordinateurs de bureau, les tablettes et les mobiles.
Conclusion
Au cours de ce tutoriel, nous avons vu les étapes essentielles pour créer une page d’accueil de style magazine avec Divi Builder. Cette base solide vous permettra d’adapter et d’enrichir votre site selon vos besoins. En continuant à explorer les fonctionnalités de Divi, vous découvrirez encore plus de possibilités pour créer des pages de plus en complexes et professionnelles.
