Cómo crear una sección de listado de trabajos de carreras dinámicas con el módulo de blog de Divi

En un tutorial anterior de Divi, le mostramos cómo crear una plantilla de puesto de trabajo abierto completamente dinámica con el Generador de temas de Divi y el complemento Campos personalizados avanzados. En el tutorial de hoy, le mostraremos cómo puede presentar dinámicamente los puestos de trabajo abiertos en su página de carreras. Este tutorial es una secuela de la publicación de plantilla de puesto de trabajo abierto, así que asegúrese de volver a crear la plantilla primero y luego vuelva a este tutorial.

Hagámoslo.

Avance

Antes de sumergirnos en el tutorial, echemos un vistazo rápido al resultado en diferentes tamaños de pantalla.

Escritorio

Móvil

Descargue el diseño de la lista de trabajos de Dynamic Careers GRATIS

Para tener en sus manos el diseño gratuito de la lista de trabajos de carreras dinámicas, primero deberá descargarlo usando el botón a continuación. Para obtener acceso a la descarga, deberá suscribirse a nuestra lista de correo electrónico Divi Daily mediante el formulario a continuación. ¡Como nuevo suscriptor, recibirás aún más bondad Divi y un paquete Divi Layout gratis todos los lunes! Si ya está en la lista, simplemente ingrese su dirección de correo electrónico a continuación y haga clic en descargar. No se le “volverá a suscribir” ni recibirá correos electrónicos adicionales.

Descarga los archivos

Descárgalo gratis

Únase al boletín de Divi y le enviaremos por correo electrónico una copia del último paquete de diseño de página de destino de Divi, además de toneladas de otros recursos, consejos y trucos increíbles y gratuitos de Divi. Síguelo y serás un maestro de Divi en poco tiempo. Si ya está suscrito, simplemente escriba su dirección de correo electrónico a continuación y haga clic en descargar para acceder al paquete de diseño.

DESCARGAR

Te has suscripto satisfactoriamente. ¡Verifique su dirección de correo electrónico para confirmar su suscripción y obtenga acceso a paquetes de diseño Divi semanales gratuitos!

1. Agregar página de carreras

Agregar nueva página y cambiar a Visual Builder

Comience creando una nueva página, asigne un título a su página y cambie a Visual Builder.

2. Empiece a crear una página de carreras en la interfaz

Agregar la sección n. ° 1

Fondo degradado

Agregue la primera sección a la página, abra la configuración de la sección y use un fondo degradado.

• Color 1: # ff6600
• Color 2: # fbff30
• Dirección del gradiente: 126 grados

Divisor inferior

Utilice también un divisor de la sección inferior.

• Estilo de divisor: Buscar en la lista
• Altura del divisor: 8vw
• Repetición horizontal del divisor: 3x
• Disposición del divisor: contenido de la sección inferior

Espaciado

Complete la configuración de la sección agregando algo de relleno en la parte inferior.

• Acolchado inferior: 200px

Agregar nueva fila

Estructura de la columna

Continúe agregando una nueva fila a la sección usando la siguiente estructura de columnas:

Agregar módulo de texto a la columna

Agregar contenido H1

Agregue un módulo de texto a la columna de la fila con algún contenido H1 de su elección.

Configuración de texto H1

Vaya a la pestaña de diseño del módulo y cambie la configuración de texto H1 en consecuencia:

• Fuente de encabezado: Montserrat
• Peso de la fuente del encabezado: Pesado
• Color del texto del encabezado: #ffffff
• Tamaño del texto del encabezado: 8rem (escritorio), 4rem (tableta), 2.5rem (teléfono)

Agregar módulo divisor a la columna

Visibilidad

Justo debajo del módulo de texto, agregue un módulo divisor. Asegúrese de que la opción 'Mostrar divisor' esté habilitada.

• Mostrar divisor: Sí

Línea

A continuación, cambie el color de la línea del módulo.

• Color de línea: #ffffff

Dimensionamiento

Y complete la configuración del módulo cambiando la configuración de tamaño.

• Peso del divisor: 8px
• Ancho: 30%

Agregar sección n. ° 2

Agrega otra sección regular a la página.

Agregar nueva fila

Estructura de la columna

Agregue una nueva fila a la sección usando la siguiente estructura de columnas:

Agregar módulo de texto a la columna

Agregar contenido H2

Agregue un módulo de texto a la columna de la fila e inserte algún contenido H2 de su elección.

Configuración de texto H2

Modifique la configuración de texto H2 del módulo de la siguiente manera:

