Hoy te quiero hablar de Divi, una plantilla premium de la que se ha llegado a decir incluso que es el mejor tema que existe para WordPress, y posiblemente lo sea. En concreto, te voy a hablar de efectos CSS para Divi.

Divi es una plantilla de Elegant Themes que permite diseñar prácticamente cualquier cosa. Y si hay alguna cosa que le escapa, siempre podemos tirar de código CSS para conseguirlo, como te voy a mostrar en este post.

Es mi tema de cabecera, el que suelo usar tanto en mis proyectos como en los diseños de mis clientes (aquí puedes ver mi portfolio).

Llevo varios años usándolo y he vivido en primera persona su grandísima evolución y las mejoras que ha ido incorporando con el paso del tiempo.

En ese sentido, ha dejado de ser una plantilla rígida y estática para convertirse en una mucho más moderna, fluida y visual.

Además, cuenta con su propio plugin –Divi Builder-, que permite instalar su sistema para diseñar y maquetar páginas en cualquier otro tema de WordPress.

Y después de mencionar todas sus bondades, paso a explicar algunos efectos CSS muy chulos con los que bordar los resultados que Divi ofrece.

 

12 efectos CSS para personalizar Divi


 

#1 Efecto parallax en las imágenes

Empezamos por algo facilito.

Buenos días :)Estoy preparando un post que saldrá el martes en el blog con 6 efectos molones para personalizar la plantilla Divi, como por ejemplo este efecto parallax tan chulo en las imágenes 👇¡Feliz fin de semana!

Publié par Max Camuñas sur samedi 11 mars 2017

 

Si quieres que tus imágenes tengan ese efecto tan chulo que hace que se desplacen a una velocidad diferente al del resto de la página cuando haces scroll, solo tienes que hacer lo siguiente:

  1. Añades una sección con ancho estándar.
  2. En los ajustes de la sección, activas la opción Usar efecto de paralaje; en el tipo de paralaje: verdadero.
  3. Añades una fila del tipo que necesites, en mi caso con 3 columnas.
  4. Insertas el módulo de texto, botón, etc, que requiera tu diseño, en este ejemplo un botón y un módulo de código con un formulario de suscripción.

#2 Personalizar el botón “leer más” en las entradas

Continúo con algo sencillo también, pero aquí ya hay que añadir código CSS a la plantilla.

Si quieres modificar el botón “leer más” que  acompaña a las entradas, solo tienes que pegar el siguiente código en las opciones de tema > CSS personalizado:

.more-link {
    align: center;
    text-transform: uppercase;
    background-color: #26bde8;
    color: #fff;
    padding: 10px;
    border: 0px solid #fff;
}

Personalizar el botón "leer más" en las entradas (plantilla Divi para WordPress)

Éste es el resultado con el código de arriba

¿Qué puedes modificar de este código para adaptarlo a tu diseño?

  • align: center / left / right (alineado al centro, derecha o izquierda)
  • text-transform: uppercase. Si no quieres que el texto aparezca el mayúscula, eliminas esta línea.
  • background-color: el color del botón (#26bde8 es el color azul de mi logo e imagen de marca).
  • color: el código del color de la letra (blanco en mi caso).
  • padding: relleno en pixels.
  • border: el estilo para el borde del botón.

 

#3 Mostrar las entradas en dos columnas (I)

Una de las cosas que más echo en falta de Divi es la posibilidad de mostrar las entradas en dos columnas, tanto en las categorías, como en las etiquetas y en los resultados de las páginas de búsqueda.

Pues bien, después de mucho investigar y probar, conseguí dar con el código que permite esta opción.

Para ello, tienes que pegar el siguiente código en las opciones de tema > CSS personalizado:

* Create Mansonory styles for archive pages*/
.search #left-area,
.archive #left-area {
 columns: 2;
}
 
.archive .et_pb_post > a,
.search .et_pb_post > a {
columns: 2;
}
 
