Come creare una pagina Curriculum con DIVI, che sia dinamica e accattivante? Una domanda che i blogger si pongono ogni giorno, soprattutto per attirare ancora più clienti e mostrare a chi visita il sito le nostre abilità. Creare una pagina è semplice, ma creare una pagina Curriculum può presentare delle difficoltà. A partire dallo stile, per rendere i nostri contenuti attraenti, e molto altro ancora. Il tutorial di Wp Win ti guiderà passo passo su come realizzare il tutto: non hai bisogno di alcuna conoscenza particolare, anche se useremo un po’ di CSS. Partiamo subito!

Preview

Prima di analizzare nel dettaglio come creare una pagina Curriculum, vogliamo mostrarti il risultato che otterrai con la nostra guida. Qui di seguito puoi vedere in dettaglio il Layout finale per la versione Desktop, Tablet e Mobile. Che ne dici?

Scarica il Layout della pagina Curriculum

Abbiamo pensato anche a te, che magari sei di fretta e non hai tempo di seguire il tutorial su come creare la pagina Curriculum con DIVI. Grazie alle funzionalità base del tema premium che stiamo usando, possiamo darti la possibilità di scaricare direttamente il Layout che costruiremo con questa guida. Per poter fare il download, segui i passaggi qui sotto.

Crea la pagina Curriculum

Il tutorial su come realizzare una pagina Curriculum con Divi inizia con uno step semplice: aggiungi una nuova pagina al tuo pannello. In alternativa puoi modificare anche una già presente, che magari hai creato in precedenza e di cui non sei ancora del tutto soddisfatto.

La prima sezione

Attiva subito il Divi Builder e lavora sulla prima sezione, inserendo un gradiente per lo sfondo. Come primo colore scegli #ff6600 e come secondo #fbff30. Dai anche una direzione: 126deg. All’interno inserici anche un Modulo Separatore, grazie alla voce che trovi in Design. Inserisci lo stile che preferisci In Fondo, come quello che vedi nell’immagine qui sotto. Poi:

  • Dimensione 8vw
  • Ripetizione 3x
  • Spessore In cima al contenuto della sezione

Crea pagina Carriera Divi Modulo Separatore Prima Sezione

Aumentiamo anche lo spazio, portando a 200px il padding In Fondo.

Prima riga

Adesso possiamo passare alla prima riga, dentro cui inseriamo un modulo di testo. Prima di ogni cosa ci servirà un H1, ad esempio Curriculum. Nella scheda Design, modifichiamo alcuni parametri:

  • Font Montserrat
  • Luce Soffusa Pesante
  • Colore bianco
  • Dimensione 8rem (Desktop), 4rem (Tablet), 2.5rem (Mobile)

Modulo divisore

Nel creare una pagina Curriculum con Divi non possiamo che continuare con un Modulo Separatore. Inseriamolo al di sotto del testo precedente e facciamo queste modifiche:

  • Colore Bianco
  • Dimensione spessore 8px
  • Larghezza Massima 30%

Seconda sezione

Passiamo quindi alla seconda sezione, scegliendo come stile Standard e il Layout con una riga singola. All’interno inseriamo un modulo di testo, questa volta in H2. Una delle voci della pagina Curriculum potrebbe essere per esempio Marketing. Poi spostiamoci in Design, Testo del sottotitolo e cambiamo dei valori:

  • Font Montserrat
  • Luce Soffusa Pesante
  • Colore testo #ffa500
  • Dimensione 2.3rem

All’interno inseriamo un Modulo Separatore come abbiamo fatto poco fa, assicurandoci che il pulsante “mostra” sia attivo. Il colore sarà #ffa500. Portiamo lo spessore a 6px e la Larghezza Massima a 80px.

Modulo Blog

Subito sotto inseriamo un Modulo Blog. Rimaniamo su Contenuti, scegliamo Articoli come tipo di post e includiamo la categoria corrispondente. Abbiamo scelto Marketing, quindi dovremo fare altrettanto alla voce Categorie Incluse. Abbassiamo la lunghezza dell’estratto a 150.

Spostiamoci alla voce Elementi: come potrai notare, sono attivi tutti i campi dall’Immagine in evidenza fino alla Paginazione. Ciò che ci interessa tenere attivo in questo caso sono solo però il pulsante Read More e il Riassunto.

Assicuriamoci quindi che alla voce Layout, presente nella scheda Design, sia attiva sulla Larghezza Piena. Poi andiamo su Titolo Testo, cambiamo il livello in H3, usiamo il font Montserrat e diamo una dimensione di 1.5rem. Saltiamo tutto il resto e andiamo su Body Testo:

  • Font Raleway
  • Dimensione 1.1rem
  • Interlinea 2.1em

Lasciamo perdere il Metadata Testo e andiamo invece al Leggi di più testo. Anche in questo caso cambiamo dei valori:

  • Font Montserrat
  • Stile Maiuscolo
  • Colore #ffffff
  • Dimensione 1rem

Diamo anche un po’ di spazio aggiungendo margine e padding in Spaziatura, inserendo questi valori:

  • margine Sinistra 100px (Desktop), 50px (Tablet), 0px Mobile)
  • Padding In Cima e In Fondo 0px

Prima di chiudere il modulo Blog, spostiamoci nella scheda Avanzate e inseriamo del codice CSS personalizzato per migliorare lo stile del nostro pulsante. Per farlo, dovremo inserire la nostra porzione di codice alla voce Pulsante Continua a Leggere.

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

Adesso possiamo salvare tutto e passare allo step successivo.

Duplica l’intera riga

Creare una pagina Curriculum con Divi completa ci impone di inserire diversi contenuti. Ai navigatori che atterrano sul nostro sito vorremo far sapere le capacità che abbiamo maturato nella nostra carriera oppure i settori di cui ci occupiamo. Visto che abbiamo appena creato un modulo Blog perfetto per le nostre esigenze, non dobbiamo fare altro che clonare la riga in cui è contenuto, tutte le volte che vogliamo. Assicuriamoci solo di modificare ogni volta il titoletto in H2 del modulo testo. Naturalmente ricordiamoci anche di associare ogni riga ad una categoria specifica.

Modulo codice

Per migliorare ancora di più lo stile della nostra paginetta, inseriamo un modulo Codice alla fine della stessa e scriviamo all’interno le seguenti righe di 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>

Conclusioni

Abbiamo visto come creare una pagina Curriculum con Divi in modo dinamico: che ne pensi? Scommettiamo che hai già trovato un modo per adattare questo layout ad altre pagine del tuo sito! Speriamo comunque che ti sia stato utile e che tu abbia scoperto qualcosa in più, da poter utilizzare adesso oppure in futuro. In caso di dubbi e/o domande, lasciaci pure un commento: saremo felici di risponderti al più presto.

0 0 votes
Article Rating