Come creare un modello di post di apertura di lavoro dinamico con Divi's Theme Builder e ACF

Quando utilizzi Divi Theme Builder in combinazione con contenuti dinamici, ti ritroverai rapidamente a sostituire i plug-in con modelli creati da te. Nel tutorial di oggi, ti mostreremo come creare un modello di post di apertura di lavoro completamente dinamico utilizzando Divi Theme Builder e un gruppo di campi ACF. Questo modello di post di apertura del lavoro dinamico è completamente personalizzabile e potrai anche scaricare il file JSON gratuitamente!

Andiamo ad esso.

Anteprima

Prima di immergerci nel tutorial, diamo una rapida occhiata al risultato su schermi di diverse dimensioni.

Desktop

Mobile

Scarica GRATUITAMENTE il modello di post di apertura del lavoro

Per mettere le mani sul modello di post di apertura di lavoro gratuito, dovrai prima scaricarlo utilizzando il pulsante qui sotto. Per accedere al download dovrai iscriverti alla nostra mailing list Divi Daily utilizzando il modulo sottostante. Come nuovo abbonato, riceverai ancora più bontà Divi e un pacchetto Divi Layout gratuito ogni lunedì! Se sei già nell'elenco, inserisci semplicemente il tuo indirizzo email qui sotto e fai clic su download. Non sarai "riabbonato" o riceverai email extra.

Scarica i file

Scarica gratis

Iscriviti alla newsletter Divi e ti invieremo via email una copia dell'ultimo Divi Landing Page Layout Pack, oltre a tonnellate di altre incredibili risorse Divi gratuite, suggerimenti e trucchi. Seguici e diventerai un maestro Divi in ​​pochissimo tempo. Se sei già iscritto, digita il tuo indirizzo e-mail qui sotto e fai clic su download per accedere al pacchetto di layout.

SCARICA

Ti sei iscritto con successo. Controlla il tuo indirizzo e-mail per confermare la tua iscrizione e ottenere l'accesso ai pacchetti di layout Divi settimanali gratuiti!

1. Aggiungi categorie di post

Vai alle categorie di post

La prima parte della creazione del modello di posizione di lavoro aperta consiste nell'aggiungere nuove categorie di post che utilizzerai per le posizioni di lavoro aperte che aggiungi. Vai alle categorie di post all'interno della dashboard di WordPress.

Aggiungi categorie di posizioni lavorative aperte

Aggiungi una categoria principale e una categoria separata per ogni reparto.

• Apertura di lavoro
  • Comunicazioni
  • Design
  • Sviluppo
  • Marketing
  • …

2. Installa ACF e imposta i campi del progetto

Installa e attiva ACF

Continua installando e abilitando il plugin gratuito Advanced Custom Fields.

Imposta gruppo di campi

Imposta un nuovo gruppo di campi andando sul dashboard di WordPress > Campi personalizzati > Aggiungi nuovo .

Vogliamo che il gruppo di campi appaia esclusivamente sui post che fanno parte della categoria genitore che abbiamo aggiunto nella parte precedente di questo tutorial. Per fare ciò, assicurati che le seguenti regole si applichino al gruppo di campi:

• Tipo di post è uguale a Post e
• La categoria del post è uguale all'apertura di lavoro

Aggiungi campi

Una volta creato il gruppo di campi, è il momento di aggiungere i diversi campi. Per ricreare esattamente lo stesso modello dell'anteprima di questo tutorial, avrai bisogno dei seguenti campi personalizzati:

• Responsabilità
  • Etichetta del campo: Responsabilità
  • Tipo di campo: area di testo
• Esperienza richiesta
  • Etichetta del campo: esperienza richiesta
  • Tipo di campo: Wysiwyg Editor
• Competenze richieste
  • Etichetta del campo: Competenze richieste
  • Tipo di campo: Wysiwyg Editor
• Qualifiche bonus
  • Etichetta del campo: qualifiche bonus
  • Tipo di campo: Wysiwyg Editor
• Posizione
  • Etichetta del campo: Posizione
  • Tipo di campo: testo
