El módulo de Extra: Imagen

El módulo de Extra: Imagen

Puede usar el módulo Imagen para insertar imágenes dentro de los diseños de categoría.

Cómo insertar un módulo Imagen

Antes de poder añadir un módulo Imagen, 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 Imagen dentro de la lista de módulos y haga clic sobre el botón gris para añadirlo al diseño.

Extra - Insertar módulo Imagen

Opciones del módulo

Opciones de contenido

Extra - Imagen - Contenido

  • URL de la imagen – Introduzca la URL de la imagen aquí, o elija/suba una desde la Biblioteca multimedia de WordPress. Las imágenes siempre aparecerán alineadas a la izquierda dentro de sus respectivas columnas y tomarán el ancho total de la columna. Sin embargo, la imagen nunca se escalará a un tamaño mayor al original. La altura de la imagen se determinará por la relación de aspecto de la imagen original.
  • Abrir en Lightbox – Aquí puede elegir si la imagen se abrirá o no en estilo Lightbox cuando se hace clic en ella. Si se activa, la imagen se ampliará a su tamaño completo si se hace clic en ella dentro de la ventana modal. Esta es una característica muy útil para los portfolios.
  • URL del enlace – Escriba una URL válida en este campo para convertir la imagen en un enlace. No se creará un enlace si se deja el campo en blanco y la imagen permanecerá como un elemento estático.
  • La URL se abre – Elija si el enlace se abre en la misma ventana o no.
  • 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 Imagen 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

Extra - Módulo Imagen - Diseño

Alineación
  • Alineación de la imagen – Aquí puede elegir la alineación de la imagen: izquierda, derecha o centrada.
  • Siempre centrar la imagen en dispositivos móviles – A menudo las imágenes pequeñas se ven mejor en dispositivos móviles cuando están centradas. Como las columnas se apilan, las imágenes que estaban alineadas a la izquierda o a la derecha quedan “huérfanas” dentro de una columna que pasa a ocupar el 100% del ancho. Si activa esto, la columna en dispositivos móviles forzará una alineación centrada de la imagen, sin afectar la alineación en los equipos de escritorio.
Tamaño
  • Forzar ancho completo – De manera predeterminada, las imágenes se muestran en su ancho real. Sin embargo, puede forzar el ancho de la imagen para que se extienda al de la columna que la contiene.
  • Ancho – De manera predeterminada, el ancho de la imagen está asignado al 100%. Esto significa que la imagen se mostrará en su ancho real, a menos que exceda el ancho de la columna que la contiene. Si desea limitar el ancho de la imagen puede hacerlo introduciendo el valor aquí. Por ejemplo, un valor de 50% limitará el ancho de la imagen a la mitad de la columna que la contiene.
Espaciado
  • Mostrar espacio debajo de la imagen – Aquí puede elegir si la imagen debe tener o no un espacio debajo. Es decir, si su base debe estar pegada a la base de la sección.
  • 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.
Borde
  • Esquinas redondeadas – Aquí puede controlar el radio de la esquina de este módulo. Active el icono del enlace para controlar las cuatro esquinas a la vez, o desactívelo para definir un valor personalizado para cada una.
  • Estilos del borde – Esta opción controla de manera individual la apariencia de los cuatro bordes: izquierdo, derecho, superior e inferior.
  • Ancho del borde – De manera predeterminada, los bordes tienen un ancho de 0 (sin borde). Puede aumentar este valor arrastrando el selector de rango o escribirlo en el campo de entrada ubicado a la derecha del selector. El campo de entrada soporta distintas unidades de medida, tales como px, vh, vw, etc.
  • Color del borde – Esta opción afecta al color del borde. Elija un color personalizado del selector para aplicarlo.
  • Estilo del borde – Los bordes incluyen ocho estilos diferentes: sólido, punteado, rayado, doble, surco, cresta, interior y exterior. Seleccione el estilo que desee del menú desplegable para aplicarlo.
Sombra
  • Sombra – Use estos ajustes para añadir una sombra en el módulo. Podrá controlar la posición axial y la fuerza de la sombra asignando valores en píxeles; cambiar el color con el selector, y la posición respecto del borde (interior o exterior).
Animación
  • 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 salidad de la animación creará un efecto más suave en comparación con una curva de velocidad lineal.

Opciones avanzadas

Extra - Imagen - Avanzado

  • ID CSS – Escriba una ID CSS opcional para usar en este módulo. 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 este módulo. Una clase CSS puede ser usada para aplicar estilos. Puede añadir múltiples clases, separadas por un espacio. Estas clases pueden ser usadas en el tema hijo o en el recuadro CSS personalizado para añadir a la página (desde los ajustes de la página) o al sitio entero (desde las opciones del tema).
  • CSS personalizado – Puede aplicar CSS personalizado al módulo desde aquí. Dentro de la sección CSS personalizado encontrará un campo de texto donde podrá añadir el código directamente a cada elemento. El código que se añada a estos campos ya está envuelto en sus respectivas etiquetas, por lo que solo deberá introducir reglas de CSS separadas por punto y coma.
  • Visibilidad – Esta opción le permite controlar en qué dispositivos aparecerá el módulo. Puede elegir desactivarlo de manera individual en tablets, teléfonos móviles o en equipos de escritorio. Esto es especialmente útil si desea usar módulos distintos para cada dispositivo, o si desea simplificar el diseño para móviles al eliminar ciertos módulos de la página..
Facebook
Google+
Twitter
LinkedIn
WhatsApp
Skype
Enviar por correo
Imprimir

Dejar un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *