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.
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 avanzadas de personalización (por ejemplo, fondos de imagen, degradados de color y más).
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 en el editor.
- 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 realizar una llamada a su número de teléfono.
- Haz clic en el icono de Enlace
. - Selecciona un tipo de enlace a la izquierda.
- Agrega la información del enlace correspondiente.
- Haz clic en Hecho.
Puedes adaptar el diseño de un botón básico para 2 estados diferentes: Normal o Efecto cursor. Cambia los ajustes, como el color del fondo, el borde o la forma de las esquinas del botón.
- Haz clic en el icono 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: elige un color para el borde y establece la opacidad y el ancho (en px*).
- Esquinas: establece el radio de las esquinas del botón (en px*) para hacerlas más redondeadas o cuadradas. Puedes establecer el mismo radio para todas las esquinas o hacer clic en el icono Desbloquear
para personalizarlas por separado. - Sombreado: agrega y personaliza una sombra para darle al botón un efecto 3D.
- Texto: ajusta el aspecto y el formato del texto del botón.
- Espaciado: establece el espacio entre el texto y los bordes del botón.
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 los ajustes según sea necesario:
- Dirección: selecciona si el botón se lee de Izquierda a derecha o de Derecha a izquierda.
- Alineación: alinea el texto a la izquierda, al centro o a la derecha del botón. Puedes establecer una sangría en el texto con las opciones A la izquierda o A la derecha.
Personalizar los botones con estilo
Los botones con estilo ofrecen miles de opciones de personalización para que puedas diseñarlos cuidando hasta el último detalle. Cambia el texto y el icono para que coincidan con la acción deseada, elige cómo deben organizarse ambos, establece 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.
- Selecciona una opción en Elige qué mostrar y cambia los ajustes:
- Texto e icono: usa el campo Texto para cambiar el texto y haz clic en el icono Cambiar el icono
para elegir un icono diferente. - Solo texto: edita el texto del botón en Texto.
- Solo icono: haz clic en el icono Cambiar el icono para elegir un icono diferente para el botón. También puedes agregar un nombre accesible para describir la función del botón para los visitantes que usan tecnologías de asistencia.
Nota: Si seleccionas Nada en Elige qué mostrar, el botón queda en blanco. Aún puedes agregarle un nombre accesible y enlazarlo a lo que quieras.
Los botones pueden llevar a otras partes del sitio (por ejemplo, p'aginas y anclas), a páginas web externas e información procesable, como la dirección de email del cliente.
- Haz clic en el icono de Enlace .
- Selecciona un tipo de enlace a la izquierda.
- Agrega la información del enlace correspondiente.
- Haz clic en Hecho.
Puedes adaptar el diseño de un botón con estilo para 2 estados diferentes: Normal o Efecto cursor. Cambia ajustes como el fondo, el borde o la forma de las esquinas del botón.
- Haz clic en el icono Abrir Inspector profesional en la parte superior derecha del editor.
- Desplázate hacia abajo hasta Diseño.
- Selecciona el estado correspondiente: Normal o Efecto cursor.
- 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 Aplicar sombra al texto para sombrear el 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 más cuadradas cambiando el radio en px. Puedes establecer el mismo radio para todas las esquinas o hacer clic en el icono Desbloquear
para personalizarlos 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.
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.
- Alineación: alinea el texto y el icono a la izquierda, al centro o a la derecha del botón. También puedes alinearlos a ambos márgenes del botón al seleccionar la opción Justificado
. - 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).
- Dirección: elige si el contenido del botón se lee de izquierda a derecha o de derecha a izquierda.