.search #left-area .et_pb_post,
.archive #left-area .et_pb_post {
   columns: 2;
}
 
.search #left-area .et_pb_post,
.archive #left-area .et_pb_post {
   columns: 2;
}

 

Y aquí está el resultado: la imagen en la columna de la izquierda y el título + info del post + extracto en la columna de la derecha.

Mostrar las entradas en dos columnas (plantilla Divi para WordPress)

 

#4 Mostrar las entradas en dos columnas (II)

A raíz de uno de los comentarios que he recibido en este post, he detectado que el código anterior no funciona en todos los diseños.

Por lo tanto, éste es un código alternativo para mostrar las imágenes en dos columnas con la imagen destacada a la izquierda y el texto a la derecha.

/*Imagen destacada a la izquierda en el blog*/
.col2 a img{
  height: 150px!important;
  float: left;
  width: 250px;
  left: 0;
  padding-right: 14px;}
@media only screen and (max-width: 980px) {
.col2 a img{
  float:none;
  width:250px;
  height:150px;}}

Un ejemplo:

Mostrar las entradas en dos columnas (plantilla Divi para WordPress)

En este código, puedes personalizar el tamaño de la imagen en función de tu diseño (width / height).

Por lo tanto, si no te funciona el primer código, puedes probar con el segundo.

 

#5 Mostrar las entradas en dos columnas (III)

Además de los dos supuestos anteriores, puedes mostrar las entradas de tu blog a dos columnas añadiendo el siguiente código (disponible para las páginas de archivo):

.archive.category
.et_pb_post {
column-count: 2;
}

 

#6 Personalizar el número de comentarios

Otro de los elementos que me gusta personalizar en mis diseños en Divi es el texto que aparece al final de cada entrada y hace referencia al número de comentarios.

#comments {
font-weight: bold;
color: #26bde8;
font-size: 20px;
}

Aquí puedes personalizar el formato de fuente, el color y el tamaño.

Un ejemplo (mi propio blog):

Personalizar el número de comentarios (plantilla Divi WordPress)

 

#7 Mostrar avatares circulares en los comentarios

Siguiendo con los comentarios de las entradas, Divi muestra por defecto el avatar de los usuarios que comentan de forma cuadrada.

Con el siguiente código podrás mostrar esos avatares para que se muestren con formato circular.

/* Avatares circulares en Divi */
.comment_avatar img { border-radius: 50%; }

Por ejemplo:

 

#8 Eliminar la línea divisoria entre el contenido y el sidebar

Divi incluyo por defecto una línea gris que hace de división entre el contenido de entradas / páginas y el sidebar (barra lateral)

Esta línea queda bien en determinados diseños, pero no en todos. Por tanto, si quieres eliminarla, solo tienes que pegar ese código en el cajón CSS personalizado de las opciones de la plantilla.

/*** Take out the divider line between content and sidebar ***/
#main-content .container:before {background: none;}

Un ejemplo:

 

#9 Agrandar el menú secundario (top menú)

Otro elemento que podemos modificar en determinados tipos de diseños es el menú secundario (el top menú), que suele quedar bien con las dimensiones por defecto, pero en otras ocasiones puede que quieras cambiarlo.

Agrandar el menú secundario (plantilla Divi para WordPress)

Menú secundario por defecto

 

Agrandar el menú secundario (plantilla Divi para WordPress)

Menú secundario modificado

 

En el primer ejemplo (Simplemente Hazlo), su tamaño es el que viene por defecto.

En el segundo ejemplo (Territorio Magazine), he cambiado el alto y el margen.

Si quieres modificar el tamaño del menú secundario de tu plantilla Divi, solo tienes que pegar el siguiente código en las opciones de tema > CSS personalizado:

#top-header {
height: 55px; important!
}

#et-secondary-menu {
margin: 10px; important!
}

¿Qué puedes modificar de este código para adaptarlo a tu diseño?

  • height: el alto del menú.
  • margin: el margen del menú.

 

#10 Centrar los títulos de las entradas

