Vai al contenuto principale

Come utilizzare il modulo di riepilogo su Divi Builder

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]

Prima di poter aggiungere un modulo Riepilogo alla tua pagina, devi prima accedere a Divi Builder. Una volta installato il tema Divi sul tuo sito web, noterai un pulsante Usa Divi Builder sopra l'editor dei post ogni volta che crei una nuova pagina. Facendo clic su questo pulsante, attivi Divi Builder, che ti dà accesso a tutti i moduli Divi Builder. Quindi fare clic sul pulsante Usa Visual Builder per avviare il generatore in modalità visuale. Puoi anche fare clic sul pulsante Usa Visual Builder quando navighi nel tuo sito Web a monte se hai effettuato l'accesso alla dashboard di WordPress.

pulsante divi costruttore modulo blog divi

Una volta entrati in Visual Builder, puoi fare clic sul pulsante più grigio per aggiungere un nuovo modulo alla tua pagina. I nuovi moduli possono essere aggiunti solo all'interno delle righe. Se stai iniziando una nuova pagina, ricordati di aggiungere prima una riga alla tua pagina.

modulo resume divi builder.png

Trova il modulo Riepilogo nell'elenco dei moduli e fai clic su di esso per aggiungerlo alla tua pagina. L'elenco dei moduli è ricercabile, il che significa che puoi anche digitare la parola "Riepilogo" e quindi fare clic su Invio per trovare e aggiungere automaticamente il modulo di testo descrittivo! Una volta aggiunto il modulo, sarai accolto con l'elenco delle opzioni del modulo. Queste opzioni sono suddivise in tre gruppi principali: Contenuto , Design et avanzato .

caso d'uso per elencare i servizi dell'azienda sulla home page

Poiché il modulo Riepilogo combina immagini e testo per mostrare alcune funzionalità, puoi utilizzarlo per aggiungere un elenco dei servizi della tua azienda alla tua home page. Il modulo Blurb ti consente anche di trasformare la tua immagine / icona e titolo in un collegamento alla tua pagina di servizio. Per questo esempio, userò il modulo Blurb per aggiungere quattro servizi in primo piano a una home page.

divi.png pagina di servizio

Per aggiungere tutti e quattro i Blurb alla tua pagina, utilizza il visual builder per aggiungere una sezione standard con una riga di quattro colonne. Quindi aggiungi un modulo Blurb alla prima colonna della tua riga.

Aggiorna le impostazioni di Blurb con quanto segue:

Opzioni di contenuto

