homefinance blog
Ya sea que tenga un podcast o organice un WordCamp (o cualquier evento de oradores), siempre es una buena idea tener una sección de altavoces para su sitio. Lo mismo que los testimonios es una forma efectiva de promover el valor y establecer credibilidad en frente del público. Una sección de oradores invitados también es un lugar clave para relajar algunos nuevos candidatos para el próximo evento o episodio. Este tutorial le muestra cómo diseñar una sección de altavoces invitados, que no solo tiene los altavoces de una manera elegante, sino que también alienta a los nuevos altavoces a solicitar una solicitud efectiva.
Pero antes de entrar, aquí hay una breve mirada al diseño final. Tirar del ojo
Y aquí hay un efecto de bonificación de desplazamiento que te mostraré.
¡Vamos a empezar! Suscríbase 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 el frente. En, agregue una nueva sección con una fila con una columna. Agregue un módulo de texto en fila con el siguiente contenido:
altavoz de invitado
Luego agregue un módulo divisor directamente debajo del módulo de texto.
Ahora agregaremos una nueva fila con una estructura de cuatro columnas para mantener nuestros altavoces invitados.
En la primera columna de la fila, agregue un módulo de persona.
Actualice el contenido del módulo de persona de la siguiente manera: Nombre: [En blanco] URL del perfil de Facebook: [Agregar “#” por el momento] URL del perfil de Twitter: [Agregue “#” para el momento] URL del perfil de LinkedIn : [Agregue ” #” para el momento] Para la descripción, agregue lo siguiente:
James Smith
Nota: La etiqueta de HR genera una línea de separación que tiene una línea en línea, tiene un ancho de 90 px y flotadores a la izquierda. La etiqueta fuerte que está envuelta alrededor del apellido lo hace audaz para un elemento de diseño único.
Ahora que tiene el contenido en su lugar, guarde la configuración del módulo de la persona. Copie el módulo de persona que acaba de crear y péguelo en cada una de las columnas restantes, para que tenga la misma persona en cada una de las cuatro columnas. Para copiar y pegar, puede usar las opciones en el menú de clic derecho o las teclas cortas CMD + C CMD + V (Mac) o Ctrl + C Ctrl + V (Win).
Abra la configuración del módulo de la persona en la columna 4 y actualice el contenido para que solo contenga lo siguiente: Nombre: “¡Este podría ser tú!” Descripción: “Use el botón a continuación para aplicar para hablar con nuestro evento”.
Guarde la configuración. Luego agregue un botón directo debajo del módulo de persona en la columna 4 y actualice el contenido del botón para “aplicar ahora”. Y guarde la configuración.
Regrese a las primeras tres personas en las columnas 1-3 y agregue las imágenes para cada uno de los retratos del orador invitado. Asegúrese de que tengan la misma dimensión, con dimensiones iguales de altura y ancho y que sean lo suficientemente grandes como para tener en cuenta los anchos de las columnas en todos los tamaños del navegador (idealmente, 600 x 600 x 600). Tu invitado habla de aparición en este momento.
Estilizando la apariencia del altavoz invitado Organiza la sección Abra la configuración de la sección y actualice lo siguiente: Antecedentes: 0.89) Estilo de divisor más alto: consulte Captura de pantalla El color del separador superior: # 293039 Altura del separador superior: 30 VW
Cambiar los anchos de las filas porque queremos que ambas filas tengan el mismo ancho, use multiselecto 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. El estilo de estilo abre la configuración del módulo de texto que contiene el título de la sección “Altavoces invitados” y actualiza lo siguiente: Sección 2 Fuente: Montserrat Título 2 Fuente de peso: Bold Sección 2 Estilo de fuente: TT Título 2 Alineación de texto: Sección derecha 2 Color de texto: # 74BF46 Título 2 Tamaño de texto: 70 PX (escritorio), 50 PX (teléfono inteligente) Guarda configuraciones.
Ahora abra la configuración del divisor y actualice lo siguiente: Color: #FFFFFFF Altura: 0px Ancho: 90 PX Alineación del módulo: Correcto
Estilización de los módulos de la persona Dado que queremos dar el mismo estilo inicial a todos los módulos de nuestra persona, use multiselecto para seleccionar cada uno de ellos y luego haga clic en el icono de configuración para implementar la configuración modal del elemento. Configuración: Color de icono: #74BF46 Título de la fuente : Montserrat Título Peso Font: Título fácil Texto Color: #ffffffffff Título del texto: 20 PX Fuente Cuerpo: Montserrat Texto del cuerpo Color: #fffffffffft Letters Espacio: 2 PX Altura del cuerpo Línea: 1, 8em
El estilo del módulo de persona CTA usamos este módulo para las personas como un impulso a la acción que atrae a los nuevos oradores invitados a solicitar un compromiso del habla. Por lo tanto, podemos dejar la imagen definitoria (silueta) 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. Imagen Edge Ancho: 18 PX Color Edge Imagen: # D2D2D2 Opacidad de imagen: 50% Título Fuente Peso: Bold Título de la línea Altura: 1.5em
Ahora solo tenemos que estilizar nuestro botón. Abra la configuración del módulo de botón y actualice lo siguiente:
El color del texto del botón: # 293039 El color del fondo del botón: # 74BF46 Botón Rass: 50 PX Fuente Botón: Montserrat Font Peso: Bold ahora para echar un vistazo al resultado final.
Consejo de bonificación: efecto de zoom de imagen
Recuerde todas las opciones construidas en el cierre disponible en el Div. De hecho, puedes ver algunos tutoriales inspiradores sobre estos efectos de caminata en nuestro blog. Pero para este diseño, pensé en pensar un poco fuera de la caja y darle algunos fragmentos CSS que harán que la imagen de su persona aumente (o escala) ligeramente para caminar. Si está buscando un efecto de Hover Subtil para separar sus módulos de La persona, aquí es cómo hacerlo. Use elección multise para seleccionar los módulos de persona en las columnas 1, 2 y 3. Abra la configuración del elemento. En la pestaña avanzada, ingrese el siguiente CSS debajo del elemento principal: Overflow: Hidden;
Este código evitará que la imagen de expansión extienda el contenedor del módulo. Luego agregue los siguientes CSS bajo el miembro de la imagen: Transición: todos 0.3s;
Agrega una transición suave cuando la imagen se redimensiona. Para agregar el CSS al desplazamiento, haga clic en el icono de desplazamiento y seleccione la pestaña Hover e ingrese el siguiente CSS: Transform: Escala (1.1) Traducido (-4.5%);
Este cuero cabelludo (o extiende) la imagen a un tamaño ligeramente más grande y la mueve ligeramente hacia arriba.
Ahora, las imágenes tendrán un sutil efecto de zoom en el cursor.
Pensamientos finales bueno, espero que te haya gustado este tutorial o al menos dejaste algunos consejos de diseño útiles. Este aspecto de la sección para el altavoz invitado se puede usar en una variedad de modos. Otra aplicación perfecta sería que una página de empleados enumere los empleados actuales simultáneamente y aliente a otros a solicitar una función. Siéntase libre de compartir algunas ideas. Espero tener noticias suyas en los comentarios a continuación. ¡Suerte!
