Powered by ZigaForm version 3.9.9.6.8

Divi me tiene enamorada. Es una plantilla muy intuitiva, profesional, visual y, sobre todo, versátil. Puedes hacer casi cualquier cosa con un poco de creatividad con su constructor visual.

Pero, a veces, hay pequeños detalles que nos gustaría cambiar y no sabemos como. Y claro, nuestro objetivo es tener una web profesional con DIVI que sea acorde a nuestra identidad visual ¿verdad?

Hoy quiero compartir contigo un par de trucos sencillos para personalizar tu web con DIVI de forma muy práctica, sin tocar demasiado código, solo tienes que copiar y pegar en el módulo que te indicaré a continuación.

No voy a hablarte de plugins ni de código javascript ni nada de eso. Con un poquito de CSS y teniendo claro lo que quieres es más que suficiente para darle a tu plantilla un toque mucho más personal y acorde a tu imagen de marca.

¿Dónde añadir los códigos?

Vamos a incluirlos directamente en el módulo de DIVI. No en el EDITOR de plantillas. Así evitamos perder los cambios en futuras actualizaciones.

1.- Entra en DIVI.

2.- Escoge OPCIONES DEL TEMA.

3.- Asegúrate de que estás en la pestaña GENERAL.

4.- Baja hasta la caja CSS personalizado.

5.- ¡Empezamos!

Menú con Efecto Hover

¿Te has fijado en el efecto que aparece en mi menú superior de páginas al pasar el ratón por encima? En las opciones de diseño predeterminadas, esta opción no aparece. Pero añadirla en tu web con DIVI es muy sencillo.

top-menu a {
display: block; position: relative; color: #000000 !important; text-decoration: none; -webkit-transition: all 0.4s ease-in-out; -moz-transition: all 0.4s ease-in-out; transition: all 0.4s ease-in-out;
}
top-menu a:hover {
display: block; position: relative; color: #33cccc !important; text-decoration: none; -webkit-transition: all 0.4s ease-in-out; -moz-transition: all 0.4s ease-in-out; transition: all 0.4s ease-in-out;
}

Pega el código anterior en la cajita. Y ahora te digo lo que tienes que cambiar.

