Jak otworzyć przyciski nagłówka i suwaka Divi o pełnej szerokości w nowej karcie / oknie?

Wszyscy wiemy, że budowanie strony internetowej, która przyciąga i przemawia do określonej grupy odbiorców, to proces. Każde działanie, które podejmuje w Twojej witrynie, ma znaczenie, ponieważ jest częścią podróży klienta. Każdy gość i potencjalny klient musi czuć się osobiście traktowany i rozumiany.

Aby Twoja witryna była na miejscu, wymaga wielu rzeczy, takich jak dobry projekt, dobrze przemyślana treść i zdecydowanie wystarczająco dużo CTA, które skłonią odwiedzających do podjęcia działań zarówno ty, jak i tego, czego chcą.

Jednym z najczęściej używanych elementów wspierających wezwania do działania na stronie internetowej jest przycisk. Zazwyczaj przyciski można znaleźć w różnych sekcjach witryny. Mogą prowadzić do różnych części witryny lub odsyłać odwiedzającego do zewnętrznej witryny.

Dzięki Divi pozwalamy każdej osobie, która tworzy stronę internetową, umieścić swoje przyciski tam, gdzie chce i ile chce. Jeśli chcesz szybko nawiązać kontakt z odbiorcami docelowymi i chcesz wzbudzić ciekawość od samego początku wizyty na Twojej stronie, dobrze jest dodać CTA w swojej sekcji bohaterów.

Dlaczego powinieneś automatycznie otwierać link w nowej karcie/oknie?

Nie mamy wpływu na otwarcie linku w nowym oknie. To coś, co wiele osób nadużywało w przeszłości, a teraz wszystko zależy od preferencji użytkownika. Mamy jednak możliwość otwarcia określonego linku w nowej karcie zamiast w tym samym oknie. Istnieje wiele powodów, dla których chciałbyś otworzyć link w nowej karcie, oto niektóre z nich:

Nie pozwalając odwiedzającym uciec od strony internetowej

W momencie, gdy tracisz odwiedzających, trudno jest przywrócić ich ponownie do Twojej witryny. Zwykle dzieje się tak, gdy wysyłasz je do zewnętrznej witryny w tym samym oknie po kliknięciu przycisku.

Po co więc je odesłać? Otwierając przyciski w nowej karcie, upewniasz się, że nadal mają otwartą stronę z Twoją witryną w swoich kartach. Mogą wrócić do Twojej strony bez konieczności przeglądania swojej historii.

Kontynuowanie pobytu na Twojej stronie po zamknięciu linku, który otworzył

Zamykanie karty po zakończeniu czytania jest naturalną rzeczą. Albo to, albo klikasz. W obu sytuacjach, od momentu przejścia do następnej akcji, są o krok od Ciebie.

Automatyczne otwieranie linku w nowej karcie lub oknie pomaga przede wszystkim przypomnieć ludziom, jak wylądowali gdzie indziej; za pośrednictwem Twojej witryny.

Odbiór na otwartej karcie później

Nie byłbyś pierwszą osobą, która przez wiele dni miałaby kilka kart ustawionych obok siebie. Właśnie to sprawia, że ​​warto utrzymywać swoją obecność w przeglądarce. Jeśli po kilku dniach odwiedzający znajdą Twoją witrynę w otwartych kartach, być może mieli czas, aby wpuścić Twoją zawartość i poświęcić jej kolejną rundę.

Istnieje prawdopodobieństwo, że treść będzie znacznie lepiej zrozumiana podczas czytania po raz drugi, trzeci lub czwarty.

Rozpocznij: otwórz przyciski nagłówka i suwaka o pełnej szerokości w nowej karcie

Gdy nie używamy sekcji o pełnej szerokości z nagłówkiem o pełnej szerokości lub suwakiem o pełnej szerokości, zwykle dodajemy standardową sekcję i ręcznie dodajemy do niej moduły przycisków. Na karcie Treść każdego modułu przycisku możesz wybrać, czy chcesz otworzyć łącze w tym samym oknie, czy w nowej karcie. Możesz znaleźć tę opcję w podkategorii Link na karcie Treść.

W nagłówku i suwaku o pełnej szerokości te możliwości nie są uwzględnione. A ponieważ kod HTML jest predefiniowany, nie możemy po prostu modyfikować kodu HTML, który jest z nim dostarczany. Dlatego zamierzamy dodać kod jQuery, który spowoduje otwarcie przycisków Fullwidth Header i Fullwidth Slider w nowej karcie/oknie.

Tworzenie nagłówka o pełnej szerokości

Zacznijmy od dodania nowej sekcji o pełnej szerokości do istniejącej lub nowej strony.

W tej sekcji o pełnej szerokości wybierz nagłówek o pełnej szerokości. Nagłówek o pełnej szerokości zapewnia witrynę internetową z pięknym nagłówkiem, który ma wszystko, czego potrzebuje. Teraz przewiń w dół kartę Treść nagłówka Fullwidth i zapisz tekst, który chcesz umieścić na przycisku. Następnie dodaj również link do przycisku.

