Widget de llamada a la acción (Pro)

los Widget de llamada a la acción es una herramienta para crear hermosos cuadros que combinan una imagen, algo de texto y un botón. El widget utiliza animaciones y efectos CSS para crear interacciones de usuario, que aparecen cuando el usuario pasa el mouse sobre el cuadro.

Contenido

Imagen

1. Piel: Elija la máscara clásica o la máscara de cubierta
2. Diseño: (Solo se muestra para la máscara clásica) Alinee la imagen a la izquierda, a la derecha o encima de la imagen

Si Piel clásica Se elige las siguientes opciones están disponibles:

Contenido

1. Elemento gráfico: Elija entre Ninguno, Imagen o Icono para mostrar un elemento gráfico sobre el título de la llamada a la acción
2. Si se selecciona Imagen como elemento gráfico:
   Elegir imagen: Seleccione o cargue una imagen
   Tamaño de la imagen: Establezca el tamaño de la imagen, de miniatura a completa, o establezca un tamaño personalizado.
3. Si se selecciona Icono como elemento gráfico:
   Icono: Seleccione un icono de la biblioteca FontAwesome
   Ver: Elija la vista de icono predeterminada o seleccione Apilado o Enmarcado.
4. Descripción del Título: Elija el título y la descripción que aparecen en el frente del cuadro desplegable
5. Etiqueta HTML de título: Establece la etiqueta HTML del título en H1- H6, Div o Span
6. Botón de texto: Introduzca el texto que se mostrará en el botón
7. Enlace: Introduzca la URL del enlace del botón. Haga clic en el engranaje Opciones de enlace para agregar rel = nofollow al enlace o para abrir el enlace en una nueva ventana.

Cinta

Título: Introduzca el texto que se mostrará en la cinta.

Estilo

Caja

1. Min. Altura – Establecer la altura mínima de toda la caja
2. Alineación – Alinear el contenido a la izquierda, al centro o a la derecha del cuadro
3. Posición vertical – Alinear el contenido en la parte superior, central o inferior del cuadro
4. Relleno – Establecer el relleno para el contenido

1. Min. Anchura: Establece el ancho mínimo de la imagen
2. Min. Altura: Establece la altura mínima para la imagen

Contenido

Título

1. Tipografía: Establece las opciones de tipografía para el título
2. Espaciado: Establece la cantidad de espacio entre el título y la descripción

Descripción

1. Tipografía: Establece las opciones de tipografía para el título
2. Espaciado: Establece la cantidad de espacio entre la descripción y el botón

Colores

1. Color de fondo: Elige el color de fondo
2. Color del título: Elige el color del título
3. Descripción Color: Elige el color de la descripción
4. Color del boton: Elige el color del botón

Botón

1. Talla: Seleccione el tamaño del botón, de Extra pequeño a Extra grande
2. Color de texto: Elige el color del texto del botón
3. Antecedentes Color: Elige el color para el fondo del botón
4. Color del borde: Elige el color del borde del botón
5. Ancho del borde: Establece el ancho del borde
6. Radio de borde: Establece el radio del borde para controlar la redondez de las esquinas

Cinta

1. Color de fondo: Elige el color del fondo de la cinta
2. Color de texto: Elige el color del texto de la cinta
3. Distancia: Mueva el control deslizante entre 0 y 50 para establecer la distancia de la cinta.
4. Tipografía: Establece las opciones de tipografía para el título de la cinta
5. Sombra de la caja: Establece la configuración de la sombra del cuadro para la cinta

Efectos de desplazamiento

1. Animación secuenciada: Elija si la animación de los elementos de texto aparece en secuencia o todas a la vez
2. Animación de desplazamiento: Elija la animación de desplazamiento para la imagen: acercar o alejar, o mover hacia la izquierda, derecha, arriba o abajo

Los siguientes elementos se pueden configurar independientemente para Normal y Flotar estados

