Comment créer un blog de style moyen avec Divi

Dans le billet de blog Divi d'aujourd'hui, nous allons partager d'excellents conseils sur la façon de créer votre propre site Web de blog dans le même style que le blog Medium.

Medium est connu pour être l'une des plateformes les plus utilisées pour les blogs. Non seulement ils ont une grande communauté de blogueurs qui interagissent régulièrement avec leur public, mais leur plateforme de blogs offre également une très belle expérience utilisateur. C'est exactement ce que veut tout blogueur. Ils veulent être sûrs de transmettre le message de manière claire et dans un environnement où le lecteur se sent à l'aise.

Cependant, bloguer sur Medium a ses limites. Par exemple, le référencement ne présente aucun avantage. En créant votre propre blog, inspiré du style de blog Medium, vous pouvez continuer ce sentiment familier qu'ils ont déjà avec le blog Medium et l'amener sur votre propre site Web.

Commençons

Abonnez-vous à notre chaîne Youtube

Nous vous montrerons les parties les plus importantes de la création d'un blog de style Medium et nous vous montrerons également, étape par étape, comment créer certaines des parties importantes. Par exemple; comment créer un modèle d'article de blog de style moyen que vous pouvez utiliser pour tous vos articles. Le modèle ressemble à ceci :

Nous vous montrerons également comment ajouter les plugins Worth The Read et Highlight and Share pour le rendre encore plus similaire. Le résultat vaut la peine d'être lu ressemble à ceci :

Et le Highlight and Share aura l'effet suivant :

Créez un menu simpliste comme le blog moyen

L'une des choses que vous pouvez clairement remarquer lorsque vous visitez le site Web de Medium est la simplicité de leur menu. Il n'y a pas trop d'options disponibles, ce qui facilite immédiatement la navigation des visiteurs. Les visiteurs peuvent explorer les articles de blog mis en évidence sur la page d'accueil et continuer leur séjour à partir de là.

Éléments de menu

Choisissez un logo qui correspond à la simplicité du reste de votre site Web et assurez-vous qu'il soit subtil en lui donnant une petite taille dans votre menu. Vous ne voulez certainement pas que le logo domine le contenu que vous partagez sur votre site Web.

Ensuite, n'incluez pas trop de pages dans votre navigation. Étant donné que votre site Web sera entièrement consacré aux blogs, la page d'accueil est probablement suffisante. Vous pouvez également envisager d'ajouter une page à propos si vous souhaitez en dire un peu plus sur vous-même aux visiteurs.

Pour continuer, incluez une icône de recherche afin que les gens puissent facilement rechercher dans vos articles de blog avec quelques mots-clés. Tout dépend du contenu que vous produisez et de le rendre facile à trouver.

Pour l'exemple ci-dessus, nous avons utilisé les paramètres suivants pour la barre de menus principale dans le personnalisateur de thème :

• Hauteur du menu : 54
• Hauteur maximale du logo : 37
• Taille du texte : 18

Utilisez une palette de couleurs avec des polices contrastées et simples

Le blog Medium utilise trois couleurs principales sur toute sa plate-forme, ce qui rend le contenu facile à lire. Bien que deux des couleurs puissent sembler noires et blanches, elles sont légèrement plus douces pour les yeux. Le troisième est de couleur gris clair mais lisible. Apportez les modifications suivantes à la barre de menus principale dans le personnalisateur de thème pour modifier les couleurs et la police utilisées dans le menu principal :

• Police : Source Sans Pro
• Couleur du texte : rgba (0,0,0,.44)
• Couleur du lien actif : rgba (0,0,0,.44)
• Couleur d'arrière-plan : #fbfcfd

Inclure l'icône de recherche

De plus, pour inclure l'icône de recherche dans votre menu principal, accédez à En-tête et navigation > Éléments d'en-tête > Afficher l'icône de recherche.

Désactiver la barre de navigation fixe

Une autre chose que fait le blog Medium est de garder sa barre de navigation en haut de la page. De cette façon, les visiteurs ne sont pas inutilement interrompus lorsqu'ils lisent. Pour désactiver la barre de navigation fixe sur votre site Web Divi, accédez à votre panneau WordPress > Divi > Options du thème > Paramètres généraux > Désactiver la barre de navigation fixe.

