Cuando use Divic Builder en combinación con contenidos dinámicos, encontrará rápidamente el reemplazo de complementos con plantillas auto-reiladas. En el tutorial de hoy, le mostraremos cómo crear una plantilla de publicación posterior dinámica completamente abierta y un grupo de campos ACF. ¡Esta plantilla de publicación dinámica para abrir el trabajo es totalmente personalizable y podrá descargar el archivo JSON! 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 la plantilla de apertura de trabajo de forma gratuita para poner su mano en la plantilla de apertura de trabajo gratuita, primero deberá descargarla usando 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.
Te has suscripto satisfactoriamente. ¡Consulte su correo electrónico para confirmar su suscripción y obtener acceso a paquetes de diseño semanales gratuitos! 1. Agregue las categorías de publicaciones Acceda a las categorías de publicaciones La primera parte de la creación de la posición de publicación abierta es la adición de nuevas categorías de publicaciones que utilizará para las posiciones de publicaciones abiertas que agrega. Vaya a las publicaciones de publicaciones desde el tablero de WordPress.
Agregue las categorías de publicaciones abiertas Agregue una categoría de padres y una categoría separada para cada departamento.

Abriendo el trabajo
comunicación
Diseño
Desarrollo
Marketing
…
2. Instale los campos ACF y la instalación del proyecto de configuración y active ACF Continuar instalando y activando el complemento de campos avanzados gratuitos.

Configure el grupo de campo Configure un nuevo grupo de campo accediendo al tablero de WordPress> campos personalizados> Agregar un nuevo.

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

El tipo de publicación es igual a la publicación y
La categoría de publicación es igual a trabajos abiertos
Agregar campos Una vez que se haya creado el grupo de campo, es hora de agregar diferentes campos. Para recrear exactamente la misma plantilla que en la vista previa de este tutorial, necesitará los siguientes campos personalizados:

responsabilidad
Etiqueta de tierras: responsabilidades
Tipo de campo: área de texto
Experiencia necesaria
Etiqueta de campo: experiencia requerida
Tipo de campo: editor de Wysiwyg
Habilidades requeridas de campo Eettery: habilidades requeridas
Tipo de campo: editor de Wysiwyg
Calificaciones de bonificación
Etiqueta de campo: clasificatorios de bonificación
Tipo de campo: editor de Wysiwyg
Ubicación
Etiqueta de campo: ubicación
Tipo de campo: texto
El tipo de publicación
Etiqueta de campo: el tipo de trabajo
Tipo de campo: cuadro de selección
Opciones: a tiempo completo + a tiempo parcial + Freelance (nueva línea para cada elección)
Aplicar la redirección
Etiqueta de campo: aplicar redirección
Tipo de campo: URL
3. Agregue una nueva publicación de blog Agregue el título de la posición abierta, descripción breve y categorías después de haber completado el grupo de campo personalizado y todos sus campos, es hora de crear una muestra de trabajo abierta. Ingrese el título, la descripción de la publicación y seleccione las categorías.
Complete todos los campos personalizados continúan completando todos los campos personalizados.

4. Cree una nueva plantilla Vaya a la Divina del Constructor de Temas y agregue una nueva plantilla una vez que la muestra de publicación de blog esté en su lugar, ¡es hora de crear la plantilla de posición abierta! Para hacer esto, navegue por la división del constructor de temas y haga clic en “Agregar una nueva plantilla”.

Use activado Use la plantilla para publicaciones en la categoría que abre el trabajo.


5. Comience a construir el cuerpo de plantilla ahora, comience a crear el diseño haciendo clic en “Agregar cuerpo personalizado” y seleccionando “construir cuerpo personalizado”. Esto lo redirigirá al editor de plantillas.

Sección 1 Antecedentes de gradiente En el editor de plantillas de la Divica, notará una sección. Abra esa sección y agregue un fondo de gradiente.

Color 1: # FF6600