• Fuente del encabezado 2: Montserrat
• Peso de fuente del encabezado 2: Pesado
• Color del texto del encabezado 2: # ffa500
• Tamaño del texto del encabezado 2: 2.3rem

Agregar módulo divisor a la columna

Visibilidad

El siguiente módulo que necesitamos en esta columna es un módulo divisor. Asegúrese de que la opción 'Mostrar divisor' esté habilitada.

• Mostrar divisor: Sí

Línea

A continuación, modifique el color de la línea del módulo.

• Color de línea: # ffa500

Dimensionamiento

Y complete la configuración del módulo cambiando el peso del divisor y el ancho máximo en la configuración de tamaño.

• Peso del divisor: 6px
• Ancho máximo: 80px

Agregar módulo de blog a la columna

Contenido

Para mostrar los diferentes puestos de trabajo disponibles, usaremos un módulo de blog que personalizaremos según nuestras necesidades. Asegúrese de que se apliquen las siguientes configuraciones de contenido:

• Tipo de publicación: Publicaciones
• Incluir categorías: marketing
• Longitud del extracto: 150

Elementos

En la configuración de elementos, las únicas dos opciones que estamos habilitando son las siguientes:

• Mostrar botón Leer más: Sí
• Mostrar extracto: Sí

Diseño

Pase a la pestaña de diseño del módulo y asegúrese de que está usando un diseño de ancho completo.

• Diseño: ancho completo

Configuración del texto del título

Cambie también la configuración del texto del título.

• Nivel de encabezado del título: H3
• Fuente del título: Montserrat
• Tamaño del texto del título: 1.5rem

Configuración del texto del cuerpo

Luego, modifique la configuración del texto del cuerpo.

• Fuente del cuerpo: Raleway
• Tamaño del texto del cuerpo: 1.1rem
• Altura de la línea del cuerpo: 2.1em

Leer más configuración de texto

Junto con la configuración de leer más texto.

• Leer más Fuente: Montserrat
• Leer más Estilo de fuente: mayúsculas
• Leer más Color del texto: #ffffff
• Leer más Tamaño del texto: 1rem

Espaciado

Agregue algunos valores de margen y relleno personalizados a la configuración de espaciado.

• Margen izquierdo: 100 px (escritorio), 50 px (tableta), 0 px (teléfono)
• Relleno superior: 0px
• Acolchado inferior: 0px

Leer más botón CSS

Y complete la configuración del módulo agregando algunos botones de leer más CSS en la pestaña avanzada.

max-width: 200px;
text-align: center;
padding: 20px;
margin-top: 40px;
border-radius: 100px;
background-image: linear-gradient(126deg,#ff6600 0%,#fbff30 100%)!important;

Clonar fila tantas veces como sea necesario

Una vez que hayas completado la fila y todos sus módulos, puedes clonarla tantas veces como quieras, dependiendo de cuántos departamentos tenga tu empresa.

Cambiar el contenido del módulo de texto

Asegúrese de cambiar el contenido H2 de cada fila duplicada.

Cambiar las categorías del módulo del blog

Junto con las categorías del Módulo de blog.

Agregar módulo de código a la columna de la última fila

Insertar código CSS para diseñar puestos de trabajo abiertos individualmente

Para completar el diseño, agregaremos un módulo de código a la última fila de nuestra página e insertaremos las siguientes líneas de código CSS:

<style>
.et_pb_posts .et_pb_post {
box-shadow: 0px 2px 50px 0px rgba(0,0,0,0.09);
padding: 50px;
border-radius: 20px;
background-color: #fff;
}
</style>

3. Guardar el diseño de la página y ver el resultado

Una vez que haya completado el diseño de la página, puede guardar todos los cambios, salir de Visual Builder y ver el resultado.

Avance

Ahora que hemos seguido todos los pasos, echemos un vistazo final al resultado en diferentes tamaños de pantalla.

Escritorio

Móvil

Pensamientos finales

Este tutorial es una secuela de un tutorial anterior, donde le mostramos cómo crear una plantilla de puesto de trabajo abierto. En este tutorial, hemos ido un paso más allá y le hemos mostrado cómo presentar esos puestos de trabajo abiertos dinámicos en su página de carreras utilizando el Módulo de blog de Divi. ¡También pudo descargar el archivo JSON gratis! Si tiene alguna pregunta o sugerencia, no dude en dejar un comentario en la sección de comentarios a continuación.

Si está ansioso por aprender más sobre Divi y obtener más obsequios de Divi, asegúrese de suscribirse a nuestro boletín por correo electrónico y al canal de YouTube para que siempre sea una de las primeras personas en conocer y obtener beneficios de este contenido gratuito.