Cuando use Divi Theme Builder en combinación con contenido dinámico, rápidamente se encontrará reemplazando los complementos con plantillas hechas a medida. En el tutorial de hoy, le mostraremos cómo crear una plantilla de publicación de empleo completamente dinámica utilizando Divi Theme Builder y un grupo de campos ACF. 

Hagámoslo.

Avance

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

Escritorio

plantilla de puesto de trabajo abierto

Móvil

plantilla de puesto de trabajo abierto

1. Agregar categorías de publicaciones

Ir a Categorías de publicaciones

La primera parte de la creación de la plantilla de puesto de trabajo abierto es agregar nuevas categorías de publicaciones que usará para los puestos de trabajo abiertos que agregue. Vaya a las categorías de publicaciones dentro de su panel de WordPress.

plantilla de puesto de trabajo abierto

Agregar categorías de puestos de trabajo abiertos

Agregue una categoría principal y una categoría separada para cada departamento.

  • Apertura de trabajo
    • Comunicaciones
    • Diseño
    • Desarrollo
    • Márketing

plantilla de puesto de trabajo abierto

2. Instalar ACF y configurar los campos del proyecto

Instalar y activar ACF

Continúe instalando y habilitando el complemento gratuito de Campos personalizados avanzados.

plantilla de puesto de trabajo abierto

Configurar grupo de campos

Configure un nuevo grupo de campos yendo a su Panel de WordPress> Campos personalizados> Agregar nuevo .

plantilla de puesto de trabajo abierto

Queremos que el grupo de campos aparezca exclusivamente en las publicaciones que forman parte de la categoría principal que agregamos en la parte anterior de este tutorial. Para hacerlo, asegúrese de que las siguientes reglas se apliquen al grupo de campos:

  • Tipo de publicación es igual a Publicar y
  • La categoría de publicación es igual a la oferta de trabajo

plantilla de puesto de trabajo abierto

Agregar campos

Una vez que se ha creado el grupo de campos, es hora de agregar los diferentes campos. Para recrear exactamente la misma plantilla que en la vista previa de este tutorial, necesitará los siguientes campos personalizados:

  • Responsabilidades
    • Etiqueta de campo: responsabilidades
    • Tipo de campo: área de texto
  • Experiencia requerida
    • Etiqueta de campo: experiencia requerida
    • Tipo de campo: Editor Wysiwyg
  • Habilidades requeridas
    • Etiqueta de campo: habilidades requeridas
    • Tipo de campo: Editor Wysiwyg
  • Calificaciones de bonificación
    • Etiqueta de campo: calificaciones de bonificación
    • Tipo de campo: Editor Wysiwyg
  • Ubicación
    • Etiqueta de campo: ubicación
    • Tipo de campo: texto
  • Tipo de trabajo
    • Etiqueta de campo: tipo de trabajo
    • Tipo de campo: casilla de verificación
    • Choices: Full-time + Part-time + Freelance (new line for each choice)
  • Apply redirect
    • Field Label: Apply redirect
    • Field Type: Url

plantilla de puesto de trabajo abierto

3. Add New Blog Post

Add Open Job Position Title, Short Description & Categories

Once you’ve completed the custom fields group and all its fields, it’s time to create a sample open job position post. Enter the title, job description and select the categories.

plantilla de puesto de trabajo abierto

Fill in All Custom Fields

Continue by completing all the custom fields.

plantilla de puesto de trabajo abierto

plantilla de puesto de trabajo abierto

4. Create New Template

Go to Divi Theme Builder & Add New Template

Once your sample blog post is in place, it’s time to create the open job position template! To do that, navigate to the Divi Theme Builder and click on ‘Add New Template’.

plantilla de puesto de trabajo abierto

Use On

Use the template on posts in the Job Opening category.

plantilla de puesto de trabajo abierto

5. Start Building Template Body

Ahora, comience a construir el diseño haciendo clic en ‘Agregar cuerpo personalizado’ y seleccionando ‘Construir cuerpo personalizado’. Esto lo redirigirá al editor de plantillas.

plantilla de puesto de trabajo abierto

Sección 1

Fondo degradado

Dentro del editor de plantillas Divi, verás una sección. Abra esa sección y agregue un fondo degradado.

  • Color 1: # ff6600
  • Color 2: # fbff30
  • Dirección de degradado: 126 grados

plantilla de puesto de trabajo abierto

Divisor inferior

Agregue un divisor inferior a la sección siguiente.

  • Estilo divisor: buscar en la lista
  • Altura del divisor: 8vw
  • Disposición del divisor: debajo del contenido de la sección

plantilla de puesto de trabajo abierto

Espaciado

E incluye algo de relleno inferior también.

  • Acolchado inferior: 400 px

plantilla de puesto de trabajo abierto

Agregar fila # 1