Color 2: # FBFF30
Dirección de gradiente: 126deg
Separador inferior Agregue un separador inferior a la siguiente sección. Divisor STIL: Buscar en la lista
Altura del divisor: 8VW

Disposición del divisor: Contenido bajo la sección
Espaciado e incluye algunos revestimientos inferiores.
Finamiento inferior: 400 PX
Agregue la estructura de la columna de la fila # 1 Continuar agregando una nueva línea a la sección utilizando la siguiente estructura de columna:

¡Agregue los módulos de blurb a la columna 1, el contenido dinámico es el momento de comenzar a agregar módulos! El primer módulo que necesitamos en la columna 1 es un módulo de propaganda. Seleccione el contenido de ubicación dinámica para el cuadro de título y deje el cuadro de contenido.
Título: Ubicación

Seleccione el icono Continuar seleccionando un icono.

Icono de configuración Vaya a la pestaña Design y modifique la configuración del icono de la siguiente manera:
Icono de color: #ffffff

Colocación de la imagen / icono: izquierda

Use el icono del tamaño de la fuente: sí
Icono de tamaño de fuente: 25 PX
Configuración de texto de título Modificar y Configuración de texto H3.
Nivel de encabezado del título: H3
Título de la fuente: Lato

Color de texto del título: #ffffff
Título Tamaño del texto: 1.4rem
Animación en última instancia, elimine la animación del icono de la configuración de animación.
Animación de imagen / icono: sin animación
Clone el módulo de la propaganda y coloque el duplicado en la columna 2 Después de haber completado el módulo de la propaganda en la columna 1, puede clonarlo una vez y colocar el duplicado en la segunda columna.

Cambie el contenido dinámico y el icono Asegúrese de cambiar el contenido dinámico de contenido con el icono.
Título: Tipo de trabajo

Agregue un módulo de botón a la columna 3 Agregue una copia a la última columna, agregue un módulo de botón. Agregue una copia de su elección.

Enlace dinámico Seleccione el enlace de redirección aplicable aún más.
Botón de enlace del enlace: en la nueva pestaña

Alineación Vaya a la pestaña Diseño del módulo y cambie la alineación en diferentes tamaños de pantalla.

Toste del botón: derecha (escritorio), izquierda (tableta y teléfono)
Botón de configuración Stilet y botón.
Use estilos personalizados para el botón: Sí

Tamaño de texto de texto: 1Rem
El color del texto del botón: # FF6600

El color del fondo del botón: #ffffff
El ancho del nudo del botón: 0 PX
Botón Raza: 100 PX
Botón de fuente: Montserrat
El estilo de la fuente del botón: mayúscula
Espacio y complete la configuración del módulo agregando valores de llenado personalizados a la configuración de espaciado.


Revestimiento superior: 15 px
Revestimiento inferior: 15 PX
ENNIZACIÓN IZQUIERDA: 50 PX

Revestimiento derecho: 50 PX
Agregue la estructura de la fila # 2 de la columna, ¡pasamos la siguiente fila! Elija la siguiente estructura de columnas:
Agregue un módulo de texto al contenido dinámico Agregue un nuevo módulo de texto en la columna y seleccione el contenido dinámico del título de publicación.
Contenido dinámico: título de publicación / archivo
Antes:

Después de:

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 El siguiente modo que necesitamos 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.
Color de línea: #FFFFFDDIMENSION Modifique y configuración de dimensionamiento.

Peso del divisor: 8 PX
Ancho: 30%

Alineación del módulo: izquierda
¡Agregue el espacio de la Sección 2, vaya a la siguiente sección! Elimine todos los valores predeterminados desde arriba.

SUS Lingo: 0 PX
Agregue la estructura de columna de la fila # 1 Agregar una nueva fila a la sección utilizando la siguiente estructura de columnas:
Espacio Abra la configuración promedio y elimine la corriente ascendente predeterminada.
SUS Lingo: 0 PX

Agregue un módulo de contenido para publicar en el color del color de fondo Agregue una publicación de publicación en una fila y cambie el color de fondo a blanco.
Color de fondo: #ffffff

