Cómo Crear y Configurar un Botón en Duda
Los botones son uno de los elementos más importantes de un sitio web. Son las llamadas a la acción (CTA - Call to Action) que guían al usuario para que realice una acción específica: comprar, contactar, descargar, etc.
Este tutorial te enseñará, paso a paso, cómo agregar, enlazar y diseñar un botón de manera profesional en la plataforma Duda.
Paso 1: Añadir el Widget de Botón
1. En el panel izquierdo del editor de Duda, haz clic en la opción "Widgets".
2. Se desplegará una lista de todos los widgets disponibles. En el campo de búsqueda o en la sección "Básicos", busca el widget llamado "Botón".
3. Haz clic sobre él y, sin soltar, arrástralo a la sección (fila y columna) de tu web donde deseas que aparezca.
Paso 2: Configurar el Texto y el Enlace (La Acción)
Una vez que el botón está en tu página, al hacer clic sobre él se abrirá un menú de configuración.
a) Cambiar el Texto del Botón:
En el primer campo que aparece, "Etiqueta del botón", escribe el texto que quieres que se muestre.
● Recomendación: Usa textos orientados a la acción, como "Ver Productos", "Contactar Ahora", "Descargar Catálogo" o "Comprar".
b) Asignar el Enlace:
Esta es la parte más importante, ya que define qué hará el botón cuando un usuario haga clic en él. Haz clic en la opción "Dirección web" para ver todas las posibilidades y pegar la url para redireccionar:
Paso 3: Personalizar el Diseño
Para que el botón se alinee con la identidad de tu marca y llame la atención, debes personalizar su apariencia. En el menú de configuración del botón, ve a la pestaña "Diseño".
Aquí podrás modificar:
● Diseño: Elige entre estilos predefinidos (rectangular, redondeado, con contorno, etc.).
● Color de fondo: Selecciona el color principal del botón. Puedes elegir un color sólido o un degradado.
● Color de Hover (¡Muy importante!): Define el color que tomará el botón cuando el usuario pase el mouse por encima. Esto mejora la experiencia de usuario (UX) al indicar que el elemento es interactivo.
● Borde: Añade un borde, elige su color y grosor.
● Texto: Cambia la fuente, el tamaño, el color y el estilo del texto del botón (negrita, cursiva).
● Icono: Puedes añadir un pequeño icono junto al texto para darle un toque visual (ej: un icono de flecha o de teléfono).
● Sombra: Agrega una sombra para darle profundidad y destacarlo del fondo.
Consejos Profesionales para Botones Efectivos
● Consistencia es Clave: Mantén un estilo de diseño consistente para todos los botones de tu web. Los botones de acción principal (Ej: "Comprar") deben tener un color destacado, y los secundarios (Ej: "Ver más") uno más sutil.
● Contraste: Asegúrate de que el color del botón contraste con el fondo de la página para que sea fácil de ver.
● Espacio en Blanco: Deja suficiente espacio alrededor del botón para que no se sienta "apretado" y sea fácil de hacer clic, especialmente en dispositivos móviles.
● Prueba en Móvil: Revisa siempre cómo se ve y se siente tu botón en la vista móvil del editor para garantizar una buena
