Vai al contenuto principale

Come creare una sezione di elenco di lavori dinamici con il modulo Blog Divi

Divi: il tema WordPress più semplice da usare

Divi: il miglior tema WordPress di tutti i tempi!

più Download di 901.000, Divi è il tema WordPress più popolare al mondo. È completo, facile da usare e viene fornito con oltre i modelli gratuiti 62. [Consigliato]

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.

Crea una pagina carriera da divi

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
Crea una sezione con uno sfondo sfumato

Divisore inferiore

Utilizzare anche un divisore di sezione inferiore.

  • Stile di separazione: cerca nell'elenco
  • Altezza divisore: 8vw
  • Ripetizione orizzontale del divisore: 3x
  • Layout del separatore: sotto il contenuto della sezione
Regolazione della sezione Divi

spaziatura

Completa i parametri della sezione aggiungendo un'imbottitura inferiore.

  • Imbottitura inferiore: 200px
Spaziatura del fondo della sezione Divi

Aggiungi una nuova linea

Struttura a colonne

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

Scegli layout divi

Aggiungi un modulo di testo alla colonna

Aggiungi contenuto H1

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

Aggiungi sezione di testo

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ì
Aggiungi modulo separatore

Linea

Quindi modificare il colore della linea del modulo.

  • Colore linea: #ffffff

dimensionamento

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

Crea facilmente il tuo sito Web con Elementor

Elementor ti consente di creare facilmente qualsiasi design di sito Web con un aspetto professionale. Smetti di pagare caro per quello che puoi fare da solo. [Free]

  • 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:

carriere dinamiche

Aggiungi un modulo di testo alla colonna

Aggiungi contenuto H2

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

Aggiungi modulo di testo divi

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
Personalizzazione testo sezione colore divi

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ì
Aggiungi separatore divi

Linea

Quindi modificare il colore della linea del modulo.

  • Colore linea: # ffa500
Personalizza separatore colore divi

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
Configurazione del separatore

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:

Stai cercando i migliori temi e plugin per WordPress?

Scarica i migliori plugin e temi WordPress su Envato e crea facilmente il tuo sito web. Già più di 49.720.000 download. [ESCLUSIVO]

  • Tipo di messaggio: messaggi
  • Includi categorie: marketing
  • Lunghezza estratto: 150
Aggiungi un modulo blog

elementi

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

  • Mostra altro pulsante: Sì
  • Estratto dallo spettacolo: Sì
Configurazione del modulo Divi blog 1

Fornitura

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

  • Layout: larghezza intera
Configurazione del layout del modulo blog 1

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
Configurazione del testo del modulo blog

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
Configurazione dei caratteri del modulo blog

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
Configurazione leggi altro modulo blog 1

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
Configurazione spaziatura

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;

Modulo blog con codice personalizzato

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 del contenuto del testo divi

Modifica categorie di moduli blog

Con le categorie del modulo Blog.

carriere dinamiche

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:

Crea facilmente il tuo negozio online

Scarica gratuitamente WooCommerce, i migliori plug-in di e-commerce per vendere i tuoi prodotti fisici e digitali su WordPress. [Consigliato]

<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>

Aggiungi il codice divi css

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 presentare questi articoli dinamici e aperti sulla tua pagina Carriere utilizzando il modulo Divi Blog. Non esitate a lasciare un commento nella sezione commenti qui sotto.

Questo articolo contiene 1 commento

  1. ciao, sono nella parte in cui devi inserire il codice, ma quando salvo e vado sul sito, lo stile non viene applicato e il codice appare online senza i tag di stile. Grazie per l'aiuto.

    Bonne journée!

Lascia un commento

L'indirizzo email non verrà pubblicato. I campi obbligatori sono contrassegnati *

Questo sito utilizza Akismet per ridurre indesiderati. Ulteriori informazioni su come vengono utilizzati i dati dei commenti.

Torna in alto
0 azioni
quota
Tweet
Enregistrer