Ti piacerebbe pubblicare i post del blog in Divi?
Oggi ti mostreremo un modo creativo per presentare i post del blog come carte mobili in Divi. Ogni blog o sito web dovrebbe mirare ad avere un eccellente contenuto attraente e, forse, altrettanto importante o accessibile.
Un modo per garantire che il contenuto rimane accessibile agli utenti è renderlo fluttuante sulla pagina.
E per i blogger, ti mostreremo come presentare articoli da il tuo blog come carte mobili in modo che rimangano visibili durante lo scorrimento della pagina.
Andiamo.
Panoramica
Ecco una breve panoramica del risultato che otterremo alla fine di questo tutorial.
Cosa ti serve per iniziare
Prima di iniziare a creare questo design in Divi, dovrai effettuare le seguenti operazioni:
- Crea una nuova pagina, assegna un nome pertinente e fai clic su "Usa Divi Builder"
- Seleziona l'opzione Scegli la disposizione".
- Trova e seleziona il layout 'pagina di destinazione del blogger'.
- Clicca sul bottone Scegli la disposizione per caricarlo sulla pagina.
Dopodiché, avrai il layout predefinito pronto per l'uso per questo tutorial.
Come creare carte fluttuanti per post sul blog utilizzando il modulo blog di Divi
Ora che il layout è caricato sulla pagina, siamo pronti per creare le nostre carte mobili per i post del blog.
Leggi anche: Come creare un'intestazione globale appiccicosa in Divi
Crea una nuova sezione nella parte inferiore del layout.
Quindi aggiungi una nuova riga a una colonna alla sezione.
Aggiungi un modulo Blog e un titolo alla riga/colonna
Invece di creare un nuovo modulo Blog qui, scorri verso l'alto e trova il modulo Blog esistente che mostra tre post del blog (è nella terza sezione vicino al centro della pagina). Aprire " Altri parametri del modulo »E seleziona« Copia del modulo".
Quindi incolla il modulo nella nuova riga di una colonna che abbiamo creato nella parte inferiore della pagina facendo clic con il pulsante destro del mouse sull'icona più grigia e selezionando " Modulo Incolla".
Successivamente, aggiungeremo un titolo sopra i nostri post del blog che galleggerà anche sopra le schede del blog. Per fare ciò, copia il modulo Testo esistente con il testo del titolo piccolo " Stile di vita".
Quindi incolla il modulo appena sopra il nuovo modulo Blog che abbiamo appena aggiunto.
Quindi, modifica il testo del titolo per descrivere il tipo di post del blog che desideri mettere in evidenza. In questo esempio useremo semplicemente " Top Story".
Personalizzazione della linea con posizione fissa e larghezza personalizzata
Vogliamo ridurre le dimensioni dei post mobili del blog in modo che non occupino troppo spazio sulla pagina quando hanno una posizione fissa. Sarebbe divertente. Per fare ciò, apri le impostazioni della linea e aggiorna quanto segue:
Per far fluttuare gli oggetti, dobbiamo dare alla linea una posizione fissa. Nella scheda Avanzate, aggiorna quanto segue:
- Posizione: fissa
- Posizione: in basso a destra
- Spostamento verticale: 20px
- Offset orizzontale: 20px
- Indice Z: 12
Modulo Blog aggiornato con contenuto minimo e box-shadow
In generale, il modulo Blog ha già un layout a griglia a tre colonne e uno stile piacevole che viene fornito con il pacchetto di layout che abbiamo scelto. Ma ci sono alcune cose che dobbiamo fare.
Vedi anche: Come creare un'intestazione globale con modulo di accesso in Divi
Innanzitutto dobbiamo ridurre la dimensione delle mappe (in verticale) e rimuovere alcuni elementi contenuto.
Per fare ciò, apri le impostazioni del blog e nascondi tutti gli elementi tranne l'immagine in primo piano. In questo modo il post mostrerà solo l'immagine e il titolo in primo piano.
Nella scheda Stile, configura l'ombra del riquadro come segue:
- Casella ombra: vedi screenshot
- Intensità sfocatura ombra scatola: 28px
- Colore carattere sottotitoli: rgba(0,0,0,0.19)
Panoramica
Ecco un'anteprima del risultato che abbiamo finora.
Fai apparire la riga di articoli al passaggio del mouse
Infine, possiamo aggiungere un simpatico effetto al passaggio del mouse che incoraggia gli utenti a interagire con gli articoli fluttuanti.
Leggi anche: Come creare la pagina del blog con il modulo Blog in Divi
Apri le impostazioni della linea e le opzioni di aggiornamento:
Per l'ufficio
- Trasformazione: 50%
Per lo stato di librazione
- Trasformazione: 0%
Questo inizialmente porterà l'intera riga al di fuori della finestra del browser del 50%. Una volta che l'utente passa sopra la linea, torna completamente in vista.
Nascondi riga sul cellulare
A meno che tu non voglia pubblicare un singolo post del blog, non ha senso pubblicare quei post del blog su dispositivi mobili. Probabilmente occuperebbe troppo spazio e causerebbe problemi durante il tentativo di scorrimento.
Vedi anche: Come aggiungere un modulo di contatto a un'intestazione globale in Divi
Per nascondere le mappe sui dispositivi mobili, apri le impostazioni delle sezioni e disattiva la visibilità delle sezioni su telefono e tablet.
Risultato finale
Scarica DIVI ora!!!
Conclusione
Ecco ! In questo tutorial ti abbiamo mostrato un modo creativo e originale per presentare i post del blog che vuoi mettere in evidenza.
Se hai dubbi o suggerimenti, trovaci in la sezione commenti per discuterne.
Tuttavia, puoi anche consultare le nostre risorse, se hai bisogno di più elementi per realizzare i tuoi progetti di creazione di siti Internet, consultando la nostra guida su Creazione di blog WordPress o quello acceso Divi: il miglior tema WordPress di tutti i tempi.
Ma nel frattempo, condividi questo articolo sui tuoi diversi social network.
...