Titolo: [inserisci il titolo del servizio] Contenuto: [inserisci una breve descrizione del servizio] URL: [aggiungi l'URL alla pagina del servizio] Usa l'icona: SÌ
Icona: [seleziona un'icona che illustra il tuo servizio]

Opzioni di design

Icon Color: # 42bb99 (crea il colore che si abbina al design del sito)
Usa l'icona Dimensione carattere: SÌ
Dimensione carattere icona: 68px (regola la dimensione dell'icona)
Orientamento del testo: Centro -
Dimensione carattere della testa: 24px
Dimensione carattere: 18 px
Altezza riga corpo: 1.5em

design services divi.png

Ora il tuo primo testo introduttivo è finito.

lista dei servizi divi builder.jpg

Ora duplica il modulo Riepilogo che hai appena creato tre volte e trascina ciascuno dei riepiloghi duplicati sulle altre tre colonne. Poiché i parametri di progettazione sono stati integrati nei moduli duplicati, è sufficiente modificare il contenuto (intestazione, contenuto, icona, URL, ecc.) E modificare i colori per adattarli a ciascuno dei servizi.

elenco completo dei servizi divi.jpg

Opzioni di contenuto di riepilogo

Nella scheda dei contenuti troverai tutti gli elementi di contenuto del modulo, come testo, immagini e icone. Tutto ciò che controlla cosa appare nel tuo modulo sarà sempre in questa scheda.

riassunto del modulo parametri wordpress.png

titolo

Assegna al tuo testo un titolo che apparirà sopra il testo in uno stile di testo in grassetto. L'opzione URL situata sotto il campo Titolo ti consentirà di rendere il tuo titolo un collegamento ipertestuale.

Contenuto

Questo campo è dove puoi inserire il contenuto del corpo del tuo testo. Blurb Text coprirà anche l'intera larghezza della colonna fino a 550 px.

URL

Inserisci un URL web valido in questo campo per trasformare il tuo titolo Blurb in un link. Lasciando vuoto questo campo, il titolo verrà lasciato come elemento statico.

URL di apertura

Qui puoi scegliere se il tuo link si aprirà o meno in una nuova finestra.

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]

Usa l'icona

Quando utilizzi Blurbs, puoi scegliere di utilizzare un'icona o un'immagine con il tuo testo. Se selezioni "Sì" per l'opzione "Usa icona", ti verranno offerte le seguenti opzioni per personalizzare la tua icona. Se non scegli di utilizzare un'icona, ti verrà chiesto di caricare un'immagine.

icona

Se hai scelto "Sì" per l'impostazione "Usa icona", apparirà questa opzione. Questa opzione ti presenta un elenco di icone disponibili che puoi utilizzare con il tuo blurb. Basta fare clic sull'icona che si desidera utilizzare e apparirà nel testo.

usa le icone divi builder.png

Immagine

Se non hai scelto di utilizzare un'icona, apparirà questa impostazione. Inserisci qui un URL di immagine valido o scegli / carica un'immagine tramite la libreria multimediale di WordPress. Le immagini nel modulo Riepilogo appaiono sempre centrate nelle colonne e si estendono per l'intera larghezza della colonna fino a 550 px. Tuttavia, la tua immagine non sarà mai più grande della sua dimensione di caricamento originale. L'altezza dell'immagine di presentazione è determinata dalle proporzioni dell'immagine originale. Si consiglia quindi di posizionare tutte le immagini di presentazione alla stessa altezza se le si affiancano.

Colore di sfondo

Definisci un colore di sfondo personalizzato per il tuo modulo o lascia vuoto per utilizzare il colore predefinito.

Immagine di sfondo

Se impostata, questa immagine verrà utilizzata come sfondo per questo modulo. Per rimuovere un'immagine di sfondo, è sufficiente rimuovere l'URL dal campo Impostazioni. Le immagini di sfondo appariranno sopra i colori di sfondo, il che significa che il colore di sfondo non sarà visibile quando viene applicata un'immagine di sfondo.

Etichetta amministrativa

Questo cambierà l'etichetta del modulo nel generatore per una facile identificazione. Quando si utilizza la visualizzazione WireFrame in Visual Builder, queste etichette appariranno nel blocco del modulo dell'interfaccia di Divi Builder.

Opzioni di progettazione del modulo di riepilogo

Nella scheda Design, troverai tutte le opzioni di stile del modulo, come caratteri, colori, dimensioni e spaziatura. Questa scheda ti consente di modificare l'aspetto del tuo modulo. Ogni modulo Divi ha un lungo elenco di impostazioni di progettazione che puoi utilizzare per modificare praticamente qualsiasi cosa.

opzione design module resume divi.png

Colore dell'icona

Se hai scelto "Sì" per l'impostazione "Usa icona", apparirà questa opzione. Questa opzione ti consente di personalizzare il colore della tua icona. Per impostazione predefinita, le icone sono impostate sul colore principale del tema.

Icona Cerchio

Se hai scelto "Sì" per l'impostazione "Usa icona", apparirà questa opzione. Questa opzione ti consente di posizionare la tua icona in un cerchio colorato. Se selezioni "sì" per questa impostazione, ti verranno offerte ulteriori opzioni per personalizzare il colore e il bordo del tuo cerchio.

Colore del cerchio

Se hai scelto "Sì" per l'impostazione "Icona cerchio", questa opzione apparirà. Qui puoi scegliere un colore da usare per il tuo cerchio. Questo colore è indipendente dal colore dell'icona selezionata in precedenza. La tua icona, nel suo colore, apparirà all'interno di un cerchio con il colore che selezioni qui.

Mostra il bordo del cerchio

Se hai scelto "Sì" per l'impostazione "Icona cerchio", questa opzione apparirà. Questa opzione ti consente di attivare un bordo per il tuo cerchio. Se questa opzione è selezionata, verrà visualizzata un'opzione aggiuntiva per selezionare il colore del bordo.

Colore del bordo del cerchio

Se hai scelto "Sì" per l'impostazione "Mostra bordo cerchio", questa opzione apparirà. Qui puoi regolare il colore del bordo del cerchio.

Posizionamento di immagini / icone

Qui puoi scegliere la posizione della tua immagine / icona. Può apparire sopra il testo oppure a sinistra del testo. Posizionando l'immagine / icona a sinistra del testo, l'immagine risulterà più piccola rispetto a se fosse posizionata in alto.

Usa la dimensione del carattere dell'icona

Se questa opzione è abilitata, puoi inserire una dimensione personalizzata per l'icona visualizzata sopra o due a sinistra del tuo blurb.

Colore del testo

Se il tuo blurb è posizionato su uno sfondo scuro, il colore del testo dovrebbe essere impostato su "Scuro". Al contrario, se il tuo blurb è posizionato su uno sfondo chiaro, il colore del testo dovrebbe essere impostato su "Chiaro".

Orientamento del testo

Questo menu a discesa consente di specificare l'orientamento del testo da allineare a sinistra, centrare o giustificare a destra.

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]

Carattere dell'intestazione

Puoi modificare il carattere dell'intestazione selezionando il carattere desiderato dal menu a discesa. Divi viene fornito con dozzine di fantastici caratteri alimentati da Google Fonts. Per impostazione predefinita, Divi utilizza il carattere Open Sans per tutto il testo sulla tua pagina. Puoi anche personalizzare lo stile del tuo testo utilizzando le opzioni grassetto, corsivo, maiuscolo e sottolineato.

Dimensione del carattere dell'intestazione

Qui puoi regolare la dimensione del testo dell'intestazione. Puoi trascinare il cursore dell'intervallo per aumentare o diminuire la dimensione del testo, oppure puoi inserire direttamente il valore della dimensione del testo desiderato nel campo di input a destra del cursore. I campi di input supportano diverse unità di misura, il che significa che puoi inserire "px" o "em" a seconda della tua dimensione per cambiare il tipo di unità.

il modulo riassume lo stile della sezione title.png

Colore del testo dell'intestazione

Per impostazione predefinita, tutti i colori del testo in Divi vengono visualizzati in bianco o grigio scuro. Se vuoi cambiare il colore della tua intestazione, scegli il colore desiderato dal selettore di colori usando questa opzione.

Spaziatura delle lettere di intestazione

La spaziatura delle lettere influisce sullo spazio tra ogni lettera. Se si desidera aumentare lo spazio tra ogni lettera del testo dell'intestazione, utilizzare il dispositivo di scorrimento dell'intervallo per regolare lo spazio o immettere la dimensione della spaziatura desiderata nel campo di immissione a destra del dispositivo di scorrimento. I campi di input supportano diverse unità di misura, il che significa che puoi inserire "px" o "em" a seconda della tua dimensione per cambiare il tipo di unità.

Altezza riga di intestazione

L'altezza della riga influisce sullo spazio tra ogni riga del testo dell'intestazione. Se desideri aumentare lo spazio tra ogni riga, usa il cursore dell'intervallo per regolare lo spazio o inserisci la dimensione della spaziatura desiderata in il campo di immissione a destra del cursore. I campi di input supportano diverse unità di misura, il che significa che puoi inserire "px" o "em" a seconda della tua dimensione per cambiare il tipo di unità.

Carattere del corpo

È possibile modificare il carattere del corpo selezionando il carattere desiderato dal menu a discesa. Divi viene fornito con dozzine di fantastici caratteri alimentati da Google Fonts. Per impostazione predefinita, Divi utilizza il carattere Open Sans per tutto il testo sulla tua pagina. Puoi anche personalizzare lo stile del tuo testo utilizzando le opzioni grassetto, corsivo, maiuscolo e sottolineato.

Dimensione del carattere del corpo

Qui puoi regolare la dimensione del testo del tuo corpo. Puoi trascinare il cursore dell'intervallo per aumentare o diminuire la dimensione del testo, oppure puoi inserire direttamente il valore della dimensione del testo desiderato nel campo di input a destra del cursore. I campi di input supportano diverse unità di misura, il che significa che puoi inserire "px" o "em" a seconda della tua dimensione per cambiare il tipo di unità.

Colore del testo del corpo

Per impostazione predefinita, tutti i colori del testo in Divi vengono visualizzati in bianco o grigio scuro. Se vuoi cambiare il colore del tuo corpo del testo, scegli il colore desiderato dal selettore di colori usando questa opzione.

Spaziatura delle lettere del corpo

La spaziatura tra le lettere influisce sullo spazio tra ogni lettera. Se vuoi aumentare lo spazio tra ogni lettera del tuo corpo di testo, usa il cursore dell'intervallo per regolare lo spazio o inserisci la dimensione della spaziatura desiderata nel campo di input a destra del cursore. I campi di input supportano diverse unità di misura, il che significa che puoi inserire "px" o "em" a seconda della tua dimensione per cambiare il tipo di unità.

Altezza della linea del corpo

L'altezza della riga influisce sullo spazio tra ogni riga del corpo del testo. Se si desidera aumentare lo spazio tra ogni riga, utilizzare il dispositivo di scorrimento dell'intervallo per regolare lo spazio o immettere la dimensione della spaziatura desiderata nel campo di immissione a destra del dispositivo di scorrimento. I campi di input supportano diverse unità di misura, il che significa che puoi inserire "px" o "em" a seconda della tua dimensione per cambiare il tipo di unità.

Usa il bordo

Abilitando questa opzione verrà posizionato un bordo attorno al modulo. Questo bordo può essere personalizzato utilizzando i seguenti parametri condizionali.

Colore del bordo

Questa opzione influisce sul colore del bordo. Seleziona un colore personalizzato dal selettore di colori per applicarlo al bordo.

Larghezza del confine

Per impostazione predefinita, i bordi sono larghi 1 pixel. È possibile aumentare questo valore trascinando il dispositivo di scorrimento dell'intervallo o immettendo un valore personalizzato nel campo di input a destra del dispositivo di scorrimento. Supporta unità di misura personalizzate, il che significa che puoi cambiare l'unità predefinita da "px" a qualcos'altro come em, vh, vw ecc.

configurazione del modulo sborsioni resume divi builder.png

Stile del bordo

I bordi supportano otto diversi stili, tra cui: solido, punteggiato, punteggiato, doppio, scanalatura, cresta, inserto e inizio. Seleziona lo stile che desideri dal menu a discesa per applicarlo al bordo.

Larghezza massima dell'immagine

L'applicazione di un valore di larghezza massima qui limiterà la larghezza dell'immagine di presentazione. Ciò riguarda solo i blurb che non sono in modalità icona.

Margine personalizzato

Il margine è lo spazio aggiunto all'esterno del modulo, tra il modulo e l'elemento successivo sopra, sotto oa destra ea sinistra di esso. È possibile aggiungere valori di margine personalizzati a uno qualsiasi dei quattro lati del modulo. Per rimuovere un margine personalizzato, rimuovere il valore aggiunto dal campo di input. Per impostazione predefinita, questi valori vengono misurati in pixel, ma è possibile immettere unità di misura personalizzate nei campi di input.

Imbottitura personalizzata

L'imbottitura è lo spazio aggiunto all'interno del modulo, tra il bordo del modulo ei suoi elementi interni. È possibile aggiungere valori di riempimento personalizzati a uno qualsiasi dei quattro lati del modulo. Per rimuovere un margine personalizzato, rimuovere il valore aggiunto dal campo di input. Per impostazione predefinita, questi valori vengono misurati in pixel, ma è possibile immettere unità di misura personalizzate nei campi di input.

Modulo di riepilogo opzioni avanzate

Nella scheda Avanzate troverai le opzioni che i web designer più esperti potrebbero trovare utili, come gli attributi CSS e HTML personalizzati. Qui puoi applicare CSS personalizzati a uno qualsiasi dei molti elementi del modulo. Puoi anche applicare classi e ID CSS personalizzati al modulo, che possono essere utilizzati per personalizzare il modulo nel file style.css del tema figlio.

sezione di riepilogo del modulo anticipo.png

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]