En la primera parte del código, modificamos las opciones del menú normal. Presta atención solo al color. En mi caso está en negro (#000000), cambia ese código por el tuyo.

El segundo fragmento (top-menu a:hover) es el que añade el efecto de cambio de color al pasar el ratón por encima.

color: #33cccc

Cambia el código de mi color azul turquesa por el código hexadecimal del color que quieres que aparezca al hacer hover en cada opción del menú.

Asegúrate de guardar los cambios, comprueba que se ve correctamente ¡y listo!

Color de la Selección

¿Te has fijado que cuándo seleccionas un fragmento de texto de mi web cambia el color? No se ve el típico azul, sino mi amarillo corporativo.

Esto es muy sencillo y es uno de esos pequeños detalles que indicarán a tu lector que te has tomado un tiempo en cuidar esas cositas para que todo quede perfecto.

Vamos a ver cómo hacerlo:

::selection {
background-color: #F5E44C;
color: #fff;
}

Solo tienes que pegar ese pequeño fragmento de CSS en la cajita de DIVI y cambiar el código #f5e44c que es mi amarillo, por el color que tú quieras.

Guarda los cambios ¡y voilá! Si tus lectores quieren marcar alguna frase de tu web para guardarla o compartirla ¡verán el marcado del color que hayas escogido!

Enlace de Leer Más

Si usas el módulo de entradas resumidas para mostrar las últimas entradas de tu blog, habrás notado que el enlace de LEER MÁS es un poco soso… vamos a ver cómo darle un poco de vida de forma muy sencilla.

.more-link {
align: center;
text-transform: uppercase;
background-color: #FF6B97;
color: #fff;
padding: 3px;
border: 0px solid #fff;
text-align: center !important;
}
.more-link:hover {
background: #FF99B8;
color: #000000 !important;
border-radius: 5px;
text-align: center !important;
}

Como verás, aquí hay dos partes.

La primera indica cómo se ve el link de forma normal, la segunda al pasar el ratón por encima.

¿Qué es lo importante en este código?

text-transform: uppercase hace que se vea en mayúsculas. Si quieres que se vea normal, elimina esta parte.

background-color: el color de fondo. Cambia mi código por el tuyo.

color: el color de la letra. En mi caso está en color blanco.

border-radius: hace que el borde se vea redondeado al pasar el cursor. Si no lo necesitas, solo tienes que eliminarlo.

Centrar el título de las entradas

Muy sencillo y muy práctico. Aquí no tienes que cambiar nada, cópialo tal cual:

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

Cambiar el color del botón subir arriba

¡Y esta es facilísima! Y nos quitamos el color gris predeterminado de DIVI que a veces no pega para nada con nuestra imagen de marca.

Este es el código que yo utilizo para personalizar tanto el color como la posición del botón. Si te fijas, el original sitúa el botón más abajo, pero si yo lo dejo así, se me solapa con el globito del chat.

.et_pb_scroll_top.et-pb-icon {
display: none;
position: fixed;
z-index: 99999;
right: 0;
bottom: 125px;
padding: 5px;
-webkit-border-top-left-radius: 5px;
-moz-border-radius-topleft: 5px;
border-top-left-radius: 5px;
-webkit-border-bottom-left-radius: 5px;
-moz-border-radius-bottomleft: 5px;
border-bottom-left-radius: 5px;
color: #fff;
background: rgba(51, 204, 204, 0.4) !important;
font-size: 30px;
text-align: center;
text-decoration: none;
cursor: pointer;
}

¿Qué cambiar aquí?

bottom: 125px; 

Es lo que marca la distancia entre el botón y el final de la web. Puedes cambiarlo, comprobar cómo queda y modificarlo hasta que quede exactamente dónde quieres. Mira también la vista móvil.

color: #fff;
background: rgba(51, 204, 204, 0.4) !important;

Aquí lo que modificamos es el color de la flechita interna (en mi caso está en blanco: #fff) y del color de fondo.

Si te fijas, aparece el código del color de fondo en rgba. Esto es para mantener la transparencia. Tendrás que buscar el equivalente del tuyo y cambiarlo.

También puedes poner directamente el color hexadecimal (por ejemplo, background-color: #33cccc !important;) pero ten encuenta que si lo haces así, pierdes la transparencia.

infografia_colores_divi

¿Qué te parece? Estos son los códigos que más utilizo, tanto en mi web como en las de mis clientes. Es cierto que son pequeños detalles, pero ya sabes lo que dicen… los pequeños detalles son los que marcan la diferencia.

¿Quieres aprender a diseñar tu web profesional en wordpress con DIVI?

¿Quieres que realicemos una auditoria de tu web y te ayude a optimizarla de forma estratégica?

Si utilizas esta selección de trucos para personalizar tu plantilla DIVI y adaptarla mejor a tu identidad visual ¡no olvides contarme cómo te ha ido en los comentarios!

1
¡Hola! ¿Hablamos?
Powered by
All original content on these pages is fingerprinted and certified by Digiprove

Hipnotiza a tu Cliente Ideal

Descarga gratis mi manual para conectar de forma auténtica con tu cliente ideal a través de técnicas sencillas de Programación Neurolinguística y Storytelling.

Capta su atención, mantén su interés, consigue que se sienta protagonista de tu historia y obtén un SÍ cuándo le hagas llegar tu propuesta final.

Al suscribirte aceptas mi política de privacidad

¡Solicitud de descarga enviada! Revisa tu bandeja de entrada para confirmar tu interés y recibir mi manual en los próximos minutos. Aquí tienes las instrucciones para recibirlo correctamente: https://hazrealidadtuidea.com/ebook-hipnotiza-a-tu-cliente-ideal/

Pin It on Pinterest

Share This