• Tipo di lavoro
  • Etichetta campo: tipo di lavoro
  • Tipo di campo: casella di controllo
  • Scelte: Full-time + Part-time + Freelance (nuova riga per ogni scelta)
• Applica reindirizzamento
  • Etichetta campo: Applica reindirizzamento
  • Tipo di campo: URL

3. Aggiungi un nuovo post sul blog

Aggiungi titolo di posizione aperta, descrizione breve e categorie

Dopo aver completato il gruppo di campi personalizzati e tutti i relativi campi, è il momento di creare un esempio di posizione di lavoro aperta. Inserisci il titolo, la descrizione del lavoro e seleziona le categorie.

Compila tutti i campi personalizzati

Continua completando tutti i campi personalizzati.

4. Crea nuovo modello

Vai a Divi Theme Builder e aggiungi un nuovo modello

Una volta che il tuo post di esempio sul blog è a posto, è il momento di creare il modello di posizione di lavoro aperta! Per farlo, vai al Divi Theme Builder e fai clic su "Aggiungi nuovo modello".

Usa acceso

Usa il modello sui post nella categoria Job Opening.

5. Inizia a costruire il corpo del modello

Ora, inizia a costruire il design facendo clic su "Aggiungi corpo personalizzato" e selezionando "Crea corpo personalizzato". Questo ti reindirizzerà all'editor del modello.

Sezione 1

Sfondo sfumato

All'interno dell'editor di modelli Divi, noterai una sezione. Apri quella sezione e aggiungi uno sfondo sfumato.

• Colore 1: #ff6600
• Colore 2: #fbff30
• Direzione del gradiente: 126 gradi

Divisore inferiore

Aggiungi un divisore inferiore alla sezione successiva.

• Stile divisore: trova nell'elenco
• Altezza divisore: 8vw
• Disposizione dei divisori: sotto il contenuto della sezione

Spaziatura

E includi anche un po 'di imbottitura sul fondo.

• Imbottitura inferiore: 400 px

Aggiungi riga n. 1

Struttura della colonna

Continua aggiungendo una nuova riga alla sezione utilizzando la seguente struttura a colonne:

Aggiungi modulo Blurb alla colonna 1

Contenuto dinamico

È ora di iniziare ad aggiungere moduli! Il primo modulo di cui abbiamo bisogno nella colonna 1 è un modulo Blurb. Seleziona il contenuto dinamico della posizione per la casella del titolo e lascia vuota la casella del contenuto.

• Titolo: Posizione

Seleziona icona

Continua selezionando un'icona.

Impostazioni icona

Passa alla scheda Design e modifica le impostazioni dell'icona come segue:

• Colore icona: #ffffff
• Posizionamento immagine/icona: a sinistra
• Usa dimensione carattere icona: Sì
• Dimensione carattere icona: 25px

Impostazioni del testo del titolo

Modifica anche le impostazioni del testo H3.

• Livello titolo titolo: H3
• Carattere del titolo: Lato
• Colore del testo del titolo: #ffffff
• Dimensione del testo del titolo: 1.4rem

Animazione

Infine, rimuovi l'animazione dell'icona nelle impostazioni dell'animazione.

• Animazione immagine/icona: nessuna animazione

Clona modulo Blurb e posiziona duplicato nella colonna 2

Una volta completato il modulo Blurb nella colonna 1, puoi clonarlo una volta e posizionare il duplicato nella seconda colonna.

Cambia contenuto dinamico e icona

Assicurati di modificare il contenuto dinamico del titolo insieme all'icona.

• Titolo: Tipo di lavoro

Aggiungi modulo pulsante alla colonna 3

Aggiungi copia

Nell'ultima colonna, aggiungi un modulo pulsante. Aggiungi una copia a tua scelta.

Collegamento dinamico

Seleziona il link di reindirizzamento applica dinamico successivo.

• URL collegamento pulsante: applica reindirizzamento
• Destinazione collegamento pulsante: nella nuova scheda

Allineamento

Passa alla scheda di progettazione del modulo e modifica l'allineamento su diverse dimensioni dello schermo.

• Allineamento dei pulsanti: destra (desktop), sinistra (tablet e telefono)

Impostazioni dei pulsanti