Configuración de texto Vaya a la pestaña Diseño del módulo y cambie la configuración de texto de la siguiente manera:

Texto de fuente: Raleway
Tamaño del texto: 1.1rem

La altura de la línea de texto: 2.1em
Deforzando más, juegue con valores de espaciado en diferentes tamaños de pantalla.

Margen superior: -300px
Revestimiento superior: 100 PX (escritorio), 50 px (tableta y teléfono)
Bajo forro: 100 PX (escritorio), 50 px (tableta y teléfono)
ENLIZACIÓN IZQUIERDA: 100 PX (escritorio), 50 px (tableta y teléfono)

Revestimiento derecho: 100 PX (escritorio), 50 px (tableta y teléfono)
Borde agregue un rayo de borde.
Todas las esquinas: 20 PX
Sombra de cuadro y complete la configuración del módulo agregando un tono de caja sutil.
Poder de poco claro de la sombra de la caja: 50 px
Shadow Color: RGBA (0.0,0,09.09)

Agregue la estructura de la columna de la fila # 2 Agregar otra fila utilizando la siguiente estructura de columna:
Agregue el módulo de texto no. 1 En la columna, agregue el contenido H2, agregue un módulo de texto en la columna de fila con un contenido H2.

Configuración de texto H2 Cambie la configuración de texto H2 de la siguiente manera: 2 encabezado 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: 1.5rem

Agregue el módulo Divisor a la visibilidad de la columna El siguiente modo que necesitamos es un módulo divisor. Asegúrese de que se active el módulo “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: # FFA500
Dimensión y complete la configuración del módulo jugando con la configuración del tamaño.
Peso del divisor: 6 PX

Ancho máximo: 80 PX
Agregue el módulo de texto no. 2 En la columna contenía dinámica, el siguiente módulo que necesitamos en esta columna es otro módulo de texto. Seleccione el contenido dinámico relevante.

Contenido dinámico: experiencia requerida
Asegúrese de activar el HTML bruto.

Activar html raw: sí
Configuración de texto Vaya a la pestaña Diseño del módulo y cambie la configuración de texto en consecuencia:
Texto de fuente: Raleway

Tamaño del texto: 1.1rem
Configuración de texto de lista desordenada modificada y la altura de la línea de lista no ordinaria.

Línea de altura de la lista desordenada: 2.3EM
Extienda luego, acceda a la configuración de espaciado y agregue algunos valores de llenado personalizados.

Revestimiento superior: 50 px
Revestimiento inferior: 50 PX
ENNIZACIÓN IZQUIERDA: 50 PX

Revestimiento derecho: 50 PX
Borde agregue un rayo de borde.

Todas las esquinas: 20 PX
Sombra de cuadro y complete la configuración del módulo agregando un tono de caja sutil.
Poder de poco claro de la sombra de la caja: 50 px
Shadow Color: RGBA (0.0,0,09.09)
¡Agregue la estructura de la fila # 3 de la columna en la última fila! Use la siguiente estructura de columna:

Módulos de clon en la columna 2 dos veces y coloque los duplicados en las columnas 1 y 2 en el nuevo clon de fila dos veces los módulos que ha agregado en la fila anterior y coloque los duplicados en la nueva fila. Modifique el texto del módulo # 1 Copia que realice Seguro que cambia la copia H2 de cada módulo de texto duplicado.
Cambie el contenido dinámico del módulo de texto no. 2 junto con el contenido dinámico.

Contenido dinámico: habilidades requeridas
Contenido dinámico: clasificatorios de bonificación
Nuevamente, asegúrese de que se active HTML bruto para ambos módulos de texto que contienen contenido dinámico.

Active el código HTML bruto: sí

6. Guarde los cambios del fabricante en el tema y vea el resultado una vez que haya completado el cuerpo de plantilla, puede guardar todos los cambios en el constructor de temas y puede ver el resultado en la muestra de publicación abierta.

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