Estructura de columna

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

plantilla de puesto de trabajo abierto

Agregar módulo de difusión a la columna 1

Contenido dinámico

¡Es hora de comenzar a agregar módulos! El primer módulo que necesitamos en la columna 1 es un Módulo Blurb. Seleccione el contenido dinámico de ubicación para el cuadro de título y deje el cuadro de contenido vacío.

  • Título: Ubicación

plantilla de puesto de trabajo abierto

Seleccionar icono

Continúe seleccionando un icono.

plantilla de puesto de trabajo abierto

Configuraciones de iconos

Pase a la pestaña de diseño y cambie la configuración del icono de la siguiente manera:

  • Color del icono: #ffffff
  • Colocación de imagen / icono: izquierda
  • Usar tamaño de fuente de icono: sí
  • Tamaño de fuente del icono: 25 px

plantilla de puesto de trabajo abierto

Configuración del texto del título

Modifique la configuración del texto H3 también.

  • Nivel de título del título: H3
  • Fuente del título: Lato
  • Color del texto del título: #ffffff
  • Tamaño del texto del título: 1.4rem

plantilla de puesto de trabajo abierto

Animación

Por último, elimine la animación del icono en la configuración de animación.

  • Animación de imagen / icono: sin animación

plantilla de puesto de trabajo abierto

Clone Blurb Module & Place Duplicate en la columna 2

Una vez que haya completado el Módulo Blurb en la columna 1, puede clonarlo una vez y colocar el duplicado en la segunda columna.

plantilla de puesto de trabajo abierto

Cambiar contenido dinámico e ícono

Make sure you change the title dynamic content along with the icon.

  • Title: Job type

plantilla de puesto de trabajo abierto

Add Button Module to Column 3

Add Copy

In the last column, add a Button Module. Add some copy of your choice.

plantilla de puesto de trabajo abierto

Dynamic Link

Select the dynamic apply redirect link next.

  • Button Link URL: Apply redirect
  • Button Link Target: In The New Tab

plantilla de puesto de trabajo abierto

Alignment

Move on to the module’s design tab and change the alignment across different screen sizes.

  • Button Alignment: Right (Desktop), Left (Tablet & Phone)

plantilla de puesto de trabajo abierto

Button Settings

Style the button as well.

  • Use Custom Styles For Button: Yes
  • Button Text Size: 1rem
  • Button Text Color: #ff6600
  • Button Background Color: #ffffff
  • Button Border Width: 0px

plantilla de puesto de trabajo abierto

  • Button Border Radius: 100px
  • Button Font: Montserrat
  • Button Font Style: Uppercase

plantilla de puesto de trabajo abierto

Spacing

And complete the module’s settings by adding some custom padding values to the spacing settings.

  • Top Padding: 15px
  • Relleno inferior: 15px
  • Relleno izquierdo: 50px
  • Relleno derecho: 50px

plantilla de puesto de trabajo abierto

Agregar fila # 2

Estructura de columna

¡A la siguiente fila! Elija la siguiente estructura de columna:

plantilla de puesto de trabajo abierto

Agregar módulo de texto a la columna

Contenido dinámico

Agregue un nuevo módulo de texto a la columna y seleccione el contenido dinámico del título de la publicación.

  • Contenido dinámico: Título de publicación / archivo

plantilla de puesto de trabajo abierto

  • Antes: <H1>
  • Después: </H1>

plantilla de puesto de trabajo abierto

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 del encabezado: 8rem (escritorio), 4rem (tableta), 2.5rem (teléfono)

plantilla de puesto de trabajo abierto

Agregar módulo divisor a la columna

Visibilidad

El siguiente módulo que necesitamos es un Módulo Divisor. Asegúrese de que la opción ‘Mostrar divisor’ esté habilitada.

  • Mostrar divisor: sí

plantilla de puesto de trabajo abierto

Línea

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

  • Color de línea: #ffffff

plantilla de puesto de trabajo abierto

Dimensionamiento

Modifique la configuración de tamaño también.

  • Divisor de peso: 8px
  • Ancho: 30%
  • Alineación del módulo: izquierda

plantilla de puesto de trabajo abierto

Add Section #2

Spacing

On to the next section! Remove all default top padding.

  • Top Padding: 0px

plantilla de puesto de trabajo abierto

Add Row #1

Column Structure

Add a new row to the section using the following column structure:

plantilla de puesto de trabajo abierto

Spacing

Open the row settings and remove the default top padding.

  • Top Padding: 0px

plantilla de puesto de trabajo abierto

Add Post Content Module to Column

Background Color

Add a Post Content Module to the row and change the background color into white.

  • Background Color: #ffffff

plantilla de puesto de trabajo abierto

Text Settings

Move on to the module’s design tab and change the text settings as follows:

  • Text Font: Raleway
  • Text Size: 1.1rem
  • Text Line Height: 2.1em

