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

¡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 trozo de código (un snippet) para copiar y pegar.

Si usted lee Divi Tips, debe haber visto que algunos artículos ofrecen este tipo de "fragmento para ayudarle a personalizar su sitio. Así que veamos con más detalle dónde añadir el código personalizado...

Aviso: 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! Usted puede :

• Redacción de textos (obviamente)
• Añadir títulos
• Añadir listas numeradas o con viñetas
• Inserción de imágenes
• Inserción de shortcodes
• Etc.

Se parece al antiguo editor de WordPress (Classic Editor) y ofrece una pestaña que permite añadir CSS y HTML. Simplemente cambie el módulo al modo "TEXTO " y tendrá acceso a la versión HTML de su texto. Esto es muy útil, ¡e incluso esencial!

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

Pour vous donner un exemple, sur la capture d’écran ci-dessus, j’ai rapidement balisé une partie du texte avec des <strong><h2></strong> et ajouté une couleur à quelques mots.

Vous voyez la balise <strong><span></strong> ? À l’intérieur, j’ai ajouté du style (du CSS) : <strong><span style= »color:blue; »></strong><em>Placer un mot ici</em><strong></span></strong>. C’est ce que l’on appelle le <strong>CSS INLINE</strong>. Pour tout vous dire, ce n’est pas recommandé de placer du <strong>CSS Inline</strong> partout car cela peu avoir un impact sur la 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 en el 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, línea o sección.

Hay tres campos disponibles para añadir CSS:

1. Antes: es el " Pseudo-Elemento 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.

Tenga en cuenta que en estos campos sólo debe introducir el CSS sin llamar a ninguna clase o etiqueta, ya que no funcionará. Entonces tendrá 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 haga clic en "PRUEBA GRATUITA

3 - Parámetros avanzados de la página: CSS

Cuando se activa el Constructor Visual dentro de una página o artículo, se pueden añadir módulos, por supuesto, pero también se puede acceder a la configuración avanzada (ver 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.

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 sólo funcione dentro de esta página. De esta manera, no se carga el CSS innecesariamente en todo el sitio.

Sin embargo, si esta regla es redundante y necesitas añadirla en varias páginas de tu sitio, te recomiendo 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 cualquier regla CSS que necesites.

Solo tienes que empezar a introducir tu CSS en el campo correspondiente. 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

Al final de la página del 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.

Les champs présents dans cet onglet permettent d’ajouter du code dans le <strong><head></strong> et dans le <strong><body></strong> de votre site.

On se sert de cela principalement pour ajouter des balises <strong><script></strong> mais également des balises <strong><link></strong>.

Por ejemplo:

• Este artículo sobre la Parallax Mobile muestra la utilidad de este campo para añadir jQuery al tema Divi.
• Este otro artículo sobre la incorporación de Google Analytics a Divi muestra cómo insertar el código UA.

Enfin, on peut aussi se servir de la balise <head> pour ajouter des polices personnalisées dans Divi à l’aide d’une balise <strong><link></strong>. Voici à quoi cela ressemblerait :

(para añadir fuentes premium, necesitarás un tema hijo)

6 - El módulo de código: CSS, HTML y JavaScript

El módulo Code de Divi le permite añadir CSS, HTML o JavaScript a su diseño.

En este caso, el código añadido a través de este módulo sólo estará activo dentro de la maqueta que lo incorpora.

Tenga en cuenta que también puede utilizar este módulo dentro de sus plantillas creadas con el Theme Builder. El código se activará entonces en todas las plantillas que lo utilicen.

Para entender cómo funciona, lea este artículo dedicado al Módulo Divi Code.

7 - El tema hijo : CSS, PHP, HTML, JavaScript

Puede utilizar un tema hijo para realizar personalizaciones en su sitio. Esta es la forma más segura de evitar que se pierdan los cambios cada vez que se actualiza el tema principal.

Dependiendo de los cambios que necesites hacer, un tema hijo es esencial. Este puede ser el caso, por ejemplo, si codifica una plantilla de página desde cero o añade archivos.

El archivo style.css de cualquier tema hijo le permitirá añadir sus reglas CSS. En cuanto al archivo functions.php, le permite entrar en PHP.

Si necesitas añadir scripts, puedes añadir archivos .js a la carpeta de tu tema hijo y cargarlos a través del archivo functions.php.

Para ir más allá:

• Crear u obtener un Tema infantil Divi
• Vea cómo añadir JavaScript o jQuery en un tema hijo.

8 - Uso de la extensión Code Snippets: PHP, JavaScript, HTML, CSS

En caso de que sólo necesite añadir algunos fragmentos de código a su tema sin añadir archivos o carpetas, en este caso el tema hijo no es realmente necesario. La extensión Code Snippets hace el trabajo muy bien... ¡Es aún más práctico!

Esta extensión es gratuita y está disponible directamente desde su backoffice, en la pestaña Extensión > Añadir.

Para utilizarlo, basta con ir a la pestaña "Extractos" y hacer clic en "Nuevo ": puedes introducir PHP.

Si necesitas introducir HTML, JS o CSS, también es posible. Por cierto, hay disponibles 3 fragmentos de código de ejemplo para entender cómo insertar estos tipos de lenguaje.

Por último, considero que esta ampliación ofrece algunas ventajas significativas:

• No es necesario pasar por el FTP para añadir o eliminar código.
• Puede activar y desactivar cada fragmento de código. Esto es muy útil si te encuentras con conflictos en el futuro.
• Si el código que introduce no es correcto, su sitio no se "romperá". Aparecerá un mensaje explicando el error.
• Puedes nombrar cada extracto para que sea más fácil de encontrar.
• Puedes priorizar el orden en el que quieres trabajar.

9 - Código personalizado en Divi: tabla de resumen

Acabas de ver el resumen de dónde puedes añadir código personalizado en Divi. No hay más que elegir.

Entonces habrá que elegir "estratégicamente": ¿el código debe estar activo en todo el sitio o sólo debe funcionar en una página? ¿Este código es recurrente? Y así sucesivamente...

Así que, dependiendo de sus necesidades, ¡siempre hay una solución!

He aquí un cuadro resumen:

	HTML	CSS	JavaScript	PHP
Módulo de texto	x	x
Ficha avanzada de los módulos Divi		x
Configuración de la página		x
A través del menú Apariencia		x
Opciones del tema		x	x
Módulo Divi Code	x	x	x
Tema infantil	x	x	x	x
Extensión de fragmentos de código	x	x	x	x

Para ir más allá, aquí hay algunos enlaces:

• CSS para principiantes
• El artículo " Requisitos técnicos para desarrollar en WordPress del Capitán WP
• Una lista de tutoriales para aprender PHP .