Come utilizzare le opzioni di stile del testo e dell'elenco di Divi per progetti di contenuti unici a levetta e fisarmonica

Le opzioni di stile del testo e dell'elenco di Divi sono una funzionalità comune disponibile nella maggior parte dei moduli Divi. Questo apre nuove opportunità per progettare contenuti creativi ed elencare design all'interno di moduli (come il modulo toggle e fisarmonica) che in precedenza erano possibili solo all'interno del modulo di testo. Il trucco è impostare i tuoi contenuti con l'html appropriato in modo da poter scegliere come target quegli elementi utilizzando le impostazioni di progettazione integrate.

In questo tutorial, ti mostrerò come utilizzare le opzioni di stile di testo e elenco di Divi per progetti di contenuti a levetta e fisarmonica unici. Questo sarà utile ogni volta che desideri incorporare diversi design di testo senza dover utilizzare classi CSS o CSS in linea.

Iniziamo.

Sbirciata

Ecco una rapida occhiata ai design che creeremo utilizzando le opzioni di stile di testo e elenco di Divi.

Scarica GRATUITAMENTE i design degli stili di elenco per il layout di interruttori e fisarmoniche

Per mettere le mani sui disegni di questo tutorial, dovrai prima scaricarlo utilizzando il pulsante in basso. Per accedere al download dovrai iscriverti alla nostra mailing list Divi Daily utilizzando il modulo sottostante. Come nuovo abbonato, riceverai ancora più bontà Divi e un pacchetto Divi Layout gratuito ogni lunedì! Se sei già nell'elenco, inserisci semplicemente il tuo indirizzo email qui sotto e fai clic su download. Non sarai "riabbonato" o riceverai email extra.

Scarica i file

Scarica gratis

Iscriviti alla newsletter Divi e ti invieremo via email una copia dell'ultimo Divi Landing Page Layout Pack, oltre a tonnellate di altre incredibili risorse Divi gratuite, suggerimenti e trucchi. Seguici e diventerai un maestro Divi in ​​pochissimo tempo. Se sei già iscritto, digita il tuo indirizzo e-mail qui sotto e fai clic su download per accedere al pacchetto di layout.

SCARICA

Ti sei iscritto con successo. Controlla il tuo indirizzo e-mail per confermare la tua iscrizione e ottenere l'accesso ai pacchetti di layout Divi settimanali gratuiti!

Per importare il layout nella tua pagina, estrai semplicemente il file zip e trascina il file json nel Divi Builder.

Andiamo al tutorial, vero?

Cosa ti serve per iniziare

Per iniziare, dovrai avere quanto segue:

1. Il tema Divi installato e attivo
2. Una nuova pagina creata per costruire da zero sul front-end (visual builder)
3. Immagini da utilizzare per contenuti fittizi

Successivamente, avrai una tela bianca per iniziare a progettare in Divi.

Parte 1: utilizzo degli stili di elenco nei moduli di attivazione/disattivazione

In questa prima parte del tutorial, creeremo tre interruttori che hanno ciascuno un contenuto progettato utilizzando le opzioni di stile dell'elenco. Questo sarà utile per separare gli elementi dell'elenco in interruttori separati quasi come una trama personalizzata di contenuto.

Per prima cosa crea una sezione regolare con una riga a tre colonne. Quindi aggiorna le impostazioni della riga come segue:

Larghezza grondaia: 2
Larghezza: 100%
Larghezza massima: 90vw

Aggiungi un modulo di commutazione

Quindi, aggiungi un modulo di commutazione alla colonna 1. Questo sarà il primo dei tre moduli di commutazione che verranno aggiunti a ciascuna delle tre colonne.

Aggiungi il Toggle HTML Content

Il contenuto HTML è la chiave di questo design. Per poter sfruttare i diversi stili di elenco all'interno delle impostazioni di commutazione Divi, dobbiamo aggiungere elenchi HTML alla nostra casella di contenuto.

Vai avanti e incolla il seguente codice HTML nel
Casella del contenuto del corpo.

<ol start="1">
    <li>
        <ul style="margin-top: -1.5em;">
            <li>Lorem ipsum dolor sit amet</li>
        </ul>
    </li>
</ol>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet.</p>

Ora questo pezzo di codice HTML crea un elenco ordinato usando il tag ol. L'elenco ordinato ha solo un elemento dell'elenco (li) che è un elenco non ordinato nidificato (ul) con un elemento dell'elenco (li) che ha un contenuto fittizio. Sotto l'elenco ordinato c'è un paragrafo di testo di base.

