Wyklikane

Praktyczne wskazówki jak zaprojektować, a następnie zarządzać stroną internetową.

Wyklikane
Przyklejone menu Elementor

Jak zrobić przyklejone menu w Elementor

Podczas pracy nad stronami internetowymi dla swoich klientów, już kilkakrotnie zostałem poproszony aby zaprojektowane menu główne, było zawsze widoczne na ekranie. Przyklejone do góry ekranu, zawsze pływało za użytkownikiem, niezależnie w której części strony się on znajduje. Nieco podobnie jak u mnie na blogu, tyle że moje menu jeszcze się chowa i pokazuje dopiero przy delikatnym scrollu w górę. Ale to trick do pokazania na inny artykuł. Wrócę teraz do tematu głównego. A zatem jak zrobić przyklejone menu w Elementor? Potrzebujesz Elementor Pro Zanim przejdziemy do poradnika muszę Cię uprzedzić, że jeśli planujesz wykonać przyklejone menu w 100% na Elementor, to potrzebujesz wersji Pro tej wtyczki. Sprawdza się idealnie w połączeniu z darmową wersją bazową i zapewnia pełną zgodność. Jeśli tworzysz strony w Elementorze i nie chcesz wspierać się dodatkowymi wtyczkami, to rozwiązanie jest właśnie dla Ciebie. Zaczynamy: Krok 1: Stwórz menu Na początek oczywista oczywistość – do stworzenia “pływającego” menu potrzebujesz… menu. Stworzysz je w zakładce WordPress pod pozycją Wygląd -> Menu. Zakładam jednak, że ten banalny krok masz już za sobą i oczekujesz konkretnej porady. Idźmy dalej. Krok 2: Otwórz Kreator Motywów Po tym jak stworzysz menu, przejdź do Kreatora Motywów

Czytaj więcej
Formularz kontaktowy Elementor z Google reCAPTCHA

Formularz kontaktowy Elementor z Google reCAPTCHA

Cześć! Korzystając z okazji, że publikuję ostatnio poradniki o rozbudowie widżetu formularza kontaktowego Elementor Pro, chciałbym dziś pokazać, jak zabezpieczyć formularz kontaktowy Elementor z Google reCAPTCHA. Proponuję Ci przy okazji dwa super wpisy o tym, jak zrobić w Elementorze automatycznie rozwijany formularz kontaktowy oraz dodać możliwość wyboru adresata wiadomości.  Pokazałem w nich, jak automatycznie rozszerzać pole wpisywanej wiadomości w miarę wpisywania treści oraz dać użytkownikowi możliwość wyboru, do kogo chce wysłać swoją wiadomość z formularza. Dziś pokażę Ci, jak zabezpieczyć się przed spamem, czyli dużą ilością maili rozsyłanych przez złośliwe roboty i automaty wykorzystujące Twój formularz kontaktowy. reCAPTCHA v2 vs reCAPTCHA v3 Jeśli zastanawiasz się czym różni się reCAPTCHA v2 od reCAPTCHA v3, już wyjaśniam. reCAPTCHA v2 wymaga od użytkownika rozwiązania prostego quizu – tak, wszyscy lubimy zaznaczać przejścia dla pieszych 😉 reCAPTCHA v3 nie wymaga od użytkownika żadnych dodatkowych czynności. Algorytm Google na podstawie wielu czynników sam decyduje czy formularz kontaktowy został wypełniony przez człowieka czy przez spamującego robota. Formularz kontaktowy Elementor z Google reCAPTCHA Zabezpieczenie formularza jest bardzo proste. Procedurę podzielę na dwa etapy: wygenerowanie kluczy

Czytaj więcej
wybór adresata wiadomości formularza

Elementor: wybór adresata wiadomości formularza kontaktowego

