Cómo diseñar una sección de oradores invitados con un CTA eficaz en Divi

Ya sea que tenga un podcast o sea el anfitrión de una WordCamp (o cualquier evento de oradores), siempre es una buena idea tener una sección de oradores invitados para su sitio web. Al igual que los testimonios, mostrar oradores invitados es una forma efectiva de promover el valor y establecer credibilidad con su audiencia. Una sección de oradores invitados también es un lugar clave para encontrar nuevos candidatos para su próximo evento o episodio. Este tutorial le muestra cómo diseñar una sección de oradores invitados que no solo muestre a los oradores de una manera elegante, sino que también aliente a los nuevos oradores a postularse con un llamado a la acción efectivo.

Pero antes de saltar, aquí hay un adelanto del diseño final.

Vistazo

Y aquí hay un efecto de desplazamiento adicional que también te mostraré.

¡Empecemos!

Suscríbete a nuestro canal de Youtube

Construyendo la estructura y el contenido básicos

Si aún no lo ha hecho, cree una nueva página e implemente Divi Builder para construir en la interfaz.

Luego, agregue una nueva sección con una fila de una columna.

Agregue un módulo de texto a la fila con el siguiente contenido:

<h2>Guest Speaker</h2>

A continuación, agregue un módulo divisor directamente debajo del módulo de texto.

Ahora vamos a agregar una nueva fila con una estructura de cuatro columnas para albergar a nuestros oradores invitados.

En la primera columna de la fila, agregue un módulo de persona.

Actualice el contenido del módulo Persona de la siguiente manera:

Nombre: [en blanco]
URL de perfil de Facebook: [agregue "#" por ahora]
URL del perfil de Twitter: [agregue "#" por ahora]
URL de perfil de LinkedIn: [agregue "#" por ahora]

Para la descripción, agregue lo siguiente:

<h4>James <strong>Smith</strong></h4>
<hr style="width: 90px; float: left;">

Nota: la etiqueta hr genera una línea divisoria que tiene un estilo en línea para hacer que tenga 90 px de ancho y flote hacia la izquierda. La etiqueta fuerte que se envuelve alrededor del apellido lo hace en negrita para un elemento de diseño único.

Ahora que tiene el contenido en su lugar, guarde la configuración del módulo de persona.

Copie el módulo de persona que acaba de crear y péguelo en cada una de las columnas restantes para que tenga el mismo módulo de persona en cada una de las cuatro columnas. Para copiar y pegar, puede utilizar las opciones del menú contextual o las teclas de acceso rápido cmd + c cmd + v (mac) o ctrl + c ctrl + v (win).

Abra la configuración del módulo de persona en la columna 4 y actualice el contenido para que solo contenga lo siguiente:

Nombre: "¡Este podrías ser tú!"
Descripción: "Utilice el botón de abajo para solicitar hablar en nuestro evento".

Guarde su configuración.

A continuación, agregue un módulo de botón directamente debajo del módulo de persona en la columna 4 y actualice el contenido del texto del botón a "Aplicar ahora". Y guarde su configuración.

Regrese a los primeros módulos de tres personas en las columnas 1-3 y agregue las imágenes para cada uno de los retratos de los oradores invitados. Asegúrese de que sean del mismo tamaño con las mismas dimensiones de alto y ancho y que sean lo suficientemente grandes para tener en cuenta el ancho de las columnas en todos los tamaños de navegador (idealmente 600 px por 600 px).

Así es como debería verse el diseño de Guest Speak en este momento.

Aplicar estilo a la disposición de los oradores invitados

Aplicar estilo a la sección

Abra la configuración de la sección y actualice lo siguiente:

Imagen de fondo: [estoy usando una de nuestro diseño de agencia]

Color de degradado de fondo a la izquierda: # 293039
Gradiente de fondo Color derecho: rgba (41,48,57,0.89)
Estilo de divisor superior: ver captura de pantalla
Color del divisor superior: # 293039
Altura del divisor superior: 30 vw

Cambiar el ancho de las filas

Como queremos que nuestras dos filas tengan el mismo ancho, use la selección múltiple para seleccionar ambas filas y haga clic en uno de los iconos de configuración para abrir la configuración del elemento.

Luego actualice lo siguiente:

Ancho personalizado: 80%

Ahora ambas filas tendrán el mismo ancho personalizado.

