Introduzione
A tutti piace il fantastico modulo Blur e… per una buona ragione! È infatti davvero un modulo Divi molto versatile in tante occasioni. Alcune persone hanno chiesto di spostare il titolo sopra l’immagine, ma a causa della struttura del modulo non è possibile. Quindi dobbiamo riformattare il modulo con un semplice frammento di jQuery. In questo tutorial ti mostrerò come spostare il testo del titolo del modulo blurb Divi sopra l’immagine.
1. Aggiungi una classe CSS personalizzata al modulo Divi Blur
Il primo passo è posizionare il modulo Divi Blur nel layout e aggiungere la tua immagine, scrivere il testo del titolo e scrivere il corpo del testo. Dopodiché, possiamo andare avanti e riorganizzare questa cosa!
Vai alle impostazioni del modulo Blur> Avanzate> CSS ID e classi attiva/disattiva e aggiungi la classe “pa-move-blurb-title” al campo di input Classe CSS. Questo ci consente di indirizzare solo questo particolare modulo con il CSS.
2. Aggiungi Lo Snippet JQuery
Il passaggio successivo consiste nel copiare semplicemente lo snippet jQuery di seguito nel tuo sito. Il codice sta semplicemente anteponendo l’intestazione all’immagine, il che significa che prende il contenitore di testo del titolo e lo stacca dalla sua posizione corrente nel modulo e lo allega prima dell’immagine.
Se stai utilizzando un tema Child, inserisci questo frammento di codice nel file scripts.js e rimuovi i tag script all’inizio e alla fine. Altrimenti, inseriscilo nella scheda Divi> Opzioni tema> Integrazioni nell’area del codice “Aggiungi codice alla < head > del tuo blog” .
<script>
jQuery(document).ready(function() {
jQuery(".pa-move-blurb-title .et_pb_module_header").prependTo(".pa-move-blurb-title .et_pb_main_blurb_image");
});
</script>Prima
Dopo
Conclusione
Spero che ti sia piaciuto imparare a spostare il titolo del modulo Divi Blur sopra l’immagine.
Scrivi nei commenti qui sotto, ci piacerebbe sapere cosa ne pensi!
0 commenti