Cześć! Chciałbym Ci pokazać jak rozbudować widżet formularza kontaktowego dostępnego w Elementor Pro. Jeśli jesteś stałym czytelnikiem mojego bloga, to zapewne widziałeś wpis Elementor: automatycznie rozwijany formularz kontaktowy.  Pokazałem w nim, jak automatycznie rozszerzać pole wpisywanej wiadomości w miarę wpisywania treści. Dziś opiszę jak umożliwić użytkownikom wybór adresata wiadomości formularza kontaktowego. Załóżmy, że tworzysz formularz kontaktowy dla firmy usługowej i chcesz dać użytkownikowi możliwość wyboru, do kogo chce wysłać swoją wiadomość z formularza. Zobaczy on opcję kontaktu z biurem obsługi klienta, kadrami lub księgowością. W przeciwieństwie do wspomnianego wcześniej wpisu, tym razem skorzystasz z wbudowanej, ale trochę ukrytej opcji Elementora Pro. Nie musisz wklejać żadnych kawałków kodu JavaScript ani podobnych. 100% Elementora. Zaczynamy! Wybór adresata wiadomości formularza kontaktowego Zakładam, że masz już zbudowany prosty formularz i teraz jedynie rozszerzymy jego funkcje. Krok 1 Pierwsze co musisz zrobić, to zaznacz swój formularz kontaktowy aby zobaczyć jego opcje w panelu Elementora i kliknij przycisk „+ DODAJ ELEMENT” Krok 2 Ustaw typ treści pola jako „Select” Krok 3 Wpisz opcjonalną etykietę pola, np. „Odbiorca wiadomości” Krok 4

Czytaj więcej
Jak zrobić stronę 404

Elementor: jak zrobić stronę 404

Wszedłeś kiedyś na jakiś link do strony, tylko po to, żeby zobaczyć błąd 404? Jeśli jakiś użytkownik wejdzie na Twoją stronę i przejdzie w link do podstrony która nie istnieje, to zobaczy brzydki komunikat przeglądarki z numerem błędu. W WordPress możesz samodzielnie zaprojektować wygląd takiej strony. W tym poście pokażę Ci jak zrobić stronę 404 w Elementorze. Kiedy pojawia się błąd 404? Błąd 404 Not Found oznacza w zasadzie tyle, że przeglądarce udało się nawiązać połączenie z serwerem strony internetowej (czyli witryna istnieje), ale nie odnalazł tego konkretnego adresu dla szukanej podstrony. Ty lub inny użytkownik napotkacie się na ten błąd gdy spróbujecie otworzyć podstronę, która nie istnieje. Może się tak stać z dwóch zasadniczych powodów: kliknąłeś na niedziałający link źle wpisałeś adres URL w pasku przeglądarki Dlaczego warto zaprojektować własną stronę 404? Niezależnie od tego jak co byś zrobił czy zrobiła jako właściciel, jakiś odsetek użytkowników i tak trafi na niedziałający link lub nieistniejącą stronę w obrębie Twojej witryny. Jeśli taki użytkownik trafi na stronę 404 i nie znajdzie treści których szuka, mogą się wydarzyć dwa scenariusze: sfrustrowany opuści stronę Twoja strona 404 wskaże mu drogę do innych wartościowych treści W drugim przypadku zatrzymujesz użytkownika u siebie

Czytaj więcej
Zamknięty akordeon

Elementor: domyślnie zamknięty akordeon

Witaj! Jeśli zdarzyło Ci się kiedyś tworzyć stronę internetową za pomocą Elementora to jest spora szansa, że natknąłeś się na widżet „Akordeon”. Przydaje się szczególnie do sekcji z pytaniami i odpowiedziami na stronie. Elementor domyślnie ustawia pierwszą kartę widżetu jako otwartą. Za chwilę, pokażę Ci jak nakłonić go, aby po wejściu na stronę, pokazał się domyślnie zamknięty akordeon. Istota problemu Ze względu na fakt, że domyślne zachowanie kart akordeonu nie każdemu może przypaść do gustu, postanowiłem, poszukać rozwiązania. Przydaje się ono szczególnie, gdy posiadasz akordeon podzielony na kilka sekcji z nagłówkiem. Zobacz obrazek poniżej:    Ponieważ, chcesz podzielić go na sekcje, nie ma innej opcji niż zduplikować widżet i wstawić nagłówki. Niestety pierwsza karta w każdym z nich jest automatycznie rozwinięta. Zamknięty akordeon Możemy jednak temu zapobiec i stworzyć taki widok:   Jak to zrobić? Zapytasz. Już pokazuję: 1) Przejdź do strony z widżetem Akordeon i dodaj na dole strony nowy blok HTML (nie  Własny HTML, tylko ten zwykły HTML pokazany poniżej po lewej). 2) W treści pola tekstowego wklej poniższy fragment kodu: 3) A następnie zapisz zmiany na stronie. 4) To wszystko! Wszystkie karty akordeonu będą teraz automatycznie zamknięte

