# Tarjetas personalizables La sección "Tarjetas personalizables" en el creador de sitios web está diseñada para quienes desean presentar de forma fácil y rápida información clave sobre sus productos, servicios o reseñas de clientes. Estos bloques le permiten añadir tarjetas visualmente atractivas a la página del sitio, que se pueden personalizar para adaptarse a las necesidades de su negocio.
Tanto si desea proporcionar una descripción detallada del curso, comentarios de clientes satisfechos o recomendaciones para utilizar sus servicios, "Tarjetas personalizables" y "Tarjetas del curso" ayudarán a destacar la información y hacerla más accesible y cómoda para los visitantes del sitio. ## ¿Cómo añadir un bloque? Para añadir la sección "Tarjetas personalizables", haga clic en "+" en el modo de edición de su sitio web:
A continuación, busque la sección "Tarjetas personalizables" en el menú que se abre y haga clic en ella para añadir la sección al sitio. La sección se añadirá al sitio y se abrirá para usted el menú de configuración del contenido:
## ¿Cómo añadir una tarjeta? En el menú de edición del contenido de la sección "Tarjetas personalizables", verá varias secciones de configuración: el estilo de las tarjetas, las imágenes, los botones, etc. Para su comodidad, primero puede añadir tarjetas para ver cómo se aplican a ellas los ajustes de estilo. Para ello, desplácese hacia abajo en el menú de configuración del contenido y busque el botón "Añadir tarjeta":
Al hacer clic en el botón "Añadir tarjeta", verá los ajustes de una tarjeta con un campo de texto vacío, una barra para subir una imagen para la tarjeta y para el icono del botón, así como para el texto del propio botón:
Los campos de configuración de la tarjeta son opcionales: eso significa que puede omitir, por ejemplo, subir una imagen para la propia tarjeta o para el icono del botón, sin insertar texto; todo queda a su discreción. Si, por ejemplo, no necesita un botón con un enlace en la tarjeta, deje vacíos los campos "Nombre del botón" y "Enlace": entonces los botones no se mostrarán en la tarjeta.
Existen varios ajustes para el texto de la tarjeta, similares a cualquier editor de texto, donde puede ajustar el tamaño de la fuente, el contorno de la fuente, el color, el resaltado, así como añadir un enlace y más. Para ello, seleccione el texto (o parte del texto) y aplique los ajustes necesarios al texto:
Después de haber configurado completamente la primera tarjeta, añada la siguiente: para ello, haga clic en el botón "Añadir tarjeta", que se encuentra debajo de la barra de configuración de la primera tarjeta añadida:
## Configuración de las tarjetas {% hint style="info" %} Las tarjetas se configuran con un único estilo: todos los ajustes que utilice en esta sección se aplicarán a todas las tarjetas de la misma sección. {% endhint %} ### Estilo de las tarjetas Hay dos estilos para las tarjetas en el creador de sitios web Mavibot: simple y en forma de deslizador. Al usar un estilo simple, todas las tarjetas se mostrarán inmediatamente en una sola página de la sección del sitio:
Al usar el estilo "Deslizador", las tarjetas se mostrarán en forma de carrusel, lo que aporta más dinamismo al sitio: Para el estilo de deslizador, puede elegir dónde se ubicarán las flechas y los puntos de la tarjeta:
Las flechas pueden ubicarse dentro del deslizador, fuera o estar ocultas (por ejemplo, si configura un temporizador para pasar automáticamente las tarjetas):
Los puntos también pueden ubicarse dentro del deslizador, fuera o estar ocultos. Para recorrer las tarjetas automáticamente, establezca 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. {% hint style="warning" %} ¡Atención! El tiempo se establece en milisegundos, donde un milisegundo es igual a 0,001 segundos. Esto significa que si necesita establecer 7 segundos, introduzca el valor 7000 en el campo. {% endhint %} También puede elegir el tipo de tarjeta:
#### Ajustes de color para los elementos de la tarjeta Para personalizar las tarjetas según su estilo, utilice los ajustes de color:
Los ajustes de color se aplican a todas las tarjetas al mismo tiempo. Si necesita que el color del texto sea diferente en cada tarjeta, entonces utilice los ajustes en el campo de texto. Hay disponible una amplia paleta de colores para la personalización del color:
Y puede aplicar los ajustes de color a cualquier elemento de la tarjeta. #### Configuración de bordes y márgenes internos
1. **Número de tarjetas por fila** - un campo de texto que le ayudará a establecer el número necesario de tarjetas en una fila (página). 2. **Márgenes internos -** son campos para introducir 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,
Puede 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 o vertical. #### Alineación Puede ser en el centro, en el borde izquierdo o derecho.
#### Ajustes de sombra Ayudará a añadir profundidad a las tarjetas y a destacarlas sobre el fondo de la sección/página.
## Ajustes de imagen Los ajustes de imagen también se aplican a todas las imágenes que haya añadido a la tarjeta.
En los ajustes de imagen, debe configurar: 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) altura de la imagen:
El campo acepta un valor numérico en píxeles; si no se especifica, se muestra automáticamente en proporción a la altura 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:
El ajuste se aplica si es necesario rellenar/estirar/posicionar la imagen con respecto al ancho y alto especificados para la imagen. e) la casilla "Imagen después del texto" Si marca 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 su visitante debe hacer clic, se configura en la propia tarjeta:
Además, aparte del texto y el enlace, puede 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, utilice aquí los ajustes:
A continuación, puede ajustar el tamaño, el ancho y los márgenes internos del botón:
1. **El ancho del botón** - es un campo que acepta un valor numérico tanto en píxeles como en porcentajes:
2. **Alineación del botón** - ayuda a colocar el botón en la tarjeta con respecto al borde derecho o izquierdo, así como al centro.
3. **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:
4. **Ancho del borde -** es un campo que acepta un valor numérico en píxeles para establecer el ancho del contorno del botón:
5. **Margen** Le ayuda a ajustar los márgenes internos del botón en la tarjeta con respecto a los bordes superior, inferior, izquierdo y derecho.
6. **Relleno** Le ayuda a ajustar los márgenes internos dentro del botón.
7. **Icono** Si ha subido un icono a un botón de la tarjeta, entonces el icono se puede ajustar para que encaje:
Y también establecer la posición del icono con respecto al texto a la izquierda o a la derecha:
8. **Sombra del botón** La sombra se puede establecer no solo para la tarjeta, sino también de forma separada para el botón. Para ello, basta con encontrar en los ajustes del botón un campo desplegable con el nombre "Sombra" y seleccionar el grado de intensidad de la sombra: suave o intensa:
9. **Animación del botón**
Ayuda a atraer la atención de los clientes (usuarios del sitio) hacia la acción objetivo del botón y a añadir dinamismo al sitio: 1\) animación de parpadeo del botón:
2\) animación de vibración del botón:
{% hint style="success" %} ¡Hecho!\ Ahora ya sabe cómo crear y personalizar tarjetas en su sitio web desde cero. {% endhint %} --- # Agent Instructions: Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter: ``` GET https://docs.mavibot.ai/doc/es/websites/sitios/blocks/cards.md?ask= ``` The question should be specific, self-contained, and written in natural language. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.