5 modificaciones con CSS imprescindibles para Divi que deberías saber

3 min 19/11/2018

Divi, con su Divi Builder, es una excelente herramienta para la construcción de páginas web creativas, originales y estéticamente bonitas. Pero hay algunos detalles que no se pueden hacer con su constructor sin añadir código CSS. En este artículo te voy a contar como hacer algunos cambios imprescindibles con Divi con CSS y que tuve que realizar con muchos de mis diseños.

Centrar verticalmente el contenido de las columnas en Divi

Una de las primeras modificaciones que tuve que hacer con CSS para Divi fue centrar verticalmente el contenido de las columnas en Divi. Por defecto, y aunque iguales las alturas de las columnas en los ajustes de la fila, el contenido queda alineado arriba, pero a mi me gusta el centrado vertical. Llámame quisquilloso si quieres, pero el alineado vertical de columnas tiene que ser en el centro.

• En los Ajustes de fila -> Diseño -> Igualar las alturas de las columnas cambiamos el conmutador a Si.

• Luego vamos a Avanzado -> CSS personalizado -> Elemento principal de la columna 1 ( o de la columna cuyo contenido sea más pequeño para alinear verticalmente) e introducimos las siguientes líneas de código:

 display: flex;
 flex-direction: column;
 justify-content: center;

Con estos dos pasos nuestro contenido ya queda verticalmente centrado.

Poner efectos en el módulo anuncio y que queden todos con el mismo tamaño

Un módulo muy usado en Divi es el módulo anuncio. Combina imagen con un título y texto. Para darle algo de creatividad, y con el propio constructor, podemos ponerle un color de fondo, bordes o sombras (Box Shadow). Cuando pones 2 o 3 de estos módulos en fila con estos efectos y el contenido es variable, nos encontramos con que cada módulo tiene su tamaño y como ves en la imagen no queda muy bien. 

La solución pasa una vez más por añadir algo de código, pero no al módulo anuncio, sino a cada una de las columnas de la fila. Por ejemplo, para poner el box shadow como en la imagen anterior tenemos que hacer de la siguiente manera:

• En los Ajustes de fila -> Diseño -> Igualar las alturas de las columnas cambamos el conmutador a Si. Exactamente igual que en el apartado anterior.
• Luego vamos a Avanzado -> CSS personalizado -> y en cada una de los elementos principales de cada columna añadimos el código necesario, en este caso para crear el box-shadow:

box-shadow: 0px 0px 18px 3px orange;
padding: 15px;
border-radius:10px;

La primera sentencia es para añadir el propio box shadow. Le añadimos padding porque sino el texto queda pegado al borde y redondeamos un poco las esquinas, ya que con este efecto creo que queda mejor. 

Otros efectos que pueden resultar útiles en estos casos:

background-color: #ffffff; //modificar el color de fondo 
border: 1px solid #ffffff; //poner borde 

Poner color de fondo al enlace activo del menú principal

En Divi por defecto puedes poner un color distinto al texto del enlace activo pero hay casos que para resaltar el enlace activo es mejor poner un color de fondo ya que destaca más, como puedes ver en la siguiente imagen:

Para crear este efecto hay que añadir en  Apariencia -> Personalizar -> CSS adicional el siguiente código:

.menu-item{
	padding-right:20px !important;
}

#top-menu li.current-menu-ancestor, #top-menu li.current-menu-item, .et_color_scheme_red #top-menu li.current-menu-ancestor, .et_color_scheme_red #top-menu li.current-menu-item, .et_color_scheme_pink #top-menu li.current-menu-ancestor, .et_color_scheme_pink #top-menu li.current-menu-item, .et_color_scheme_orange #top-menu li.current-menu-ancestor, .et_color_scheme_orange #top-menu li.current-menu-item, .et_color_scheme_green #top-menu li.current-menu-ancestor, .et_color_scheme_green #top-menu li.current-menu-item{
	background-color:#ffbc49;
	border-radius:5px;
	padding-top:10px !important;
	height:40px !important;
	color:white !important;
	padding-left:10px !important;
	padding-right: 10px !important;
	margin-right:20px !important;
}

#top-menu li li.current-menu-item{
	height:auto !important;
}

El background-color pones el que tu quieras y «color» sería para el color de la letra. El resto lo dejas igual para que quede como en la imagen.

Alinear el menú secundario a la derecha

Me pasó hace poco que un cliente me pidió alinear la barra del menú secundario a la derecha (donde pone el número de teléfono, correo y redes sociales). La solución pasa también por añadir la siguiente línea de código en Apariencia -> Personalizar -> CSS adicional:

#et-info{
	float:right;
}

Añadir más redes sociales en el menú secundario y en el pié de página

En Divi por defecto solo puedes añadir 3 redes sociales, Facebook, Twitter y Google+. Pero es más que probable que tu quieras añadir más que esas: Youtube, Instagram, Linkedin, etc. 

Este cambio, aunque también considero imprescindible conocer, no se hace con CSS. Para añadir más redes sociales tienes que modificar el archivo que está en la carpeta includes/social_icons.php de la plantilla Divi. Este cambio lo deberías hacer añadiendo dicho archivo en tu tema hijo (child-theme) y haciendo ahí las modificaciones. En el siguiente artículo puedes aprender a crear un tema hijo.

Para editar el archivo social_icons.php puedes hacerlo desde Apariencia -> Editor y en Archivos del tema seleccionas includes y social_icons.php. Al final de este archivos añades el siguiente código:

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

Este ejemplo sería el código para añadir el icono de Youtube, pero si quieres añadir otro como Instagram, habría que cambiar «youtube» por «instagram» y cambiar el contenido de href=»xxxxxx» por la url de tu red social.

Conclusión

Considero que cualquiera que trabaje con Divi debería saber estas 5 modificaciones de la plantilla Divi. No son las únicas, seguro que hay más. Y si quieres hacer un diseño personalizado aun deberías conocer muchas más. Pero en este caso creo que se debe tener ya un conocimiento básico de CSS y HTML para poder llevarlas a cabo. 

Y sino, contratar a un diseñador web profesional!!!

Espero que este post te ayude a personalizar tu página con Divi. Muchas gracias por tu tiempo amigo lector!!