Advanced Gutenberg : installazione di blocchi

1. Blocco pulsanti avanzato

Puoi creare un Pulsante avanzato facendo clic sul relativo pulsante nella sezione Advanced Gutenberg .

 

avanzata pulsante

 

Nel pannello di destra, è possibile regolare alcune impostazioni per il pulsante:

  • stili: 4 stili predefiniti

    • Predefinito

    • delineato

    • Squared

    • Contorno quadrato

  • Collegamento pulsante:

    • URL del link

    • Apri in una nuova scheda: On / Off.

 

ADV-button-settings

 

  • Colore del testo:

    • Dimensione del testo

    • Colore di sfondo

    • Colore del testo

 

text-color-button-settings

 

  • Confine:

    • Raggio di confine

    • Stile del bordo: solido, punteggiato, cresta, ...

    • Colore del bordo

    • Larghezza del bordo

 

adv-button-border

 

  • Margine: in alto, a destra, in basso e a sinistra.

  • Imbottitura: in alto, a destra, in basso e a sinistra.

 

avanzata-button-padding

 

  • hover:

    • Impostazioni colore: colore di sfondo, colore del testo e colore dell'ombra. 

    • Offset ombra (H (orizzontale), offset V (verticale), sfocatura, diffusione), opacità e velocità di transizione.

 

avanzata-button-hover

 

2 Blocco elenco avanzato

Puoi creare un Elenco avanzato facendo clic sul relativo pulsante nella categoria Advanced Gutenberg .

 

avanzata-list

 

Dopo aver inserito il contenuto, è possibile regolare le impostazioni dal pannello di destra:

  • Impostazioni del testo

    • Dimensione del testo

  • Impostazioni icona

    • Icona (elenco, colore e dimensioni)

    • Altezza della linea

    • Margine

    • Imbottitura

 

avanzata-list-impostazioni

 

3 Blocco riepilogativo

Puoi creare un Sommario bloccare facendo clic sul relativo pulsante nella categoria Advanced Gutenberg dopo aver impostato almeno un tag di intestazione nel post o nella pagina. Il riepilogo può essere allineato a sinistra, al centro o a destra. Per aggiornarlo, utilizzare il pulsante Aggiorna riepilogo.

 

sintesi-Gutenberg-content

 

Nel pannello di destra, ci sono alcune opzioni che puoi regolare:

  • Carico ridotto al minimo: per mostrare / nascondere il Riepilogo per impostazione predefinita

  • Titolo dell'intestazione di riepilogo: il testo dell'intestazione del Riepilogo, che viene visualizzato quando Carico ridotto al minimo l'opzione è abilitata

  • Colore di ancoraggio: scegli un colore per il Riepilogo

 

sintesi-settings

 

4 Blocco Counter (Count Up)

 

Puoi creare un Conto alla rovescia bloccare, possibilmente con un simbolo, facendo clic sul relativo pulsante nella categoria Advanced Gutenberg .

 

count-up

 

Quindi, dal pannello di destra è possibile regolare alcune opzioni per il contatore:

  • Impostazioni colore: Colore dell'intestazione, colore del conto alla rovescia e colore della descrizione

  • colonne: 1-3

  • Dimensione numero contatore: imposta la dimensione dei numeri

  • Simbolo del contatore: aggiungi un personaggio prima o dopo il segnalino

  • Interruttore: imposta la posizione del simbolo (On ​​significa che il simbolo viene dopo i numeri)

 

count-up-settings

 

5 Blocco immagine avanzato

Il Immagine avanzata Il blocco può essere utilizzato per creare un'immagine. Per aggiungerne uno, fare clic su  Immagine avanzata nella categoria Advanced Gutenberg , quindi scegli un'immagine da inserire.

 

avanzata-image-tasto

 

Successivamente, puoi cambiare il titolo dell'immagine e il suo sottotitolo. È possibile regolare le impostazioni dell'immagine dal pannello di destra.

  • Azione al clic: aprire l'immagine in una lightbox o aprire un URL personalizzato

  • URL del link: Apri collegamento in una nuova scheda (pulsante di attivazione / disattivazione)

  • Apri il link in una nuova scheda: Acceso spento

  • Dimensione dell'immagine: se l'immagine deve essere visualizzata a larghezza intera o con altezza e larghezza personalizzate

 