Czytaj więcej
rozwijany formularz kontaktowy

Elementor: automatycznie rozwijany formularz kontaktowy

Cześć klikaczu! Chciałbym podzielić się z Tobą praktyczną wiedzą, jak stworzyć automatycznie rozwijany formularz kontaktowy. A dokładnie, to rozwijane pole formularza kontaktowego stworzonego w Elementorze. Jeśli jeszcze nie wiesz, czym jest Elementor, to koniecznie przeczytaj mój poprzedni wpis. Istota problemu Każde pole wiadomości w dowolnym formularzu kontaktowym, ma z góry określoną wysokość jaką zajmuje. Gdy wpisujesz treść wiadomości, która jest dłuższa niż liczba znaków mieszczących się w widocznym polu, przeglądarka dodaje w nim pasek przewijania. Sam Elementor pozwala na ręczne zdefiniowanie bazowej ilości wierszy pola tekstowego. W moim przykładzie po lewej stronie obrazka w nagłówku tego wpisu są to 2 linijki (wysokość pola na wiadomość). Dopisanie trzeciej linii tekstu powoduje dodanie przez przeglądarkę wspomnianego paska przewijania. Chociaż jest to bardzo praktyczne i naturalne rozwiązanie, to niekonicznie jednak estetyczne. Rozwijany formularz kontaktowy Jeśli korzystasz z Elementora, to możesz w prosty sposób zmodyfikować zachowanie formularza kontaktowego tak, aby pole wiadomości automatycznie rozwijało się wraz z ilością wpisywanej treści. Jak to zrobić? Zapytasz. Już pokazuję: 1) Przejdź do strony z formularzem kontaktowym i dodaj na dole strony nowy blok HTML (nie  Własny HTML, tylko ten zwykły HTML pokazany

Czytaj więcej

Elementor PRO – czy warto kupować?

Jeśli zastanawiasz się czym różni się Elementor od Elementora Pro i czy warto wydawać pieniądze na płatną wersję pluginu, to przeczytaj poniższy artykuł w którym postaram się rozwiać Twoje wątpliwości. Jest to rozwinięcie poprzedniego wpisu opisującego czym jest Elementor. Główne różnice Technicznie rzecz biorąc Elementor Pro jest dodatkowym pluginem rozszerzającym możliwości darmowej wersji Elementora. Oznacza to, że po zakupie musisz zainstalować go jako osobną wtyczkę w zapleczu WordPress. Będziesz mieć zatem na liście pluginów dwie osobne pozycje: Elementor i Elementor Pro. Ma to o tyle znaczenie, że wersja Pro nie modyfikuje plików ani ustawień należących do wersji podstawowej. Jakiekolwiek modyfikacje w wersji Pro nie grożą nam utratą danych czy ustawień bazowego Elementora. Wersja Pro dodaje jedynie więcej bloczków i funkcji. Co dokładnie dostajemy? Zobaczmy. 50 dodatkowych bloczków (widżetów) Nowe bloczki są najbardziej oczywistym dodatkiem wersji Pro. To solidna porcja rozszerzeń. Pop-upy, karuzele slajdów, itp. O ile zasadniczo nie są one super potrzebne, by zbudować dobrze działającą i ładną stronę, to ułatwiają i przyspieszają nieco pracę, bo nie musisz szukać ich darmowych odpowiedników we wtyczkach innych autorów. Widżet układania postów w gridzie zamiast zwykłej listy czy widżet projektowania formularzy kontaktowych są bardzo

Czytaj więcej