Añadir y eliminar el elemento
Añadir el elemento al lienzo
Para acceder y usar un widget:
En el editor de Elementor, haga clic en +.
Se muestran todos los elementos disponibles.Haz clic o arrastra el elemento al lienzo. Para obtener más información, consulta Añadir elementos a una página.
Eliminar el elemento
Para eliminar el widget:
- En el lienzo, seleccione el elemento haciendo clic en él.
- Pulse la tecla Suprimir en su teclado. Para obtener más información, consulte Eliminar elementos de una página.
¿Qué es el elemento de botón?
Los botones en un sitio web son cruciales para guiar las acciones del usuario, proporcionar llamadas a la acción claras y mejorar la participación general del usuario. Los botones te permiten añadir botones interactivos y visualmente atractivos en tu sitio.
Caso de uso común
Blair está creando un sitio web para un gimnasio. En la parte superior de la página de inicio, quiere añadir un botón a la sección Hero. Los visitantes que hagan clic en el botón irán a una página de registro. Un botón llamativo que atraerá la atención de los clientes potenciales.
En lugar de usar estrellas para sus valoraciones, Jaime decide usar signos de dólar para la valoración de valor y corazones para su valoración de reacción. Además, decide que el valor se clasificará del 1 al 5, mientras que la reacción se clasificará del 1 al 10.
Casos de uso adicionales
- Usa el elemento de botón para crear una impresionante galería de portafolio. Cada botón se puede vincular a una página de proyecto o a una vista detallada.
- Si estás organizando un evento o seminario web, el elemento de botón puede ayudarte a crear banners o carteles visualmente atractivos.
- Usa los botones para mostrar transformaciones de antes y después para renovaciones del hogar, progreso físico o cualquier otro viaje de transformación.
Añadir un elemento de botón: paso a paso
- Añade el elemento de botón al lienzo. Para obtener más detalles, consulta Añadir elementos a una página.
Las opciones para el elemento de botón aparecen en el panel izquierdo.
- En la pestaña General, en el campo de texto Botón, introduce Empezar.
Queremos que el botón enlace a una página de registro.
- Haz clic en el signo más junto a Enlace.
- En el cuadro de texto Enlace, añade la URL de la página a la que quieres enlazar.
El botón es un poco grande para nuestro diseño, así que vamos a hacerlo más pequeño.
- Abre el campo Tamaño.
- Establece el ancho a 200 y la altura a 50.
- Haz clic en la pestaña Estilo.
Vamos a cambiar el estilo del texto para que coincida con el resto del sitio.
- Abre el campo Tipografía.
- Usa el menú desplegable Familia de fuentes para seleccionar Sora. Para obtener más información, consulta Pestaña Estilo – Tipografía.
- Usa el menú desplegable Grosor de la fuente para seleccionar 600.
- Usa el campo Tamaño de la fuente para seleccionar 16.
El diseño requiere un fondo transparente.
- Abre la sección Fondo.
- Haz clic en la muestra de color para abrir el selector de color. Para obtener más información, consulta Usar el selector de color.
- Establece la opacidad al 0%.
Ahora vamos a dar forma al botón. En este caso, queremos un botón redondeado con un borde blanco.
- Abre la sección Borde.
- Haz clic en el icono Ajustar bordes.
- Introduce 50 en el campo numérico para todas las esquinas.
- Haz clic en el signo más junto a Borde.
- Usa el campo numérico para aumentar el ancho del borde a 2.
- Establece el color como #FFFFFF.
Para ayudar a que el botón destaque, podemos cambiar su apariencia cuando los usuarios pasan el ratón por encima. El estado de pasar el ratón se llama estado y los elementos se pueden editar para cambiar la apariencia dependiendo de su estado. Para obtener más información, consulta Estados del elemento.
- En el campo de texto Clases, haz clic en los puntos suspensivos junto a la palabra local.
- Selecciona hover del menú desplegable.
Observa que la palabra hover aparece en el cuadro de texto Clases y está coloreada de rosa. Esto indica que ahora estamos editando cómo aparecerá el botón cuando los visitantes pasen el ratón por encima.
- Haz clic en la muestra junto a Color para abrir el selector de color.
- Cambia el Hex número de color a #FFFFFF y la opacidad al 100%.
Cuando los usuarios pasan el ratón por encima del botón, se vuelve blanco.
El botón está listo.
Ajustes para el elemento de botón
Puede personalizar sus elementos utilizando contenido y estilo, lo que le ofrece una gran flexibilidad para adaptarlos a sus necesidades. Haga clic en las pestañas de abajo para ver todos los ajustes disponibles para este elemento.
Pestaña General
Texto del botón
El texto que aparece en el botón.
Enlace
Haz clic en el signo más para introducir un enlace. Los visitantes que hagan clic en el botón abrirán el enlace.
Abrir en una nueva pestaña: Si el botón contiene un enlace, activa esta opción si quieres que el enlace se abra en una nueva pestaña.
ID
Te permite etiquetar elementos individuales en una página. De esta manera, puedes enlazar a este elemento específico.
