Centro de Ayuda Wix
    Inicio
  1. Crear tu sitio
  2. Usar el Editor X
  3. Agregar elementos en el Editor X
    4. Editor X: agregar y personalizar botones

Editor X: agregar y personalizar botones

9 min de lectura
El Editor X está en proceso de transición hacia Wix Studio, nuestra nueva plataforma para agencias y freelancers.Más información sobre Wix Studio
Los botones son una excelente manera de alentar a los visitantes a realizar las acciones que deseas. En el Editor X, puedes agregar botones que muestren texto, un icono o ambos, si es necesario. Tienes el control total del diseño y del estilo para crear el aspecto exacto que necesitas.
En este artículo, aprenderás a hacer lo siguiente:

Agregar un botón

Al agregar un botón nuevo, 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, gradientes de color y más).

Para agregar un botón:

  1. Haz clic en Agregar elementos en la parte superior izquierda del Editor X.
  2. Haz clic en Botones.
  3. Desplázate por los diseños y arrastra un botón básico o un botón con estilo a tu página.
¿Necesitas inspiración?
Consulta estos tutoriales de botones:

Personalizar botones básicos

Después de agregar un botón básico a tu sitio, cambia su texto según tus necesidades y elige a dónde se enlaza. 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.
Haz clic a continuación para aprender a personalizar los botones básicos:

Personalizar 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 cómo deben organizarse los dos, establece un gradiente o una imagen como fondo y mucho más.
Haz clic a continuación para aprender a personalizar los botones con estilo:

Glosario de diseño

Ajuste
Explicación
Cómo usarlo
Rellenos de fondo
Agrega diferentes rellenos como colores, imágenes, patrones y gradientes para crear efectos sorprendentes y coloridos en tu botón.
  • Haz clic en la caja de color de cada capa y elige el tipo de relleno, luego arrastra el control deslizante para cambiar la opacidad de la capa de relleno.
  • Reordena las capas de relleno arrastrándolas hacia arriba y hacia abajo en la lista.
Bordes
Personaliza el borde del botón para que se destaque. Personaliza todos los lados del botón juntos, o cada lado por separado, haciendo clic en el icono de bloqueo y desbloqueo.
  • Haz clic en el campo Ancho e ingresa el ancho del píxel o ajusta el control deslizante.
  • Haz clic en el menú desplegable Estilo y selecciona el estilo del borde.
  • Haz clic en la caja de color Rellenar, selecciona el color del borde y usa el control deslizante para ajustar la opacidad.
Esquinas
Cambia las esquinas del botón para hacerlas más redondeadas o cuadradas. Cambia el tamaño de todas las esquinas juntas o personaliza cada esquina por separado haciendo clic en el icono de bloqueo y desbloqueo.
Haz clic en el campo de píxeles en una esquina e ingresa el número de píxeles que deseas aplicarle.
Sombreado
Agrega capas de sombras al botón y personaliza el color, el tamaño y más para cada una.
  • Haz clic en la caja de color de cada capa de sombra y personaliza el color, el tipo de sombreado, el ángulo, el tamaño, la distancia y el efecto borroso. Luego, arrastra el control deslizante para cambiar la opacidad de la sombra.
  • Reordena las capas de sombra arrastrándolas hacia arriba y hacia abajo en la lista.

Si usas un botón de carga:
  • Haz clic en la palanca para activarla.
  • Usa los controles deslizantes para editar el ángulo, la distancia, el tamaño y el desenfoque. Luego, usa el control deslizante y el cuadro de color para editar la opacidad y el color.
Estilo

Cambia el estilo de tu botón.
  • Haz clic en el menú desplegable Elige qué mostrar y elige si deseas mostrar el texto, el icono o ambos.
  • Selecciona la alineación, la posición y el espaciado del texto o el icono (si corresponde).
  • Configura el relleno alrededor del texto o el icono.

Opciones de formato de texto

Ajuste
Explicación
Cómo usarlo
Mostrar texto
Muestra u oculta el texto en tu botón.
Haz clic en la palanca para mostrar u ocultar el texto en tu botón.
Tema
Selecciona el tema del texto del botón.
Selecciona un tema de texto en el menú desplegable.
Fuentes
Elige la fuente para el texto del botón.
Haz clic en el menú desplegable y selecciona una fuente.
Tamaño de fuente
Cambia el tamaño del texto en tu botón.
Arrastra el control deslizante para aumentar o disminuir el tamaño de la fuente, o ingresa un valor.
Formato del texto
Aplicar formato a tu texto.
  • Formatea tu texto usando las opciones: negrita, cursiva, subrayado, tachado, colores, mayúsculas y dirección y alineación del texto.
Espaciado de caracteres
Cambia el espacio entre los caracteres del texto.
Arrastra el control deslizante para aumentar o disminuir el espaciado, o ingresa un valor.
Sombreado
Crea sombras para tu texto. Puedes tener más de una sombra.
Haz clic en Agregar una sombra para agregar una nueva. Selecciona el icono Personalizar sombreado para diseñarlo.

Opciones de diseño de iconos

Ajuste
Explicación
Cómo usarlo
Mostrar icono
Muestra u oculta un icono en tu botón.
Haz clic en la palanca para mostrar u ocultar el icono en tu botón.
Tamaño
Cambia el tamaño de tu icono.
Arrastra el control deslizante para aumentar o disminuir el tamaño de tu icono, o ingresa un valor.
Color
Cambia el color del icono.
Haz clic en el cuadro de color y selecciona un color.
Rotar
Ajusta la rotación del icono.
Arrastra la manilla para personalizar la rotación del icono o ingresa los grados en el cuadro de texto.

¿Te ha sido útil?

|
En este artículo
  • Agregar un botón
  • Personalizar botones básicos
  • Personalizar botones con estilo
  • Glosario de diseño
  • Opciones de formato de texto
  • Opciones de diseño de iconos