ID CSS

Immettere un ID CSS opzionale da utilizzare per questo modulo. Un ID può essere utilizzato per creare uno stile CSS personalizzato o per collegarsi a particolari sezioni della tua pagina.

Classe CSS

Immettere le classi CSS opzionali da utilizzare per questo modulo. Una classe CSS può essere utilizzata per creare uno stile CSS personalizzato. Puoi aggiungere più classi, separate da uno spazio. Queste classi possono essere utilizzate nel tema Divi Child o in CSS personalizzati che aggiungi alla tua pagina o al tuo sito web utilizzando le opzioni del tema Divi o le impostazioni della pagina Divi Builder.

CSS personalizzato

Il CSS personalizzato può anche essere applicato al modulo ea qualsiasi elemento interno del modulo. Nella sezione CSS personalizzato, troverai un campo di testo in cui puoi aggiungere CSS direttamente a ciascun elemento. Le voci CSS in queste impostazioni sono già incorporate con i tag di stile. Quindi devi solo inserire regole CSS separate da punto e virgola.

Animazione di immagini / icone

Questo controlla la direzione dell'animazione di caricamento lento.

Testo ALT dall'immagine

Se non hai scelto di utilizzare un'icona, apparirà questa impostazione. Altro testo fornisce tutte le informazioni necessarie se l'immagine non viene caricata, visualizzata correttamente o in qualsiasi altra situazione in cui un utente non può vedere l'immagine. Permette inoltre di leggere e riconoscere l'immagine dai motori di ricerca.

visibilità

Questa opzione ti consente di controllare i dispositivi su cui appare il tuo modulo. Puoi scegliere di disattivare singolarmente il tuo modulo su tablet, smartphone o desktop. Questo è utile se vuoi usare mod differenti su dispositivi differenti o se vuoi semplificare il design mobile eliminando alcuni elementi dalla pagina.

Questo è tutto per questo tutorial. Ci auguriamo di averti mostrato come utilizzare il modulo di riepilogo su Divi.

Questo articolo contiene 1 commento

  1. Buongiorno,
    Voglio utilizzare il modulo di riepilogo per inserire circa 200 miniature su una pagina.
    Ogni miniatura rappresenta il titolo di un prodotto in vendita ma non voglio usare woocommerce, solo un link di contatto ...
    Questa pagina verrà regolarmente aggiornata con nuove miniature.
    Queste miniature (quindi i 200 moduli di riepilogo) dovrebbero essere elencate in ordine alfabetico (in base al titolo), anche quando aggiungo nuovi moduli alla fine della pagina ...
    Sai come potrei farlo?
    merci beaucoup

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
12 azioni
quota6
Tweet
Enregistrer6