avanzata-immagine-settings

 

  • Selettore punti focali: selezionare il punto per mettere a fuoco sull'immagine o impostare la posizione orizzontale / verticale

  • Opacità di sovrapposizione predefinita

  • Sovrapposizione di opacità al passaggio del mouse

  • Impostazioni colore: Colore del titolo, colore dei sottotitoli, colore della sovrapposizione

  • Allineamento del testo: Allineamento verticale (in alto, al centro, in basso), allineamento orizzontale (a sinistra, al centro, a destra)

 

adv-image-hover

 

6 Blocco testimonianze

Puoi inserire una testimonianza nel tuo contenuto facendo clic su testimoniale pulsante nella categoria Advanced Gutenberg . Quindi, puoi modificare l'avatar, il nome, la posizione e la descrizione della testimonianza.

 

testimonial-button

 

Infine, nel pannello di destra è possibile regolare le impostazioni per il Testimonial. Quando l'opzione di visualizzazione Slider è disabilitata, ecco le impostazioni:

  • colonne: L'intervallo di colonne nella vista Normale è 1-3 e nella vista Cursore è 4-10.

  • Avatar: Dimensioni dell'avatar, colore dello sfondo e impostazioni del bordo, che includono colore, raggio e larghezza

  • Colori del testo:

    • Nome Colore

    • Posizione colore

    • Descrizione Colore

 

testimonial-settings

 

Quando si abilita Vista a scorrimento opzione, appariranno alcune opzioni aggiuntive per il dispositivo di scorrimento:

  • Numero di articoli
  • Articoli da mostrare
  • Elementi da scorrere

slider-view colonne

  • Modalità centrale
  • Pausa al passaggio del mouse
  • Riproduzione automatica
  • Velocità di riproduzione automatica (ms)
  • Ciclo infinito
  • Velocità di transizione (ms)
  • Mostra punti
  • Mostra le frecce
  • Dimensione della freccia

 

cursore-settings

  • Colori dei cursori:
    • Colore freccia e bordo
    • Punti di colore

 

slider-colore

 

7 Blocco mappa

Per utilizzare il Carta geografica bloccare, è necessario aggiungere una chiave API di Google nella configurazione. Dopodiché, dovresti seguire questo  collegamento, clicca su Abilita API e servizi pulsante, quindi cerca e abilita API di geolocalizzazione, API JavaScript di Maps.

Una volta aggiunto, è possibile creare la mappa facendo clic su Carta geografica pulsante nella categoria Advanced Gutenberg .

 

map-block

 

Dal pannello di destra, è possibile inserire una posizione immettendo Latitudine e Longitudine o immettendo un indirizzo e quindi premendo il pulsante Visualizza posizione.

Sono disponibili alcune opzioni aggiuntive per la mappa:

  • Livello di zoom

  • Altezza

  • Icona marcatore

  • Titolo marcatore

  • Descrizione del marker

  • Apri tooltip marker

  • Stili della mappa: argento, retrò, notte, ... e puoi anche aggiungere il tuo stile personalizzato.

 

map-settings

 

8 Blocco video avanzato

È possibile creare un video per un post facendo clic su Video avanzato pulsante nella sezione Advanced Gutenberg . Quindi, puoi incollare l'URL da Youtube o Vimeo o utilizzare qualsiasi video locale dal tuo server. È possibile modificare l'immagine di anteprima facendo clic sul pulsante Modifica nell'angolo in alto a sinistra.

 

video avanzato

 

Successivamente, puoi regolare le impostazioni per il video nel pannello di destra.

  • Apri video in light box: la lightbox offre opzioni di visualizzazione aggiuntive

  • Intera larghezza: se è spento, devi impostare una larghezza personalizzata per il video

  • Altezza video

  • Impostazioni colore: Colore sovrapposizione e colore pulsante Riproduci

  • Tasto Play: Stile icona, dimensioni pulsante riproduzione

 

avanzata-video-settings

 

9 Blocco tabella avanzato

È possibile creare una tabella facendo clic su Tabella avanzata pulsante nella categoria Advanced Gutenberg .

 

avanzata-table-tasto

 

È possibile modificare la tabella dopo aver impostato il numero di colonna e riga.

 

avanzata-table

 

Successivamente, puoi inserire testo o regolare righe e colonne dall'editor stesso appena sopra il blocco tabella. Altre impostazioni possono essere modificate nel pannello di destra.

  • stili

    • Predefinito

    • Stripe s

 