1. Color de superposición: Elija el color de superposición para la imagen
2. Filtros CSS: Establece el desenfoque, el brillo, el contraste y la saturación de la imagen
3. Modo de mezcla: (Para estado normal) Establecer un modo de mezcla
4. Duración de la transición (ms): (Para el estado de desplazamiento) establece la duración del efecto de desplazamiento

Si Cubrir la piel se elige, las siguientes opciones están disponibles:

Contenido

1. Elemento gráfico: Elija entre Ninguno, Imagen o Icono para mostrar un elemento gráfico sobre el título de la llamada a la acción
2. Si se selecciona Imagen como elemento gráfico:
   Elegir imagen: Seleccione o cargue una imagen
   Tamaño de la imagen: Establezca el tamaño de la imagen, de miniatura a completa, o establezca un tamaño personalizado.
3. Si se selecciona Icono como elemento gráfico:
   Icono: Seleccione un icono de la biblioteca FontAwesome
   Ver: Elija la vista de icono predeterminada o seleccione Apilado o Enmarcado.
4. Descripción del Título: Elija el título y la descripción que aparecen en el frente del cuadro desplegable
5. Etiqueta HTML de título: Establece la etiqueta HTML del título en H1- H6, Div o Span
6. Botón de texto: Introduzca el texto que se mostrará en el botón
7. Enlace: Introduzca la URL del enlace del botón. Haga clic en el engranaje Opciones de enlace para agregar rel = nofollow al enlace o para abrir el enlace en una nueva ventana.

Cinta

Título: Introduzca el texto que se mostrará en la cinta.

Estilo

Caja

1. Min. Altura: Establece la altura mínima de toda la caja
2. Alineación: Alinea el contenido a la izquierda, al centro o a la derecha del cuadro
3. Posición vertical: Alinea el contenido con la parte superior, central o inferior del cuadro
4. Relleno: Establece el relleno para el contenido

Contenido

Título

1. Tipografía: Establece las opciones de tipografía para el título
2. Espaciado: Establece la cantidad de espacio entre el título y la descripción

Colores

1. Color del título: Elige el color del título
2. Color del boton: Elige el color del botón

Botón

1. Talla: Seleccione el tamaño del botón, de Extra pequeño a Extra grande
2. Tipografía: Establece las opciones de tipografía para el texto del botón
3. Texto Color: Elige el color del texto del botón
4. Antecedentes Color: Elige el color para el fondo del botón
5. Color del borde: Elige el color del borde del botón
6. Ancho del borde: Establece el ancho del borde
7. Radio de borde: Establece el radio del borde para controlar la redondez de las esquinas

Cinta

1. Color de fondo: Elige el color del fondo de la cinta
2. Color de texto: Elige el color del texto de la cinta
3. Distancia: Mueva el control deslizante entre 0 y 50 para establecer la distancia de la cinta.
4. Tipografía: Establece las opciones de tipografía para el título de la cinta
5. Sombra de la caja: Selecciona el
   
   sombra de la caja
   ajustes para la cinta

Efectos de desplazamiento

Contenido

1. Animación de desplazamiento: Elija la animación de desplazamiento para la imagen: acercar o alejar, o mover a la izquierda, derecha, arriba o abajo
2. Duración de la animación: Establece la cantidad de tiempo que tarda la animación en completarse
3. Animación secuenciada: Elija si la animación de los elementos de texto aparece en secuencia o todas a la vez

Antecedentes

1. Animación de desplazamiento: Elija la animación de desplazamiento para la imagen: acercar o alejar, o mover hacia la izquierda, derecha, arriba o abajo
2. Color de superposición: Elige el color de superposición para normal y desplaza el cursor
3. Filtros CSS: Establece el desenfoque, el brillo, el contraste y la saturación de la imagen
4. Modo de mezcla: (Para el estado Normal) Establezca un modo de fusión para la imagen
5. Duración de la transición (ms): (Para el estado de desplazamiento) establece la duración del efecto de desplazamiento

Avanzado

Establecer las opciones avanzadas que son aplicables a este widget