CMS Wordpress 12 Août 2021 Créé par 3mn de lecture

Módulo de código de Divi

Lien de l'article

Sommaire

Procédure

El constructor Divi está incluido en nuestros paquetes dealojamiento web Wordpress. Si desea soporte para el constructor DIVI, debe suscribirse a una licencia directamente en el sitio web de Elegent theme Divi.

Introducción

LWS ofrece 3 plugins premium de Elegant Themes (Divi, Bloom y Monarch). Estos se actualizan regularmente. Una vez que sea cliente de LWS, tendrá acceso gratuito a estos plugins eligiendo la distribución 'Divi Builder' cuando instale el CMS Wordpress con nuestro Auto-Instalador.

Si usted tiene un paquete cPanel o ya ha instalado Wordpress con esta distribución, pero no tiene acceso a todos los temas o actualizaciones, por favor háganoslo saber dándonos los datos de acceso al área de administración de su sitio Wordpress para que un técnico pueda actualizar la licencia.

Por favor, tenga en cuenta: necesitará contratar una licencia de Elegant Themes para beneficiarse del soporte. LWS no ofrece soporte para estos productos.

¿Qué es el módulo Divi Code?

El módulo Código es un lienzo en blanco que te permite añadir código a tu página, como shortcodes de plugins o HTML estático. Si desea utilizar un plugin de terceros, por ejemplo, un plugin deslizante de terceros, sólo tiene que colocar el código corto del plugin en un módulo de código estándar o de ancho completo para mostrar el elemento sin obstáculos.

Cómo añadir un módulo de código a tu página

Antes de poder añadir un módulo de código a tu página, primero tendrás que cambiar al Constructor Divi. Una vez que el tema Divi se ha instalado en su sitio web, usted notará un botón Usar Divi Builder por encima del editor de mensajes cada vez que cree una nueva página. Haz clic en este botón para activar el Constructor Divi, dándote acceso a todos sus módulos. Luego haz clic en el botón Usar Constructor Visual para iniciar el constructor en modo visual. También puedes hacer clic en el botón Usar Constructor Visual mientras navegas por tu sitio web en la parte frontal si has iniciado sesión en tu panel de control de WordPress.

Módulo de código de Divi

Una vez que haya entrado en el Constructor Visual, puede hacer clic en el botón gris + para añadir un nuevo módulo a su página. Los nuevos módulos sólo se pueden añadir dentro de las filas. Si está comenzando una nueva página, no olvide añadir primero una fila a su página.

Módulo de código de Divi Localice el módulo de código en la lista de módulos y haga clic en él para añadirlo a su página. La lista de módulos permite realizar búsquedas, lo que significa que también puedes escribir la palabra "código" y hacer clic en el botón Intro para encontrar y añadir automáticamente el módulo de código. Una vez añadido el módulo, aparecerá una lista de opciones para el módulo. Estas opciones están separadas en tres grupos principales: Contenido, Estilo y Avanzado.

Ejemplo de uso: Añadir una hoja de estilo externa para animar el contenido de una página individual

En este ejemplo, voy a añadir un script de enlace para importar Animate.css para añadir efectos de animación a los elementos de la página. Como el archivo Animate. css tiene mucho código, tiene sentido cargarlo sólo en la página que necesito.

Simplemente añada una sección normal y una fila de ancho completo (1 columna) y añada el módulo Código.

Módulo de código de Divi

En el cuadro de texto de contenido, añada el fragmento de código.

Módulo de código de Divi

Ahora todo lo que tienes que hacer es añadir algunas clases CSS para animar cualquier elemento de tu página de clases CSS a tu página. En este ejemplo, voy a hacer que el botón rebote cuando se cargue la página.

En la configuración del módulo del botón, en la pestaña Avanzado, introduce las dos clases "animado" y "rebote" en el cuadro de texto de clases CSS.

El botón rebotará cuando se cargue la página.

Aquí tienes algunos ejemplos más de cómo puedes utilizar el módulo de código:

Añade bloques de código javascript o librerías que sólo se apliquen a tu página.
Integrar plugins de terceros como el revolution slider.
Puede utilizar el módulo de código de ancho completo para integrar un formulario estándar para cuestionarios más interactivos, formularios de contacto, etc.
Añadir un menú de acción flotante.
Crear un anuncio de barra superior deslizante.
Añadir un botón de acción flotante.

Consejo: A veces añadir código con saltos de línea hace que el código no funcione. Es mejor crear el código en un editor de texto y concatenar (todo en una línea) antes de pegarlo en el módulo Código.