style-table

 

  • Impostazioni tabella

    • Larghezza massima: Impostalo su 0 per rendere la larghezza massima equivalente al 100%

    • Celle di tabella a larghezza fissa

    • Intestazione della tabella, footer

    • Il confine è crollato

 

avanzata-table-settings1

 

  • Impostazioni cella

    • Impostazioni colore: Colore di sfondo, Colore del testo

    • Confine: stile, colore e larghezza del bordo

    • Imbottitura: imbottitura superiore, inferiore, sinistra e destra

    • Allineamento del testo: allineamento orizzontale e verticale

 

singole cellule-settings

 

Puoi anche unire le celle (usando il tasto Maiusc) e dividere le celle unite con il Tabella avanzata bloccare.

10 Blocco avanzato della fisarmonica

Puoi creare un Fisarmonica Avanzata quando è necessario visualizzare più contenuti in un'area più piccola facendo clic su Avanzate Fisarmonica pulsante nella categoria Advanced Gutenberg . Successivamente, per impostazione predefinita verranno visualizzati 2 elementi di fisarmonica di gruppo.

 

adv-fisarmonica-block

 

Una volta creato, puoi regolare le opzioni di intestazione, corpo o bordo dal pannello di destra.

  • Impostazioni della fisarmonica:

    • Distanza inferiore: Definire lo spazio tra ciascuna fisarmonica (solo vista Frontend)

    • Iniziale compresso: Fai crollare tutte le fisarmoniche per impostazione predefinita.

  • Impostazioni intestazione

    • Stile icona intestazione

    • Impostazioni colore: Colore di sfondo, Colore testo e Colore icona

 

adv-fisarmonica-header

 

  • Impostazioni di colore del corpo

    • Colore di sfondo

    • Colore del testo

  • Impostazioni del bordo

    • Stile del bordo: solido, tratteggiato o punteggiato

    • Impostazioni colore

    • Larghezza del bordo, raggio

 

ADV-fisarmonica-settings

 

11 Blocco schede avanzate

Allo stesso modo, puoi creare un Avanzato linguetta bloccare quando è necessario visualizzare più contenuti in un'area più piccola. Per inserirne uno, fare clic su  Scheda Avanzata pulsante nella categoria Advanced Gutenberg .

 

tab-block

 

Quindi, puoi regolare le opzioni della scheda, del corpo o del bordo dal pannello di destra.

  • Stile schede
    • Desktop, tablet o cellulare
    • Orizzontale o verticale
  • Impostazioni delle schede
    • Scheda Apri iniziale

 

ADV-tab-impostazioni

 

  • Tab Colori

    • Colore di sfondo

    • Colore del testo

    • Colore sfondo scheda attiva

    • Colore testo scheda attiva

 

tab-impostazioni

 

  • Colori del corpo

    • Colore di sfondo

    • Colore del testo

  • Impostazioni del bordo

    • Stile: nessuno, solido, tratteggiato o punteggiato

    • Colore

    • Larghezza del bordo, raggio

 

tab-settings1

 

Puoi condividi i tuoi link social molto facilmente usando il Link sociali blocco, che può essere creato facendo clic sul relativo pulsante nella categoria Advanced Gutenberg .

 

sociali-link

 

Puoi utilizzare l'icona pronta o caricare la tua icona e regolare alcune altre opzioni dal pannello di destra.

  • Icone preimpostate: puoi caricare la tua icona personalizzata

  • Colore icona preimpostata

  • Impostazioni delle icone

    • Dimensione dell'icona, spazio

 

sociali-link-settings

 

13 Blocco messaggi recenti

Sono disponibili 3 layout per visualizzare i post recenti: le visualizzazioni Griglia, Elenco e Cursore. È possibile creare una di queste visualizzazioni facendo clic su  messaggi recenti pulsante nella categoria Advanced Gutenberg .

 

recent-post-block

 

Puoi vedere come i blocchi verranno visualizzati nel frontend nell'immagine sopra o nella nostra Demo Advanced Gutenberg.

Dal pannello di destra, è possibile regolare le impostazioni di ciascun layout:

  • Ordinato da

ordinato da

 

  • Categoria

  • Numero di articoli

  • colonne (solo per la vista Griglia)

  • Visualizza immagine in primo piano

  • Visualizza autore post

  • Visualizza data post

  • Visualizza collegamento Ulteriori informazioni

  • Leggi altro testo

  • Visualizza estratto post

  • Testo del primo post come estratto: mostra una parte del primo testo trovato in post come estratto.

 