Aplicar estilo al titular

Abra la configuración del módulo de texto que contiene el título de la sección "Oradores invitados" y actualice lo siguiente:

Fuente del encabezado 2: Montserrat
Peso de fuente del encabezado 2: Negrita
Estilo de fuente del título 2: TT
encabezado 2 Alineación de texto: derecha
Color del texto del encabezado 2: # 74bf46
Tamaño del texto del encabezado 2: 70 px (escritorio), 50 px (teléfono inteligente)

Guardar ajustes.

Ahora abra la configuración del divisor y actualice lo siguiente:

Color: #ffffff
Alto: 0px
Ancho: 90px
Alineación del módulo: derecha

Diseñar los módulos de persona

Dado que queremos dar el mismo estilo inicial a todos nuestros módulos de persona, use multiselect para seleccionar cada uno y luego haga clic en el icono de configuración de uno de los módulos para implementar el elemento modal de configuración.

Actualice la siguiente configuración de elementos:

Color del icono: # 74bf46
Fuente del título: Montserrat
Peso de la fuente del título: Ligero
Color del texto del título: #ffffff
Tamaño del texto del título: 20px
Fuente del cuerpo: Montserrat
Color del texto del cuerpo: #ffffff
Espaciado de letras del cuerpo: 2px
Altura de la línea del cuerpo: 1.8em

Diseñar el módulo de persona de CTA

Estamos utilizando este módulo de persona como un llamado a la acción que atrae a nuevos oradores invitados para solicitar un compromiso de oradores. Entonces, podemos dejar la imagen predeterminada (silueta) activa como una forma creativa de mostrar un lugar vacío. Pero hay algunos ajustes de estilo que debemos agregar para completar el diseño. Abra la configuración del módulo de persona en la columna 4 y actualice lo siguiente.

Ancho del borde de la imagen: 18px
Color del borde de la imagen: # d2d2d2
Opacidad de la imagen: 50%

Peso de la fuente del título: negrita
Altura de la línea de título: 1.5em

Ahora todo lo que queda por hacer es diseñar nuestro botón. Abra la configuración del módulo de botones y actualice lo siguiente:

Color del texto del botón: # 293039
Color de fondo del botón: # 74bf46
Radio del borde del botón: 50 px
Fuente del botón: Montserrat
Peso de fuente: negrita

Ahora echemos un vistazo al resultado final.

Consejo adicional: efecto de desplazamiento de zoom de imagen

No se olvide de todas las opciones de desplazamiento integradas disponibles en Divi. De hecho, puede ver algunos tutoriales inspiradores sobre estos efectos de desplazamiento en nuestro blog. Pero para este diseño, pensé que pensaría un poco fuera de la caja y te daría algunos fragmentos de CSS que harán que la imagen de tu persona se amplíe (o escale) ligeramente al pasar el mouse.

Si está buscando un efecto de desplazamiento sutil para diferenciar sus módulos de persona, aquí le explicamos cómo hacerlo.

Utilice la selección múltiple para seleccionar los módulos de persona en las columnas 1, 2 y 3. A continuación, abra la configuración del elemento. En la pestaña avanzada, ingrese el siguiente CSS en el elemento principal :

overflow: hidden;

Este código evitará que la imagen en expansión se extienda fuera del contenedor del módulo.

A continuación, agregue el siguiente CSS en Imagen de miembro :

transition: all 0.3s; 

Esto agrega una transición suave cuando la imagen se escala en tamaño.

Para agregar el CSS al pasar el mouse, haga clic en el icono de desplazamiento y seleccione la pestaña de desplazamiento e ingrese el siguiente CSS:

transform: scale(1.1) translateY(-4.5%);

Esto escala (o expande) la imagen a un tamaño ligeramente mayor y la mueve un poco hacia arriba.

Ahora las imágenes tendrán un efecto de zoom sutil al pasar el mouse.

Pensamientos finales

Bueno, espero que hayas disfrutado de este tutorial o al menos te hayas ido con algunos consejos de diseño útiles. Este diseño de la sección de oradores invitados se puede utilizar de varias formas. Otra aplicación perfecta sería que una página de empleados enumere simultáneamente a los empleados actuales y anime a otros a postularse para un puesto. No dudes en compartir algunas ideas con nosotros.

Espero tener noticias tuyas en los comentarios a continuación.

¡Salud!