Stylisez vos modules de blog de page d'accueil par catégories

Ensuite, vous souhaitez styliser la page d'accueil de votre site Web par catégories. Selon le blog que vous créez, vous pouvez créer différentes sections sur votre page d'accueil qui correspondent à ce que vos visiteurs aiment le plus lire. Nous vous recommandons d'utiliser au moins le type de catégories suivant : populaire, récent et suggéré. Vous pouvez attribuer des articles de blog à ces catégories en créant différentes catégories dans la page « Catégories » de « Articles » dans votre menu WordPress et en attribuant chaque article à une ou plusieurs catégories au sein de l'article lui-même.

Une autre chose que vous voulez vraiment faire est de rendre les différents modules et sections de blog de votre page d'accueil faciles à suivre. Pour ce faire, vous pouvez utiliser la grille de blog standard dans le constructeur Divi ou vous pouvez rechercher quelque chose d'un peu plus avancé. Nous avons répertorié ci-dessous trois plugins que vous pouvez envisager d'utiliser.

Plugin de carte d'article Divi

Le plugin Divi Article Card est un plugin gratuit qui a été partagé sur notre blog lors de Divi 100. Le style utilisé dans ce plugin est propre et a un bel effet de survol. C'est un effet simple mais il peut créer cette petite touche supplémentaire pour votre blog.

Le plugin est entièrement gratuit, il suffit d'aller sur la publication et de le télécharger !

Module de blog personnalisé Divi

Un autre plugin qui a créé une belle mise en page de module de blog est le module de blog personnalisé Divi. Celui-ci ressemble davantage aux articles de blog Medium que le précédent en plaçant l'image en vedette sur le côté gauche.

Le prix du plugin est de 20 $.

Extras du blog Divi

Le dernier plugin qui pourrait vous aider à rapprocher votre blog de l'apparence du blog Medium est Divi Blog Extras. Ce plugin propose également de nombreuses dispositions de module de blog différentes qui peuvent vous aider à créer votre blog de style Medium.

Le plugin coûte 15 $ pour la licence de site unique et 30 $ pour la licence étendue.

Créer un modèle d'article de blog

Medium a un format d'article de blog standard pour tous les articles créés. Le design se concentre sur l'essence du message : le contenu. Le format d'article de blog utilisé est conforme à celui du reste du site Web : simpliste. Il va droit au but en utilisant la combinaison de contenu écrit et de médias que vous pouvez insérer tout au long de la publication.

Divi offre ces mêmes possibilités. Vous pouvez rendre votre article de blog aussi simple ou aussi délicat que vous le souhaitez en utilisant les différents modules fournis par le constructeur Divi. Voici l'exemple de mise en page que nous allons vous montrer comment créer étape par étape :

Paramètres de publication Divi

Commencez par ajouter un nouveau post, en lui donnant un titre et en activant le constructeur Divi. Ensuite, assurez-vous que les paramètres Divi Post sont les suivants :

• Mise en page : pleine largeur
• Navigation par points : désactivée
• Masquer la navigation avant le défilement : par défaut
• Titre du message : Masquer

Auteur (Bureau)

Pour faire la mise en page, nous allons passer au Visual Builder. Commencez par ajouter une nouvelle section avec deux lignes. Continuez en ajoutant un module image à la première colonne et deux modules texte à la deuxième colonne. Ouvrez les paramètres de la section et ajoutez choisissez '#fbfcfd' comme couleur d'arrière-plan.

Module d'images

Ouvrez le module Image, téléchargez l'image dans l'onglet Contenu et placez l'alignement de l'image sur « Gauche » dans l'onglet Conception. Ensuite, ajoutez "-5%" à la marge supérieure et "25%" à la marge de gauche dans la sous-catégorie Espacement de l'onglet Conception.

Après cela, ajoutez le code suivant à l'élément principal dans la sous-catégorie CSS personnalisée de l'onglet Avancé :

-webkit-clip-path: circle(50% at 50% 50%);
clip-path: circle(50% at 50% 50%);
width: 75px;
height: 75px;