recent-post-settings

 

14 Woo Products Block

Ci sono 2 layout disponibili per Woo Products blocco: le visualizzazioni Normale e Diapositiva possono visualizzare i prodotti WooCommerce sul tuo blog WordPress . È possibile inserire questo blocco facendo clic su  Woo Products pulsante nella categoria Advanced Gutenberg .

 

woo-block

 

Puoi vedere come i blocchi verranno visualizzati nel frontend nell'immagine sopra o nella nostra Demo Advanced Gutenberg

Nel pannello di destra, è possibile regolare le impostazioni di ciascun layout:

  • Impostazioni dei prodotti

    • Stato del prodotto

    • Categoria

  • Impostazioni di Layout

    • colonne

    • Numero di prodotti

    • Ordine

 

Woo-impostazioni

 

15 Blocco immagini scorrevole

Se si desidera visualizzare un numero di immagini come diapositiva, fare clic su Immagini Slider pulsante nella categoria Advanced Gutenberg .

 

nuova-image-cursore

 

Quindi premendo Aggiungi immagini per scegliere le immagini mostrate nella diapositiva. Dopodiché puoi inserire il testo  Titolo e testo descrizione per ogni immagine.

 

image-cursore

 

È possibile modificare le impostazioni del dispositivo di scorrimento sul pannello di destra.

Impostazioni immagine

  • Azione al clic: Nessuno, Apri immagine in lightbox e Apri collegamento personalizzato

  • Intera larghezza

  • Altezza automatica

  • Mostra sempre overlay

Impostazioni colore

  • Hover Color

  • Colore del titolo

  • Colore del testo

 

slide-impostazioni-1

 

Allineamento del testo

  • Allineamento verticale

    • Superiore

    • Centro

    • Parte inferiore

  • Allineamento orizzontale

    • Sinistra

    • Centro

    • Giusto

slide-impostazioni-2

 

16 Modulo di contatto

Con questo blocco puoi ricevere la notifica di contatto via email del cliente. Puoi creare quel modulo facendo clic su  Modulo di Contatto pulsante nella categoria Advanced Gutenberg .

 

Modulo di Contatto

 

È possibile modificare le impostazioni di Modulo di Contatto sul pannello di destra.

  • Avviso: Non verrà visualizzato se si abilita l'opzione reCAPTCHA in Impostazioni.

  • Mittente email: Puoi cambiare in Impostazioni. Un'e-mail verrà inviata all'e-mail di amministrazione (per impostazione predefinita) ogni volta che viene inviato un modulo di contatto.

  • Etichetta di testo:

    • Segnaposto di input nome

    • Segnaposto di input e-mail

    • Segnaposto di input del messaggio

    • Invia testo

    • Testo di avvertimento campo vuoto

    • Invia testo di successo

 

contatto settings1

 

  • Input di colore: Colore di sfondo e colore del testo

  • Impostazioni del bordo: Colore bordo, Stile bordo e Raggio bordo

  • Impostazioni pulsante di invio:

    • Impostazioni colore: Confine e testo, sfondo

    • Raggio del bordo del pulsante

    • Posizione pulsante: Sinistra, centro e destra

contatto settings2

 

17 Blocco newsletter

Per ottenere l'e-mail del cliente, è possibile creare il blocco e-mail facendo clic su notiziario pulsante nella categoria Advanced Gutenberg .

 

notiziario

 

Puoi modificare le impostazioni della newsletter sul pannello di destra.

  • Avviso: Non verrà visualizzato se si abilita l'opzione reCAPTCHA in Impostazioni.

  • Impostazioni modulo:

    • Stile modulo: impostazione predefinita / alternativa

    • Larghezza del modulo (px)

  • Etichetta di testo:

    • Segnaposto di input e-mail

    • Invia testo

    • Testo di avvertimento campo vuoto

    • Invia testo di successo

 

newsletter-settings1

 

  • Input di colore: Colore di sfondo e colore del testo

  • Impostazioni del bordo: Colore bordo, Stile bordo e Raggio bordo

  • Impostazioni pulsante di invio:

    • Impostazioni colore: Confine e testo, sfondo

    • Raggio del bordo del pulsante

 

newsletter-settings2

 

18 Blocco gestione colonne

Se si desidera creare un blocco contenente altri blocchi all'interno, è necessario scegliere Gestione colonne nella categoria Advanced Gutenberg . Apparirà lo stile per il blocco durante la creazione di uno nuovo.

 

