La sección "Tarjetas personalizables" en el constructor de sitios web está diseñada para aquellos que desean presentar de manera fácil y rápida información clave sobre sus productos, servicios o reseñas de clientes. Estos bloques te permiten agregar tarjetas visualmente atractivas a la página del sitio, que se pueden personalizar para satisfacer las necesidades de tu negocio.
Independientemente de si deseas proporcionar una descripción detallada del curso, comentarios de clientes satisfechos o recomendaciones para usar tus servicios, "Tarjetas personalizables" y "Tarjetas de curso" ayudarán a resaltar la información y hacerla más accesible y conveniente para los visitantes del sitio.
¿Cómo agregar el bloque?
Para agregar la sección "Tarjetas personalizables", haz clic en el "+" en el modo de edición de tu sitio web:
A continuación, busca la sección "Tarjetas personalizables" en el menú que se abre y haz clic en ella para agregar la sección al sitio. La sección se agregará al sitio y se abrirá el menú de configuración de contenido para ti:
¿Cómo agregar una tarjeta?
En el menú de edición de la sección "Tarjetas personalizables" del contenido, verás varias secciones para la configuración: el estilo de las tarjetas, imágenes, botones, etc.
Para tu comodidad, puedes agregar tarjetas primero para ver cómo se aplican las configuraciones de estilo a las tarjetas.
Para hacer esto, desplázate hacia abajo en el menú de configuración de contenido y encuentra el botón "Agregar tarjeta":
Al hacer clic en el botón "Agregar tarjeta", ves la configuración de una tarjeta con un campo de texto vacío, una barra para cargar una imagen para la tarjeta y para el icono del botón, así como para el texto del botón mismo:
Los campos de configuración de la tarjeta son opcionales: eso significa que puedes omitir, por ejemplo, cargar una imagen para la tarjeta misma o para el icono del botón, sin insertar texto; todo está a tu discreción.
Si, por ejemplo, no necesitas un botón con un enlace en la tarjeta, deja los campos "Nombre del botón" y "Enlace" vacíos: entonces los botones no se mostrarán en la tarjeta.
Hay varias configuraciones para el texto de la tarjeta, similares a cualquier editor de texto, donde puedes ajustar el tamaño de la fuente, el contorno de la fuente, el color, el resaltado, así como agregar un enlace y más.
Para hacer esto, selecciona el texto (parte del texto) y aplica la configuración necesaria al texto:
Después de haber configurado completamente la primera tarjeta, agrega la siguiente: para hacer esto, haz clic en el botón "Agregar tarjeta", que se encuentra debajo de la barra de configuración de la primera tarjeta agregada:
Configuración de las tarjetas
Las tarjetas se configuran en un solo estilo: todas las configuraciones que uses en esta sección se aplicarán a todas las tarjetas en la misma sección.
Estilo de las tarjetas
Hay dos estilos para las tarjetas en el constructor de sitios web Mavibot: simple y en forma de deslizador.
Al usar un estilo simple, todas las tarjetas se mostrarán inmediatamente en una página de la sección del sitio:
Al usar el estilo "Deslizador", las tarjetas estarán en forma de carrusel, agregando así más dinamismo al sitio:
Para el estilo de deslizador, puedes elegir dónde se ubicarán las flechas y los puntos de la tarjeta:
Las flechas pueden ubicarse dentro del deslizador, fuera u ocultas (por ejemplo, si configuras un temporizador para pasar automáticamente las tarjetas):
Los puntos también pueden ubicarse dentro del deslizador, fuera u ocultos.
Para desplazarte automáticamente por las tarjetas, establece el intervalo de tiempo para mostrar una página:
Si el valor del temporizador se establece en 0, las tarjetas no se desplazarán automáticamente.
¡Presta atención!
El tiempo se establece en milisegundos, donde un milisegundo equivale a 0.001 segundos. Esto significa que si necesitas configurar 7 segundos, ingresa el valor en el campo 7000.
También puedes elegir el tipo de tarjeta:
Configuración de color para los elementos de la tarjeta
Para personalizar las tarjetas a tu estilo, usa las configuraciones de color:
Las configuraciones de color se aplican a todas las tarjetas al mismo tiempo. Si necesitas que el color del texto sea diferente en cada tarjeta, usa las configuraciones en el campo de texto.
Hay una amplia paleta de colores disponible para la personalización del color:
Y puedes aplicar las configuraciones de color a cualquier elemento de la tarjeta.
Configuración de bordes y rellenos
- Número de tarjetas por fila - un campo de texto que te ayudará a establecer el número requerido de tarjetas en una fila (página).
- Rellenos - son campos para ingresar valores numéricos que ayudarán a aumentar o disminuir los márgenes horizontales/verticales entre las tarjetas, así como los márgenes dentro de las tarjetas,
Puedes establecer un valor numérico común para la sangría dentro de las tarjetas, o haciendo clic en el engranaje en la esquina derecha de la línea, establecer un valor separado para los bordes superior, inferior, izquierdo y derecho:
Orientación de la tarjeta
La orientación de la tarjeta puede ser horizontal y también vertical.
Alineación
Puede estar en el centro, en el borde izquierdo o derecho.
Configuración de sombra
Ayudará a agregar profundidad a las tarjetas y resaltarlas contra el fondo de la sección/página.
Configuración de imagen
La configuración de imagen también se aplica a todas las imágenes que hayas agregado a la tarjeta.
En la configuración de imagen, debes establecer:
a) ancho de la imagen:
El campo acepta un valor numérico en píxeles; si no se especifica, se muestra automáticamente según el ancho real de la imagen en píxeles.
b) alto de la imagen:
El campo acepta un valor numérico en píxeles; si no se especifica, se muestra automáticamente en proporción al alto real de la imagen.
c) redondeo:
El campo, que acepta un valor numérico en píxeles, ayuda a redondear las esquinas de la imagen:
d) tamaño de la imagen:
La configuración se aplica si es necesario llenar/estirar/posicionar la imagen en relación con el ancho y alto especificados para la imagen.
e) la casilla de verificación "Imagen después del texto"
Si marcas la casilla, la imagen se ubicará debajo del texto en la tarjeta.
Cómo configurar los botones
El texto, así como el enlace a la página en la que tu visitante del sitio debe hacer clic, se configuran en la tarjeta misma:
Además, además del texto y el enlace, puedes establecer un icono para el botón cargando una imagen en la tarjeta:
Para establecer el color del texto y el fondo del botón, usa las configuraciones aquí:
A continuación, puedes ajustar el tamaño, el ancho y los rellenos para el botón:
- El ancho del botón - es un campo que acepta un valor numérico tanto en píxeles como en porcentajes:
- Alineación del botón - ayuda a establecer el botón en la tarjeta en relación con el borde derecho o izquierdo, así como el centro.
- Radio del borde del botón - es un campo que acepta un valor numérico en píxeles para redondear las esquinas del botón:
- Ancho del borde - es un campo que acepta un valor numérico en píxeles para establecer el ancho del contorno del botón:
- Margen
Te ayuda a ajustar los rellenos para el botón en la tarjeta en relación con los bordes superior, inferior, izquierdo y derecho.
- Relleno
Te ayuda a ajustar los rellenos dentro del botón.
- Icono
Si has cargado un icono en un botón en la tarjeta, el icono se puede ajustar para que encaje:
Y también establecer la posición del icono en relación con el texto a la izquierda o derecha:
- Sombra para el botón
La sombra se puede establecer no solo para la tarjeta, sino también por separado para el botón. Para hacer esto, es suficiente encontrar un campo desplegable con el nombre "Sombra" en la configuración del botón y seleccionar el grado de intensidad de la sombra: clara o fuerte:
- Animación del botón
Ayuda a atraer la atención de los clientes (usuarios del sitio) hacia la acción objetivo en el botón y agregar dinamismo al sitio:
1) animación de destello del botón:
2) animación de ondulación del botón:
¡Hecho!
Ahora sabes cómo crear y personalizar tarjetas en tu sitio web desde cero.