Come aprire Divi Fullwidth Header & Slider Buttons in New Tab/Window

Sappiamo tutti che costruire un sito web che attiri e parli a un pubblico particolare è un processo. Ogni azione che intraprendono sul tuo sito Web è importante perché fa parte del percorso del cliente. Ogni visitatore, e potenziale cliente, ha bisogno di sentirsi avvicinato e compreso personalmente.

Ottenere il tuo sito web sul punto richiede molte cose, come un buon design, contenuti ben congegnati e sicuramente abbastanza CTA che spingeranno i tuoi visitatori a intraprendere le azioni che tu e loro vogliono.

Uno degli elementi più utilizzati che supportano gli inviti all'azione su un sito Web è un pulsante. Di solito puoi trovare pulsanti in varie sezioni di un sito web. Possono portare a diverse parti del sito Web o possono indirizzare un visitatore a un sito Web esterno.

Con Divi, permettiamo a ogni persona che sta creando un sito Web di includere i propri pulsanti dove vuole e quanto vuole. Se vuoi interagire con il tuo pubblico di destinazione in modo rapido e se vuoi suscitare curiosità fin dall'inizio della loro visita sul tuo sito web, è una buona cosa aggiungere un CTA nella tua sezione degli eroi.

Perché dovresti aprire automaticamente un collegamento in una nuova scheda/finestra?

Non possiamo influenzare l'apertura di un collegamento in una nuova finestra. È qualcosa di cui molte persone hanno abusato in passato e ora tutto dipende dalle preferenze dell'utente. Tuttavia, abbiamo la possibilità di aprire un determinato collegamento in una nuova scheda anziché nella stessa finestra. Ci sono molti motivi per cui vorresti aprire un collegamento in una nuova scheda, eccone alcuni:

Non lasciare che i tuoi visitatori escano dal sito web

Nel momento in cui perdi i tuoi visitatori, è molto difficile riportarli di nuovo sul tuo sito web. Di solito è il caso quando li invii a un sito Web esterno all'interno della stessa finestra quando fai clic su un pulsante.

Quindi, perché mandarli via in primo luogo? Facendo aprire i pulsanti in una nuova scheda, ti assicuri che abbiano ancora una pagina aperta con il tuo sito Web nelle loro schede. Possono tornare alla tua pagina senza dover passare attraverso la loro cronologia.

Continuando la loro permanenza sul tuo sito web dopo aver chiuso il link che hanno aperto

È una cosa naturale chiudere una scheda ogni volta che finisci di leggere qualcosa. O è quello, o stai facendo clic via. In entrambe le situazioni, dal momento in cui passano a un'azione successiva, sono un altro passo da te.

L'apertura automatica del collegamento in una nuova scheda o finestra ti aiuta a ricordare alle persone come sono arrivate da qualche altra parte in primo luogo; attraverso il tuo sito web.

Riprendendo sulla scheda aperta più tardi

Non saresti la prima persona ad avere un mucchio di schede allineate l'una accanto all'altra per giorni. Questo è esattamente ciò che rende prezioso mantenere il tuo presente nel browser delle persone. Se i visitatori trovano il tuo sito Web nelle loro schede aperte dopo alcuni giorni, potrebbero aver avuto il tempo di far penetrare i tuoi contenuti e dargli un altro giro.

È probabile che il contenuto venga compreso molto di più quando viene letto per una seconda, terza o quarta volta.

Inizia: apri intestazione a larghezza intera e pulsanti di scorrimento in una nuova scheda

Quando non utilizziamo una sezione a larghezza intera con un'intestazione a larghezza intera o un dispositivo di scorrimento a larghezza intera, di solito aggiungiamo una sezione standard e aggiungiamo manualmente i moduli pulsante. Nella scheda Contenuto di ciascun modulo pulsante, puoi scegliere se desideri aprire un collegamento nella stessa finestra o una nuova scheda. Puoi trovare questa opzione nella sottocategoria Link della scheda Contenuto.

Nell'intestazione e nel cursore a larghezza intera, queste possibilità non sono incluse. E poiché l'HTML è predefinito, non possiamo semplicemente modificare il codice HTML che lo accompagna. Ecco perché aggiungeremo il codice jQuery che aprirà i pulsanti Fullwidth Header e Fullwidth Slider in una nuova scheda/finestra.

Creazione di un'intestazione a larghezza intera

Iniziamo aggiungendo una nuova sezione a larghezza intera a una pagina esistente o nuova.

All'interno di quella sezione a larghezza intera, seleziona l'intestazione a larghezza intera. L'intestazione Fullwidth fornisce un sito Web con una bella intestazione che ha tutto ciò di cui ha bisogno. Ora scorri verso il basso la scheda Contenuto dell'intestazione Fullwidth e annota il testo che desideri venga visualizzato sul pulsante. Successivamente, aggiungi anche un collegamento al pulsante.

Quindi, vai alla scheda Avanzate dell'intestazione Fullwidth e scorri verso il basso finché non trovi i campi dei pulsanti. In questo caso, vogliamo utilizzare solo il pulsante numero uno. Supponiamo di voler aprire il secondo pulsante in una nuova scheda, dovrai utilizzare la classe assegnata al pulsante due.

