Los botones son una excelente manera de alentar a los visitantes a interactuar con un sitio. En el Editor de Wix Studio, puedes agregar botones que muestren texto, un icono o ambos. Tienes el control total del diseño y el estilo para que puedas crear el aspecto exacto que necesitas.
En este artículo, aprende a hacer lo siguiente:
Agregar un botón
Al agregar un nuevo botón, puedes elegir un diseño de dos categorías:
- Botones básicos: estos botones solo muestran texto y tienen un aspecto más "minimalista".
- Botones con estilo: estos botones pueden mostrar tanto texto como iconos, y ofrecen opciones de personalización avanzadas (por ejemplo, fondos de imagen, degradados de color y más).
Más información sobre los botones básicos frente a los botones con estilo
Entre los botones básicos y los botones con estilo, hay varias diferencias que debes tener en cuenta:
Funciones compatibles
A diferencia de los botones básicos, los botones con estilo no son compatibles con las siguientes acciones:
- Copiar el diseño del botón a otro elemento
- Obtener sugerencias de contenido para el texto del botón
Comportamiento adaptativo
En tamaños de pantalla más pequeños, los dos botones muestran un comportamiento adaptativo diferente.
Los botones básicos ajustan automáticamente el texto:
Mientras que los botones con estilo muestran puntos suspensivos:
Para agregar un botón:
- Haz clic en Agregar elementos
a la izquierda del Editor. - Haga clic en Botones.
- Desplázate por los diseños y arrastra un botón básico o un botón con estilo a la página.
Personalizar los botones básicos
Después de agregar un botón básico, cambia su texto y elige el destino del enlace. Una vez que esté configurado, puedes comenzar a personalizar el diseño: selecciona un color de relleno diferente, agrega una sombra y ajusta otras opciones como el espaciado y el formato del texto.
Para personalizar un botón básico:
- Selecciona el botón correspondiente.
- Elige lo que quieres personalizar:
- Haz clic en Cambiar texto.
- Ingresa el nuevo texto en el campo Texto.
Consejo: Los botones básicos no tienen la opción de mostrar un icono, pero puedes ingresar símbolos (por ejemplo, X, +, >) para crear un efecto similar.
Los botones pueden llevar a otras partes del sitio (por ejemplo, páginas, anclas, ventanas interactivas), páginas web externas e incluso realizar acciones como enviar un email a tu cliente o llamar a su número de teléfono.
- Haz clic en el icono Enlace
. - Selecciona un tipo de enlace a la izquierda.
- Agrega la información del enlace correspondiente.
- Haz clic en Hecho.
Puedes ajustar el diseño del botón básico en 2 estados diferentes: Normal o Efecto cursor. Cambia ajustes como el color del fondo, el borde o la forma de las esquinas del botón.
- Haz clic en la flecha Abrir Inspector profesional
en la parte superior derecha del Editor. - Desplázate hacia abajo hasta Diseño.
- Selecciona el estado que deseas diseñar: Normal o Efecto cursor.
- Diseña el botón con las opciones disponibles:
- Color y opacidad del relleno: cambia el color del fondo del botón y ajusta la opacidad.
- Borde: ajusta el ancho y el color de los bordes del botón.
- Esquinas: ajusta el radio de las esquinas del botón (en px) para hacerlas más redondas o angulosas.
- Sombreado: agrega y personaliza un efecto de sombra en el botón.
- Texto: ajusta el formato del texto del botón.
- Espaciado: ajusta el espacio entre el texto y los bordes del botón.
Personalizar los botones con estilo
Los botones con estilo ofrecen muchísimas opciones de personalización para que puedas diseñarlos hasta el último detalle. Cambia el texto y el icono para que coincidan con la acción deseada, elige la posición de ambos, añade un degradado o una imagen como fondo y mucho más.
Para personalizar un botón con estilo:
- Selecciona el botón correspondiente.
- Elige lo que quieres personalizar:
Cambiar el texto o el icono
- Haz clic en Cambiar icono y texto.
- Según tus necesidades, haz lo siguiente:
- Elige una opción en el menú desplegable Elige qué mostrar:
- Texto e icono
- Solo texto
- Solo icono
- Edita el texto del botón en el campo Texto.
- Haz clic en el icono Cambiar el icono
para elegir un icono diferente para el botón.
Los botones pueden llevar a otras partes del sitio (por ejemplo, páginas, anclas, ventanas interactivas), páginas web externas e incluso realizar acciones como enviar un email a tu cliente o llamar a su número de teléfono.
- Haz clic en el icono Enlace .
- Selecciona un tipo de enlace a la izquierda.
- Agrega la información del enlace correspondiente.
- Haz clic en Hecho.
Puedes ajustar el diseño del los botones con estilo en tres estados diferentes: Normal, Efecto cursor y Desactivado. Cambia los ajustes como el color del fondo, el borde o la forma de las esquinas del botón.
- Haz clic en la flecha Abrir Inspector profesional en la parte superior derecha del Editor.
- Desplázate hacia abajo hasta Diseño.
- Selecciona el estado correspondiente: Normal, Efecto cursor o Desactivado.
- Personaliza el botón con las opciones disponibles:
- Relleno de fondo: elige un color, un degradado o una imagen para el fondo del botón.
- Texto: ajusta la fuente, el formato y el espaciado del texto del botón. También puedes hacer clic en Sombreado para agregar sombra al texto.
- Bordes: elige un color o un degradado para los bordes y establece el grosor en px. Puedes aplicar el mismo diseño a todos los lados o hacer clic en el icono Desbloquear
para personalizarlos por separado. - Esquinas: haz que las esquinas sean más redondeadas o angulosas al cambiar el radio en px. Puedes establecer el mismo radio para todas las esquinas o hacer clic en el icono de desbloqueo para personalizarlas por separado.
- Sombreado: agrega una sombra interna o externa, o varias capas de sombra, y configura el color, el ángulo, la distancia, el tamaño, etc.
- Estilo: elige qué mostrar en el botón (texto, icono o ambos) y cómo deben organizarse y alinearse.
- Icono: ajusta el color, el tamaño y el ángulo del icono que aparece en el botón.
Consejo:
Agrega una sensación de profundidad al fondo del botón aplicando varias capas con diferentes niveles de opacidad.
Ajustar el estilo del botón
Cambia la alineación, la posición y el espaciado del botón para que el texto o el icono se vean exactamente como quieres.
- Haz clic en el icono Estilo
. - Ajusta cualquiera de las siguientes opciones:
- Elige qué mostrar: decide lo que se muestra en el botón: Texto e icono, Solo texto, Solo icono o Nada.
- Posición del icono: al elegir mostrar tanto texto como un icono, puedes decidir cómo colocarlos: uno al lado del otro o uno debajo del otro.
- Espaciado entre el texto y el icono: al elegir mostrar tanto texto como un icono, puedes arrastrar el control deslizante para establecer el espacio entre ellos (en px).
- Alineación: alinea el texto y el icono a la izquierda, al centro o la derecha del botón. También puedes alinearlos a ambos márgenes del botón haciendo clic en Justificar
.