Con questa configurazione, possiamo scegliere come target ciascuno di questi tag (ol, ul, p) per stili diversi utilizzando gli stili di testo incorporati di Divi che includono stili di elenco.

Notare che il tag ol iniziale ha start = "1" al suo interno. Questo dice all'elenco con quale numero iniziare elencando i numeri dell'elenco ordinato con ogni elemento dell'elenco. Tecnicamente, questo non è necessario per il primo numero perché inizierà automaticamente con 1 per impostazione predefinita. Ma ne avremo bisogno per i prossimi toggle che aggiungeremo.

Inoltre, il tag dell'elenco non ordinato ha uno stile in linea per aumentare un po' il contenuto ul utilizzando il margine negativo. Questo è il modo in cui sovrapporremo il numero dell'elenco ordinato con il testo dell'elenco non ordinato nel disegno.

Disegnare il contenuto

Ora possiamo iniziare ad aggiungere alcuni colori e stili di carattere utilizzando le impostazioni integrate e gli stili di elenco. Aggiorna le impostazioni di progettazione dell'interruttore come segue:

Colore icona: #ff3d97
Dimensione carattere icona: 26px
Apri Toggle Colore di sfondo: #ffffff
Chiuso Toggle Colore di sfondo: #ffffff
Colore del testo del titolo aperto: #333333
Colore del testo del titolo: #333333

Carattere del titolo: Oswald
Dimensione del testo del titolo: 18px
Altezza della riga del titolo: 3em

Carattere elenco non ordinato: Oswald
Peso del carattere dell'elenco non ordinato: leggero
Colore testo elenco non ordinato: #333333
Dimensioni testo elenco non ordinato: 36px
Tipo di stile elenco non ordinato: nessuno

Carattere elenco ordinato: Kameron
Peso del carattere dell'elenco ordinato: grassetto
Colore testo elenco ordinato: rgba (255,61,151,0.34)
Dimensioni del testo dell'elenco ordinato: 100 px
Altezza riga lista ordinata: 1.1em

Duplica il primo modulo Toggle per creare gli altri Toggle

Per creare gli interruttori per le colonne 2 e 3, duplichiamo il modulo di attivazione che abbiamo appena finito di progettare. Quindi possiamo trascinarli in ogni colonna in modo che ogni colonna abbia lo stesso modulo di commutazione.

Aggiorna i numeri di partenza dell'elenco ordinato

Per l'interruttore duplicato nella colonna 2, è necessario che l'elenco ordinato inizi con il numero "2" anziché "1". Per cambiarlo, apri le impostazioni del modulo di commutazione e modifica il numero di partenza nel tag ol in "2".

Dovrai anche aggiornare l'interruttore nella colonna 3 con il numero di inizio dell'elenco ordinato di "3".

Progetto definitivo

Ora diamo un'occhiata al progetto finale.

Parte 2: utilizzo degli stili di elenco nei moduli a fisarmonica

In questa seconda parte del tutorial, ti mostrerò un modo semplice e veloce per portare i design dei contenuti in stile elenco dal modulo di commutazione a un modulo a fisarmonica. Il processo è semplice perché puoi utilizzare lo stesso testo e gli stessi stili di elenco in un modulo di fisarmonica (o praticamente qualsiasi modulo) che abbiamo usato nei nostri precedenti toggle. Per fare ciò, crea prima una nuova sezione con una riga a una colonna. Quindi aggiungi un modulo a fisarmonica alla riga.

Quindi duplica una delle due fisarmoniche predefinite nella scheda contenuto per un totale di tre fisarmoniche. Quindi aggiorna il contenuto per ogni singola fisarmonica con lo stesso identico contenuto html di toggle all'interno di ciascuno dei tre toggle che abbiamo creato in precedenza.

Estendi gli stili di commutazione alla fisarmonica

Un modo rapido per trasferire lo stile dagli interruttori che abbiamo creato al modulo a fisarmonica è utilizzare la funzione di estensione degli stili. Per fare ciò, apri uno dei moduli di commutazione e fai clic con il pulsante destro del mouse sulla categoria dello stile dell'icona e seleziona "Estendi gli stili dell'icona" dal menu di scelta rapida. Quindi selezionare per estendere gli stili di questa icona a "Tutte le fisarmoniche" in "Questa pagina".

Quindi fai lo stesso per ciascuna delle categorie di design che hanno uno stile personalizzato che deve essere esteso al modulo a fisarmonica. Questi includono lo stile per "Toggle" "Title Text" e "Body Text".

Quindi controlla il risultato finale per il design della fisarmonica.

Parte 3: utilizzo degli stili di elenco per creare contenuti a più colonne in un modulo di attivazione/disattivazione

