Comment ajouter des modèles et un design personnalisés aux formats de publication de blog de Divi (partie 3 sur 3)
Publié: 2017-05-04Bienvenue au jour 3 sur 3, le dernier jour de notre série sur Comment ajouter des styles personnalisés aux formats de publication de blog de Divi. Par défaut, Divi est livré avec six formats de publication de blog : Standard, Vidéo, Audio, Citation, Galerie et Lien. Dans cette série, nous vous apprenons à les personnaliser avec php et css.
Aujourd'hui est le dernier jour de notre série sur la façon d'ajouter des modèles et des styles personnalisés aux formats de publication de blog de Divi. Ce dernier jour de la série est consacré au design. Avec notre single.php personnalisé et notre thème enfant actif, nous sommes prêts à ajouter du style aux formats des articles de blog.
Je vous expliquerai les six formats de publication au fur et à mesure que nous ajoutons des touches de conception uniques à chacun. À la fin de ce didacticiel, vous aurez six excellentes alternatives aux formats de publication de blog par défaut fournis avec Divi.
Vous aurez également une page de blog assez unique qui affiche les différents éléments présentés au format de publication. Par exemple, le format de lien affichera une zone de lien personnalisée à la place de la vignette de l'image en vedette. La publication au format galerie affichera un curseur d'image des images de votre galerie à la place de la vignette de l'image en vedette. Etc.
Voici un aperçu de ce à quoi ressemblerait votre page de blog après le tutoriel d'aujourd'hui (j'utilise le module Divi Blog avec une disposition en grille dans le gif ci-dessous).
Commençons.
Configuration des paramètres de conception généraux dans le personnalisateur de thème
Nous devons d'abord apporter quelques modifications de style générales à l'aide du personnalisateur de thème. Depuis votre tableau de bord WordPress, accédez à Divi → Personnalisateur de thème → Paramètres généraux → Paramètres de mise en page et modifiez les éléments suivants :
Largeur de la gouttière du site Web : 2
Cochez Utiliser la largeur de la barre latérale personnalisée
Largeur de la barre latérale : 30
Également sous Personnalisateur de thème, accédez à Schémas de couleurs et sélectionnez Orange.
Voyons maintenant à quoi ressemble votre publication standard jusqu'à présent :
Comme vous pouvez le constater, il a encore besoin de style mais tout est à la bonne place. Vous avez une section de héros couvrant toute la largeur de la page. Vous n'avez pas encore d'image en vedette, donc l'arrière-plan n'affiche que le dégradé que vous avez ajouté à votre fichier single.php plus tôt. De plus, le titre et la méta du message se trouvent dans la section des héros. Il est maintenant temps d'ajouter le reste des éléments de conception.
Styliser la section Hero pour tous les formats de publication
Étant donné que chacun de vos formats de publication partagera la même section de héros et la même conception de barre latérale, vous pouvez d'abord ajouter ce CSS personnalisé. Retournez à Theme Customizer, cliquez sur Additional CSS en bas et ajoutez le CSS personnalisé suivant :
.hero-section {
padding-top: 120px;
padding-bottom: 120px;
background-repeat: no-repeat;
background-size: cover;
position:relative;
max-height: 450px;
background-color: #333;
}
.single-post #main-content #left-area {padding-top: 0px;}
/* ---- Sidebar Settings ---- */
.single #sidebar {background: #efefef; padding-top: 20px; padding-right: 20px; padding-left: 20px; padding-bottom: 20px;}
/* ---- Standard Post Title & Post Meta ---- */
.single h1.entry-title,.attachment h1.entry-title, .single p.post-meta {
width: 100%;
text-align: center;
padding-left: 8px;
padding-right: 8px;
font-weight: 800;
text-transform: uppercase;
color: #fff;
}
@media only screen and (min-width: 980px) {
/*** Set title font size for desktop ***/
.single h1.entry-title {
font-size: 65px !important;
}
}
Maintenant, regardez à quoi ressemble un article standard maintenant.
Avec la section héros et le style de la barre latérale en place, vous êtes prêt à styliser les formats de publication individuels.
Styliser le format de publication standard
Le format de publication standard est le format par défaut pour tous vos articles de blog. Vous pouvez sélectionner le format de publication standard lors de la modification de votre publication.
Tout ce que nous allons faire pour ce format standard est d'ajouter l'image en vedette. Étant donné que cette image vedette s'étendra sur toute la largeur de l'écran, je suggère d'utiliser une image de 2000 x 600. J'utilise des images de unsplash.com.
Après avoir ajouté votre image vedette, vérifiez à quoi ressemble la publication standard.
Styliser le format de publication vidéo
Pour styliser le format de publication vidéo, assurez-vous que le format vidéo est sélectionné pour votre publication.
Ensuite, ajoutez l'URL ou intégrez une vidéo à votre contenu. Le format vidéo prendra la première URL de la vidéo, la première balise vidéo ou l'intégrera et l'affichera en haut du contenu de votre article. Cette vidéo remplacera également l'image en vedette sur votre page de blog.
Pour cet exemple, j'utilise simplement une URL de vidéo youtube.
Ajoutez votre image vedette de 2000 x 600 à la publication.
Ensuite, nous allons ajouter un style supplémentaire à la vidéo sélectionnée pour donner à la vidéo une bordure blanche et l'élever légèrement afin qu'elle chevauche la section des héros et se démarque un peu.
Allez dans Personnalisateur de thème → CSS supplémentaire et ajoutez le CSS personnalisé suivant :
/* ---- Format the Position of the Video Wrapper ---- */
@media only screen and (min-width: 980px) {
/*** elevate the video to overlap the hero section ***/
.single-post.single-format-video .et_main_video_container {margin-top: -120px; background: #fff; outline: 10px solid #ffffff !important; z-index: 100; margin-bottom: -100px;}
}
Maintenant, consultez votre nouveau message sur le format vidéo.
Alternativement, vous pouvez créer ce message en pleine largeur pour une autre excellente option de conception. Allez simplement modifier votre publication et, dans les paramètres de publication Divi en haut à droite de la page, sélectionnez une mise en page pleine largeur.
Découvrez maintenant le post sur le format vidéo pleine largeur :
Styliser le format de publication audio
Pour le format de publication audio, assurez-vous que le format audio est sélectionné pour votre publication.
Ajoutez votre image vedette de 2000 x 600.
Ensuite, ajoutez votre fichier audio à votre message. Il peut s'agir d'un fichier .mp3, .m4a, .ogg ou .wav. Vous pouvez télécharger votre fichier audio dans votre médiathèque et l'insérer dans votre message de trois manières différentes (intégrer un lecteur multimédia, un lien vers un fichier multimédia ou un lien vers une page de pièce jointe).
N'importe laquelle de ces trois options fonctionnera. Mais, pour cet exemple, je vais juste ajouter une simple URL au fichier audio. WordPress convertira cette URL audio en un lecteur multimédia en haut de la publication.
Jetons maintenant un coup d'œil à l'article sur le format audio.
Ce n'est pas mal, mais ça pourrait être mieux. Cachez le lecteur multimédia en double qui s'affiche sous le lecteur multimédia orange et ajoutons une image d'arrière-plan à notre lecteur multimédia orange.
Allez dans Personnalisateur de thème → CSS supplémentaire et ajoutez le CSS personnalisé suivant :
/* ----- Add Background Image to the Audio Player & Change size of the player ----- */
body.single .et_audio_content, .blog .et_audio_content {
margin-bottom: 0px !important;
height: 300px !important;
background-image: linear-gradient(rgba(0,0,0,0.3),rgba(0,0,0,0.3)), url('ENTER IMAGE URL HERE');
background-repeat: no-repeat;
background-size: cover;
}
/* ---- Hide the Duplicate Audio Player ------ */
div#mep_1 {display: none;}
Ensuite, recherchez et téléchargez une image dans votre galerie multimédia (devrait être d'environ 700 x 300). Ensuite, copiez l'url et collez-la dans le CSS ci-dessus où il est écrit "ENTRER L'URL DE L'IMAGE ICI".
background-image: linear-gradient(rgba(0,0,0,0.3),rgba(0,0,0,0.3)), url('ENTER IMAGE URL HERE');
Allez maintenant consulter votre nouveau message sur le format audio.
Styliser le format de publication de devis
Pour le format de publication de devis, assurez-vous que le format de devis est sélectionné pour votre publication.
Ajoutez ensuite une image vedette de 2000 x 600 à la publication.
Le format de devis utilise le shortcode blockquote pour générer un affichage de devis personnalisé. Alors, ajoutez un blockquote à votre contenu pour que le devis personnalisé s'affiche.
Maintenant, regarde ton message.
Personnalisons la zone de citation en vedette avec un peu de CSS pour lui donner une image d'arrière-plan et de grandes citations en haut à droite.
Allez dans Personnalisateur de thème → CSS supplémentaire et ajoutez le CSS personnalisé suivant :
/* ---- Add Background Image to the Quote Box ---- */
.et_quote_content {
background-image: linear-gradient(rgba(0,0,0,0.3),rgba(0,0,0,0.3)), url('ENTER IMAGE URL HERE')!important;
background-repeat: no-repeat;
background-size: cover;
}
/* ---- Add the Quotation Symbol to the Quote Box ---- */
.et_quote_content blockquote p::before {
font-family: Cardo;
position: absolute;
top: 16px;
left: 5%;
margin-left: -16px;
border-radius: 31px;
background: rgba(255, 255, 255, .0);
font-size: 70px;
font-color: #fff;
content: "\201C" !important;
}
/* ---- Text Format Inside of quote ---- */
@media only screen and (min-width: 980px) {
.single-post.single-format-quote blockquote p {
font-size: 30px !important;
font-weight: 600 !important;
}
}
Recherchez et téléchargez une image dans votre galerie multimédia (devrait être d'environ 700 x 300). Ensuite, copiez l'url et collez-la dans le CSS ci-dessus où il est écrit "ENTRER L'URL DE L'IMAGE ICI".
background-image: linear-gradient(rgba(0,0,0,0.3),rgba(0,0,0,0.3)), url('ENTER IMAGE URL HERE');
Vérifiez maintenant votre résultat final :
Styliser le format de publication de la galerie
Pour le format de publication de la galerie, assurez-vous que le format de la galerie est sélectionné pour votre publication.
Ensuite, assurez-vous d'ajouter votre image vedette de 2000 x 600.
Le format de publication de galerie vous permet de créer une galerie dans le contenu de votre publication à partir de la galerie multimédia.
Pour créer une galerie pour votre publication, téléchargez d'abord au moins 6 images dans votre galerie multimédia. La taille de l'image peut varier, mais comme la galerie a un effet lightbox qui agrandit les images en taille réelle, vous pouvez créer des images d'environ 1200 x 800.
Sélectionnez maintenant vos images dans la galerie multimédia, sélectionnez Créer une galerie et cliquez sur le bouton « Créer une nouvelle galerie ».
Vous devriez maintenant avoir un shortcode de galerie dans votre contenu.
Cette galerie sera affichée sur votre publication dans une disposition en mosaïque de trois colonnes de large. La galerie remplacera également l'image présentée sur votre page de blog par un curseur des images de votre galerie.
Allez maintenant voir votre article.
Ajoutons du CSS à la galerie pour l'élever un peu afin de chevaucher la section des héros et de modifier les marges autour de chacune des images.
Allez dans Personnalisateur de thème → CSS supplémentaire et ajoutez le CSS personnalisé suivant :
/* ---- Position & Style the Gallery to Overlap the Featured Image ---- */
@media only screen and (min-width: 980px) {
.single-format-gallery .et_post_meta_wrapper { margin-top: -100px;}
.et_post_gallery {
z-index: 100;
position: relative;
border-top: 8px solid #fff !important;
border-left: 8px solid #fff !important;
background: #fff !important;
}
/* ---- Set Background Color, Margins & Padding for the Gallery Image ---- */
.et_gallery_item { margin: 0 0 0 0 !important;}
.et_gallery_item {
width: 33.3%;
margin: 0 0% 0% 0 !important;
padding-right: 8px !important;
background: #fff !important;
padding-bottom: 8px !important;
}
}
Découvrez maintenant le résultat final.
Styliser le format de publication de lien
Pour le format de publication de lien, assurez-vous que le format de lien est sélectionné pour votre publication.
Ensuite, ajoutez votre image vedette de 2000 x 600 à votre message.
Le format de publication de lien prend le premier lien de la publication et l'affiche en haut du contenu à l'intérieur d'une boîte. Cet affichage de lien personnalisé remplace également la vignette de l'image en vedette pour cet article sur votre page de blog.
Allez-y et ajoutez un lien à votre message et consultez la conception du message.
Améliorons maintenant un peu la conception en ajoutant une image d'arrière-plan à la zone de lien personnalisée et une icône à gauche de l'URL du lien.
Allez dans Personnalisateur de thème → CSS supplémentaire et ajoutez le CSS personnalisé suivant :
/* ---- Add thick border to the left side and Lower the link box ---- */
.et_link_content {
border-bottom: 8px solid #ddd;
background-image: linear-gradient(rgba(0,0,0,0.3), rgba(0,0,0,0.3)), url(ENTER IMAGE URL HERE);
background-size: cover;
background-color:#edb059;
border-radius: 25px;
}
/* ---- Font Settings within the Link box ---- */
.et_link_content a.et_link_main_url { font-size: 21px; font-weight: 600; color: #fff !important;}
/* ---- Link Symbol on the right side ---- */
.et_link_content::before {
font-family: "ETmodules";
position: absolute;
top: 38%;
left: 5%;
margin-right: -26px;
border-radius: 31px;
background: rgba(255, 255, 255, .0);
font-size: 48px;
color: #fff;
content: "\e02c";
}
/* ---- Position & Style the Gallery to Overlap the Featured Image ---- */
@media only screen and (min-width: 980px) {
.single-format-gallery .et_post_meta_wrapper { margin-top: -100px;}
Ensuite, recherchez et téléchargez une image dans votre galerie multimédia (devrait être d'environ 700 x 300). Copiez ensuite l'URL et collez-la dans l'extrait CSS que vous venez d'entrer où il est écrit "ENTRER L'URL DE L'IMAGE ICI".
background-image: linear-gradient(rgba(0,0,0,0.3),rgba(0,0,0,0.3)), url('ENTER IMAGE URL HERE');
Maintenant, regardez à quoi ressemble le post.
C'est ça!
Maintenant que nous avons conçu tous nos formats de publication, il est temps de vérifier la mise en page intéressante qu'il crée sur la page du blog. Vous pouvez voir comment tous les articles présentés au format de publication différent sont affichés.
Remarque : vous pouvez afficher votre blog en utilisant l'éditeur par défaut ou le Divi Builder et le design fonctionnera toujours.
Sensible?
Tous les formats de publication sont complètement réactifs et fonctionnent bien sur tous les appareils. Voici un exemple de ce à quoi ressemble le message Gallery Format lorsque je réduis la taille de l'écran :
Dernières pensées
Félicitations! Vous avez terminé. J'espère que vous avez apprécié cette série en 3 parties sur la personnalisation des formats d'articles de blog. Si quoi que ce soit, j'espère que vous avez appris quelque chose de précieux à emporter avec vous sur votre prochain projet. Maintenant que vous avez terminé le didacticiel, n'hésitez pas à expérimenter vos propres éléments de conception pour les formats de vos articles de blog.
Veuillez soumettre vos commentaires ci-dessous. Je suis dans l'attente de votre réponse.