Następnie przejdź do zakładki Zaawansowane nagłówka Fullwidth i przewiń w dół, aż natkniesz się na pola przycisków. W tym przypadku chcemy użyć tylko przycisku numer jeden. Załóżmy, że chcesz otworzyć drugi przycisk w nowej karcie, musisz użyć klasy przypisanej do przycisku drugiego.

Kliknij pole Button One i zobacz, jak klasa pojawia się w pomarańczowym kolorze czcionki. Klasa to „.et_pb_fullwidth_header_0 .header-content-container .header-content .et_pb_button_one.et_pb_button”. Będziemy potrzebować tej klasy w naszym kodzie jQuery. Jeśli chcesz, aby drugi przycisk otwierał się w nowej karcie lub oknie, zapisz gdzieś tę klasę.

Tworzenie suwaka o pełnej szerokości

Jeśli zamiast tego chcesz dodać suwak pełnej szerokości, dodaj nową sekcję pełnej szerokości. Tym razem umieść suwak pełnej szerokości w sekcji. Zapisz tekst przycisku w zakładce Treść i przejdź do zakładki Zaawansowane.

Przewiń tę kartę, aż znajdziesz opcję Przycisk slajdów. Skopiuj przypisaną klasę przycisku, który jest częścią suwaka pełnej szerokości.

Dodawanie kodu jQuery do opcji motywu Divi

Kod, którego będziemy używać do otwierania linków w nowej karcie dla nagłówka i suwaka o pełnej szerokości, jest inny. Poza tym możemy również zintegrować kod jQuery z naszą stroną na dwa różne sposoby. Najczęstszym z nich jest dodanie kodu do opcji motywu witryny Divi.

Powodem, dla którego ludzie najczęściej korzystają z tej opcji, jest to, że dotyczy ona całej witryny. Kod zostanie zastosowany na dowolnej stronie Twojej witryny. Jest to najłatwiejszy sposób na dodanie niestandardowego kodu do witryny, jeśli ponownie wykorzystujesz określone sekcje lub elementy na różnych stronach witryny.

Aby dodać kod do całej witryny, przejdź do Divi > Opcje motywu > Integracja i dodaj następujący kod do <head> swojej witryny :

Kod jQuery dla przycisku nagłówka o pełnej szerokości

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

Kod jQuery dla przycisku suwaka pełnej szerokości

<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>

Nie zapomnij dodać tekstu między znacznikami <script>, jak pokazano na powyższym zrzucie ekranu.

Jak widać, kod jest nieco inny dla nagłówka Fullwidth i suwaka Fullwidth. Możesz zauważyć, jak klasa każdego przycisku jest zapisana w nawiasach w trzecim wierszu kodu. Załóżmy więc, że chcesz, aby kod został zastosowany do drugiego przycisku nagłówka o pełnej szerokości, po prostu zamień napisaną klasę na tę, która jest przypisana do drugiego przycisku.

Następnie zapisz zmiany. Kod zostanie natychmiast zastosowany w całej witrynie.

Dodawanie kodu jQuery do modułu kodu

Inną możliwością dodania kodu do swojej strony internetowej jest użycie modułu kodu. Ten moduł jest zwykle używany, gdy kod, który chcesz dołączyć, dotyczy tylko jednej strony.

Otwórz stronę, na której chcesz zastosować zmiany, i dodaj wiersz z jedną kolumną u góry strony. Następnie dodaj moduł kodu do tego wiersza.

Skopiuj ten sam kod i wklej go do pola zawartości w podkategorii Tekst na karcie Zawartość.

Kod jQuery dla przycisku nagłówka o pełnej szerokości

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

Kod jQuery dla przycisku suwaka pełnej szerokości

<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>

Zapisz zmiany.

Nie zapomnij dodać tekstu między znacznikami <script>, jak pokazano na powyższym zrzucie ekranu. Kod będzie teraz dotyczył tylko tej strony witryny.

Końcowe przemyślenia

Dodanie następującego kodu w witrynie jest konieczne tylko wtedy, gdy chcesz, aby przycisk otwierał się w nowej karcie podczas korzystania z nagłówka i suwaka o pełnej szerokości w sekcji o pełnej szerokości. Dzięki modułowi przycisków masz dołączoną opcję w Divi Builder, w której możesz otworzyć łącze w nowej karcie.

Jeśli chcesz użyć kodu na kilku stronach swojej witryny, dodaj go do opcji motywu swojej witryny. Ale jeśli używasz tylko kodu dla jednego nagłówka o pełnej szerokości lub suwaka o pełnej szerokości, może być lepiej, dodając kod w module kodu na tej konkretnej stronie.

Jak często otwierasz linki w nowej karcie i dlaczego? Daj nam znać w sekcji komentarzy poniżej!