In questa terza parte del tutorial, ti mostrerò come creare più colonne di contenuto per i tuoi design in stile elenco.

Innanzitutto, crea una nuova sezione con una riga a una colonna. Quindi copia e incolla uno dei moduli di commutazione che abbiamo creato in precedenza nella riga.

Quindi aggiorna il contenuto del corpo del modulo di attivazione/disattivazione con del nuovo HTML come segue:

<ol style="column-count: 2">
<li>
        <ul>
	        <li>Lorem ipsum dolor sit amet</li>
<a href="#">Learn More</a>
        </ul>
</li>
<li>
        <ul>
	        <li>Lorem ipsum dolor sit amet</li>
<a href="#">Learn More</a>
        </ul>
</li>
<li>
        <ul>
	        <li>Lorem ipsum dolor sit amet</li>
<a href="#">Learn More</a>
        </ul>
</li>
<li>
        <ul>
	        <li>Lorem ipsum dolor sit amet</li>
<a href="#">Learn More</a>
        </ul>
</li>
</ol>

Notare l'attributo di stile in linea "column-count:2" che è stato aggiunto al tag ol iniziale. Ciò consentirà di strutturare il contenuto dell'elenco ordinato in due colonne anziché in una. Puoi cambiarlo in qualsiasi numero per più colonne, se necessario.

E nota come abbiamo la possibilità di utilizzare le impostazioni di progettazione integrate di Divi per gli stili di titolo, collegamento ed elenco.

Disegnare il testo del collegamento

Poiché gli stili del titolo e dell'elenco sono già presenti nel design precedente, tutto ciò che dobbiamo fare è aggiungere un design per il testo del collegamento.

Apri le impostazioni di commutazione e aggiorna quanto segue:

Peso del carattere del collegamento: semi grassetto
Stile carattere collegamento: sottolineato
Colore del testo del collegamento: #ff3d97
Dimensione del testo del collegamento: 15 px

E poiché non stiamo sovrapponendo alcun testo con questo disegno, vai avanti e dai ai numeri di stile dell'elenco ordinato un colore più luminoso come segue:

Colore testo elenco ordinato: #ff3d97

Aggiungi uno sfondo all'interruttore

Per completare il design, possiamo aggiungere uno sfondo personalizzato al nostro interruttore. Per fare ciò, aggiorna le seguenti impostazioni di commutazione:

Immagine di sfondo: [carica un'immagine a tua scelta]
Colore di sfondo sfumato a sinistra: rgba (255,255,255,0.92)
Colore di sfondo sfumato a destra: rgba (255,255,255,0.8)
Direzione gradiente: 90 gradi
Posizione di partenza: 50%
Posizione finale: 0%
Posiziona il gradiente sopra l'immagine di sfondo: S

Aggiunta di elementi reattivi all'interruttore a due colonne

Poiché il contenuto di attivazione/disattivazione ora è di due colonne, aggiorniamo il design con alcuni stili reattivi per renderlo scalabile bene sui dispositivi mobili.

Innanzitutto, aggiorna le impostazioni della riga come segue:

Larghezza: 100%
Larghezza massima: 89vw (desktop), 90vw (tablet e telefono)

Apri le impostazioni di commutazione e aggiorna quanto segue:

Dimensione carattere icona: 5vw

Dimensione del testo del titolo: 4vw

Dimensioni testo elenco non ordinato: 26 px (desktop), 18 px (tablet), 14 px (telefono)
Rientro elemento elenco non ordinato: 1px

Dimensioni del testo dell'elenco ordinato: 8vw

Progettazione finale del contenuto di commutazione a più colonne

Ecco il design sui display di tablet e telefoni.

Ed ecco lo stesso design con uno sfondo più scuro e colori del testo bianchi.

Pensieri finali

La maggior parte delle volte, le levette e le fisarmoniche avranno un contenuto corporeo di base che in realtà non richiede un design creativo. Ma se arriva il momento in cui vuoi rendere più piccante il tuo contenuto di toggle e fisarmonica, puoi sfruttare il testo integrato di Divi e le opzioni di stile dell'elenco. Una volta che hai il tuo codice HTML, puoi scegliere come target quei tag HTML per diversi design senza dover utilizzare CSS o classi personalizzate esterne. Questo è anche un ottimo modo per visualizzare stili di elenco creativi all'interno di qualsiasi modulo utilizzando Divi builder perché queste stesse opzioni di stile di elenco sono disponibili in tutti i moduli.

Divertiti ad esplorare nuovi design.

Non vedo l'ora di sentirti nei commenti.

Saluti!