¿Le gustaría crear una sección de miembros del equipo con Elementor ?

Pues usted ha venido al lugar correcto. Hoy le mostraremos cómo crear una maravillosa sección de miembros del equipo con el Página de generador Elementor.

Para completar este tutorial, necesitará un Versión pro de Elementor, porque nosotros usar código CSS personalizado lo cual solo es posible con la versión pro deElementor. Si aún no lo has hecho, actualízalo.

Y para entender de qué estamos hablando en este tutorial, te invitamos a ver el siguiente video:

Para comenzar, cree una página y edítela con Elementor.

Luego inserte una estructura con 3 columnas en este último, luego en el panel, debajo de la pestaña Contenido, establezca Altura en Altura mínima y seleccione Altura mínima VH y luego establezca el control deslizante en 100.

Seleccionemos la columna del medio para editarla y vayamos a la pestaña Avanzado. Establezcamos todos los márgenes internos en 30.

Insertemos un widget de Sección interior en esta columna, luego eliminemos una de las columnas contenidas en la Sección interior, luego en el panel debajo de la pestaña Contenido, también establezcamos la altura en Altura mínima y el control deslizante en 450 px.

crea una sección de miembros del equipo con Elementor

Sobre'Alineamiento vertical seleccionar Bas y desbordamiento seleccionar Máscara.

En la pestaña Estilo Cambiar el fondo a Clásico y seleccione una imagen de su biblioteca.

Lea nuestra guía sobre: Cómo crear una tarjeta de producto con Elementor

Sobre Puesto de trabajo seleccionar Centrado superior, Archivo adjunto en desplazamiento, Decir de nuevo en no repetido et Tamaño español en Cubrir

crea una sección de miembros del equipo con Elementor

En las fronteras definen el fronteras en 12.

Agreguemos efectos de sombra. En Shade of box vamos a modificar Vertical en 22, Flou en 40 et Difusor en -10.

Agreguemos un Widget de título en la sección Interna y dar un nombre a nuestro miembro y centrones el widget.

Lea también: Cómo cambiar el encabezado en el desplazamiento de la página con Elementor

En la pestaña Estilo, Vamos a modificarlo color de texto y tipografía escoger 22 por el tamaño de letra y 500 para el grasa, en Mayúscula et espaciado de letras en 1.2

crea una sección de miembros del equipo con Elementor

Entonces, dupliquemos el widget de título y modificar el título del segundo widget y en tipografía elegir 15 por el tamaño de letra y 500 para el ancho, transformación en défaut y espaciado de letras en 1.2

crea una sección de miembros del equipo con Elementor

vamos a la pestaña Avanzado y definir el Margen superior en -15. Agreguemos el widget de íconos de redes sociales a nuestra sección interna.

crea una sección de miembros del equipo con Elementor

Vamos a la pestaña Estilo, cambie el color a Personalizado, haga que el color primario sea transparente y establezca los márgenes internos en 0.30

En la pestaña Avanzado, Definir los márgenes Alto en -15 y bajo en 20

crea una sección de miembros del equipo con Elementor

Luego seleccione la columna de la Sección Interior para modificarla y en la pestaña Estilo seleccione tipo Clásico y sobre el color aprovechemos # FFFFFF28.

Lea también: Cómo desplazarse por una imagen larga de una cartera con Elementor

Luego seleccione la columna de la Sección Interior para modificarla y en la pestaña Avanzado en el campo Clases de CSSvamos a agarrar miembro-info

crea una sección de miembros del equipo con Elementor

Luego seleccione Sección interior luego en la pestaña Avanzado en el campo CSS personalizado, pega el siguiente código:

/ * Efecto de cristal CSS * /

seleccionador {

    –Altura: 150px;

    –Abajo: -150px;

    desbordamiento: ¡oculto!, importante;

}

selector .member-info {

    altura: var (–altura);

    position: absolute;

    filtro de fondo: desenfoque (15px);

    abajo: 0;

    transición: entrada y salida de .5 s;

}

crea una sección de miembros del equipo con Elementor

Después del primer código CSS, pegue lo siguiente:

/ * CSS para ocultar o mostrar al pasar el mouse * /

selector .member-info {

    abajo: var (–bottom);

}

selector: hover .member-info {

    abajo: 0px;

}

Ahora, cuando pasa el cursor sobre la imagen, aparece la información del miembro.

Duplique la columna 2 veces y elimine las otras columnas vacías

Luego seleccione la Sección Interna y cambie la imagen de fondo a la imagen de otro miembro del equipo, cambie su nombre y profesión, haga lo mismo con la otra columna.

Obtenga una vista previa de su trabajo en tabletas y dispositivos móviles mientras mejora los márgenes y más para una mejor visualización.

Y así es como puedes crear una maravillosa sección de miembros del equipo.

¡Obtenga Elementor Pro ahora!

Conclusión

Listo ! Eso es todo por este tutorial que le muestra cómo crear una sección de miembros del equipo. Si tiene alguna inquietud sobre cómo llegar, háganoslo saber en el 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.

...