En el tutorial de hoy, le mostraremos cómo puede mostrar dinámicamente las vacantes en su página de Carreras. Empecemos.

Resumen de resultados

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

1. Crear una página de carreras

Agregue una nueva página y cambie a Visual Builder

Comienza creando una nueva página, dale un título a tu página y ve a Visual Builder.

2. Comience a crear la página de Carreras en la interfaz

Agrega la primera sección

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 gradiente: 126deg

Divisor inferior

También use un divisor de sección inferior.

• Estilo de separación: buscar en la lista
• Altura del divisor: 8vw
• Repetición horizontal del divisor: 3x
• Disposición de los divisores: bajo el contenido sección

espaciamiento

Complete los parámetros de la sección agregando un relleno inferior.

• Relleno inferior: 200px

Añadir una nueva linea

Estructura de la columna

Continúe agregando una nueva línea a la sección utilizando la siguiente estructura de columnas:

Agregar un módulo de texto a la columna

Añadir contenido H1

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

Configuraciones de texto H1

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

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

Agregar un módulo de separación a la columna

visibilidad

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

• Mostrar separador: sí

línea

Luego cambie el color de línea del módulo.

• Color de línea: #ffffff

apresto

Y complete los parámetros del módulo modificando los parámetros de dimensionamiento.

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

Agregar sección # 2

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

Añadir una nueva linea

Estructura de la columna

Agregue una nueva línea a la sección utilizando la siguiente estructura de columnas:

Agregar un módulo de texto a la columna

Añadir contenido H2

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

Configuraciones de texto H2

Modifique los parámetros de texto H2 del módulo de la siguiente manera:

• Título 2 Policía: Montserrat
• Punto 2 Peso de la póliza: pesado
• Color del texto del elemento 2: # ffa500
• Título 2 Tamaño del texto: 2.3rem

Agregar un módulo de separación a la columna

visibilidad

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

• Mostrar separador: sí

línea

Luego cambie el color de línea del módulo.

• Color de línea: # ffa500

apresto

Y complete los parámetros del módulo modificando el peso del divisor y el ancho máximo en los parámetros de dimensionamiento.

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

Agregar un módulo de blog a la columna

Contenido

Para visualizar las diferentes vacantes utilizaremos un módulo de blog que personalizaremos según nuestras necesidades. Asegúrese de que se apliquen las siguientes configuraciones de contenido:

• Tipo de mensaje: mensajes
• Incluir categorías: Marketing
• Longitud del extracto: 150

Elementos

En los parámetros de los elementos, las dos únicas opciones que activamos son las siguientes:

• Mostrar más botón: Sí
• Extracto del espectáculo: sí

Provisión

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

• Diseño: ancho completo

Configuración del texto del título

También cambie la configuración del texto del título.

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

Configuración del texto del cuerpo

Luego cambie la configuración del texto del cuerpo.

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

Obtenga más información Configuración de texto

Con la configuración de texto, obtenga más información.

• Leer más Policía: Montserrat
• Más información Estilo de fuente: Capital
• Más información Color del texto: #ffffff
• Leer más Tamaño del texto: 1rem

espaciamiento

Agregue márgenes personalizados y valores de relleno a la configuración de espaciado.

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

Conozca más Button CSS

Y complete la configuración del módulo agregando botones de reproducción 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;

Clone la línea tantas veces como sea necesario

Una vez que haya terminado la línea y todos sus módulos, puede clonarla tantas veces como desee, dependiendo del número de departamentos de su empresa.

Edite el contenido del módulo de texto.

Asegúrese de editar el contenido H2 de cada línea duplicada.

Editar categorías de módulos de blog

Con las categorías del módulo Blog.

Agregue un módulo de código a la columna de la última línea.

Insertar código CSS para estilizar estaciones de trabajo abiertas individuales

Para finalizar el diseño, agregaremos un módulo de código a la última línea 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. Guarde el diseño de la página y muestre el resultado.

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

Resultado final

Ahora que hemos seguido todos los pasos, echemos un vistazo final a cómo se ve en diferentes tamaños de pantalla.

Consideraciones finales

En este tutorial, le mostramos cómo exhibir estos artículos dinámicos y abiertos en su página de empleo utilizando el módulo de blog de Divi. Siéntase libre de dejar un comentario en la sección de comentarios a continuación.