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.
hola, estoy en la parte donde tienes que insertar el código, pero cuando guardo y voy al sitio, el estilo no se aplica y el código aparece en línea sin las etiquetas de estilo. gracias por su ayuda.
Bonne journée!