¿Le gustaría crear un botón flotante con el índice Z en Elementor ?
Seguro que conoces el botón que aparece delante de todo el contenido de la pantalla y que suele tener una forma circular y un icono en el centro. Bueno, ese es el botón de acción flotante.
El botón de acción flotante puede desencadenar una acción o enviarte a navegar a algún lugar. Tales como activadores de correos electrónicos, redes sociales, orientación de visitantes para suscribirse a un canal, y muchos otros.
Dans Elementor, hay dos métodos para crear un botón de acción flotante, son los siguientes:
- Al configurar el índice Z
- Creando una ventana emergente -Popup-
En este tutorial solo le mostraremos cómo crear un botón de acción flotante configurando el índice Z. Y usaremos la versión pro para que esto suceda.
Pero primero, averigüe: Cómo instalar Elementor en WordPress
Cómo crear el botón de acción flotante en Elementor
Puedes utilizar la versión gratuita deElementor para crear el botón de acción flotante con este método. Pero debe pegar el botón que diseñó en cada página donde desea que se muestre el botón en su sitio web.
Con Elementor Pro, también puede acceder a la función CSS personalizado, que usaremos en este tutorial.
Ve a tu editor de Elementor; puede modificar su contenido existente (páginas, artículos, etc.) o crear uno nuevo. En este tutorial, vamos a modificar una página.
Primero, cree una nueva sección con una sola columna. Seleccione el widget de botón y arrástrelo y suéltelo en el área de edición desde el panel de widgets. Luego cambia el boton textos y el derecho de retención.
En este tutorial, usaremos el botón como disparador para presionar el visitantes para navegar el Sitio web Elementor. Luego, en la opción alineación, ajústelo a la Droite et, Finalmente, cambia el taille del botón de encendido Muy grande.
Como puede ver en el GIF anterior, este botón está fijo en la sección. A continuación, haremos que se mueva mientras nos desplazamos mientras lo mantenemos en la misma posición.
Ir a la pestaña Avanzado. en el parámetro Disposición, establecer el ancho en línea (coche), definir el posición en Fijo, colocar orientación horizontal en Droite y ajustarlo décalage como usted lo desea.
A continuación, definiremos los elementos esenciales de este método. En el campo Índice Z, ingrese el número 9999 ; hará que el botón esté siempre al frente (flotante).
Ahora es el momento de girar el botón de acción flotante. Siempre bajo la ficha Avanzado, acceder al clases css de la cuadra Disposición, a continuación, escribir rotate al interior.
Ver también: Elementor: presentamos el mejor creador de páginas de WordPress
Después de eso, ve al bloque. CSS personalizado , luego pegue el siguiente código en el campo:
.rotate.rotate
{transform: rotate(90deg);}Puede ver que la perilla acaba de girar, pero hay un espacio extraño entre los lados de la pantalla. Entonces, arreglemoslo ajustando el décalage a -92
Finalmente, vamos a hacer un último toque para este botón de acción flotante. Accede al bloque transformador, selecciónalo VISIÓN GENERAL, accede a la opción cambio y establezca cada opción en 7.
Hay varias opciones para lograr algo determinado en Elementor. Cuando se trata del botón flotante, hay dos opciones que puede usar. Aquí hemos cubierto solo un método, el otro método será otro tutorial.
Lea también: Elementor: Cómo migrar un sitio web de WordPress
Si desea tener más opciones de estilo, crear un botón de acción flotante con el generador de Popup será una mejor alternativa, ya que tendrá opciones para personalizar el botón y el comportamiento, como el tiempo de cierre del botón, la duración, la animación de entrada o salida, etc. .
Acabas de completar esta tarea fácilmente. Simplemente obtenga una vista previa del trabajo de su tableta y teléfono inteligente, tratando de cambiar los márgenes para que coincidan con cada dispositivo.
¡Obtenga Elementor Pro ahora!
Conclusión
Listo ! Eso es todo por este artículo que le muestra cómo aplicar un efecto Zoom en una tarjeta de perfil. Si tiene alguna inquietud sobre cómo llegar, háganoslo saber dentro de comentarios.
Sin embargo, también puedes consultar nuestros recursos, si necesita más elementos para llevar a cabo sus proyectos de creación de sitios de Internet, consulte nuestra guía sobre Creación de blog de WordPress o el de Divi: el mejor tema de WordPress de todos los tiempos.
Pero mientras tanto, comparte este artículo en tus diferentes redes sociales.
...
