El módulo de código es un lienzo en blanco que le permite agregar código a su página, como códigos cortos de complementos o código HTML estático. Si desea utilizar un complemento de terceros, por ejemplo, un complemento de control deslizante de terceros, simplemente puede colocar el código corto del complemento en un módulo de código estándar o de ancho completo para mostrar el elemento sin restricciones.
Cómo agregar un módulo de código a tu página
Antes de que pueda agregar un módulo de código a su página, primero debe acceder a Divi Builder. Una vez el Tema divi instalado en su Sitio web, notarás un botón Utilice Divi Builder encima del editor cada vez que crea una nueva página.
Al hacer clic en este botón, activa Divi Builder, que le da acceso a todos los módulos de Divi Builder. Luego haga clic en el botón Use Visual Builder para iniciar el generador en modo visual.
También puedes hacer clic en el botón Use Visual Builder cuando navegas por tu Sitio web aguas arriba si ha iniciado sesión en su panel de WordPress.
Una vez ingresado en Visual Builder, puede hacer clic en el botón gris más para agregar un nuevo módulo a su página. Los nuevos módulos solo se pueden agregar dentro de las filas. Si está comenzando una nueva página, recuerde agregar una fila a su página primero.
Busque el módulo de código en la lista de módulos y haga clic en él para agregarlo a su página. La lista de módulos se puede buscar, lo que significa que también puede escribir la palabra "código" y luego presionar enter para buscar y agregar automáticamente el módulo de código. Una vez que se agrega el módulo, será recibido con la lista de opciones del módulo. Estas opciones se dividen en tres grupos principales: Contenido , diseño et Avanzado .
Caso de uso al agregar una hoja de estilo aburrida para animar contenido en una página individual
En este ejemplo, agregaré un script de enlace para importar Animate.css para agregar efectos de animación a los elementos de la página. Dado que el archivo Animate.css contiene una gran cantidad de código, tiene sentido cargarlo solo en la página que necesito.
Simplemente agregue una sección regular y una línea de ancho completo (columna 1) y agregue el módulo de código.
En el cuadro de texto de contenido, agregue el fragmento de código.
Todo lo que tienes que hacer es agregar algunas clases de CSS para animar cualquier elemento de la página de tu clase de CSS en tu página. En este ejemplo, voy a hacer rebotar el botón cuando se cargue la página.
En la configuración del módulo Botón, en la pestaña Avanzado, ingrese las dos clases "animado" y "rebote" en el cuadro de texto de la clase CSS.
Ahora el botón rebota cuando se carga la página.
Sugerencia: a veces, agregar código con saltos de línea hará que el código deje de funcionar. Es mejor crear su código en un editor de texto y pegarlo en el módulo de código.
Opciones de contenido de código
En la pestaña de contenido, encontrará todos los elementos de contenido del módulo, como texto, imágenes e íconos. Todo lo que controla lo que aparece en su módulo siempre estará en esta pestaña.
Contenido
Aquí puede colocar cualquier código HTML, CSS o JavaScript que desee mostrar en la página en la ubicación actual. Solo los editores y administradores pueden publicar HTML sin filtrar, lo que significa que el código puede eliminarse del curso si lo usa un autor o colaborador. También puede colocar códigos cortos en el módulo. Estos códigos de curso (códigos abreviados) se mostrarán dentro de la columna principal sin ningún envoltorio de módulo Divi adicional.
Etiqueta de administración
Esto cambiará la etiqueta del módulo en el generador para una fácil identificación. Al usar la vista WireFrame en Visual Builder, estas etiquetas aparecerán en el bloque de módulo de la interfaz 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. Esta pestaña le permite modificar la apariencia de su módulo. Cada módulo Divi tiene una larga lista de configuraciones de diseño que puede usar para modificar casi cualquier cosa.
Ancho máximo
Cualquier valor ingresado aquí limita el ancho de cualquier contenido representado en el módulo de código al valor establecido. Por ejemplo, ingresar 50% en el campo de entrada reducirá el contenido del módulo de código al 50% de la columna que lo contiene.
Código de opciones avanzadas de código
En la pestaña Avanzado, encontrará opciones que los diseñadores web más experimentados pueden encontrar útiles, como atributos CSS y HTML personalizados. Aquí puede aplicar CSS personalizado a cualquiera de los muchos elementos del módulo. También puede aplicar clases e ID de CSS personalizados al módulo, que se pueden usar para personalizar el módulo en el archivo style.css de su tema secundario.
ID de CSS
Ingrese un ID de CSS fácil de usar para este módulo. Se puede usar un identificador para crear un estilo CSS personalizado o para vincular a secciones particulares de su página.
Clase de CSS
Ingrese las clases de CSS opcionales para usar en este módulo. Se puede usar una clase CSS para crear un estilo CSS personalizado. Puede agregar varias clases, separadas por un espacio. Estas clases se pueden utilizar en su Tema divi Niño o en el CSS personalizado que agregas a tu página o a tu Sitio web usando las opciones del tema Divi o la configuración de la página Divi Builder.
CSS personalizado
También se puede aplicar CSS personalizado al módulo y a cualquiera de los elementos internos del módulo. En la sección CSS personalizado, encontrará un campo de texto donde puede agregar CSS directamente a cada elemento. Las entradas CSS en esta configuración ya están incrustadas con etiquetas de estilo. Así que solo tienes que ingresar reglas CSS separadas por punto y coma.
visibilidad
Esta opción le permite controlar los dispositivos en los que aparece su módulo. Puede optar por desactivar su módulo en tabletas, teléfonos inteligentes o computadoras de escritorio individualmente. Esto es útil si desea utilizar diferentes mods en diferentes dispositivos o si desea simplificar el diseño móvil eliminando ciertos elementos de la página.
Eso es todo por este tutorial.
