¿Dónde puedo añadir código personalizado en Divi (CSS, JavaScript y PHP)?

Publicado el 25/05/2020 | 7 comentarios

Hay muchos lugares donde puedes añadir código personalizado en Divi! Este tema hace que sea fácil hacerlo. En este artículo verás que tu tema hijo es casi inútil.

Sí... Las herramientas nativas de Divi y WordPress nos permiten añadir fácilmente código para personalizar Divi. Esto es ideal si no eres un desarrollador pero has encontrado un fragmento de código para copiar y pegar.

Si estás leyendo Divi Tips, probablemente has visto algunos de los artículos que ofrecen este tipo de fragmentos para ayudarte a personalizar tu sitio. Así que echemos un vistazo más de cerca a dónde añadir el código personalizado...

Anuncio: este artículo contiene enlaces de afiliación que reconocerá fácilmente. Los enlaces clásicos están en púrpura y los enlaces patrocinados están en rosa.

1 - El módulo de texto Divi: CSS y HTML

El Módulo de texto Divi te permite hacer muchas cosas! Puedes hacerlo:

  • Escribir texto (obviamente)
  • Añadir títulos
  • Añadir listas numeradas o con viñetas
  • Inserción de imágenes
  • Inserción de shortcodes
  • Y así sucesivamente.

Se parece al antiguo editor de WordPress (Classic Editor) y ofrece una pestaña que permite añadir CSS y HTML. Sólo tienes que cambiar el módulo al modo "TEXTO " y obtendrás la versión HTML de tu texto. Es muy práctico, ¡incluso esencial!

Así, si tienes algunos conocimientos de HTML y CSS, puedes modificar tus textos sobre la marcha.

Code CSS HTML Module Texte
Añadir CSS o HTML en línea a través de la pestaña TEXTO del módulo Texto de Divi

Para dar un ejemplo, en la captura de pantalla anterior, marqué rápidamente un texto con

y añadí un color a algunas palabras.

Usted ve la etiqueta ? En el interior, he añadido algo de estilo (CSS): Coloque una palabra aquí. Esto es lo que llamamos CSS INLINE. A decir verdad, no es recomendable colocar CSS Inline en todas partes porque puede tener un impacto en el rendimiento de su sitio web. Pero a veces puede ayudar.

Este módulo de texto, como puedes ver, es un módulo "todo terreno" fácil de usar para añadir HTML o CSS.

2 - La pestaña "avanzada" de los módulos, líneas o secciones: CSS

Cada módulo, línea y sección del Visual Builder tiene una pestaña llamada ADVANCED que contiene campos para añadir CSS.

Pero cuidado, este CSS sólo actuará para el módulo, la línea o la sección.

Code en mode Avancé Module
Añadir CSS dentro de un módulo Divi

Hay tres campos disponibles para añadir CSS:

  1. Antes: es el "Pseudoelemento Antes".
  2. Elemento principal: el CSS que añadas aquí actuará sobre el elemento principal.
  3. Después: es el " Pseudoelemento Después".

Más información sobre Pseudoelementos antes y después.

Estos campos actúan sobre CLASES CSS muy específicas. Le aconsejo que haga clic en el icono del signo de interrogación para saber dónde actuará su código.

9 Element Principal

Tenga en cuenta que en estos campos, sólo debe introducir el CSS sin llamar a ninguna clase o etiqueta porque no funcionará. Tendrás que utilizar otros medios, como los que comentaremos en el resto de este artículo.

¿Sabías que puedes probar Divi gratis? Ir a esta página y haz clic en "PRUEBA GRATUITA

3 - Configuración avanzada de la página: CSS

Cuando activas el Constructor Visual dentro de una página o artículo, puedes añadir módulos, por supuesto, pero también puedes acceder a la configuración avanzada (lee también : las funciones ocultas del Visual Builder).

Para ello, basta con abrir el menú de configuración de la página (la cruz púrpura en la parte inferior de la página) y hacer clic en el icono del engranaje.

Code Avancé Page Divi
Añadir CSS dentro de una sola página Divi

Vaya a la pestaña AVANZADA: puede introducir su CSS en el campo "Personalizar CSS".

Esta opción es ideal si quiere crear una regla CSS que actúe sólo dentro de esta página. De esta manera, no cargas CSS innecesariamente en todo tu sitio.

Por otro lado, si esta regla es redundante y necesitas añadirla en varias páginas de tu sitio, te aconsejo la siguiente solución...

4 - La pestaña Apariencia > Personalizar : CSS

La pestaña Apariencia > Personalizar > CSS adicional te permite de forma nativa añadir todas las reglas CSS que necesites.

Apparence Personnaliser CSS
Añadir CSS a través del menú Apariencia > Personalizar

Solo tienes que empezar a introducir tu CSS en el campo dedicado. Puedes añadir varias reglas seguidas.

Aun así te aconsejo que saltes una línea entre cada código e incluso que añadas comentarios para que no se te olvide para qué sirve tu código 😉

He aquí un ejemplo:

/* code texte encadré */
.encadre {
	border: solid 1px #7e3bd0;
	padding: 1em;
}

El texto colocado entre /* y */ es un comentario que los navegadores no tienen en cuenta. Comentando tu CSS, te orientarás más rápidamente.

5 - Opciones del tema Divi: CSS y JavaScript

El tema Divi permite de forma nativa añadir CSS y Scripts en las opciones del tema...

5.1 - CSS en la pestaña Divi > Opciones del tema > General

Option Theme Divi CSS
Añadir CSS en las opciones del tema Divi

Al final de la página de la ficha Divi > Opciones del tema > GeneralEncontrará un campo para introducir el CSS. Este campo es el mismo que se encuentra en la pestaña Apariencia > Personalizar > CSS adicional ( visto en el capítulo anterior de este artículo).

Así que esta es otra forma de añadir CSS a Divi.

5.2 - JavaScript en la pestaña Divi > Opciones del tema > Integración

La ficha Divi > Opciones del tema > Integración ofrece la posibilidad de añadir código JavaScript o jQuery.

Option Theme Divi JavaScript
Añadir scripts en las opciones del tema Divi

Los campos de esta pestaña permiten añadir código al y en el de su sitio.

Se utiliza principalmente para añadir