Premier module de texte

Ajoutez le nom de l'auteur dans la zone de contenu de l'onglet Contenu et effectuez les ajustements suivants dans la sous-catégorie Texte de l'onglet Conception :

• Orientation du texte : à gauche
• Police de texte : Source Sans Pro
• Taille de la police de texte : 18
• Couleur du texte : rgba(0,0,0,0.8)
• Hauteur de la ligne de texte : 1,7 em

Faites défiler le même onglet pour ajouter "-3%" à la marge supérieure et "-70%" à la marge de gauche.

Deuxième module de texte

Tapez le slogan dans le deuxième module de texte et effectuez les ajustements suivants dans la sous-catégorie Texte de l'onglet Conception :

• Orientation du texte : à gauche
• Police de texte : Source Sans Pro
• Taille de la police de texte : 14
• Couleur du texte : rgba(0,0,0,0.44)
• Hauteur de la ligne de texte : 1,7 em

De plus, faites défiler le même onglet et ajoutez "-5%" à la marge supérieure et "-70%" à la marge de gauche dans la sous-catégorie Espacement.

Visibilité des lignes

Enfin, ouvrez les paramètres de ligne et désactivez la ligne sur les téléphones et les tablettes dans la sous-catégorie Visibilité de l'onglet Avancé.

Auteur (mobile)

Ajoutez une autre ligne à la même section avec une ligne pleine largeur. Continuez en clonant le module image et les modules texte dans la ligne précédente et en les plaçant dans la ligne pleine largeur. Nous devrons apporter quelques modifications à chaque module pour les centrer sur l'écran lorsque quelqu'un ouvre la page sur mobile ou tablette.

Module d'images

Ouvrez le module d'image et placez l'alignement de l'image sur « Centre ».

Premier module de texte

Ouvrez le premier module de texte et modifiez l'orientation du texte en « Centre » dans la sous-catégorie Texte de l'onglet Conception.

Faites défiler le même onglet, supprimez la marge gauche et conservez la marge supérieure.

Deuxième module de texte

De plus, faites la même chose pour le deuxième module de texte. Placez l'orientation du texte sur « Centre » et supprimez la marge de gauche dans la sous-catégorie Espacement de l'onglet Contenu.

Visibilité des lignes

Enfin, ouvrez les paramètres de ligne et désactivez la ligne pour les bureaux.

Module Titre du poste

Puisque nous avons désactivé le titre de la publication dans nos paramètres de publication Divi, nous allons ajouter un module Titre de la publication dans une ligne pleine largeur dans la même section que nous avons utilisée jusqu'à présent.

Dans la sous-catégorie Éléments de l'onglet Contenu, nous pouvons choisir les éléments que nous voulons voir apparaître. Puisque nous avons déjà mentionné l'auteur, nous avons tout désactivé sauf le titre.

En outre; apportez les ajustements suivants aux sous-catégories Texte et Texte du titre de l'onglet Conception :

• Orientation du texte : Centre
• Police du titre : Source Sans Pro
• Style de police du titre : gras
• Taille de la police du titre : 47 px (ordinateur de bureau), 40 (tablette), 35 (téléphone)
• Couleur du texte du titre : rgba(0,0,0,0.8)

Images pleine largeur

La première image pleine largeur que nous ajouterons est une représentation de l'image en vedette. Ajoutez une section pleine largeur, placez-y un module d'image pleine largeur et téléchargez une image dans l'onglet Contenu. C'est aussi simple que ça.

Modules de texte

Ensuite, nous allons créer les modules de texte qui sont utilisés pour le billet de blog. Ajoutez une section standard avec une ligne pleine largeur et placez-y un module de texte. Dans cet exemple, nous utilisons la famille de polices « Cardo » au lieu de « Georgia » simplement parce que « Cardo » est une famille de polices intégrée.

De plus, ouvrez les paramètres du module Texte, saisissez un exemple de texte dans la zone Contenu et accédez à l'onglet Conception. Dans la sous-catégorie Texte, effectuez les ajustements suivants :

