Puede usar el módulo Código para añadir HTML personalizado o códigos abreviados (shortcodes) de WordPress a los diseños. En el ejemplo anterior, agregamos un formulario de suscripción con un código abreviado proporcionado por nuestro plugin de suscripción, Bloom.

Cómo insertar un módulo Código

Antes de poder añadir un módulo Código, deberá abrir un diseño de categoría o crear uno nuevo, desde el menú Extra > Constructor de categoría. Haga clic en Insertar módulo/s, localice el módulo Código dentro de la lista de módulos y haga clic sobre el botón gris para añadirlo al diseño.

Opciones del módulo

Opciones de contenido

• Contenido – Aquí puede copiar y pegar el código deseado dentro del módulo.
• Fondo – Aquí puede definir un fondo para el módulo. Las opciones son las mismas que para los demás fondos: color, degradado, imagen y vídeo.
• Etiqueta de administración – De manera predeterminada, este módulo aparecerá con el nombre Código en el constructor. La etiqueta de administración le permite cambiar el nombre para identificar el módulo más fácilmente. Cuando use la vista de estructura, estas etiquetas aparecerán dentro del bloque del módulo en la interfaz del constructor.

Opciones de diseño

• Orientación del texto – Esto controla la alineación del texto dentro de este módulo: izquierda, derecha, centrada o justificada.
• Ancho – De manera predeterminada, el ancho del módulo está asignado al 100% de la columna que lo contiene. Si desea modificar ese ancho puede hacerlo usando el control deslizante. Por ejemplo, un valor de 50% limitará el ancho del módulo a la mitad de la columna que lo contiene.
• Alineación del módulo – Aquí puede elegir la posición del módulo en caso de que haya modificado el ancho en el ajuste anterior: alineado a la izquierda, al centro o a la derecha.
• Margen personalizado – El margen es el espacio que se agrega fuera del módulo, entre sus extremos y los elementos contiguos (arriba, abajo, a la izquierda o a la derecha). Puede añadir valores personalizados de margen a cualquiera de los cuatro lados del módulo. Para eliminar el margen personalizado, borre el valor agregado del campo de entrada. De manera predeterminada, estos valores se miden en píxeles, pero puede usar unidades de medida personalizadas.
• Relleno personalizado – El relleno es el espacio que se agrega dentro del módulo, entre sus extremos y los elementos internos. Puede añadir valores personalizados de relleno a cualquiera de los cuatro lados del módulo. Para eliminar el relleno personalizado, borre el valor agregado del campo de entrada. De manera predeterminada, estos valores se miden en píxeles, pero puede usar unidades de medida personalizadas.
• Estilo de la animación – Elija un estilo de animación para activar las animaciones en este elemento. Las opciones son: Desvanecer, Diapositiva, Rebotar, Zoom, Voltear, Plegar o Rodar. Una vez activado, podrá personalizar aún más el estilo de animación. Para desactivar las animaciones, elija la opción Ninguna.
• Repetición de la animación – De manera predeterminada, las animaciones solo se ejecutarán una vez. Si desea que la animación se repita continuamente puede elegir aquí la opción Repetir.
• Dirección de la animación – Esta opción está disponible para todos los estilos de animación, excepto Desvanecer. Elija una de las cinco direcciones de animación diferentes, cada una de las cuales ajustará la posición inicial y final del elemento animado: Centrada, Derecha, Izquierda, Arriba, Abajo.
• Duración de la animación – Aumente o disminuya la velocidad mediante el ajuste de duración de la animación. Las unidades son en milisegundos y la duración predeterminada de la animación es de un segundo.
• Retardo de la animación – Si desea añadir un retardo antes de ejecutar la animación puede designar aquí ese retraso en milisegundos. Esto puede ser útil si usa varios módulos animados juntos.
• Intensidad de la animación – Esta opción está disponible para todos los estilos de animación, excepto Desvanecer y Rebotar. La intensidad afecta la suavidad o fuerza de la animación. Si baja la intensidad, la animación será más suave y sutil. Si la aumenta, la animación será más agresiva y ágil.
• Opacidad inicial de la animación – Si aumenta la opacidad inicial, puede reducir o eliminar el efecto de desvanecido que es aplicado a todos los estilos de animación.
• Curva de velocidad de la animación – Aquí puede ajustar el método de atenuación de la animación. Las opciones son: Atenuación de entrada y salida, Atenuación, Atenuación de entrada y Atenuación de salida. Atenuar la entrada o salida de la animación creará un efecto más suave en comparación con una curva de velocidad lineal.

Opciones avanzadas

Clases & ID CSS

• ID CSS – Escriba una ID CSS opcional para usar en esta fila. Puede usar una ID para aplicarle estilos o usarla como anclaje de enlace.
• Clase CSS – Escriba una o varias clases CSS opcionales para usar en esta fila. Una clase CSS puede ser usada para aplicar estilos.

CSS personalizado

• Antes – Introduzca aquí el código CSS para aplicar antes (::before) del div de la fila principal.
• Elemento principal – Introduzca aquí el código CSS para aplicar al div de la fila principal.
• Después – Introduzca aquí el código CSS para aplicar después (::after) del div de la fila principal.

Visibilidad

• Desactivar en – Esta opción le permite controlar en qué dispositivos aparecerá la sección. Puede elegir desactivarla de manera individual en tablets, teléfonos móviles o en equipos de escritorio. Esto es especialmente útil si desea usar filas distintas para cada dispositivo, o si desea simplificar el diseño para móviles al eliminar ciertas filas de la página.
• Desbordamiento horizontal – Aquí puede controlar el desbordamiento de elementos en el eje X. Si se establece en Desplazar, el contenido que desborda los anchos o alturas estáticos activará una barra de desplazamiento del navegador. Si se establece en Oculto, se recortará el desbordamiento de contenido
• Desbordamiento vertical – Aquí puede controlar el desbordamiento de elementos en el eje Y. Si se establece en Desplazar, el contenido que desborda los anchos o alturas estáticos activará una barra de desplazamiento del navegador. Si se establece en Oculto, se recortará el desbordamiento de contenido.
• z-index – Aquí puede controlar la posición del elemento en el eje Z. Los elementos con valores de índice z más altos se colocarán encima de los elementos con valores de índice z inferiores.

Transiciones

• Duración de la transición – Esto controla la duración de la transición de la animación al pasar el cursor.
• Retardo de transición – Esto controla el retardo de la transición de la animación al pasar el cursor.
• Curva de velocidad de transición – Esto controla la curva de velocidad de transición de la animación al pasar el cursor.