Cómo usar el módulo Código en Divi theme builder

Cómo usar el módulo Código en Divi theme builder
5 (100%) 1 vote

El módulo de código es un lienzo en blanco que le permite añadir código a su página, por ejemplo, códigos cortos de plugin o código HTML estático, si desea utilizar un plugin de terceros, por ejemplo, un plugin de control deslizante puede colocar simplemente el código abreviado 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 su página

Antes de poder añadir un módulo de código a su página, primero debe acceder a la sección Divi. Una vez que hayas instalado el tema Divi en tu sitio web, notarás un botón Usar Divi Builder encima del editor de publicaciones cada vez que crees una nueva página.

Al hacer clic en este botón, se activa Divi Builder, que le permite acceder a todos los módulos de Divi Builder, y luego hacer clic en el botón Usar Visual Builder para iniciar el generador en modo visual.

También puede hacer clic en el botón Usar Visual Builder cuando esté navegando por su sitio web si está conectado a su panel de WordPress.

Una vez que haya entrado en Visual Builder, puede hacer clic en el botón gris más para añadir un nuevo módulo a su página, los nuevos módulos sólo se pueden añadir dentro de las líneas, si está empezando una nueva página, no olvide añadir una línea a su página primero.

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 es buscable, lo que significa que también puede introducir la palabra “código”, luego pulse Intro para buscar automáticamente y añadir el módulo de código!Una vez que haya agregado el módulo, será bienvenido con una lista de opciones del módulo, que se dividen en tres grupos principales: Contenido, Diseño y Avanzado.

Usar mayúsculas y minúsculas añadiendo una hoja de estilo aburrida para animar el contenido en una sola página

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

Simplemente añada una sección regular y una línea de ancho completo (1 columna) y añada el módulo de código.

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

Todo lo que tienes que hacer ahora es añadir unas cuantas clases CSS para animar cualquier elemento de tu página de clases CSS en tu página, en este ejemplo, haré rebotar el botón al cargar la página.

En la configuración del módulo Botón, en la pestaña Avanzado, introduzca las dos clases “animadas” y “rebote” en el cuadro de texto Clase CSS.

Ahora, el botón rebotará cuando se cargue la página.

Consejo: A veces, añadir código con saltos de línea impide que el código funcione, por lo que es mejor crear el código en un editor de texto y pegarlo en el módulo de código.

Opciones de contenido del código

En la pestaña de contenido encontrará todos los elementos de contenido del módulo, como texto, imágenes e iconos, y todo lo que controla lo que aparece en su módulo siempre estará en esta pestaña.

Sólo los editores y administradores pueden publicar HTML sin filtrar, lo que significa que el código puede ser eliminado del módulo si es utilizado por un autor o colaborador, y también puede colocar códigos cortos en el módulo, que se mostrarán en la columna padre sin ninguna otra envoltura adicional del módulo Divi.

Etiqueta de Administración

Cuando se utiliza la vista WireFrame en Visual Builder, estas etiquetas aparecerán en el bloque de módulos de la interfaz de Divi Builder.

Opciones de diseño de código

En la pestaña Diseño, encontrará todas las opciones de estilo del módulo, como fuentes, colores, tamaño y espaciado, que le permiten cambiar la apariencia de su módulo.

Cualquier valor introducido aquí limita el ancho de cualquier contenido generado en el módulo de código al valor definido, por ejemplo, si se introduce el 50% en el campo de entrada, se reducirá el contenido del módulo de código al 50% de la columna que lo contiene.

Opciones avanzadas del módulo Código

En la pestaña Avanzado, encontrará opciones que los diseñadores web más experimentados pueden encontrar útiles, como los atributos CSS y HTML personalizados, aquí puede aplicar un CSS personalizado a uno de los muchos elementos del módulo, o puede aplicar clases CSS e IDs personalizados al módulo, que se pueden utilizar para personalizar el módulo en el archivo style.css del tema hijo.

ID DE CSS

Introduzca un ID de CSS fácil de usar para este módulo, un identificador se puede utilizar para crear un estilo de CSS personalizado o para crear enlaces a secciones específicas de su página.

Clase CSS

Introduzca las clases CSS opcionales que se utilizarán para este módulo; se puede utilizar una clase CSS para crear un estilo CSS personalizado; puede añadir varias clases, separadas por un espacio; estas clases se pueden utilizar en el tema Divi Child o en el CSS personalizado que añada a su página o sitio web utilizando las opciones de tema Divi o la configuración de página de Divi Builder.

CSS personalizado

En la sección CSS Personalizado, encontrará un campo de texto donde podrá añadir CSS directamente a cada elemento, y las entradas CSS de estos parámetros ya están integradas con etiquetas de estilo. Todo lo que tienes que hacer es introducir las reglas CSS separadas por punto y coma.

Visibilidad

Esta opción le permite controlar los dispositivos en los que aparece su módulo, puede elegir deshabilitar su módulo en tabletas, smartphones o escritorios individualmente, esto es útil si desea utilizar diferentes módulos en diferentes dispositivos o si desea simplificar el diseño móvil eliminando ciertos elementos de la página.