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

Muchos lugares donde puedes añadir código personalizado en Divi ¡Oye! Este tema facilita esta tarea. Usted verá en este artículo que su niño tema es casi inútil !

Sí... Las herramientas nativas Divi y WordPress permitirnos fácilmente añadir código para Personalizar Divi. Esto es ideal si no eres un desarrollador, pero has encontrado una pieza de código (un fragmento) para copiar y pegar.

Si lee Astuces Dividebe haber visto que algunos artículos propusieron este tipo de "Snippet" para ayudarte personalizar su sitio. Así que miremos más de cerca. donde añadir código personalizado...

1 - El módulo Divi Text: CSS y HTML

El Módulo Texto Divi permite hacer muchas cosas! Puedes:

• Escribe texto (por supuesto)
• Añadir títulos
• Añadir listas con fichas o números
• Insertar imágenes
• Insertar códigos cortos
• Etc.

Parece el viejo editor de WordPress (Classic Editor) y ofrece una pestaña que usted permite añadir CSS y HTML. Todo lo que tienes que hacer es cambiar el módulo al modo "TEXT" y accedes al Versión HTML de su texto¡Es muy práctico, incluso indispensable!

Así que, si tienes algo Conceptos HTML y CSS, puede modificar sus textos sobre la mosca.

Para darle un ejemplo, en la imagen anterior, rápidamente marqué parte del texto con <h2> y añadió un color a algunas palabras.

¿Ves el faro? <span> Dentro, añadí estilo (del CSS): <span style="color:blue;">Placer un mot ici</span>Esto se llama CSS INLINE. Para contarle todo, no se recomienda colocar CSS Inline en todas partes porque esto puede tener un impacto en rendimiento de su sitio. ¡Pero a veces puede ayudar!

Este módulo de texto, usted entiende, es un módulo off-road fácil de usar para añadir HTML o CSS!

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

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

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

Tres campos están disponibles para añadir CSS:

1. Antes: Este es el "Pseudo-Element Before"
2. Elemento principal: el CSS que agrega aquí afectará el elemento principal.
3. Después: Este es el Pseudo-Element After

Aprender más acerca de Pseudo Elementos Antes y Después.

Estos campos act on very specific CSS CLASSES. Le aconsejo que haga clic en Punto de interrogatorio para saber dónde funcionará tu código.

Tenga en cuenta que en estos campos sólo tiene que entrar CSS sin llamar a clases o etiquetas Porque no funcionará. Entonces tendrá que utilizar otros medios, como los que discutiremos en el resto de este artículo.

¿Sabes que puedes probar Divi gratis? Nos vemos en esta página y haga clic en "Pruébalo GRATIS"

3 - Ajustes avanzados de la página: CSS

Cuando activas el Editor Visual dentro de una página o artículo, puedes añadir módulos, por supuesto, pero también puedes acceso a parámetros avanzados (véase también: características ocultas de Visual Builder).

Para ello, simplemente abra el menú de la configuración de la página (la cruz violeta, en la parte inferior de la página) y haga clic en el icono del rueda dentada.

Nos vemos. pestaña AVANCED : puede entrar en su CSS en el campo Personalizar CSS.

Esta opción es ideal si quieres crear una regla CSS que sólo actúa dentro de esta página. Por lo tanto, usted no carga innecesariamente CSS en todo su sitio.

Sin embargo, si esta regla es redundante y necesita añadirla a varias páginas de su sitio, recomiendo la siguiente solución...

4 - Apariencia > Personalizar: CSS

La pestaña Aspecto √≥ Personalizar √≥ CSS adicional nativo añade todas las reglas de CSS que necesitas.

Sólo empieza a ingrese su CSS en el campo dedicado. Después puedes añadir varias reglas.

Sugiero que saltes una línea entre cada código e incluso agregas comentarios para recordar para qué es tu código. 😉

Aquí hay un ejemplo:

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

El texto entre /* y */ es un comentario no tomado en cuenta por los navegadores web. Al comentar su CSS, usted lo encontrará más rápido!

5 - Opciones temáticas Divi: CSS y JavaScript

El tema Divi permite agregar CSS y Scripts a las opciones del tema...

5.1. - El CSS en Tab Divi

Al final de la ficha Divi Opciones temáticas General, encontrará un campo para entrar en CSS. Este campo es el mismo que el de la ficha Aspecto √≥ Personalizar √≥ CSS adicional (véase el capítulo anterior de este artículo).

Así que es otra manera. añadir CSS en Divi.