Stile anche il pulsante.

• Usa stili personalizzati per pulsante: Sì
• Dimensione del testo del pulsante: 1rem
• Colore del testo del pulsante: #ff6600
• Colore di sfondo del pulsante: #ffffff
• Larghezza bordo pulsante: 0px

• Raggio del bordo del pulsante: 100 px
• Carattere pulsante: Montserrat
• Stile carattere pulsante: maiuscolo

Spaziatura

E completa le impostazioni del modulo aggiungendo alcuni valori di riempimento personalizzati alle impostazioni di spaziatura.

• Imbottitura superiore: 15px
• Imbottitura inferiore: 15px
• Imbottitura sinistra: 50 px
• Imbottitura destra: 50px

Aggiungi riga #2

Struttura della colonna

Alla prossima riga! Scegli la seguente struttura di colonne:

Aggiungi modulo di testo alla colonna

Contenuto dinamico

Aggiungi un nuovo modulo di testo alla colonna e seleziona il contenuto dinamico del titolo del post.

• Contenuto dinamico: titolo post/archivio

• Prima: <H1>
• Dopo: </H1>

Impostazioni testo H1

Passa alla scheda di progettazione del modulo e modifica le impostazioni del testo H1 di conseguenza:

• Carattere dell'intestazione: Montserrat
• Peso del carattere dell'intestazione: pesante
• Colore del testo dell'intestazione: #ffffff
• Dimensione del testo dell'intestazione: 8 rem (desktop), 4 rem (tablet), 2,5 rem (telefono)

Aggiungi modulo divisore alla colonna

Visibilità

Il modulo successivo di cui abbiamo bisogno è un modulo divisore. Assicurati che l'opzione "Mostra divisore" sia abilitata.

• Mostra divisore: Sì

Linea

Cambia poi il colore della linea del modulo.

• Colore linea: #ffffff

Dimensionamento

Modifica anche le impostazioni di dimensionamento.

• Peso del divisore: 8px
• Larghezza: 30%
• Allineamento del modulo: a sinistra

Aggiungi sezione #2

Spaziatura

Alla prossima sezione! Rimuovi tutta l'imbottitura superiore predefinita.

• Imbottitura superiore: 0px

Aggiungi riga n. 1

Struttura della colonna

Aggiungi una nuova riga alla sezione utilizzando la seguente struttura di colonne:

Spaziatura

Apri le impostazioni della riga e rimuovi il riempimento superiore predefinito.

• Imbottitura superiore: 0px

Aggiungi modulo contenuto post alla colonna

Colore di sfondo

Aggiungi un modulo di contenuto del post alla riga e cambia il colore di sfondo in bianco.

• Colore di sfondo: #ffffff

Impostazioni testo

Passa alla scheda di progettazione del modulo e modifica le impostazioni del testo come segue:

• Carattere del testo: Raleway
• Dimensione del testo: 1.1rem
• Altezza riga di testo: 2.1em

Spaziatura

Successivamente, gioca con i valori di spaziatura su diverse dimensioni dello schermo.

• Margine superiore: -300 px
• Imbottitura superiore: 100 px (desktop), 50 px (tablet e telefono)
• Imbottitura inferiore: 100 px (desktop), 50 px (tablet e telefono)
• Imbottitura sinistra: 100 pixel (desktop), 50 pixel (tablet e telefono)
• Imbottitura destra: 100 px (desktop), 50 px (tablet e telefono)

Frontiera

Aggiungi anche un raggio di bordo.

• Tutti gli angoli: 20px

Scatola ombra

E completa le impostazioni del modulo aggiungendo un'ombra sottile.

• Forza sfocatura ombra scatola: 50 px
• Colore ombra: rgba(0,0,0,0.09)

Aggiungi riga #2

Struttura della colonna

Aggiungi un'altra riga utilizzando la seguente struttura di colonne:

Aggiungi il modulo di testo n. 1 alla colonna

Aggiungi contenuto H2

Aggiungi un modulo di testo alla colonna della riga con alcuni contenuti H2.

Impostazioni testo H2

Modificare le impostazioni del testo H2 del modulo come segue:

