Desideri personalizzare il link Leggi di più del modulo Blog di Divi ? Quindi segui il nostro tutorial.
I collegamenti "Leggi di più" di un blog possono essere una parte cruciale del miglioramento l'esperienza dell'utente. È quindi importante sapere come personalizzarli correttamente.
In questo tutorial, ti mostreremo come personalizzare il link "Leggi di più" nel modulo Blog. In questo articolo, ti mostreremo come:
- Personalizza il link "Leggi di più" utilizzando le opzioni integrate di Divi
- Allinea il link "Leggi di più" (sinistra, centro, destra)
- Trasforma il link "Leggi di più" in un pulsante a schermo intero
- Crea un pulsante Leggi di più personalizzato con effetti al passaggio del mouse
- Sostituisci il testo "Leggi di più" con qualcos'altro (come "Leggi l'articolo").
Panoramica
Ecco una rapida occhiata al design che creeremo in questo tutorial.
Carica un modulo blog su una pagina usando il Theme Builder di Divi
Per iniziare a personalizzare i collegamenti Leggi di più, devi accedere a un modulo Blog.
è possibile caricare un layout predefinito con qualsiasi modulo Blog di tua scelta o semplicemente aggiungi un nuovo modulo Blog a una pagina.
Per iniziare il processo, utilizzeremo la pagina del blog dal layout predefinito Intelligenza Artificiale.
Aggiungi una nuova pagina dalla dashboard di WordPress
Quindi, dai un titolo alla tua pagina, quindi fai clic su " utiliser Divi Costruttore".
Quindi fare clic su " Scegli la disposizione«
Trova e scegli " Artificiale intelligenza Blog Pagina«
Infine, scegli il layout del Blog e clicca su “ Scegli la disposizione«
Personalizza e allinea il testo del link Leggi di più
Ogni modulo Blog offre la possibilità di mostrare o nascondere il collegamento "Leggi di più" per ogni articolo nel layout. Per visualizzare il collegamento "Leggi di più", apri le impostazioni del blog e attiva " Mostra pulsante Leggi di più su "SÌ" nell'elenco degli elementi del blog che desideri visualizzare.
Nella scheda Stile, puoi personalizzare il testo Leggi altro utilizzando una delle opzioni integrate. Per questo esempio, aggiorniamo quanto segue:
- Carattere Leggi di più: Barlow
- Per saperne di più Luce fioca: semi grassetto
- Leggi di più Stile di copia: Maiuscolo (TT), Sottolineato (U)
- Colore del testo Leggi di più: #db0eb7
- Leggi di più Testo sottolineato Colore: #3c5bff
- Spaziatura delle lettere Per saperne di più: 1px
Ecco il risultato.
Attualmente, il collegamento "Leggi di più" è posizionato a sinistra per impostazione predefinita, a meno che tu non modifichi l'allineamento. Per allineare il collegamento al centro o a destra del post, aggiungi uno snippet CSS come questo:
Nella scheda Avanzate delle impostazioni del blog, aggiungi il seguente CSS al CSS del pulsante Leggi di più:
display: block;
text-align: right;
Il "display:block" cambierà il collegamento a un elemento blocco che si estende per l'intera larghezza del suo contenitore (in questo caso, il corpo del contenuto di pubblicazione). Una volta definito come elemento di blocco, possiamo allineare il testo a destra utilizzando “text-align:right”.
Leggi anche: Come creare un'intestazione globale appiccicosa in Divi
Ecco il risultato.
Per centrare il collegamento, sostituisci semplicemente "right" con "center" per il valore della proprietà "text-align" come segue:
Ecco il risultato.
Personalizza il link "Leggi di più" in modo che assomigli a un pulsante
Per questo esempio, creeremo un semplice stile di pulsante a larghezza intera per il collegamento "Leggi di più". Prima di aggiungere il CSS personalizzato, apri le impostazioni del blog e aggiorna il testo del link "Leggi di più" come segue:
- Per saperne di più Copia stile: maiuscolo (TT)
- Colore del testo Leggi di più: #ffffff
Nell'esempio precedente, abbiamo usato "display:block" e "text-align:center" per fare in modo che il collegamento si estenda per l'intera larghezza del contenitore e centra il testo.
Vedi anche: Come creare un menu scorrevole e a pressione in Divi
Per farlo sembrare un pulsante, tutto ciò che dobbiamo fare è aggiungere un po' di colore di sfondo e spaziatura insieme ad alcuni frammenti CSS extra. Per fare ciò, vai alla scheda Avanzate e aggiorna il CSS del pulsante "Leggi di più" come segue:
display: block;
text-align: center;
background-color:#01012C;
padding: 0.3em 1em;
margin-top: 10px;
Risultato
Ecco il risultato!
Creazione di uno stile pulsante avanzato con CSS
Se vuoi portare lo stile dei pulsanti a un altro livello, possiamo aggiungere uno sfondo e un effetto al passaggio del mouse.
Per fare ciò, sostituisci il CSS per il "pulsante Leggi altro" con il seguente:
display: inline-block;
margin-top: 10px;
padding: 0.3em 1em;
background-image: linear-gradient(90deg,#01012C 50%,rgba(0,0,0,0) 50%);
background-color: #3c5bff;
transition: all 300ms;
Per cambiare lo sfondo al passaggio del mouse, puoi incollare il seguente CSS su "Pulsante Ulteriori informazioni" quando passi il cursore del mouse:
display: inline-block;
margin-top: 10px;
padding: 0.3em 1em;
background-color: #01012C;
Risultato
Ecco il risultato!
Cambia il testo "Leggi di più" in qualcos'altro
Per cambiare il testo "Leggi di più" in qualcos'altro, come "Leggi articolo", avremo bisogno di un po' di jQuery. Ma non preoccuparti, queste sono solo poche righe.
Prima di aggiungere il nostro codice jQuery, aggiungi una classe CSS personalizzata al modulo Blog come segue:
- Classe CSS: et-custom-read-more-text
NOTA: assicurati che il nome della classe sia corretto affinché jQuery funzioni.
Per aggiungere la jQuery che modifica il testo "Leggi di più", aggiungi un modulo Codice sotto il modulo Blog.
Quindi incolla il seguente codice jQuery, assicurandoti di avvolgere il codice con i tag di script necessari:
(function ($) {
$(document).on("ready ajaxComplete", function () {
$(".et-custom-read-more-text .et_pb_post a.more-link").html("Lire l'article");
});
})(jQuery);Questo codice fondamentalmente dice al browser di cambiare il testo del collegamento "Leggi di più" in "Leggi l'articolo" una volta caricata la pagina.
Risultato
Ecco il risultato!
Risultati finali
Ecco un altro sguardo alle personalizzazioni del collegamento (o pulsante) Leggi di più che abbiamo apportato.
Scarica DIVI ora!!!
Conclusione
Ecco ! Questo è tutto per questo articolo. Il modulo Divi's Blog ti consente di personalizzare in modo creativo il link "Leggi di più". E se vuoi sperimentare alcuni snippet CSS, puoi creare tu stesso modifiche ancora più avanzate.
Ci auguriamo che questo tutorial ti aiuti a portare quei link "Leggi di più" al livello successivo. 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.
...
