homefinance blog
En un tutorial anterior, le mostré cómo crear una plantilla de posición abierta completamente dinámica, con el creador de temas y el complemento avanzado de campos personalizados. En el tutorial de hoy, le mostraremos cómo presentar dinámicamente sus puestos de trabajo en su página de carrera. Este tutorial es una continuación de la publicación de plantilla para la posición de trabajo abierto, así que asegúrese de recrear primero la plantilla y luego regrese a este tutorial. Vamos a eso. Vista previa antes de arrojar nuestras cabezas en el tutorial, para echar un vistazo rápido al resultado en diferentes tamaños de pantalla.
Escritorio
Móvil
Descargue el esquema de listado de trabajo gratuito de forma gratuita para poner su mano en la lista gratuita de puestos de carrera dinámicos, primero debe descargarlo con el botón a continuación. Para tener acceso a la descarga, deberá suscribirse a nuestra lista diaria de correo electrónico utilizando el formulario a continuación. ¡Como nuevo suscriptor, recibirá más buenas divisiones y un paquete Divaut gratuito todos los lunes! Si ya está en la lista, simplemente ingrese la dirección de correo electrónico a continuación y haga clic en Descargar. No será “reubicado” y no recibirá correos electrónicos adicionales.
Descargar archivos
Descargue el registro gratuito para el Boletín Informativo Divic y le enviaremos una copia de la página de la página de la página final, además de muchos otros recursos, consejos y consejos para Div gratis. Sigue a ti mismo y serás una división maestra en el menor tiempo. Si ya está suscrito, simplemente ingrese el correo electrónico a continuación y haga clic en Descargar para acceder al paquete de apariencia. Se ha suscrito correctamente. ¡Consulte su correo electrónico para confirmar su suscripción y obtener acceso a paquetes de diseño semanales gratuitos!
1. Agregue la página de carrera Agregue una nueva página y cambie a Visual Builder Comience creando una nueva página otorgando su página y pasando al Visual Builder.
2. Comience a construir la página de carrera en front y Agregar sección no. 1 fondo de gradiente Agregue la primera sección a la página, abra la configuración de la sección y use un fondo de gradiente.
Color 1: # FF6600
Color 2: # FBFF30
Dirección de gradiente: 126deg
El separador inferior también usa un separador de sección inferior.
Estilo divisor: encontrar en la lista
Altura del divisor: 8VW
Repetición del distribuidor horizontal: 3x
Disposición del divisor: Contenido bajo la sección
Espacio Complete la configuración de la sección Agregar algo de relleno a continuación.
Finamiento inferior: 200 PX
Agregue una nueva estructura de columna de fila Continúe agregando una nueva línea a la sección utilizando la siguiente estructura de columna:
Agregue un módulo de texto a la columna Agregar contenido H1 Agregue un módulo de texto en la columna de fila con un contenido H1 de su elección.
Configuración de texto H1 Cambiar a la pestaña Diseño del módulo y cambiar la configuración de texto H1 en consecuencia:
Título de la fuente: Montserrat
Peso de la fuente del encabezado: duro
Encabezado de texto en color: #ffffff
Tamaño de texto Cabezal: 8REM (escritorio), 4rem (tableta), 2.5rem (teléfono)
Agregue el módulo Divisor a la visibilidad de la columna justo debajo del módulo de texto, agregue un módulo divisor. Asegúrese de que se active la opción “Muestra el divisor”.
Divisor del espectáculo: si
La línea cambia el color de la línea del módulo.
Color de línea: #ffffff
Dimensión y complete la configuración del módulo cambiando la configuración de tamaño.
Peso del divisor: 8 PX
Ancho: 30%
Agregue la Sección 2 Agregue otra sección regular a la página.
Agregue una nueva estructura de columna de fila Agregue una nueva fila a la sección utilizando la siguiente estructura de columnas:
Agregue un módulo de texto a la columna Agregar contenido H2 Agregue un módulo de texto en la columna de fila e ingrese un contenido H2 de su elección.
Configuración de texto H2 Cambie la configuración de texto H2 del módulo de la siguiente manera:
2 Sección de fuentes: Montserrat
2 Peso 2 Sección de peso: duro
Rúbrica 2 Color de texto: # FFA500
Rúbrica 2 Dimensión de texto: 2.3rem
Agregue el módulo divisor a la visibilidad de la columna La siguiente manera que necesitamos en esta columna es un módulo divisor. Asegúrese de que se active la opción “Muestra el divisor”.
Divisor del espectáculo: si
La línea cambia el color de la línea del módulo a continuación.
Color de línea: # FFA500
Dimensión y complete la configuración del módulo cambiando el peso del separador y el ancho máximo en la configuración del tamaño.
Peso del divisor: 6 PX
Ancho máximo: 80 PX
Agregue el módulo de blog al contenido de la columna para mostrar las diferentes estaciones de trabajo abiertas, utilizaremos un módulo de blog que personalizaremos de acuerdo con nuestras necesidades. Asegúrese de que se apliquen la siguiente configuración de contenido: Tipo de publicación: Publicaciones
Incluir categorías: marketing
Longitud adicional: 150
Elementos en la configuración de elementos, las únicas dos opciones que activamos son las siguientes:
Muestra el botón Leer más: Sí
Extracto de visualización: Sí
Aparece el cambio a la pestaña Diseño del módulo y asegúrese de usar un aspecto de ancho completo.
Apariencia: ancho completo
Configuración de texto de título Modificar y configuración para el texto del título.
Nivel de encabezado del título: H3
Título de la fuente: Montserrat
Título Tamaño del texto: 1.5rem
Configuración de texto del cuerpo y luego cambie la configuración de texto de su cuerpo.
Font Corp: Raleway
Tamaño del texto del cuerpo: 1.1rem
La altura de la línea del cuerpo: 2.1em
Lea más configuraciones de texto junto con la lectura de varias configuraciones de texto.
Leer más fuente: Montserrat
Leer más estilo de fuente: mayúscula
Leer más color de texto: #ffffff
Leer más tamaño de texto: 1rem
Espacio agregue algunos valores marginales y valores de llenado a la configuración de espaciado.
Margen izquierdo: 100 px (escritorio), 50 px (tableta), 0 px (teléfono)
SUS Lingo: 0 PX
Finamiento inferior: 0 PX
Lea varios botones CSS y complete la configuración del módulo agregando algunos botones de lectura CSS a la pestaña avanzada. Max-Width: 200px;
Text-Align: Center;
Relleno: 20px;
margen-top: 40px;
Border-Radius: 100px;
Imagen de fondo: gradiente lineal (126deg,#FF6600 0%,#FBFF30 100%)!
Clonar el giro cuando sea necesario después de haber completado el giro y todos sus módulos, puede clonarlo tantas veces como desee, dependiendo de cuántos departamentos su empresa tenga el contenido del módulo de texto, asegúrese de cambiar el contenido H2 de cada fila duplicada.
Cambie las categorías del módulo de blog junto con las categorías de blog del módulo.
Agregue un módulo de código a la columna de la última fila Ingrese el código CSS para estilizar a las personas individualmente para completar el diseño, agregaremos un módulo de código a la última fila en nuestra página e ingresaremos las siguientes líneas de código CSS:
.et_pb_posts .et_pb_post {
Shadow de caja: 0px 2px 50px 0px RGBA (0.0,0,09);
Relleno: 50px;
Border-Radius: 20px;
Color de fondo: #fff;
}
3. Guarde el diseño de la página y vea el resultado después de haber completado el diseño de la página, ¡puede guardar todos los cambios, salir de Visual Builder y ver el resultado!
Vista previa ahora que hemos dado todos los pasos, para echar un vistazo final al resultado en diferentes tamaños de pantalla. Escritorio
Móvil
