Come creare una sezione di annunci di lavoro dinamici con Divi's Blog Module

In un precedente tutorial Divi, ti abbiamo mostrato come creare un modello di posizione di lavoro aperto completamente dinamico con Divi's Theme Builder e il plug-in Advanced Custom Fields. Nel tutorial di oggi, ti mostreremo come puoi presentare dinamicamente le posizioni di lavoro aperte nella tua pagina delle carriere. Questo tutorial è un sequel del post del modello di posizione lavorativa aperta, quindi assicurati di ricreare prima il modello e poi torna a questo tutorial.

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 layout dell'elenco di lavoro Dynamic Careers

Per mettere le mani sul layout dell'elenco di lavoro dinamico gratuito per le carriere, devi prima scaricarlo utilizzando il pulsante in basso. 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 la pagina delle carriere

Aggiungi nuova pagina e passa a Visual Builder

Inizia creando una nuova pagina, assegnando un titolo alla tua pagina e passando a Visual Builder.

2. Inizia a creare la pagina delle carriere sul frontend

Aggiungi la sezione n. 1

Sfondo sfumato

Aggiungi la prima sezione alla pagina, apri le impostazioni della sezione e usa uno sfondo sfumato.

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

Divisore inferiore

Usa anche un divisore per la sezione inferiore.

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

Spaziatura

Completa le impostazioni della sezione aggiungendo un po' di imbottitura in basso.

• Imbottitura inferiore: 200 px

Aggiungi nuova riga

Struttura della colonna

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

Aggiungi modulo di testo alla colonna

Aggiungi contenuto H1

Aggiungi un modulo di testo alla colonna della riga con un contenuto H1 a tua scelta.

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à

Proprio sotto il modulo di testo, aggiungi 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

E completa le impostazioni del modulo modificando le impostazioni di dimensionamento.

• Peso del divisore: 8px
• Larghezza: 30%

Aggiungi sezione #2

Aggiungi un'altra sezione normale alla pagina.

Aggiungi nuova riga

Struttura della colonna

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

Aggiungi modulo di testo alla colonna

Aggiungi contenuto H2

Aggiungi un modulo di testo alla colonna della riga e inserisci del contenuto H2 a tua scelta.

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 Dimensione del testo: 2.3rem

Aggiungi modulo divisore alla colonna

Visibilità

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

• Mostra divisore: Sì

Linea

Modifica successivamente il colore della linea del modulo.

• Colore linea: #ffa500

Dimensionamento

E completa le impostazioni del modulo modificando il peso del divisore e la larghezza massima nelle impostazioni di dimensionamento.

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

Aggiungi modulo blog alla colonna

Contenuto

Per visualizzare le diverse posizioni lavorative aperte, utilizzeremo un Modulo Blog che personalizzeremo in base alle nostre esigenze. Assicurati che siano applicate le seguenti impostazioni di contenuto:

• Tipo di messaggio: Post
• Includi categorie: Marketing
• Lunghezza estratto: 150

Elementi

Nelle impostazioni degli elementi, le uniche due opzioni che abilitiamo sono le seguenti:

• Mostra pulsante Leggi di più: Sì
• Mostra estratto: Sì

Disposizione

Passa alla scheda di progettazione del modulo e assicurati di utilizzare un layout a larghezza intera.

• Layout: larghezza intera

Impostazioni del testo del titolo

Modifica anche le impostazioni del testo del titolo.

• Livello titolo titolo: H3
• Carattere del titolo: Montserrat
• Dimensione del testo del titolo: 1,5 rem

Impostazioni del corpo del testo

Quindi, modifica le impostazioni del testo del corpo.

• Carattere del corpo: Raleway
• Dimensione del testo del corpo: 1.1rem
• Altezza della linea del corpo: 2.1em

Leggi di più Impostazioni testo

Insieme alle impostazioni di lettura di più testo.

• Leggi di più Carattere: Montserrat
• Leggi di più Stile carattere: maiuscolo
• Leggi di più Colore del testo: #ffffff
• Per saperne di più Dimensione del testo: 1rem

Spaziatura

Aggiungi alcuni margini personalizzati e valori di riempimento alle impostazioni di spaziatura.

• Margine sinistro: 100 pixel (desktop), 50 pixel (tablet), 0 pixel (telefono)
• Imbottitura superiore: 0px
• Imbottitura inferiore: 0px

Pulsante Leggi di più CSS

E completa le impostazioni del modulo aggiungendo alcuni CSS del pulsante Leggi altro nella scheda Avanzate.

max-width: 200px;
text-align: center;
padding: 20px;
margin-top: 40px;
border-radius: 100px;
background-image: linear-gradient(126deg,#ff6600 0%,#fbff30 100%)!important;

Clona riga tutte le volte che è necessario

Una volta completata la riga e tutti i suoi moduli, puoi clonarla fino a tutte le volte che vuoi, a seconda di quanti reparti ha la tua azienda.

Modifica il contenuto del modulo di testo

Assicurati di modificare il contenuto H2 di ogni riga duplicata.

Modifica le categorie del modulo blog

Insieme alle categorie del modulo blog.

Aggiungi modulo codice alla colonna dell'ultima riga

Inserisci il codice CSS per definire individualmente le posizioni di lavoro aperte

Per completare il design, aggiungeremo un modulo di codice all'ultima riga della nostra pagina e inseriremo le seguenti righe di codice 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. Salva il design della pagina e visualizza il risultato

Una volta completato il design della pagina, puoi salvare tutte le modifiche, uscire dal Visual Builder e visualizzare il risultato!

Anteprima

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

Desktop

Mobile

Pensieri finali

Questo tutorial è il seguito di un precedente tutorial, in cui ti abbiamo mostrato come creare un modello di posizione di lavoro aperta. In questo tutorial, abbiamo fatto un ulteriore passo avanti e ti abbiamo mostrato come mettere in evidenza quelle posizioni di lavoro aperte dinamiche nella pagina delle tue carriere utilizzando il modulo Blog di Divi. Sei stato anche in grado di scaricare il file JSON gratuitamente! Se hai domande o suggerimenti, 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.