Divi: ¡el mejor tema de WordPress de todos los tiempos!

más 901.000 descargas, Divi es el tema de WordPress más popular en el mundo. Es completo, fácil de usar y viene con más de plantillas gratuitas 62.

¿Te gustaría crear un botón flotante con í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 enviarlo a navegar a algún lugar. Como activadores de correos electrónicos, redes sociales, dirigir a los visitantes para que se suscriban a un canal y muchos más.

En Elementor, existen 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

Puede usar la versión gratuita de Elementor 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 aparezca 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.

Cree fácilmente su sitio web con Elementor

Elementor te permite crear Fácil y Gratis cualquier sitio web o diseño de blog con un aspecto profesional. Deja de pagar mucho por un sitio web que puedes hacer tú mismo.

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 empujar a los visitantes a navegar por el sitio web de 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.

crear un botón flotante con índice Z

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.

crear un botón flotante con índice Z

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).

crear un botón flotante con índice Z

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

crear un botón flotante con índice Z

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.

crear un botón flotante con índice Z

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.

...

0 acciones
cuota
Tweet
Siguiente