Cómo crear bordes degradados en Elementor

¡Ahora, comencemos!

Paso 1: Primero, crea una sección.

Cómo crear botones de solo icono5

Paso 2: Luego, agregue la columna deseada. Por el bien de este tutorial, elegiré una estructura de dos columnas.

Overlap_Images_in_Elementor4

Paso 3: Agreguemos algún widget a la columna. En este caso, usaré un widget espaciador.

Cómo crear bordes degradados en Elementor6

Paso 4: establezca la altura del espaciador a su límite máximo.

Elementor Pro
Web Hosting
Cómo crear bordes degradados en Elementor1

Paso 5: Ahora, proceda a la sección CSS personalizada de la propiedad del espaciador.

Cómo crear bordes degradados en Elementor 1

Paso 6: Copie y pegue el fragmento CSS a continuación:

selector { border-left: 1px solid #a70ccc; border-right: 1px solid #ff1685; box-sizing: border-box; background-position: 0 0, 0 100%; background-repeat: no-repeat; background-size: 100% 1px; background-image: linear-gradient(to right, #a70ccc 0%, #ff1685 100%), linear-gradient(to right, #a70ccc 0%, #ff1685 100%); }

Nota: Siéntase libre de personalizar el fragmento de arriba, como cambiar colores y demás.

¡Ahora hemos terminado!

Cómo crear bordes degradados en Elementor5

¡Gracias por llegar hasta aquí! 🙂

¡Espero que hayamos podido ayudarte con este tutorial! ¡También puede intentar instalar Elementor Pro Version y obtener acceso a más plantillas de Elementor de forma gratuita!

También te puede ayudar:  WordPress atascado en modo de mantenimiento? Vamos a arreglarlo!

Mini curso GRATIS

5 consejos
para acelerar
tu WordPress

Reduce su tiempo de carga incluso en un 50-80% con solo seguir simples consejos.

¿Quieres recibir mis articulos?

No te pierdas todos mis trucos y tutoriales para WordPress, Velocidad de carga, y Elementor Page Builder.

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *