Esempio con (quasi tutti?) gli elementi di WP bakery

Questa pagina contiene gli esempi di (quasi? 🙂 ) tutti i tipi di elemento che si possono inserire con l’editor visuale, cioè quelli nell’immagine qui sotto:

Può essere utile per sapere quali sono tutti gli strumenti disponibili, che sono veramente tanti, perciò è bene averne il controllo.

Questa pagina dovrebbe servire soprattutto a questo:

  1. sai già grossomodo che struttura vuoi dare alla pagina che stai creando (magari hai preso spunto da siti esistenti oppure l’hai abbozzata con carta e penna)
  2. individui con quali fra questi elementi puoi realizzare la tua pagina.

Infatti sapere già in anticipo cosa s’intende creare ti indirizza la mente a scegliere e riconoscere gli elementi che fanno al caso tuo.

Se invece vuoi creare una pagina ma non hai ancora idea di come strutturarla, secondo me non è saggio andare a caccia di idee guardando queste decine di elementi possibili, perché (sempre secondo me) così si disperdono le energie e la concentrazione.

Quindi, credo sia meglio procedere così:

  1. Fai una bozza di quello che vuoi realizzare, magari prendendo spunti da altri siti ben fatti
  2. Individua in questa pagina quali elementi ti servono per realizzare la tua bozza.

P.S. Le linee tratteggiate che vedi non fanno parte di nessun tipo di elemento, ma servono solo a capire dove comincia e dove finisce ogni singolo elemento.

P.P.S. importante: alcuni tipi di elemento includono una parte con il “normale” editor del Blocco Testo. (cioè l’immagine che vedi qui a lato). Questa caratteristica li rende molto flessibili perché in quel modo, oltre a sfruttare le caratteristiche proprio del tipo di elemento, in più dentro ci puoi mettere un po’ di tutto appunto attraverso l’editor Blocco testo (quindi un paragrafo, del copy, delle headline, degli elenchi…). Perciò credo che gli elementi che includono una parte con l’editor del Blocco testo siano molto adattabili agli usi che uno si prefigge.
Perciò, negli elementi in questa pagina che comprendono l’editor Blocco Testo ci ho scritto “Qui c’è l’editor Blocco Testo.”

P.P.P.S. Inoltre alcuni tipi di elemento supportano l’inserimento al loro interno di qualsiasi tipo di elemento. Questi sono ancora più flessibili perché, oltre a poterci inserire l’elemento blocco testo, ci possiamo inserire anche qualsiasi altro tipo di quelli presenti in questa pagina.
Per riconoscere in questa pagina gli elementi che supportano di “contenere” qualsiasi tipo di altro elemento, ci ho scritto dentro, appunto, che ci si può inserire qualsiasi tipo di elemento.

Buona composizione! 😀

Questa colonna è visibile solo su device tipo desktop (“Large“)

Questa colonna è visibile solo su device tipo tablet in orizzontale (“Medium“)

Questa colonna è visibile solo su device tipo tablet in verticale (“Small“)

Questa colonna è visibile solo su device tipo smartphone (“Extra small“)

Questo è l’elemento “Icona con testo”. Qui c’è l’editor Blocco Testo.

Qui sotto c’è l’elemento “Facebook Page”

Qui sotto c’è l’elemento Form PopUpCampaigner.

Questo campo è obbligatorio
Immettere un indirizzo e-mail valido
Spuntare questa casella per proseguire
Selezionare un valore dall'elenco

Qui sotto c’è l’elemento Count Down.

Ho impostato la scadenza nel formato aaaa-mm-gg-hh-mm come indicato nell’editor dell’elemento, cioè ho scritto 2020-02-12-16-00, ma non funziona. 🙁

00 GIORNI E
00:00:00

Qui sotto c’è l’elemento Count Down Evergreen (beta),

che in pratica non è un vero countdown nel senso che non finirà a una data veramente prefissata, ma è un conto alla rovescia che parte nel momento in cui il visitatore apre la pagina. Per esempio, se lo imposto a 1 giorno e 10 minuti come ho fatto qui, ogni volta che il visitatore apre questa pagina, il conto alla rovescia comincerà sempre da 1 giorno e 10 minuti, ogni volta.

Comunque pare non funzioni 🙁

0 GIORNI E
00:00:00

Qui sotto c’è l’elemento Icona.

Qui sotto c’è l’elemento Separatore (una linea orizzontale).

Qui sotto c’è l’elemento ZigZag Separator.

Questo è l'elemento Separatore con testo. (si può anche mettere un'icona a scelta, come vedi qui a sinistra)

Questo è il testo dell’elemento Messaggio Box. Qui c’è l’editor Blocco Testo.

Questo è il titolo principale dell'elemento Hover Box

Questo è il titolo dell'elemento "Hover Box"

Questo è l’Hover text dell’elemento Hover Box (la sua descrizione nell’editor è: “Animated flip box with image and text”). Qui c’è l’editor Blocco Testo.

Qui sotto c’è l’elemento Facebook Like

Qui sotto c’è l’elemento Pulsante Tweetmeme.

Qui sotto c’è l’elemento Pinterest.

Qui sotto ci sono cinque elementi dello stesso tipo, cioè il tipo “FAQ”.

Questo è il titolo di questo primo elemento 'FAQ'

Questo è il contenuto di questo primo elemento ‘FAQ’. Qui c’è l’editor Blocco Testo.

Questo è il titolo di questo secondo elemento 'FAQ'

Questo è il contenuto di questo secondo elemento ‘FAQ’

Questo è il contenuto di questo terzo elemento ‘FAQ’.

In questo elemento provo a lasciare vuoto il campo titolo: succede che rimane semplicemente solo il “+” da premere, in modo da far espandere l’elemento FAQ e rendere leggibile questo elemento.

Però qui ho selezionato l’opzione che questo elemento deve essere aperto quando si carica la pagina, perché altrimenti questo elemento FAQ diventa quasi invisibile. Insomma il titolo della FAQ ci vuole 🙂

Questo è il titolo di questo quarto elemento 'FAQ'. In questo elemento provo a lasciare vuoto il contenuto:

Questo è il titolo di questo quinto elemento 'FAQ'.

Questo è il contenuto di questo quinto elemento ‘FAQ’.

Qui sotto c’è l’elemento ‘Singola Immagine’.

Ha anche l’opzione di far succedere qualcosa al click sull’immagine; le opzioni sono queste:

  • Nessuno
  • Link all’immagine grande
  • Apri con Modale
  • Apri con link personalizzato
  • Zoom

Nell’elemento qui sotto ho selezionato “Apri con Modale” (clicca sull’immagine per testarlo):

Questo è il titolo dell'elemento 'Singola Immagine'

Qui sotto c’è l’elemento “Galleria Immagine”.

Ha le seguenti opzioni per presentare le immagini:

  • Flex Slider in Dissolvenza
  • Flex Slider a Scorrimento
  • Nivo Slider
  • Immagine a griglia

Nell’esempio qui sotto ho selezionato Immagine a griglia.

Inoltre l’elemento ha queste opzioni per il click sulle immagini:

  • Nessuno
  • Link all’immagine grande
  • Apri con Modale
  • Apri con link personalizzato

Nell’esempio qui sotto ho messo Apri con Modale (clicca un’immagine per testarlo)

Questo è il titolo dell'elemento 'Schede'.

Questo è un primo elemento Blocco testo che è contenuto nell’elemento Sezione di questa scheda. Qui c’è l’editor Blocco Testo.

Al posto di questi elementi “Blocco testo” di esempio, si può inserire qualsiasi altro tipo di elemento.

Questo è un secondo elemento Blocco testo che è contenuto nell’elemento Sezione di questa scheda.

Questo è un elemento “Blocco testo” inserito nella seconda scheda.

Questo è un elemento “Blocco testo” inserito nella terza scheda.

Questo è un elemento Blocco testo, che non è contenuto in nessuna scheda, ma compare sotto qualsiasi scheda si attivi.

Per ottenere ciò è sufficiente che questo elemento non sia inserito nella sezione di una scheda, ma fuori da qualsiasi sezione.

Anche qui, al posto di questo esempio Blocco testo, si può inserire qualsiasi tipo di elemento.

Comunque:

quando si clicca su una scheda per passare appunto da una scheda all’altra, si attiva un’animazione (provala) che personalmente vorrei disattivare ma non trovo l’opzione per farlo.

(Fine dell’elemento Schede)

Questo è il titolo dell'elemento 'Tour' (è perfettamente analogo all'elemento 'Schede'" qui sopra, con la sola differenza che non è possibile inserire un elemento che sia visibile sotto qualsiasi sezione sia attiva)

Elemento Blocco testo inserito nella Sezione1. Si può inserire qualsiasi tipo di elemento.

Altro elemento Blocco testo inserito nella Sezione1.

Elemento Blocco testo inserito nella Sezione2.

Questo è il titolo dell'elemento 'Fisarmonica'. Anche qui non trovo un'opzione per disattivare l'animazione quando si espande o si contrae una sezione.

Questo è il primo elemento ‘Blocco testo’ inserito nella prima sezione di questa Fisarmonica. Si può inserire qualsiasi tipo di elemento.

Questo è il secondo elemento ‘Blocco testo’ inserito nella prima sezione di questa Fisarmonica.

Questo è un elemento ‘Blocco testo’ inserito nella seconda sezione di questa Fisarmonica.

Questo è un elemento ‘Blocco testo’ inserito nella terza sezione di questa Fisarmonica.

Questo è il titolo dell'elemento 'Pageable Container Settings'.

Questo è un elemento ‘Blocco testo’ inserito nella prima sezione di questo Pageable Container. Anche qui si può inserire qualsiasi tipo di elemento.

Questo è un elemento ‘Blocco testo’ inserito nella prima sezione di questo Pageable Container.

Questo è un elemento ‘Blocco testo’ inserito nella prima sezione di questo Pageable Container.

Questo è un elemento ‘Blocco testo’ inserito nella seconda sezione di questo Pageable Container.

Questa è la Heading dell'elemento «Call to Action». Ho selezionato come Style l'opzione 3d«»

Questa è la Subheading

Questo è il testo dell’elemento Call to Action. Qui c’è l’editor Blocco Testo.

Per far comparire l’icona, si deve abilitare l’opzione “Add icon”.

 

(Per far comparire il pulsante qui sotto, bisogna attivare l’opzione «Add button»)

Questo è il titolo dell'elemento «Widgetised Sidebar». In pratica inserisce una barra laterale dentro la pagina.

Tuo figlio ha 4 in matematica? Clicca qui per scoprire le 7 cause di voti bassi e ansia

Questo è il titolo dell'elemento «Video Player» (da YouTube o Vimeo)

Questo è il titolo dell'elemento «Google Maps»

Questo è l'elemento Codice HTML

Qui puoi scrivere o incollare codice HTML

Qui sotto c’è l’elemento “Codice JS”,

in cui puoi scrivere (o incollare) del codice Javascript.

In questa pagina, l’elemento qui sotto è invisibile perché si limita a mostrarti una finestra di testo all’apertura della pagina

(Qui sopra c’è l’elemento “Codice JS”)

Questo è il titolo dell'elemento «Widget Flickr» (bisogna incollare nell'editor l'ID Flickr di cui mostrare il Feed)

Visualizza streaming su flickr

Questo è il titolo dell'elemento «Barra di caricamento»

Development
Design
Marketing

Qui sotto c’è l’elemento “Pie chart”

Questo è il titolo dell'elemento 'Pie Chart'

Questo è il titolo dell'elemento Round Chart

  • Titolo 1
  • Titolo 2

Questo è il titolo dell'elemento Line Chart

  • Titolo 1
  • Titolo 2

Qui sotto c’è l’elemento “Empty space”,

cioè uno spazio vuoto di cui si può impostare esclusivamente l’altezza.

(Qui sopra c’è l’elemento “Empty space”)

Qui sotto c’è l’elemento “Post Grid”

Teorema di pitagora: spiegazione scuola media

In questo video vediamo: che cos’è il Teorema di Pitagora, cosa significa e a cosa serve

Come si calcola la radice quadrata e cosa significa

In questo video ti mostro: Cos’è la radice quadrata, come si calcola a mano e come si controlla se il risultato è giusto

Come si trasforma una frazione in numero decimale – Seconda Media

In questo video di #MATElaspiego 🙂 vediamo come si trasforma la frazione in decimale nei tre possibili casi: si ottiene un numero senza virgola si ottiene un numero con la virgola limitato, cioè “che finisce” si ottiene un numero con la virgola illimitato, cioè con cifre che si ripetono all’infinito. Metti PLAY qui sotto

Perché per tuo figlio è DURA studiare?

E perché con la matematica È ANCORA PIÙ DURA ? 👨‍🦱 Quali piccoli eventi lungo la sua vita l’hanno fatto arrivare anche a ODIARE la matematica? 🧑 Cosa potrebbe ancora avvenire lungo la sua istruzione, cioè nel suo FUTURO? Nella diretta che vedi qui sotto registrata, tocchiamo questi argomenti dell’istruzione attraverso un ⏪REWIND della mia […]

Scomposizione in fattori – Prima Media (e argomento valido SEMPRE)

In questo video di #MATElaspiego 🙂 capiamo come si fa la scomposizione in fattori, cioè: come si fa a scomporre un numero, usando i numeri primi e alla fine come si deve riscriverlo sotto forma di moltiplicazione. Questo è stato il mio primo video creato per la fase #Coronavirus ❣ Metti PLAY qui sotto:

