Nel tutorial di oggi, ti mostreremo come visualizzare dinamicamente le offerte di lavoro nella tua pagina Carriere. Iniziamo.

Panoramica dei risultati

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

1. Crea una pagina Carriere

Aggiungi una nuova pagina e passa a Visual Builder

Inizia creando una nuova pagina, dai un titolo alla tua pagina e vai a Visual Builder.

2. Inizia a creare la pagina Carriere sul frontend

Aggiungi la prima sezione

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 gradiente: 126 gradi

Divisore inferiore

Utilizzare anche un divisore di sezione inferiore.

• Stile di separazione: cerca nell'elenco
• Altezza divisore: 8vw
• Ripetizione orizzontale del divisore: 3x
• Disposizione dei divisori: sotto il contenuto sezione

spaziatura

Completa i parametri della sezione aggiungendo un'imbottitura inferiore.

• Imbottitura inferiore: 200px

Aggiungi una nuova linea

Struttura a colonne

Continua ad aggiungere una nuova riga alla sezione utilizzando la seguente struttura di colonne:

Aggiungi un modulo di testo alla colonna

Aggiungi contenuto H1

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

Impostazioni di testo H1

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

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

Aggiungi un modulo di separazione alla colonna

visibilità

Appena sotto il modulo di testo, aggiungi un modulo separatore. Assicurati che l'opzione "Mostra separatore" sia abilitata.

• Mostra separatore: Sì

Linea

Quindi modificare il colore della linea del modulo.

• Colore linea: #ffffff

dimensionamento

E completare i parametri del modulo modificando i parametri di quotatura.

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

Aggiungi la sezione # 2

Aggiungi un'altra sezione regolare alla pagina.

Aggiungi una nuova linea

Struttura a colonne

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

Aggiungi un modulo di testo alla colonna

Aggiungi contenuto H2

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

Impostazioni di testo H2

Modificare i parametri di testo H2 del modulo come segue:

• Titolo 2 Polizia: Montserrat
• Articolo 2 Peso della politica: pesante
• Colore del testo dell'articolo 2: # ffa500
• Titolo 2 Dimensione del testo: 2.3rem

Aggiungi un modulo di separazione alla colonna

visibilità

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

• Mostra separatore: Sì

Linea

Quindi modificare il colore della linea del modulo.

• Colore linea: # ffa500

dimensionamento

E completare i parametri del modulo modificando il peso del divisore e la larghezza massima nei parametri di quotatura.

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

Aggiungi un modulo blog alla colonna

Contenuto

Per visualizzare i diversi posti vacanti, utilizzeremo un modulo blog che personalizzeremo in base alle nostre esigenze. Assicurati che vengano applicate le seguenti impostazioni di contenuto:

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

elementi

Nei parametri degli elementi, le uniche due opzioni che attiviamo sono le seguenti:

• Mostra altro pulsante: Sì
• Estratto dallo spettacolo: Sì

Fornitura

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 del titolo: H3
• Carattere del titolo: Montserrat
• Dimensione del testo del titolo: 1.5rem

Impostazioni del testo del corpo

Quindi modificare le impostazioni del corpo del testo.

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

Ulteriori informazioni Impostazioni di testo

Con le impostazioni del testo scopri di più.

• Maggiori informazioni Police: Montserrat
• Ulteriori informazioni Stile carattere: maiuscolo
• Ulteriori informazioni Colore testo: #ffffff
• Per saperne di più Dimensione del testo: 1rem

spaziatura

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

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

Ulteriori informazioni Button CSS

E completa le impostazioni del modulo aggiungendo i pulsanti di riproduzione CSS nella scheda avanzata.

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 la linea tutte le volte che è necessario

Una volta completata la linea e tutti i suoi moduli, puoi clonarla tutte le volte che vuoi, a seconda del numero di dipartimenti della tua azienda.

Modifica il contenuto del modulo di testo

Assicurati di modificare il contenuto di H2 di ogni riga duplicata.

Modifica categorie di moduli blog

Con le categorie del modulo Blog.

Aggiungi un modulo di codice alla colonna dell'ultima riga

Inserisci il codice CSS per stilizzare le singole workstation aperte

Per finire 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. Salvare il design della pagina e visualizzare il risultato

Una volta terminata la progettazione della pagina, è possibile salvare tutte le modifiche, uscire da Visual Builder e visualizzare il risultato!

Risultato finale

Ora che abbiamo eseguito tutti i passaggi, diamo un'ultima occhiata a come appare su schermi di dimensioni diverse.

Considerazioni finali

In questo tutorial, ti abbiamo mostrato come mostrare questi articoli dinamici e aperti sulla tua Pagina Carriere utilizzando il modulo Blog di Divi. Sentiti libero di lasciare un commento nella sezione commenti qui sotto.