Sélectionner une page


Le populaire Thème WordPress Divi 2.0 par thèmes élégants comprend un générateur de page vraiment astucieux qui facilite et simplifie la création de mises en page personnalisées. Le intégré Module de blog Le Page Builder est un moyen rapide de créer une belle page de blog pour votre site WordPress avec une liste de vos articles de blog. Malheureusement, il n’a deux options de mise en page: Pleine largeur ou grille.

Et si tu veux Changez la taille de votre miniature en vedette dans la mise en page du blog pour qu’il plane à gauche ou à droite de l’extrait de l’article au lieu de la largeur totale?

Image sélectionnée

J’ai été surpris que la réalisation de cette mise en page de base du blog ne soit pas clairement documentée. Heureusement, cela a été facile grâce aux nombreux filtres WordPress intégrés que Divi utilise.

Créez une taille d’image personnalisée pour les articles en vedette

Pour réduire la taille de l’image et faire en sorte que le module de blog l’utilise, tout ce que j’avais à faire était d’ajouter le code suivant au mien functions.php Déposer:

Maintenant, WordPress a créé une image personnalisée avec les dimensions correctes pour la largeur et la hauteur (par exemple, 320 x 260 pixels) et l’a utilisée comme image par le module de blog! (Vous devrez peut-être Actualiser les miniatures si vous travaillez avec des images qui ont déjà été téléchargées).

Composez la nouvelle image

Il ne restait plus qu’à faire flotter l’image vers la gauche et avoir un bord droit (ou j’aurais aussi bien pu la faire flotter avec le bord gauche vers la droite). Étant donné que Divi 2.0 est un thème réactif, j’ai décidé de ne le faire que pour des largeurs supérieures à 768px (par exemple, non mobiles). J’ai ajouté le code suivant à mon fichier CSS personnalisé:

C’était une solution étonnamment simple et fonctionnait à merveille!

****** Mise à jour du 28 octobre 2014 ******

Changer la mise en page sur les pages de blog WordPress par défaut

Le code ci-dessus ne s’applique qu’aux Module de blog Divi dans le Divi Page Builder. Cependant, de nombreuses personnes utilisent l’option WordPress intégrée pour Créer une page d’accueil statique avec une page de blog distincte. Si vous utilisez le thème Divi, c’est ça Page de blog par défaut et toutes les pages d’archives et de catégories de blog affiche les images en pleine largeur.

Afin de corriger ces pages de blog et d’archives pour utiliser également une image plus petite qui se déplace vers la gauche ou la droite, voici ce que vous devez faire Ajouter un filtre pour et_pb_index_blog_image_width et et_pb_index_blog_image_height dans le fichier functions.php de votre sujet. Ainsi, le code révisé dans votre fichier functions.php ressemblerait à ceci:

Vous devez également modifier le code CSS donné précédemment pour inclure des styles pour ces pages afin que l’image se décale vers la gauche ou la droite:

((Mise à jour du 27 décembre 2014: « .Search .post img » et « .search article: after » ont été ajoutés pour que l’affichage fonctionne correctement sur la page de recherche.)

((Mise à jour 23/07/2015: « .Blog .post img » et « .blog article: after » ont été ajoutés pour que l’affichage fonctionne également sur la page de blog standard de Divi 2.4.



Source link

Recent Posts