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

Actualizado el 25/09/2021 | Publicado el 25/05/2020 | 9 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 usted lee Divi Tips, debe haber visto que algunos artículos ofrecen este tipo de "fragmento para ayudarle a personalizar su 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

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 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

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:

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.

Module Code Divi
Añadir código personalizado en Divi a través del Módulo de Código

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 incorpore.

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

Puedes usar un Tema Hijo para hacer personalizaciones dentro de tu 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 se codifica una plantilla de página por completo o se añaden archivos.

Theme Enfant Divi - ajout de Code
Añadir código personalizado a Divi a través de un tema hijo

El archivo style.css contenido en 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á :

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 ese 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!

Extension Code Snippet
Añadir código personalizado a Divi con la extensión Code Snippet

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

Code Extension Snippet
Gestione fácilmente los fragmentos de código

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

Si necesita 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.

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.

A continuación, tendrá 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? Etc...

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

He aquí un cuadro resumen:

HTMLCSSJavaScriptPHP
Módulo de textoxx
Ficha avanzada de los módulos Divix
Configuración de la páginax
A través del menú Aparienciax
Opciones del temaxx
Módulo Divi Codexxx
Tema infantilxxxx
Extensión de fragmentos de códigoxxxx

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

Ajouter Code personnalisé dans Divi
Code Personnalise Divi Theme
Where to add Custom Code in Divi

1.727 palabras

7

A ti también te debería gustar:

Page d’erreur 404 personnalisée : avec et sans le Divi Thème Builder

Página de error 404 personalizada: con y sin el Divi Theme Builder

¿Ha pensado en personalizar la página de error 404 de su sitio? ¿No? Pues debería hacerlo: no sólo es fácil de hacer, sino que también podría reducir su tasa de rebote. La idea es mantener en su sitio al internauta que pasaría por allí. Descubre el tutorial paso a paso + el vídeo.

Appliquer des masques et des formes sur vos images avec Divi

Aplica máscaras y formas a tus imágenes con Divi

Las máscaras hacen que tus imágenes parezcan más gráficas y dan a tu diseño un aspecto original. ¿Sabías que puedes crearlos fácilmente con el Constructor Visual de Divi? Te muestro cómo en este tutorial y en este vídeo.

9 Commentaires

  1. jerome218

    Un très bon résumé… j’ai enfin compris le avant et après dans le « personnaliser CSS » !!! Merci

    Pour le php, perso je passais par des shortcodes dans le functions de mon thème enfant, je vais tester Code snippet !!

  2. Lycia Diaz

    Merci Jérôme 😉 Tu vas vois Code Snippet est vraiment pratique !

  3. Anne Laure

    Merci BEAUCOUP pour ce site au top. Je suis en train de m’auto-former sur Divi, en ne connaissant pas encore ce qui est CSS d’ailleurs, et ce site est une mine d’or. Et comme je ne maitrise pas encore le sujet, je n’arrive qu’à utiliser les paramètres avancés de chaque module et du coup ne pige pas comment utiliser cela sans appeler de classe ou de balise.

    En l’occurence je cherche à faire un effet bouton mais à partir d’une icone Font Awesome, du texte donc, et je n’arrive pas à faire de changement de couleur au passage de la souris. Aurais-tu une idée de comment faire ?

  4. francoise

    Bonjour,
    Cet article est super clair.
    Je me suis donc servie de code snippet sur mon site en construction en pensant avoir trouvé la solution sans aller me plonger dans mon theme enfant.
    J’ai fait un « copier-coller » d’un code trouvé sur caldera forms afin de remplacer le drapeau us des numéros de telephone par le drapeau français.
    Mais cela ne fonctionne pas!

  5. Lycia Diaz

    Salut Anne Laure, ce que tu veux faire est du CSS pur. Pour émettre des règles au survol de la souris, tu dois utiliser «  :hover » Cela te donne une piste à explorer, tu trouveras des tutos sur Google.

  6. Lycia Diaz

    Salut François, on ne peut pas copier-coller n’importe quel code. Il faut avoir quelques connaissances en amont.

  7. Anne Laure

    Merci Lycia, en fait j’ai découvert l’onglet « souris » (je ne sais pas quel est le terme officiel) de Divi et j’ai réussi du coup !

  8. Réal Drolet

    Merci Lycia pour ce site vraiment extraordinaire! Une mine d’or pour celui qui se fait la main avec WordPress et Divi. Et en français!

  9. Lycia Diaz

    Merci !

Soumettre un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Je souhaite recevoir les news du blog Astuces Divi !

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.

Pínchalo en Pinterest

Acciones
Comparte esto