Personalizar la página de blog Divi

por | 17 Abr, 2017 | Blog, Divi, Tutoriales | 21 comentarios

destacada-blog-divi

Tutorial Divi. Personalizar la página principal del blog Divi.

Uno de los aspectos del tema para WordPress Divi de los que más se quejan los usuarios es de la apariencia del blog Divi por defecto que trae el tema. Estoy de acuerdo. Tal vez sea uno de los puntos más flojos desde el punto de vista visual. Sin embargo, podemos cambiar el aspecto con un poquito de código CSS.

En ocasiones no es sólo una cuestión de estética. Más bien debemos adaptar el diseño del blog a las necesidades del sitio que estamos creando. Y esto es justamente lo que sucedió  con un reciente proyecto en el que debíamos personalizar el blog. Se trata de una web que nutre de noticias a distintos periodistas del mundo del motor.

Así que debía ser una web fundamentalmente práctica, un sitio con una estructura sencilla. Que permitiera al usuario acceder a las noticias sin distracciones y de forma fácil.
Decidimos pues, crear el blog con las imágenes a la izquierda. A la derecha estaría el título con el extracto de la noticia. Y lo hicimos de la siguiente manera:

Configurar el modulo blog divi

Pulsamos el botón de ajustes del módulo blog y nos aseguramos de que este activada la disposición ancho completo. De lo contrario, no funcionará.

blog divi
También debe estar activada la opción mostrar imagen destacada,ya que si no habilitamos este ajuste, sólo se verá el titular y texto de la noticia. Es también conveniente habilitar en contenido: mostrar extracto , lo que nos va a permitir controlar más la cantidad de texto que queremos mostrar para cada noticia en el blog. El resto de las opciones no son determinantes, de modo que experimenta si quieres con los distintos ajustes.

Recuerda que cada entrada debe tener una imagen destacada asignada que será la imagen que se muestre en el blog en la página principal.

imagen-destacada

El código CSS

Una vez hemos configurado el módulo, vamos a añadir el código, y lo hacemos navegando hasta Divi >> opciones del Tema >> CSS personalizado, que está en la parte inferior de la página.

insertar-css-divi

Allí  pegamos el siguiente código:

/*Imagen destacada a la izquierda en el blog*/
 .et_pb_post a img{
height: 146px!important;
float: left;
width: 220px;
left: 0;
padding-right: 14px;}

 

Explicando el código CSS

En la imagen inferior puedes ver qué hace cada parte del código utilizado.

 

css-explicado-blog-izquierda

esto es:

1.- Altura de la imagen en píxeles.

2.- Disposición de la imagen: a la izquierda.

3.- Anchura de la imagen.

4.- Nada a la izquierda de la imagen.

5.- Relleno derecha. Determina el espacio entre imagen y texto.

Una buena idea es acceder al código (una vez añadido, claro) desde Divi >> Personalizador de temas y en el panel que aparece selecciona CSS adicional ( ver imagen  css adicional). Ahora ve cambiando los valores y verás los cambios en tiempo real.

En breve crearemos un tutorial para personalizar tu blog al estilo de elegant themes, que es el que estamos usando nosotros actualmente y que puedes ver aquí.

Si te ha parecido útil el post, comparte, por favor.