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 en el mercado, y posiblemente lo sea.

Al menos yo estoy de acuerdo con esa afirmación.

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 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 (prometo que no tengo enlace de afiliado), paso a explicar algunos efectos muy chulos con los que bordar los resultados que Divi ofrece.

 

6 efectos molones 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!

Pubblicato da Max Camuñas su Sabato 11 marzo 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

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)

pekebikers.com, uno de mis últimos diseños

 

#4 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ú.

 

#5 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)

 

#6 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.

6 efectos molones para personalizar la plantilla Divi - TWEET

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 😉

Pin It on Pinterest

Share This