Si lo que quieres es centrar el título de tus entradas para que no aparezcan a la izquierda, el código es el siguiente:

.entry-title{
text-align: center; important!
}

.post-meta{
text-align: center; important!
}

Aquí está el resultado.

Centrar los títulos de las entradas (plantilla Divi para WordPress)

 

#11 Añadir más botones de redes sociales

Otra de las cosas que se echan en falta en Divi desde hace tiempo es la posibilidad de añadir más botones sociales, ya que los que podemos incluir por defecto son cuatro: Facebook, Twitter, Google+ y RSS.

¿Qué pasa si queremos añadir otros botones como los de YouTube, Pinterest, Instagram, etc?

Ahora mismo, desde las opciones de la plantilla no se pueden incluir otros botones.

Para ello, podemos recurrir modificar el código de la plantilla. No es difícil.

¿Cómo añadir botones de redes sociales en Divi?

  • Nos vamos a apariencia > editor (en nuestro panel de WordPress).
  • En el listado de archivos de la derecha, buscamos social-icons.php y entramos.
  • Añadimos el siguiente código justo encima de la línea <?php endif; ?> y actualizamos el archivo.
<li class="et-social-icon et-social-instagram">
    <a href="https://www.instagram.com/maxcf/" class="icon">
      <span><?php esc_html_e( 'Instagram', 'Divi' ); ?></span>
    </a>
  </li>

 

Éste es el código para añadir el botón de Instagram.

¿Qué puedes modificar de este código para adaptarlo a tus redes sociales?

  • et-social-icon et-social-instagram: aquí tienes que cambiar el nombre de la red social.
  • a href: aquí pones la url de tu perfil en esa red social.
  • ?php esc_html_e( ‘Instagram’, ‘Divi’: aquí tienes que volver a cambiar el nombre de la red social. Si en la primera línea del código habías puesto, por ejemplo, Instagram, tienes que volverlo a indicar.

Por lo tanto, el botón para YouTube sería:

<li class="et-social-icon et-social-youtube">
    <a href="https://www.youtube.com/USUARIO/" class="icon">
      <span><?php esc_html_e( 'Youtube', 'Divi' ); ?></span>
    </a>
  </li>

El botón para Pinterest:

<li class="et-social-icon et-social-pinterest">
    <a href="https://www.pinterest.com/USUARIO/" class="icon">
      <span><?php esc_html_e( 'Pinterest', 'Divi' ); ?></span>
    </a>
  </li>

El botón para LinkedIn sería:

<li class="et-social-icon et-social-linkedin">
    <a href="https://www.linkedin.com/USUARIO/" class="icon">
      <span><?php esc_html_e( 'Linkedin', 'Divi' ); ?></span>
    </a>
  </li>

Y con el resto de redes sociales haríamos lo mismo.

 

#12 Añadir el logo en Divi sin perder calidad

En algunas ocasiones, me ha pasado que, al habilitar determinada imagen como logotipo de un sitio web, éste no tiene la suficiente nitidez o calidad en función del formato de utilizado para la imagen, y si el tamaño de la cabecera es pequeño, puede llegar a mostrarse de forma borrosa (sobre todo cuando la barra de navegación fija es de menor tamaño que el menú principal.

Por ejemplo:

Si te encuentras con este problema, la solución es sencilla. Solo tienes que añadir el siguiente código en las opciones de Divi.

#logo {
-webkit-transition: initial;
-moz-transition: initial;
transition: initial;
-webkit-transform: initial;
}

 

Espero que, si usas Divi y quieres personalizar el diseño de tu web o blog más aún, uses estos efectos para mejorar su resultado 😉

Este artículo fue publicado por primera vez en marzo de 2017 incluyendo 6 efectos CSS para personalizar Divi. Lo he actualizado con 6 efectos CSS más que he creado o descubierto durante este tiempo.

IMG: shutterstock

You have Successfully Subscribed!

Pin It on Pinterest

Share This