• Intestazione 2 Carattere: Montserrat
• Intestazione 2 Peso del carattere: pesante
• Colore testo titolo 2: #ffa500
• Intestazione 2 Dimensioni del testo: 1,5 rem

Aggiungi modulo divisore alla colonna

Visibilità

Il modulo successivo di cui abbiamo bisogno è un modulo divisore. Assicurati che il modulo "Mostra divisore" sia abilitato.

• Mostra divisore: Sì

Linea

Cambia poi il colore della linea del modulo.

• Colore linea: #ffa500

Dimensionamento

E completa le impostazioni del modulo giocando con le impostazioni di dimensionamento.

• Peso del divisore: 6px
• Larghezza massima: 80 px

Aggiungi il modulo di testo n. 2 alla colonna

Contenuto dinamico

Il prossimo e ultimo modulo di cui abbiamo bisogno in questa colonna è un altro modulo di testo. Seleziona il contenuto dinamico pertinente.

• Contenuto dinamico: esperienza richiesta

Assicurati di abilitare l'HTML non elaborato.

• Abilita HTML non elaborato: Sì

Impostazioni testo

Passa alla scheda di progettazione del modulo e modifica le impostazioni del testo di conseguenza:

• Carattere del testo: Raleway
• Dimensione del testo: 1.1rem

Impostazioni testo elenco non ordinato

Modifica anche l'altezza della riga dell'elenco non ordinato.

• Altezza riga elenco non ordinato: 2.3em

Spaziatura

Quindi, vai alle impostazioni di spaziatura e aggiungi alcuni valori di riempimento personalizzati.

• Imbottitura superiore: 50px
• Imbottitura inferiore: 50 px
• Imbottitura sinistra: 50 px
• Imbottitura destra: 50px

Frontiera

Aggiungi anche un raggio di bordo.

• Tutti gli angoli: 20px

Scatola ombra

E completa le impostazioni del modulo aggiungendo un'ombra sottile.

• Forza sfocatura ombra scatola: 50 px
• Colore ombra: rgba(0,0,0,0.09)

Aggiungi riga #3

Struttura della colonna

Fino all'ultima riga! Utilizzare la seguente struttura a colonne:

Clona i moduli nella colonna 2 due volte e posiziona i duplicati nelle colonne 1 e 2 della nuova riga

Clona due volte i moduli che hai aggiunto alla riga precedente e posiziona i duplicati nella nuova riga.

Modifica modulo di testo #1 Copia

Assicurati di cambiare la copia H2 di ogni modulo di testo duplicato.

Modifica contenuto dinamico modulo n. 2 di testo

Insieme al contenuto dinamico.

• Contenuto dinamico: competenze richieste

• Contenuto dinamico: qualifiche bonus

Ancora una volta, assicurati che l'HTML non elaborato sia abilitato per entrambi i moduli di testo che contengono contenuto dinamico.

• Abilita HTML non elaborato: Sì

6. Salva le modifiche del generatore di temi e visualizza il risultato

Una volta completato il corpo del modello, puoi salvare tutte le modifiche del generatore di temi e visualizzare il risultato sul tuo post di posizione di lavoro aperto di esempio!

Anteprima

Ora che abbiamo seguito tutti i passaggi, diamo un'ultima occhiata al risultato su schermi di diverse dimensioni.

Desktop

Mobile

Pensieri finali

In questo post, ti abbiamo mostrato come creare un modello di posizione di lavoro aperta dinamico e completamente personalizzabile utilizzando Divi Theme Builder e il plug-in ACF. Abbiamo utilizzato solo contenuti dinamici nel nostro modello di post, il che semplifica l'aggiunta di future posizioni di lavoro aperte al tuo sito web. Sei stato anche in grado di scaricare il file JSON gratuitamente! Se hai domande, non esitare a lasciare un commento nella sezione commenti qui sotto.

Se non vedi l'ora di saperne di più su Divi e di ricevere altri omaggi su Divi, assicurati di iscriverti alla nostra newsletter e al canale YouTube in modo da essere sempre una delle prime persone a conoscere e ottenere vantaggi da questo contenuto gratuito.