Je souhaite obtenir des informations sur une formation complète concernant le thème DIVI dispensé
par un organisme de formation certifié par l’état.
Que la formation soit finançable par mon CPF (idéalement) ou autre


Il existe de nombreuses façons de personnaliser cela Deux Sujet de mise en page de blog, mais lorsque j’ai essayé les options intégrées, elles n’ont tout simplement pas produit les résultats que je souhaitais pour notre blog.

La méthode que je vais vous montrer implique un peu plus de travail, mais vous donne beaucoup plus de contrôle sur le design et est plutôt sexy 😉

MISE À JOUR 13/11/14: J’ai publié une mise à jour pour ce message. Comment personnaliser les tailles de vignettes DiviAvec un code supplémentaire qui vous permet de personnaliser toutes les tailles des vignettes Divi, pas seulement les images du module de blog.

Ce dont tu auras besoin

Tout d’abord, vous devez installer la dernière version de Divi disponible au moment de la rédaction 2.1.2 (C’est la seule version avec laquelle j’ai testé jusqu’à présent, mais cela devrait fonctionner avec les versions précédentes).

Ensuite, vous devez créer un sujet enfant et l’activer. Il y a beaucoup de Tutoriels Je vais sauter l’explication et supposer que vous en avez déjà configuré une.

Ce que je voulais pour notre blog

OK, j’ai donc voulu repenser le blog Divi pour qu’il ressemble plus à un blog d’entreprise qu’à un blog personnel. Avec cela, je veux dire:

  • Image en vedette sur la page du blog et dans l’article
  • Vignettes carrées et rognées en dur sur la page du blog
  • Texte enveloppé autour de la première image du billet de blog
  • Contrôle indépendant sur les autres tailles d’image dans la publication
Module de blog Divi Pagebuilder

Module de blog standard de Divi pour pagebuilder – l’image est assez grande!

Le seul moyen d’y parvenir était de changer le shortcode du module de blog de Divi car bien que vous puissiez définir la taille des vignettes, les images ne seront pas recadrées afin qu’elles soient toujours déformées ou sur la page de blog des images de tailles différentes s’affichent. .

Il existe peut-être une solution plus élégante (sans jeu de mots) à cela, mais je ne suis pas un développeur WordPress à part entière et cela fait le travail rapidement et facilement. Il est également facile d’ajuster la taille d’image souhaitée.

Étape 1 – Remplacez le shortcode Divi d’origine

La première étape consiste à supprimer le shortcode d’origine et à le remplacer par le nouveau.

Créez d’abord un fichier nommé functions.php Ouvrez le fichier à la racine de votre dossier enfant de rubrique dans un éditeur de texte tel que Editeur ++. Ensuite, copiez et collez le code suivant dans votre fichier functions.php. N’oubliez pas d’ouvrir et de fermer les balises PHP. et ?>, alors je vais vous expliquer ça.

Lignes 3-7 Demandez à WordPress de supprimer le shortcode créé par Divi et de le remplacer par celui que nous avons créé. Nous devons utiliser ça à l’intérieur Cochez cette case pour supprimer correctement le shortcode, car le fichier functions.php du sujet enfant est analysé avant celui du sujet parent. Donc, au moment où notre fonction est exécutée, il n’y a rien à supprimer.

Le hook d’initialisation est déclenché après le chargement de WordPress, nous pouvons donc supprimer et remplacer avec succès le shortcode Divi d’origine. Ce n’est pas le seul crochet que nous pouvons utiliser, mais cela fonctionne.

Je n’ai pas priorisé l’action car elle n’est pas critique. Par conséquent, il est uniquement défini sur la valeur par défaut.

Le reste du code est identique au shortcode original de Divi à l’exception de la taille de l’image. Pour une page pleine largeur comme celle que nous utilisons sur notre blog, je voulais des miniatures à 150×150 pixels donc je vais entrer 150 en ligne 63 et 66. Cela garantit que les vignettes sont rognées à cette taille afin qu’elles ne soient pas déformées même si l’image en taille réelle n’est pas carrée.

Vous pouvez également recadrer les images en douceur afin qu’elles soient mises à l’échelle à la plus grande dimension. Cependant, si vos images sont loin du carré, elles peuvent devenir assez petites. De plus, je préfère l’apparence des miniatures rognées.

Module de blog WPTechCentre Pagebuilder

Notre module de blog Pagebuilder modifié – des images beaucoup plus petites et recadrées en dur

De plus, pour obtenir le même résultat que nous l’avons fait sur notre blog, vous devez ajouter le CSS suivant à votre feuille de style de sujet enfant ou au bouton radio Divi:

.blog-page article.post img {float: gauche; Marge supérieure: 0,6 em; Marge de droite: 1,4em; }}

Noter que Page de blog est une classe CSS que j’ai définie dans le module de blog Pagebuilder.

Étape 2 – Créez la première image dans l’article de blog

Ensuite, je voulais formater la première image de l’article de blog (et de chaque article de blog) à partir de mon fichier CSS pour les sujets enfants sans affecter les autres images de l’article. J’aime utiliser l’image présentée car elle est facile à ajouter à votre flux RSS (certains plugins et thèmes l’ont même en option) et à y accéder à partir d’autres endroits en ligne.

Si vous préférez inclure l’image dans votre texte et utiliser la première image comme vignette de votre page de blog, vous n’avez pas besoin de cette étape, mais cela vaut la peine de lire jusqu’à la fin pour voir comment je l’ai fait.

Vous devez d’abord copier single.php Ensuite, à partir de votre dossier Thèmes Divi, collez les lignes de code suivantes dans votre sous-dossier Thèmes:

Le code attribue un Classe CSS Cliquez sur l’image sélectionnée pour pouvoir la formater dans votre thème enfant ou sur le bouton radio Divi. j’utilise wpt_featured_image Mais vous pouvez utiliser ce que vous voulez. ligne 28 Ici, vous définissez le nom de la classe et de la ligne 41 C’est là que vous insérez la classe dans la fonction.

Voici le code CSS que j’ai utilisé pour styliser nos articles de blog. Je voulais que l’image ne prenne pas plus de 50% de l’écran pour qu’elle soit compatible avec les appareils mobiles (responsive) et que le texte défile vers la droite.

article.post img {float: gauche; largeur maximale: 50%; Bord: 2.6em 1.4em 1.0em 0em; }}

Étape 3 – Testez-le!

C’est tout – il suffit de mettre à jour vos pages et les modifications devraient être reflétées. Si vous ne voyez pas les modifications la première fois, c’est probablement parce que votre navigateur a mis en cache les données CSS, vous devrez peut-être d’abord les effacer (ou recharger le CSS en utilisant CTRL + actualiser).

Bien qu’il existe plusieurs façons de personnaliser la mise en page du blog du thème Divi, cette méthode vous donne beaucoup de contrôle sur la conception et un résultat agréable, propre et net, exactement ce que nous voulions pour notre blog. C’est un peu plus de travail que certaines méthodes, mais vous pouvez copier et coller le code de ce didacticiel et obtenir le résultat souhaité en quelques minutes.

Essayez ceci Forum San Facebook Pour d’autres idées et si vous avez une meilleure façon d’obtenir le même résultat que nous, faites-le moi savoir, j’ai toujours hâte d’apprendre 🙂



Source link

Recent Posts