add-column-manager-block

 

Quindi puoi aggiungere qualsiasi tipo di blocco desiderato in ogni colonna. Ecco un blocco gestore colonne che comprende 2 colonne: quella sinistra è Immagine avanzata e quella destra è Paragrafo, Elenco avanzato.

 

colonna-manager-block

 

E sul pannello di destra, è possibile regolare le impostazioni del blocco Gestione colonne.

  • Impostazioni reattive

    • Stile per ogni tipo di dispositivo: desktop, tablet, mobile

    • Spazio tra le colonne

    • Imbottitura: in alto, a destra, a sinistra e in basso

    • Margine: in alto, a destra, a sinistra e in basso

 

colonna-settings-1

 

 

  • Impostazioni riga

    • Colonne avvolte: se le tue colonne sono in overflow, verranno separate in una nuova linea (ad es .: Usa questa opzione con Spaziatura colonne).

    • Tag wrapper: Div, Header, Main, ...

    • Larghezza massima contenuto (px vw,%)

    • Altezza minima contenuto (px, vw, vh)

    • Altezza massima contenuto (px, vw, vh)

 

colonna-settings-2

 

19 Accedi / Registrati Blocco modulo

Puoi creare un modulo di accesso o registrarti per il tuo sito web cliccando Modulo di accesso / registrazione pulsante nella sezione Advanced Gutenberg .

 

login-form-block

 

E puoi passare dalla vista Login a Register sulla barra di navigazione di questo blocco o sul pannello di destra.

 

login-registro-forma

 

E quindi puoi andare al pannello di destra per modificare ulteriori dettagli sul modulo.

  • Modulo iniziale: Login o Registrati

  • Reindirizzamento dopo l'accesso: Home, Dashboard o Personalizzato

  • Larghezza del modulo (Px)

  • Mostra logo

  • Larghezza logo (Px)

  • Mostra l'icona del campo di input

  • Mostra link registro / intestazione

  • Colore intestazione

  • Mostra collegamento password persa

 

form-stato-setttings

 

  • Inserisci segnaposto

    • Segnaposto di input di accesso

    • Segnaposto di input nome utente

    • Segnaposto di input e-mail

  • Colore testo / input

    • Inserisci il colore di sfondo

    • Colore di input

    • Colore del testo

  • Impostazioni del bordo

    • Colore del bordo

    • Stile del bordo

    • Larghezza del bordo

 

ingresso-placeholder-settings

 

  • Impostazioni pulsante di invio

    • Bordo e testo

    • sfondo

    • Raggio del bordo del pulsante

    • Posizione pulsante

  • Pulsante di passaggio del mouse

    • Colori al passaggio del mouse: Colore di sfondo, testo e ombra

    • Ombra: Opacità, velocità di transizione e offset ombra (H (orizzontale), offset V (verticale), sfocatura, diffusione)

  • Avviso: Raccomandiamo vivamente di abilitare Google reCaptcha per evitare il bot spam. Puoi abilitarlo in Modulo Recaptcha in  Adv. Gutenberg> Email e modulo .

 

submit-button-settings

 

20 Blocco barra di ricerca

È possibile creare una casella di testo di ricerca sul frontend facendo clic su Barra di ricerca pulsante nella categoria Advanced Gutenberg .

 

search-bar-block

 

È possibile regolare le impostazioni della barra di ricerca sul pannello di destra.

  • stili: ci sono 2 stili predefiniti: predefinito e classico

  • Stato della barra di ricerca

    • Larghezza intera: acceso / spento

    • Larghezza

  • Cerca icona impostazioni

    • Icona di ricerca sulla destra: On / Off

    • Icona di ricerca

 

-impostazioni di ricerca-bar

 

  • Cerca impostazioni di input

    • Cerca segnaposto

    • Colore di input: colore di sfondo e testo

 

Ricerca-ingresso-settings

 

  • Impostazioni dei pulsanti di ricerca

    • Mostra pulsante di invio: On / Off

    • Pulsante di ricerca a sinistra: acceso / spento

    • Colore di sfondo e testo

    • Raggio di confine

  • Colori al passaggio del mouse: Colore di sfondo, testo e ombra

  • Hover Shadow: Opacità, velocità di transizione e offset ombra (H (orizzontale), offset V (verticale), sfocatura, diffusione)

 

Ricerca-button-settings