Equazioni di Primo Grado: Soluzione e Verifica – Terza Media

In questo video di #MATElaspiego 😀 ti mostro: come si risolve un’equazione di primo grado e come si verifica che la soluzione è davvero giusta. Tocca PLAY qui sotto:

Scuola da casa con mezzi di emergenza

🇮🇹📣 – Scuola da casa – Video IMPORTANTISSIMO!!! – 📢🇮🇹 Le videolezioni in quarantena spesso hanno una grave difficoltà: l’insegnante non ha modo di far vedere qualcosa su cui scrive per accompagnare la spiegazione, come normalmente si fa con la lavagna. In questo video propongo una soluzione pratica a questo problema, da fare con mezzi […]

Libri scolastici Amazon: come prenderli anche senza carta di credito

Nel breve video qui sotto puoi vedere le istruzioni passo passo per prendere i libri scolastici su Amazon per tuo figlio. Nel video vedrai la procedura su telefono Android, ed è identica anche se vuoi farla da: Table iPhone iPad e da computer, sia PC che Mac. Trovo questo sistema molto comodo, perché:

Figli e tecnologia: l’impatto sui ragazzi e l’esigenza di guidarli

Qual’è oggi il rapporto tra figli e tecnologia? Possiamo riuscire a gestirlo? Tra cellulare, tablet e computer, i nostri ragazzi stanno davvero tanto su internet. Gli utilizzi che possono farne sono numerosi, è vero, ma per gestirli si possono

Mio figlio sta sempre al cellulare

Ogni volta che parliamo tra genitori, è immancabile dirci: «mio figlio sta sempre al cellulare». Tanta tecnologia in mano ai nostri figli ci mette la seria preoccupazione di insegnargli a distinguere gli usi giusti da quelli sbagliati. In quali modi internet, cellulari e tablet possono essere un danno per la generazione dei nostri ragazzi? E […]

Qui sotto c’è l’elemento Media Grid

Qui sotto c’è l’elemento Post Masonry Grid

Qui sotto c’è l’elemento Masonry Media Grid

Questo è il titolo dell’elemento WP Meta

Questo è il titolo dell’elemento WP Commenti recenti

Questo è il titolo dell’elemento WP Calendario

Maggio: 2021
LMMGVSD
 123
45678910
11121314151617
18192021222324
252627282930 

Elemento WP Pagine

Questo elemento non l’ho messo davvero in questa pagina. In pratica elenca tutte le pagine (non i post, ma appunto le pagine) che hai creato sul sito, comprese quelle che non c’è motivo di far vedere (ad esempio le Thank-you pages, le Sales, l’Omaggio magnetico…)

Però funziona in modo molto semplice, cioè ti produce proprio un elenco di tutte le pagine.

Potrebbe essere utile per creare una tua pagina di amministrazione, magari protetta da password, giusto per avere un elenco delle pagine “diverso” da quello che c’è nel normale pannello di amministrazione di WordPress.

Questo è il titolo dell’elemento WP Custom Menu

Questo è il titolo dell’elemento WP Testo

Questo è il testo dell’elemento. Qui c’è l’editor Blocco Testo.

Questo è il titolo dell’elemento WP Categorie

Questo è il titolo dell’elemento WP Archivi

Qui sotto c’è l’elemento WP RSS

Preleva le pagine da un sito esterno che mette a disposizione un suo link RSS, cioè un link tramite il quale è possibile appunto fare prelevare, da un lettore automatico come questo qui sotto, le sue pagine.

Qui sotto ho messo l’RSS della home page di Ansa.it, che Ansa rende rispondibile tramite questo link: https://www.ansa.it/sito/ansait_rss.xml

RSS Questo è il titolo dell’elemento WP RSS

Informativa sui cookie. Per funzionare al meglio, questo sito usa i "cookie". Continuando a visitarlo, dichiari di acconsentire al loro uso secondo la policy dei cookie (clicca sul link per i dettagli).

Questo campo è obbligatorio
Immettere un indirizzo e-mail valido
Spuntare questa casella per proseguire
Selezionare un valore dall'elenco
Accedi gratis alla miniguida «LOREM IPSUM»

Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Cursus Ornare Sollicitudin

NO SPAM! I tuoi dati sono al sicuro!

Questo campo è obbligatorio
Immettere un indirizzo e-mail valido
Spuntare questa casella per proseguire
Selezionare un valore dall'elenco