* Mis à jour le 4/10/2017 pour inclure les pages d’archives, de catégories et de recherche.

Le module Divi Blog vous offre deux options de mise en page fantastiques. La mise en page pleine largeur vous permet de créer de grandes images pour ceux qui veulent vraiment mettre en valeur l’image. Cependant, parfois les images sont trop grandes, vous pouvez donc décider quelle option de grille est utilisée pour réduire l’image.

La disposition de la grille est très moderne et populaire, vous pouvez donc répertorier vos articles de blog dans des cartes, telles que: Par exemple, 2-3 par ligne, selon que vous utilisez une barre latérale ou non. Mais certaines personnes n’aiment pas le fait que cela rogne les côtés des images et ne fonctionne vraiment pas lorsque vous avez l’intention que le visiteur voie l’image entière.

Une autre option consiste à réduire l’image, à l’aligner sur la gauche, à conserver le rapport hauteur / largeur et à enrouler le texte autour de l’image. Cela peut facilement être fait avec un peu de CSS.

Dans ce tutoriel, nous allons faire passer vos pages de blog de celle-ci à celle-ci …

003 004

Voir la démo

Commençons par votre blog

La première chose à faire est de créer le module de blog.

1. Sur votre page, ajoutez le module de blog dans lequel vous voulez qu’il soit

001

2. Allez-y et utilisez la mise en page pleine largeur

002

3. Ensuite, vous voulez vous assurer que vous avez sélectionné « Afficher l’extrait ».

005

4. Assurez-vous également d’inclure un extrait sur la page des articles tel qu’il apparaîtra sur la page qui affiche tous vos articles.

006

5. Voici un exemple de ce à quoi la page pourrait ressembler avec une barre latérale et un en-tête pleine largeur, car elle est livrée avec la mise en page de blog standard de Divi préinstallée.

003

La magie du CSS

Maintenant, commençons par aveugler un peu les choses avec du CSS.

Si vous travaillez avec un sous-sujet, vous pouvez ouvrir votre feuille de style sous Affichage> Éditeur. Sinon, allez dans Apparence> Options de conception Divi> ePanel> CSS personnalisé (situé au bas de l’ePanel).

Ajoutez ce CSS.

(Ce code contient la requête mobile pour rester convivial sur vos petits appareils.)



/*------------------------------------------------*/
/*--------[GQ - LEFT ALIGN BLOG IMAGE]------------*/
/*------------------------------------------------*/

	.et_pb_posts .et_pb_post a img, 
	.archive .et_pb_post a img, 
	.search .et_pb_post a img {
    		max-width: 210px!important;
    		float: left;
    		padding-right: 20px;}

	@media only screen and (max-width: 980px) {
		.et_pb_posts .et_pb_post a img, 
		.archive .et_pb_post a img, 
		.search .et_pb_post a img{
			float:none;
			max-width: 250px!important;}}


Votre blog devrait maintenant ressembler à ceci.

004


Alors … c’est tout pour le moment. J’espère que vous avez trouvé cet article utile.


Les deux onglets suivants modifient le contenu ci-dessous.

Geno est un entrepreneur qui conçoit des sites Web depuis 1996. Il aime aussi tout ce qui a à voir avec le design, les voyages, sortir avec des amis, encourager les autres croyants et expérimenter les nouvelles technologies. Si vous ne faites aucune des choses ci-dessus, vous pouvez trouver des tutoriels de blogage Geno ou de personnalisation Divi ici sur Quiroz.co.





Source link

Recent Posts