Fare clic nel campo Pulsante uno e guardare la classe apparire con un carattere di colore arancione. La classe è '.et_pb_fullwidth_header_0 .header-content-container .header-content .et_pb_button_one.et_pb_button'. Avremo bisogno di questa classe nel nostro codice jQuery. Se vuoi che il secondo pulsante si apra in una nuova scheda o finestra, vai avanti e salva quella classe da qualche parte.

Creazione di uno slider a tutta larghezza

Se invece desideri aggiungere un cursore a larghezza intera, vai avanti e aggiungi una nuova sezione a larghezza intera. Questa volta, posiziona un cursore a larghezza intera nella sezione. Annota il testo del pulsante nella scheda Contenuto e passa alla scheda Avanzate.

Scorri verso il basso quella scheda fino a trovare l'opzione Pulsante di scorrimento. Copia la classe assegnata del pulsante che fa parte del Fullwidth Slider.

Aggiunta di codice jQuery alle opzioni del tema Divi

Il codice che utilizzeremo per aprire i collegamenti in una nuova scheda per l'intestazione e il cursore a larghezza intera è diverso. Oltre a ciò, possiamo anche integrare il codice jQuery nel nostro sito Web in due modi diversi. Il più comune è l'aggiunta di codice alle Opzioni del tema del tuo sito Web Divi.

Il motivo per cui le persone usano questa opzione più spesso è perché si applicherà all'intero sito web. In qualunque pagina del tuo sito tu sia, il codice verrà applicato. È il modo più semplice per aggiungere codice personalizzato al tuo sito web se riutilizzi determinate sezioni o elementi in pagine diverse del tuo sito web.

Per aggiungere il codice a tutto il tuo sito web, vai su Divi > Opzioni del tema > Integrazione e aggiungi il seguente codice all'<head> del tuo sito web :

Codice jQuery per il pulsante Intestazione a larghezza intera

<script>
jQuery(function($){
$('.et_pb_fullwidth_header_0 .header-content-container .header-content .et_pb_button_one.et_pb_button').attr('target', '_blank');
});
</script>

Codice jQuery per il pulsante Fullwidth Slider

<script>
jQuery(function($){
$('.et_pb_slide_0.et_pb_slide .et_pb_container a.et_pb_more_button.et_pb_button').attr('target', '_blank');
});
</script>

Non dimenticare di aggiungere il testo tra i tag <script> come mostrato nella schermata di stampa sopra.

Come puoi notare, il codice è leggermente diverso per Fullwidth Header e Fullwidth Slider. Si può notare come la classe di ogni pulsante sia scritta tra parentesi nella terza riga del codice. Quindi, supponiamo di voler applicare il codice al secondo pulsante dell'intestazione Fullwidth, basta sostituire la classe scritta con quella assegnata al secondo pulsante.

Successivamente, salva le modifiche. Il codice verrà immediatamente applicato a tutto il tuo sito web.

Aggiunta di codice jQuery al modulo di codice

Un'altra possibilità per aggiungere il codice al tuo sito Web è utilizzare il Modulo codice. Questo modulo viene solitamente utilizzato quando il codice che si desidera includere si applica solo a una pagina.

Apri la pagina in cui desideri applicare le modifiche e aggiungi una riga con una colonna nella parte superiore della pagina. Successivamente, aggiungi un modulo di codice a quella riga.

Copia lo stesso codice e incollalo nella casella del contenuto all'interno della sottocategoria Testo della scheda Contenuto.

Codice jQuery per il pulsante Intestazione a larghezza intera

<script>
jQuery(function($){
$('.et_pb_fullwidth_header_0 .header-content-container .header-content .et_pb_button_one.et_pb_button').attr('target', '_blank');
});
</script>

Codice jQuery per il pulsante Fullwidth Slider

<script>
jQuery(function($){
$('.et_pb_slide_0.et_pb_slide .et_pb_container a.et_pb_more_button.et_pb_button').attr('target', '_blank');
});
</script>

Salva le modifiche.

Non dimenticare di aggiungere il testo tra i tag <script> come mostrato nella schermata di stampa sopra. Il codice verrà ora applicato solo a quella pagina del sito web.

Pensieri finali

L'aggiunta del codice seguente sul tuo sito Web è necessaria solo quando desideri che un pulsante si apra in una nuova scheda mentre utilizzi l'intestazione e il cursore a larghezza intera in una sezione a larghezza intera. Con il Modulo pulsanti, hai un'opzione inclusa in Divi Builder in cui puoi scegliere di aprire un collegamento in una nuova scheda.

Se desideri utilizzare il codice in più pagine del tuo sito web, aggiungilo alle Opzioni tema del tuo sito web. Ma se stai usando solo il codice per un'intestazione Fullwidth o un cursore Fullwidth, potresti stare meglio aggiungendo il codice in un modulo di codice su quella pagina specifica.

Con quale frequenza apri i tuoi link in una nuova scheda e perché? Fatecelo sapere nella sezione commenti qui sotto!