• Orientation du texte : à gauche
• Police du texte : Cardo
• Taille de la police du texte : 25 px (ordinateur de bureau), 19 px (tablette), 17 px (téléphone)
• Couleur du texte : rgba(0,0,0,0.8)
• Hauteur de la ligne de texte : 1,8 em

Faites défiler le même onglet, ajoutez « 800px » à la largeur maximale dans la sous-catégorie Dimensionnement et ajoutez « 10 % » à la marge de gauche dans la sous-catégorie Espacement.

Module vidéo

La dernière chose qui peut apporter une valeur ajoutée à votre article de blog est l'intégration d'une vidéo. Pour ce faire, vous devez cloner la section précédemment créée avec le module de texte et diviser le contenu total que vous avez entre les deux modules de texte. Juste entre les deux sections, nous allons ajouter une autre section avec une ligne pleine largeur. Dans cette rangée pleine largeur, nous allons ajouter un module vidéo.

Voici à quoi devrait ressembler la structure dans le backend :

Nous n'avons apporté aucun ajustement au module vidéo à part l'ajout de l'URL.

Enregistrer le modèle

Vous pouvez réutiliser les différentes sections pour les adapter à l'article de blog que vous créez en les clonant et en modifiant le contenu. Une fois que vous avez fait cela, vous pouvez enregistrer le modèle de publication de blog en cliquant sur « Enregistrer dans la bibliothèque » et en lui donnant un nom.

La prochaine fois que vous souhaitez utiliser le modèle, cliquez simplement sur « Charger depuis la bibliothèque » et chargez le modèle.

Vaut la lecture

Une chose typique à propos de la création d'un blog Medium est le nombre de minutes qu'il faut pour lire un certain article de blog. Cela apparaît généralement juste au début de la page et donne aux utilisateurs une estimation du temps qu'il leur faudra pour terminer la lecture. À une époque où le temps est la chose la plus précieuse, cela aide les gens à décider s'ils veulent ou non lire le blog.

Un plugin WordPress gratuit qui vous aide à y arriver est Worth The Read by Well Done Marketing. Vous pouvez le télécharger sur la page que nous avons liée ou le rechercher dans les plugins. La bonne chose à propos de ce plugin est que vous pouvez choisir où vous voulez que le temps de lecture apparaisse ; pages, articles ou les deux. Vous pouvez également choisir l'emplacement et le format.

Après avoir téléchargé le plugin et l'avoir activé, cliquez sur l'option « Reading Progress » dans son menu. Allez-y et apportez les modifications nécessaires. Mettre un temps de lecture n'est généralement utilisé que pour les messages, donc la plupart des gens choisiront probablement uniquement cette option.

Dans l'onglet Style, vous pouvez choisir le style que vous souhaitez utiliser. Assurez-vous d'utiliser la même police que dans le titre. Vous pouvez également ajouter du code CSS personnalisé si vous souhaitez apporter des modifications supplémentaires.

Mettez en surbrillance et partagez

Une autre caractéristique vraiment typique de Medium est la possibilité de mettre en évidence quelque chose, de le partager ou de le commenter si vous l'aimez. Il donne une valeur ajoutée à l'article de blog en le laissant interagir avec les personnes qui le lisent. Nous avons trouvé un plugin qui vous aide à faire quelque chose de similaire ; le plugin Highlight and Share qui est également gratuit.

Vous pouvez décider sur quels canaux de médias sociaux les gens peuvent partager en allant dans Paramètres > Mettre en surbrillance et partager > Activer les canaux de médias sociaux que vous souhaitez utiliser.

Emballer

Après avoir lu cet article, vous devriez pouvoir commencer à créer votre blog de style Medium qui contient certaines des parties les plus pertinentes de Medium. Vous avez de nombreuses possibilités pour rester simple, comme le fait le blog Medium, tout en y ajoutant quelques touches personnelles. Si vous avez des questions ou des suggestions ; assurez-vous de laisser un commentaire dans la section commentaires ci-dessous afin que nous puissions rester en contact avec notre formidable communauté Divi !

Assurez-vous de vous abonner à notre newsletter par e-mail et à notre chaîne YouTube pour ne jamais manquer une grande annonce, un conseil utile ou un cadeau Divi !

Image présentée par Julia Tim / shutterstock.com