En un tutorial anterior de Divi, le mostramos cómo crear una plantilla de posición de trabajo abierta completamente dinámica con Divi’s Theme Builder y el complemento Advanced Custom Fields. En el tutorial de hoy, le mostraremos cómo puede presentar dinámicamente los puestos vacantes en su página de carreras. Este tutorial es una continuación 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

carreras dinámicas

Móvil

carreras dinámicas

1. Añadir 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.

carreras dinámicas

2. Comience a construir la página de carreras en la interfaz

Agregar secció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 de degradado: 126 grados

carreras dinámicas

Divisor inferior

Use un divisor de sección inferior también.

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

carreras dinámicas

Espaciado

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

  • Acolchado inferior: 200 px

carreras dinámicas

Agregar nueva fila

Estructura de columna

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

carreras dinámicas

Agregar módulo de texto a la columna

Añadir contenido H1

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

carreras dinámicas

Configuraciones de texto H1

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

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

carreras dinámicas

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í

carreras dinámicas

Línea

Cambie el color de línea del módulo a continuación.

  • Color de línea: #ffffff

carreras dinámicas

Dimensionamiento

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

  • Divisor de peso: 8px
  • Ancho: 30%

carreras dinámicas

Agregar Sección # 2

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

carreras dinámicas

Agregar nueva fila

Estructura de columna

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

carreras dinámicas

Agregar módulo de texto a la columna

Añadir contenido H2

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

carreras dinámicas

Configuraciones de texto H2

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

  • Título 2 Fuente: Montserrat
  • Título 2 Peso de fuente: pesado
  • Título 2 Color del texto: # ffa500
  • Encabezado 2 Tamaño del texto: 2.3rem

carreras dinámicas

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í

carreras dinámicas

Línea

Modifique el color de línea del módulo a continuación.

  • Color de línea: # ffa500

carreras dinámicas

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.

  • Divisor de peso: 6px
  • Ancho Máx .: 80px

carreras dinámicas

Agregar módulo de blog a la columna

Contenido

Para mostrar los diferentes puestos vacantes, utilizaremos un módulo de blog que personalizaremos según nuestras necesidades. Asegúrese de que se aplique la siguiente configuración de contenido:

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

carreras dinámicas

Elementos

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

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

carreras dinámicas

Diseño

Pase a la pestaña de diseño del módulo y asegúrese de estar utilizando un diseño de ancho completo.

  • Diseño: ancho completo

carreras dinámicas

Configuración del texto del título

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

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

carreras dinámicas

Configuración de 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

carreras dinámicas

Leer más configuraciones 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

carreras dinámicas

Espaciado

Agregue algunos valores personalizados de margen y 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

carreras dinámicas

Leer más Button CSS

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

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

carreras dinámicas

Clone Row tantas veces como sea necesario

Una vez que haya completado la fila y todos sus módulos, puede clonarla tantas veces como desee, dependiendo de cuántos departamentos tenga su empresa.

carreras dinámicas

Cambiar contenido del módulo de texto

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

carreras dinámicas

Cambiar las categorías del módulo de blog

Junto con las categorías del Módulo Blog.

carreras dinámicas

carreras dinámicas

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

Insertar código CSS para diseñar posiciones de trabajo abiertas 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:

01
02
03
04
05
06
07
08
<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>

carreras dinámicas

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

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

carreras dinámicas

Por Prunaestudio

Por Prunaestudio

Prunaestudio es un estudio de diseño web ubicado en Valencia (España). Estamos especializados en el diseño web basado en WordPress con la plantilla premium de Elegantthemes, Divi.

* Todos el contenido pertenece y se ha traducido del blog de Elegantthemes (Divi Resources)

Nuestras últimas entradas

You have Successfully Subscribed!