Comment inclure & # 39; Image de premier plan pleine largeur dans le modèle de billet de blog Divi

L’image complète du premier plan est belle sur n’importe quel billet de blog. Heureusement, ils sont faciles à ajouter en utilisant Divi Theme Builder. Il y a plusieurs façons de les ajouter afin que vous puissiez choisir celle qui correspond le mieux à vos besoins. Dans cet article, nous examinerons quatre façons d’ajouter une image complète au modèle de billet de blog. Aperçu du Bureau en arrière – plan dynamique Téléphone de fond dynamique Module de bureau post – titre Afficher le titre du téléphone Bureau d’image séparé Téléphone d’image autonome Image complète avec module texte de bureau Image complète du téléphone avec texte À propos des modèles de billets de blog Tout d’abord, vous devez créer ou télécharger un modèle de billet de blog. Le modèle de billet de blog fournit la conception à utiliser lors de l’affichage du contenu à l’avant. Vous pouvez obtenir de nombreux modèles de billets de blog gratuits pour la mise en page Divi en recherchant l’élégant blog thématique \
Dans mon exemple, j’utilise le modèle de billet de blog gratuit de Divi Home Care Layout Pack. Ce modèle contient déjà une image de premier plan. Nous verrons comment cela fonctionne et d’autres façons de l’ajouter. Télécharger le modèle de journal Pour télécharger un fichier json qui extrait un modèle de blog, allez à Divi > Theme Builder dans le tableau de bord WordPress. Sélectionnez portabilité dans le coin supérieur droit, puis sélectionnez l’onglet importation dans le mode ouvert. Passez à Décompresser le fichier et sélectionnez – le. Cliquez sur importer le modèle Divi Topic Build
Avant le module modal, sélectionnez le module de sous – titre Full Width stick. Sélectionnez pour afficher les titres, les méta – éléments, les catégories de messages et les images de premier plan. Décochez le nombre d’auteurs, de dates et de commentaires. Pour localiser l’image au premier plan, sélectionnez l’image titre \/ méta – arrière – plan.
Afficher l’élément d’affichage du titre activer l’affichage de la catégorie de poste afficher l’image de premier plan emplacement de l’image de premier plan: élément d’image de titre \/ arrière – plan Ouvrez l’onglet conception et faites défiler vers le texte du titre. Sélectionnez Poppins comme police, sélectionnez semi bold comme poids, puis changez la couleur du texte en # 000763. Police: Poppins font Weight: Half bold color: # 000763 Définissez la taille du texte du Bureau à 72px. Sélectionnez l’icône de la tablette, puis sélectionnez 40px. Sélectionnez l’icône du téléphone et réglez – la à 34px. Réglez la hauteur de la ligne à 1,3 em.
Taille du texte: 72px (tablette 40px, téléphone 34px) hauteur du fil: 1,2 em Faites défiler vers Meta text, sélectionnez Poppins comme police, sélectionnez semi bold comme poids, sélectionnez centrage, puis changez la couleur du texte en # e53796. Définissez la taille du texte du Bureau à 20px. Sélectionnez l’icône du téléphone, puis sélectionnez 14px. Police: Poppins poids de police: demi – gras couleur: # e53796 taille du texte: 20px (téléphone 14px) Alignement: Centre Faites défiler vers le bas jusqu’à l’espacement et réglez la marge inférieure à 10px. Réglez le bon remplissage du Bureau à 300px et le bon remplissage du téléphone à 0px.
Marges: remplissage sous 10 pixels: 300px à droite (téléphone 0px) Ajouter un gradient Si vous voulez qu’il ait la même ombre que l’image originale, ouvrez l’onglet Contenu et faites défiler vers le bas vers l’arrière – plan. Sélectionnez le gradient et définissez la première couleur à # FFFFFF et la seconde couleur à rgba (0,0,0,0). Sélectionnez linéaire comme type. Régler la direction à 90 degrés, la position de départ à 35% et la position de fin à 90%. Première couleur: # FFFFFF deuxième C
C’est vrai. Ajouter une nouvelle ligne Ajouter une ligne de colonne. Ouvrez les paramètres de ligne et ajoutez une largeur de 100% et une largeur maximale à redimensionner. Désactivez le réglage de la ligne. Largeur: 100% largeur maximale: 100% Ensuite, ajoutez un formulaire texte à la ligne. Dans les paramètres du module texte, supprimez le contenu virtuel de l’éditeur de texte du corps. Faites défiler vers le bas vers les paramètres de fond, sélectionnez l’onglet image, puis sélectionnez utiliser le contenu dynamique. Sélectionnez l’image surlignée dans la liste. Sélectionnez l’onglet gradient, puis sélectionnez blanc comme première couleur, et blanc sans opacité comme deuxième couleur. Maintenez le type de ligne, réglez la direction à 90 degrés, la position de départ à 35% et la position de fin à 90%. Sélectionnez pour placer la rampe au – dessus de l’arrière – plan. Première couleur: # FFFFFF deuxième couleur: rgba (0,0,0,0) Type: Direction linéaire: 90 degrés position initiale: 35% position finale: 90% placez le gradient au – dessus de l’image de fond: Oui Sélectionnez l’onglet conception et faites défiler vers l’espace. Remplissage supérieur et inférieur ajouter 200px. Désactivez les paramètres du module. Remplissage: 200px (haut, Bas) Utilisez les options du communiqué de presse pour ouvrir les paramètres de la section. Nous effectuerons des modifications afin que le communiqué de presse apparaisse au – dessus de l’image au premier plan. Nous devons régler l’indice z x au – dessus de la deuxième partie. Allez à l’onglet avancé et faites défiler vers le bas à la position. Réglez l’index Z à 10. Désactivez les paramètres. Indice Z: 10 Ensuite, nous devons réduire l’espace entre l’image de premier plan et le contenu du billet de blog. Ouvrez les paramètres de ligne qui contiennent le contenu du billet de blog. Sélectionnez l’onglet conception, faites défiler vers l’espacement et ajoutez – 160px à la marge supérieure. Désactivez les paramètres. Marge supérieure: – 160 pixels Ouvrir les paramètres de la section Texte et module d’agrégation
Remplir de graisse 0px en haut et en bas. Fermez les paramètres et sauvegardez votre travail. Remplissage: 0px (haut, Bas) Le Bureau provoque un fond de partition dynamique Téléphone de fond dynamique Module de bureau post – titre Afficher le titre du téléphone Bureau d’image séparé Téléphone d’image autonome Image complète avec module texte de bureau Image complète du téléphone avec texte Voici quatre façons d’ajouter une image complète à un modèle de billet de blog. Chaque méthode est facile à utiliser et à modifier. Cela vous offre de nombreuses options afin que vous puissiez utiliser la méthode qui vous convient le mieux. Nous aimerions avoir votre avis. Utilisez – vous l’une des méthodes suivantes pour ajouter une image complète au modèle de billet de blog? Veuillez nous en informer dans vos commentaires.