CERTIFICAZIONE DIGITAL MARKETING QUALCHECOSA

___________

Ciao, questa è la pagina del Digital Marketing qualche cosa e oggi ci facciamo una pagina di test.
Questa sezione con sfondo gradiente è la TESTATA.
Per farla dobbiamo creare una sezione a due colonne: in questa a sinistra inseriamo un modulo testo con l’H1 e il body formattato come vedete (sbirciate nel pannello impostazioni) e un pulsante con ancora (avete visto il video dove spieghiamo cos’è e come si crea un’ancora nella pagina?); nella colonna di destra, un modulo immagine.

p.s.: fai attenzione ai padding dei vari elementi e alle interlinee.. e poi, il pulsante ha un effetto hover!

web content 466
analytics Converted

Scegli il Digital Marketing Qualchecosa!

Se sei arrivato qui sei nella seconda sezione della pagina, la definiremo introduttiva. Anche qui devi creare una sezione con una riga a due colonne e la disposizione degli elementi è la stessa dell’header, ma speculare: un modulo immagine a sinistra e un testo con un H2 e un body a destra, più un pulsante, o CTA, che fa solo colore.

Scusami se uso un po’ di tecnichese, ma è per abituarci. :)

Fai attenzione, anche qui, a formattazione, padding, interlinee etc.

Seconda sezione!

Questa seconda sezione varia un po’ gli elementi e la struttura.

Una sezione, come vediamo, può contenere più righe, e dal momento che le righe possono avere diversi tipi di strutture interne, possiamo variare l’architettura informativa delle pagine. Qui abbiamo una riga a due colonne. In questa di sinistra c’è un modulo immagine e in quella di destra un modulo gallery. Le immagini che ci metterete dentro non sono importanti, pescatele liberamente dalla library del wordpress ma fate attenzione, se usate formati differenti si sforma!

libro especialista redes sociales

Questa seconda riga l’ho suddivisa in 4 colonne. Ogni colonna ha un modulo immagine con un’icona isometrica e del testo sottostante.

libro especialista redes sociales

Questo può costituire un buon metodo per raccontare in modo infografico una serie di caratteristiche, un elenco di argomenti, un pacchetto di prodotti e così via.

Icona wex

Sarebbe importante che i contenuti degli elementi in linea, come in questo caso, risultino omogenei nelle lunghezze, e quanto più possibile allineati tra di loro

wex

Non sempre questo effetto è facile da raggiungere perché a volte il copy eccede gli spazi del layout. In quel caso, cercate di organizzare le informazioni in modo migliore

smm specialist icon

Ciao, io sono modulo un BLUR

______

Il modulo blur si compone di Immagine (o icona), Titolo e testo interno.

 

pc-icon

A che serve un BLUR?

__________

Questo modulo ti permette velocemente di ottenere un blocchetto infografico completamente linkabile.

 

mouse-icon

Il Social Media Coso fa questo e quello

__________

A me mi piace fare Il Social Media Coso, e a te?

 

pc-icon

A che serve un BLUR?

__________

A me mi piace fare Il Digital Marketing Qualche Cosa, e a te?

Una sezione speciale

Questa è una sezione speciale nel senso che è proprio una “sezione speciale di divi” (dovresti averla incontrata nel materiale di formazione). Ha una struttura inedita che permette degli incapsulamenti di righe in altre righe.

A sinistra, come vedi, ho una colonna con incapsulate due righe a due colonne con dei moduli BLUR. Questo modulo rosso invece è un modulo CALL TO ACTION.

Serve a creare velocemente una maschera con Titolo, testo e pulsante. Sia questo che il modulo blur è possibile da realizzare anche componendo autonomamente sezioni, righe e blocchi, ma se sai che ti serve questo, meglio avere un modulo dedicato, giusto?

p.s.: Se non metti nell’url di collegamento un link, il pulsante non comparrà- Se non hai un link da mettere, puoi inserire l’#

Io sono un TITOLO H2

%

Io sono un CERCHIO CONTATORE

%

Pficati in tanti modi

%

Posso dimostrare i seguiti dei progetti

%

Migliorano l'aspetto grafico della pagina

Io sono un accordino Questo è il contenuto dell’accordino.
Io sono un secondo accordino Testo dell’accordino
Io sono un terzo accordino Testo terzo accordino

Un’altra sezione!

Questa sezione assomiglia alla seconda, ma con una differenza.

Una sezione, come vediamo, può contenere più righe, e dal momento che le righe possono avere diversi tipi di strutture interne, possiamo variare l’architettura informativa delle pagine. Qui abbiamo una riga a due colonne. In quella di sinistra c’è un modulo accordino e in questa di destra un modulo testo.

QUESTA È UNA SEZIONE A LARGHEZZA PIENA CON DOPPIA CTA

Questa è una sezione predisposta per avere queste caratteristiche: Larghezza intera, uno sfondo gradiente e un’immagine di sfondo con effetto parallasse, e scrivere Titolo, sottotitolo e testo e due pulsanti. Non è una soluzione che mi faccia impazzire perché non puoi intervenire bene sugli spazi interni: puoi fare molto meglio costruendoti qualcosa tu.. ma è bene che tu conosca questa soluzione.

La tua ancora puntava qui!

Sezione facile: riga a due colonne con due moduli testo.
Una con questo testo, l’altra ospita l’url di un video.
Se metti l’url di un video linkabile in un modulo testo, si comporta come un modulo video, ovvero appare direttamente l’anteprima del video incapsulato nella pagina con tutto il suo player.

Come mai non usiamo il modulo video?
Ogni tanto il modulo video di Divi si formatta male all’interno della pagina, quindi abbiamo osservato sia meglio procedere in questo modo. Niente vi vieta però di usare il modulo video, se volete provarlo.

Certificazioni – Titolo H2

Sotto questa sezione che contiene il titolo H2 andremo a creare una seconda sezione divisa in 2 colonne dove andremo a inserire i moduli immagine per le certificazioni. Attenzione al padding di questa sezione che potrebbe avere qualche valore inserito.

success stories alessandra stefanizzi certificazione
success stories alessandra stefanizzi certificazione

Ogni landing page finisce con il modulo di contatto, quello qui a fianco.

Noterai che non è un “modulo di contatto” di divi, ma è un modulo di testo con un codice all’interno che si chiama Gravity Form. Il Gravity form lo trovi nella cartella team Visual & Ux, nel file Guide/codici. Inserendolo nel testo del modulo testo, il gravity form si genererà automaticamente.

Una cosa che non ti ho specificato è che, come avrai notato, ogni sezione ha un divisore particolare: a volte a onda, a volte trasversale, sono elementi che rendono più gradevole la pagina. Hai scoperto come farli? Nel materiale di studio c’è un tutorial apposta.

Il modulo di contatto alla sinistra è generato da un codice di Gravity Form, un plugin con cui si possono costruire moduli di contatto. Per inserirlo devi creare un modulo testo e mettere nell’HTML questo codice