Popup po kliknięciu przycisku – jak go zrobić? Divi + MailerLite
Ostatnio kilka osób pisało do mnie z pytaniem jak zrobić popup, który uruchamia się po kliknięciu przycisku. Osoby, które o to pytały, mają newsletter założony w MailerLite. Postanowiłam więc zrobić instrukcję, której tytuł roboczy brzmiał: Jak zrobić popup w MailerLite, który uruchamia się po kliknięciu przycisku w Divi? Jednak instrukcję, którą przedstawiam dzisiaj, możesz wykorzystać do wielu innych rzeczy. Za jej pomocą możesz nie tylko stworzyć przycisk uruchamiający popup w każdym page builderze. Równie dobrze możesz uruchomić dowolną akcję po kliknięciu przycisku – pod warunkiem, że umiesz ją zakodować 😉
No dobrze, w takim razie czego możesz dowiedzieć się z dzisiejszego filmu? Pokażę Ci jak:
- stworzyć w Divi przycisk, który może uruchamiać dowolną akcję,
- dodać kod do strony, który uruchomi odpowiednie akcje po naciśnięciu przycisku,
- pobrać kod z MailerLite, odpowiedzialny za uruchomienie popupu po kliknięciu i wkleić go w kod na stronie,
- modyfikować kod pokazany we wcześniejszej części, dzięki czemu możesz uruchomić dowolną akcję po kliknięciu przycisku.
To co, zaczynamy? 🙂
Jak stworzyć przycisk, który uruchamia popup?
Na samym początku musimy dodać do naszej strony przycisk, który będzie uruchamiał nasz popup. W tym celu przechodzimy do dowolnej strony i uruchamiamy edycję w Divi (lub innym page builderze, z którego korzystamy). Dodajemy do strony przycisk i ustawiamy jego wygląd tak, jak nam się podoba. Gdy to już mamy zrobione, musimy zmienić w nim jeszcze dwie rzeczy:
- dodać odpowiedni link – w przypadku Divi dodanie linku jest konieczne, aby działał popup. Jeśli nie dodamy odpowiedniego odsyłacza do przycisku – po jego kliknięciu strona zostanie przeładowana i nasza akcja nie zostanie wykonana. Dlatego wchodzimy w Ustawienia -> Zawartość -> Link i w polu Link linku do przycisku wpisujemy dowolne słowo poprzedzone hashtagiem (np. #costam). UWAGA! To słowo wyświetli się po kliknięciu w pasku adresu przeglądarki, więc musimy użyć takiego, który nie odstraszy naszych użytkowników. Jeśli korzystamy z innego page buildera – np. Elementora – nie musimy w polu linku dodawać nic (ale w Elementorze kursor nie będzie miał kształtu łapki po najechaniu na przycisk – w tym celu w polu link musimy wpisać #),
- dodać klasę CSS – kod, który będzie wywoływał nasz popup, rozpoznaje wybrany przez nas przycisk po nazwie klasy, którą mu nadaliśmy. Dlatego w ustawieniach przycisku musimy przejść do zakładki Zaawansowane -> Identyfikator i klasy CSS i w polu Klasa CSS wpisać jakieś słowo. W moim przypadku jest to słowo popup. Zapamiętajcie je, będziemy z niego korzystać później. Ten krok trzeba wykonać niezależnie od tego czy korzystamy z Divi, Elementora czy innego page buildera.
Dodanie kodu odpowiedzialnego za wywołanie popupa
Kolejnym krokiem, który musimy wykonać, jest dodanie odpowiedniego kodu w nagłówku naszej strony. W przypadku Divi wystarczy wejść w menu WordPressa -> Divi -> Opcje szablonów graficznych -> Integracja -> Dodaj kod <head> Twojego bloga. Jeśli korzystamy z page buildera, który nie ma wbudowanej opcji dodawania kodu w nagłówku, musimy skorzystać z innego rozwiązania – na przykład wtyczki Header Footer Code Manager.
W miejsce kodu wklejamy poniższy kod:
<script>
jQuery(document).ready(function(){
var ml_webform_1523116 = ml_account('webforms', '1523116', 'i5o9h7', 'load');
ml_webform_1523116('animation', 'fadeIn');
jQuery('.popup').click(function() {
ml_webform_1523116('show');
} );
});
</script>
Zaraz będziemy go edytować, ale najpierw musimy dowiedzieć się, za co odpowiadają poszczególne linijki.
var ml_webform_1523116 = ml_account('webforms', '1523116', 'i5o9h7', 'load');
ml_webform_1523116('animation', 'fadeIn');
Te linijki to kody, które ładują popup na naszej stronie internetowej (ale bez pokazywania go). Znajdziemy je w MailerLite – za chwilę powiem gdzie.
jQuery('.popup').click(function() {
Ta linijka otwiera funkcję, która uruchamia się po kliknięciu w wybrany przez nas przycisk. W miejscu .popup wpisujemy klasę CSS, którą nadaliśmy naszemu przyciskowi (poprzedzoną kropką).
ml_webform_1523116('show');
Ta linijka odpowiada za wywołanie naszego popupa – ten fragment również znajdziemy w naszym MailerLite.
Teraz zobaczmy gdzie szukać kodów ML.
Skopiowanie kodu z MailerLite
Do wywołania popupa z MailerLite potrzebne nam są kody, które znajdziemy w MailerLite. Żeby je skopiować, musimy przejść do naszego konta na MailerLite, a następnie przejść do zakładki Formularze -> Pop-ups i kliknąć na nazwę naszego popupa (lub go stworzyć). Następnie zjeżdżamy na sam dół i w sekcji Kod śledzący JavaScript przełączamy się na zakładkę pokaż popup po akcji: kliknięcie.
W pierwszym polu znajdują się linijki kodu odpowiedzialne za załadowanie popupa na naszą stronę. Kopiujemy je – bez tagów <script> oraz </script> i wklejamy w odpowiednie miejsce kodu na naszej stronie.
W kolejnym polu znajdziemy kod, odpowiedzialny za dodanie linku, który ma wywołać nasz popup na stronie. Mogłybyśmy wrzucić ten link na naszą stronę wyedytować jego wygląd w CSS. Jednak gdybyś chciała tak zrobić, nie byłoby Cię tutaj 😉 W tym linku musimy znaleźć fragment kodu zaczynający się od onclick=. Po znaku równości – w cudzysłowie – znajdziemy naszą funkcję, odpowiedzialną za wywołanie popupa. Kopiujemy ją (bez cudzysłowu) i wklejamy w odpowiednim miejscu w kod, który znajduje się na naszej stronie. Pamiętaj, żeby na końcu linijki z tą funkcją znajdował się średnik.
Gdy już mamy obie te rzeczy zrobione – zapisujemy zmiany i przechodzimy na stronę z naszym przyciskiem. Jeśli była wcześniej otwarta – musimy ją odświeżyć, żeby nasz kod załadował się na stronie. Po kliknięciu przycisku powinien wyskoczyć Twój popup. Gratulacje!
UWAGA! Zwróć uwagę, że na filmie nie włączyłam tego popupa. Nie jest to koniecznie do jego wyświetlania. Jeśli go włączysz – będzie się pojawiał na stronie zgodnie z ustawieniami, które w nim zdefiniowałaś. Jeśli pozostawisz ten popup wyłączony, będzie się uruchamiał tylko po naciśnięciu na przycisk.
Jak dodać jakąkolwiek akcję po kliknięciu w przycisk?
Na początku artykułu powiedziałam, że możesz wykorzystać ten film przy tworzeniu dowolnej akcji, która uruchamia się po kliknięciu w przycisk. Żeby to zrobić, musisz usunąć z kodu wszystkie funkcje MailerLite. Następnie w nawiasach klamrowych po linijce jQuery(’.popup’).click(function() { umieszczasz dowolny kod JavaScript, który uruchamia jakąś akcję. Dla przykładu – jeśli chcesz przekierować użytkownika na dowolną stronę po dwóch sekundach po kliknięciu w przycisk, ten kod będzie wyglądał tak:
<script>
jQuery(document).ready(function(){
jQuery('.popup').click(function() {
setTimeout(function() {
window.location.href = "http://twojastrona.pl"
}, 2000);
} );
});
</script>
Z czego 2000 to czas, po jakim następuje przekierowanie na inną stronę w milisekundach.
Mam nadzieję, że ten artykuł był dla Ciebie przydatny. Jeśli tak – koniecznie daj mi znać w komentarzu. Będzie mi również bardzo miło, jeśli podzielisz się nim z kimś, kto może tego potrzebować 🙂
Hej Paulina,
Dziękuję za wskazówki odnośnie do tworzenia pop-up w Divi.
Od samego początku wgrania motywu Divi na stronę mam problem z edycją wpisów, bo gdy chcę edytować w edytorze Divi builderze, strona ładuje się bardzo długo i w zasadzie nie ładuje się w ogóle. Cały czas kręcą się kółka, wskazujące na ładowanie edytora. I nic. Nic się nie dzieje. Wtedy, po godzinie czekania przełączam na Elementora, w którym robię wszystkie zmiany.
Tak sobie jednak myślę, że nie po to kupowałam motyw Divi, by pracować na Elementorze 🙂
Doradź, proszę czy to konflikt Elementor/Divi może to powodować, że builder Divi jest nieaktywny?
Pozdrawiam i dziękuję za pomoc,
Joanna Lis
Cześć Joanna. Najczęściej dzieje się tak przy konflikcie wtyczek. Może to być Divi/Elementor, ale niekoniecznie. Najlepiej byłoby wyłączyć wszystkie wtyczki i sprawdzić jak działa motyw Divi, a potem włączać po jednej i również sprawdzać jak Divi działa. Czasem pomaga też aktualizacja.