plantilla de puesto de trabajo abierto

Spacing

Play around with the spacing values across different screen sizes next.

  • Top Margin: -300px
  • Top Padding: 100px (Desktop), 50px (Tablet & Phone)
  • Bottom Padding: 100px (Desktop), 50px (Tablet & Phone)
  • Left Padding: 100px (Desktop), 50px (Tablet & Phone)
  • Right Padding: 100px (Desktop), 50px (Tablet & Phone)

plantilla de puesto de trabajo abierto

Border

Add some border radius too.

  • All Corners: 20px

plantilla de puesto de trabajo abierto

Box Shadow

And complete the module’s settings by adding a subtle box shadow.

  • Box Shadow Blur Strength: 50px
  • Shadow Color: rgba(0,0,0,0.09)

plantilla de puesto de trabajo abierto

Add Row #2

Column Structure

Add another row using the following column structure:

plantilla de puesto de trabajo abierto

Add Text Module #1 to Column

Add H2 Content

Add a Text Module to the row’s column with some H2 content.

plantilla de puesto de trabajo abierto

H2 Text Settings

Change the module’s H2 text settings as follows:

  • Heading 2 Font: Montserrat
  • Heading 2 Font Weight: Heavy
  • Heading 2 Text Color: #ffa500
  • Heading 2 Text Size: 1.5rem

plantilla de puesto de trabajo abierto

Add Divider Module to Column

Visibility

The next module we need is a Divider Module. Make sure the ‘Show Divider’ module is enabled.

  • Show Divider: Yes

plantilla de puesto de trabajo abierto

Line

Change the module’s line color next.

  • Line Color: #ffa500

plantilla de puesto de trabajo abierto

Sizing

And complete the module’s settings by playing around with the sizing settings.

  • Divider Weight: 6px
  • Ancho Máx .: 80px

plantilla de puesto de trabajo abierto

Agregue el módulo de texto n. ° 2 a la columna

Contenido dinámico

El siguiente y último módulo que necesitamos en esta columna es otro módulo de texto. Seleccione el contenido dinámico relevante.

  • Contenido dinámico: experiencia requerida

plantilla de puesto de trabajo abierto

Asegúrese de habilitar HTML sin formato.

  • Habilitar HTML sin formato: sí

plantilla de puesto de trabajo abierto

Configuraciones de texto

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

  • Fuente de texto: Raleway
  • Tamaño del texto: 1.1rem

plantilla de puesto de trabajo abierto

Configuración de texto de lista desordenada

Modifique también la altura de la línea de la lista desordenada.

  • Altura de línea de lista desordenada: 2.3em

plantilla de puesto de trabajo abierto

Espaciado

Luego, vaya a la configuración de espaciado y agregue algunos valores de relleno personalizados.

  • Relleno superior: 50px
  • Relleno inferior: 50px
  • Relleno izquierdo: 50px
  • Relleno derecho: 50px

plantilla de puesto de trabajo abierto

Frontera

Agregue también un radio de borde.

  • Todas las esquinas: 20 px

plantilla de puesto de trabajo abierto

Sombra de la caja

Y complete la configuración del módulo agregando una sombra de cuadro sutil.

  • Fuerza de desenfoque de sombra de caja: 50 px
  • Color de sombra: rgba (0,0,0,0.09)

plantilla de puesto de trabajo abierto

Agregar fila # 3

Estructura de columna

¡A la última fila! Use la siguiente estructura de columnas:

plantilla de puesto de trabajo abierto

Clonar módulos en la columna 2 dos veces y colocar duplicados en las columnas 1 y 2 de la nueva fila

Clone los módulos que ha agregado a la fila anterior dos veces y coloque los duplicados en la nueva fila.

plantilla de puesto de trabajo abierto

Cambiar la copia del módulo de texto n. ° 1

Asegúrese de cambiar la copia H2 de cada módulo de texto duplicado.

plantilla de puesto de trabajo abierto

Cambiar contenido dinámico del módulo de texto n. ° 2

Junto con el contenido dinámico.

  • Contenido dinámico: habilidades requeridas

plantilla de puesto de trabajo abierto

  • Contenido dinámico: calificaciones de bonificación

plantilla de puesto de trabajo abierto

Nuevamente, asegúrese de que el HTML sin procesar esté habilitado para ambos módulos de texto que contengan contenido dinámico.

  • Habilitar HTML sin formato: sí

plantilla de puesto de trabajo abierto

6. Guardar los cambios del generador de temas y ver el resultado

Una vez que haya completado el cuerpo de la plantilla, puede guardar todos los cambios del generador de temas y ver el resultado en su publicación de muestra de puesto de trabajo abierto.

plantilla de puesto de trabajo abierto

plantilla de puesto de trabajo abierto

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!