cambios css divi

Trucos para Tema DIVI

El tema DIVI es seguramente la plantilla para wordpress más completa que podemos encontrar, aunque es cierto que en ocasiones no nos permite conseguir el diseño que teníamos pensado para nuestra web. Hoy os vamos a dar algunos consejos para cambiar algunas cositas básicas que os vendrán genial.

1.- Datos de contacto del Header

a) Mover datos de contacto a la derecha:

Vamos a al panel de opciones de DIVI y buscamos la casillla de CSS Personalizado abajo del todo y escribimos el siguiente trozo de código;

#et-info {
float: right;
}

b) Incrementar el tamaño del área y del texto:

En la misma casilla que hemos usado en el apartado anterior incluimos el código;

#top-header, #top-header .container, #top-header #et-info, #top-header .et-social-icon a {
font-size: 14px;
line-height: 2em;
}

Aunque esta modificación ya la podéis hacer desde el área de Personalizar en las nuevas versiones de DIVI.

Apariencia>>Personalizar>>Cabecera y Navegación>>Barra de Menu Secundario.

2.- Mover iconos de redes sociales a la derecha del header

Si solo queréis mover los iconos de las redes sociales, en lugar de todos los datos de contacto, tnéis que usar el siguiente código:

/* Iconos sociales menú secundario Divi a la derecha */
#top-header .et-social-icons { float:right !important; }
#top-header #et-info { width: 100%; }

3.- Color de la suma del Recaptcha en Formulario de Contacto

Si necesitas cambiar el color de la suma que aparece en el recaptcha de tu formulario de contacto porque no contrasta bien con el fondo de tu web, puedes cambierlo de forma sencilla. Para ello tienes que introducir un pequeño código en el apartado CSS Adicional dentro de Apariencia>>Personalizar.
.et_pb_contact_captcha_question {
color: #000;
}

4.- Hacer footer fijo

El pie de página o footer de DIVI tiene la costumbre de que cuando tienes una página con poco contenido se queda como a la mitad, flotante, en vez de estar abajo del todo.

Para solucionar este error tenemos que pegar el siguiente código en el CSS Personalizado dentro de Personalizar:

/* Footer de Divi fijo */
#main-footer {
position: absolute;
bottom: 0;
width: 100%;
}

Si solo tienes el problema en una página, porque el resto tienen suficiente contenido, no hay porque añadir CSS adicional a todo tu sitio. Solo tienes que abrir la página, abrir sus ajustes y pegar el código en CSS PERSONALIZADO.

5.- Cambiar color del “Mensaje de Éxito” del formulario de contacto

Otra personalización que puede que nos interese es cambiar el color del texto de agradecimiento tras mandar un mensaje desde formulario de contacto divi. Lo solucionaremos añadiendo un CSS personalizado para este texto de agradecimiento.

Así que en la sección de CSS personalizado añadiremos;
.et-pb-contact-message {
color: rgb(231, 231, 231);
}

6.- Abrir enlaces sociales en una nueva ventana

En las opciones de Divi puedes configurar fácilmente varios iconos sociales para que se muestren tanto en el pié de página como en el menú de navegación secundario, pero tienen un defecto, y es que se abren por defecto en la misma ventana, sacando a los visitantes de tu web.

Es muy fácil de cambiar este comportamiento. En tu escritorio de WordPress ve a

Divi > Opciones del tema > Integración

Ahi activa la opción de “Habilitar código de la cabecera

A continuación, en el área de texto denominado “Agregar código al <head> de tu blog“, añadir este código:

<script type="text/javascript">
jQuery(document).ready(function(){
jQuery(".et-social-icon a").attr('target', '_blank');
});
</script>

7.- Cambiar color del botón de menú desplegable en dispositivos móviles 

En esta ocasión lo que tenemos que hacer es agregar el siguiente código al CSS Personalizado. No olvides cambiar el color “red” por el que quieras usar en tu web.
span.mobile_menu_bar:before {
color: red !important;
}

About the author: Franky Martin (ADMIN)

3 comments to “Trucos para Tema DIVI”

You can leave a reply or Trackback this post.

  1. Vampur - 24 noviembre, 2017 at 12:38 Reply

    Me parece un aporte muy interesante, te felicito.
    UN SALUDO

  2. Vampur - 24 noviembre, 2017 at 12:40 Reply

    Lo unico que añadiria serian algunos pantallazos para aclarar de que estamos hablando dentro de la plantilla de Divi.

  3. admin - 24 noviembre, 2017 at 13:52 Reply

    Gracias por tus comentarios Vampur. Tienes razón respecto a las capturas, intentaremos editar el post en el futuro.

Leave a Reply

Your email address will not be published.

19 + dos =