5.2. - JavaScript en Tab Divi Integración

La pestaña Divi Opciones temáticas Integración ofrece la posibilidad de añadir JavaScript o código jQuery.

Los campos en esta pestaña permiten añadir código en el <head> y dentro <body> Su sitio.

Esto se utiliza principalmente para añadir etiquetas <script> Tenga en cuenta que también puede utilizar este módulo dentro de sus plantillas creadas con Theme Builder. El código estará activo en todos los modelos que lo usen. <link>.

Módulo de código Divi

• Puedes usar un Tema del niño muestra la utilidad de este campo para Dependiendo de los cambios que usted necesita hacer, un tema infantil es esencial. Este puede ser el caso, por ejemplo, si usted codifica completamente una plantilla de página o añade archivos..
• Añadir código personalizado a Divi a través de un tema infantil la adición de Google Analytics en Divi estilo.css

Finalmente, también podemos utilizar el baliza <head> para añadir fuentes personalizadas en Divi utilizando una etiqueta <link>agregar sus reglas CSS

 <link href="https://fonts.googleapis.com/css2?family=Chelsea+Market&display=swap" rel="stylesheet"> 

(Para añadir fuentes premium, necesitará un tema infantil)

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

El Módulo Divi Code permite añadir CSS, HTML o JavaScript Introduzca PHP

En este caso, el código añadido a través de este módulo sólo estará activo dentro del diseño que lo carga.

Tenga en cuenta que también puede utilizar este módulo dentro de sus plantillas creadas con Theme Builder. El código estará activo en todos los modelos que lo usen.

Crear o obtener un tema del niño Divi.

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

Vea cómo añadir JavaScript o jQuery en un tema infantil para hacer personalizaciones dentro de su sitio. Esta es la forma más segura de no perder cambios en cada actualización de tema padre.

necesidad de añadir sólo algunos extractos de código a su tema sin añadir archivos o carpetas

The extension Snippet Code estilo.css contenu dans tout thème enfant vous permettra agregar sus reglas CSS. Quant au fichier funciones. php, il permet de saisir du PHP.

Si necesita añadir scripts, puede añadir archivos .js dans le dossier de votre thème enfant et les charger via le fichier funciones. php.

Para ir más lejos:

• Créer ou obtenir un Divi child theme
• Voir comment ajouter du JavaScript ou du jQuery dans un thème enfant.

8 - Utilizando la extensión Snippet Code: PHP, JavaScript, HTML, CSS

Dans le cas où vous avez necesidad de añadir sólo algunos extractos de código a su tema sin añadir archivos o carpetasEn este caso, el tema infantil no es realmente indispensable. La extensión del Código Snippets hace el trabajo muy bien... ¡Es aún más conveniente!

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

Para usarlo, sólo ve a la pestaña "Extractos" y haga clic en "Nuevo" Tema del niño saisir du PHP.

Si necesita ingresar HTML, JS o CSS, también es posible. De hecho, 3 ejemplos de extractos de código están disponibles para entender cómo insertar estos tipos de lenguaje.

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

• Usted no necesita pasar por el FTP para agregar o eliminar código.
• Puedes encender y apagar cada fragmento de código. Es muy útil si se encuentran conflictos en el futuro.
• Si el código en el que entras no es correcto, tu sitio no se "agrieta". Un mensaje aparecerá para explicar de dónde vino el error.
• por el Capitán WP
• Una lista

9 - Código personalizado en Divi: cuadro resumido

tutoriales para aprender PHP añadir código personalizado en Divi¡Tienes la vergüenza de elegir!

Entonces tendrá que elegir "estratégicamente": ¿debería el código estar activo en todo el sitio o sólo debería funcionar en una página? ¿Este código es recurrente? Sí.

9 elemento principal

Código avanzado Página Divi

	HTML	CSS	Aspecto Personalizado CSS	Tema de opción Divi CSS
Módulo de texto	x	x
Tema de opción Divi JavaScript		x
Ajustes de página		x
Módulo de código Divi		x
Theme Enfant Divi - addition of Code		x	x
tema del niño Divi	x	x	x
Snippet Extension Code	x	x	x	x
Agregar código personalizado en Divi	x	x	x	x

Código aduanero Divi Tema

• Consejos de Divi » ¿Dónde añadir código personalizado en Divi (CSS, JavaScript y PHP)? Flujo de comentarios
• Artículo "Requisitos técnicos para desarrollarse bajo WordPress" de Capitaine WP
• Une liste de tutoriels pour apprendre le PHP .