Wyklikane
Me
Wyklikane

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

Wyklikane
Scroll to top w Elementor

Chowane scroll to top w Elementor

4 grudnia 2023

Cześć! Zgodnie z obietnicą, dziś na blogu kontynuacja poprzedniego wpisu w którym pokazywałem jak zrobić przycisk scroll to top w Elementor. Tym razem zajmę się drobną, ale jakże ciekawą poprawką. Pokażę Ci, jak ukrywać i pokazywać przycisk w zależności od przewijania ekranu. Zaczynamy! Scroll to top w Elementor Wcześniej utworzony przycisk “Scroll to top” pojawia się teraz cały czas. Nawet tuż po wejściu na stronę. Jest to trochę bez sensu, bo przycisk ten nie jest potrzebny w momencie, gdy użytkownik jest już na górze strony. Jak zapewne zauważyłeś na innych stronach, taki przycisk często pojawia się dopiero po przewinięciu strony o określoną wysokość. Znika natomiast jeśli przewiniesz stronę do góry. Jak to osiągnąć? Krok 1 Przejdź do edycji miejsca w którym dodałeś swój przycisk “Scroll to top” i odszukaj widżetu HTML w którym dodałeś już skrypt przewijania do góry. Krok 2 Wklej poniższy fragment kodu. Zwróć uwagę na wartość parametru ‘offset’. Wartość ta wyrażona w pikselach określa odległość po jakiej przewinięciu przycisk będzie się pokazywał. Możesz zmienić tą wartość wg. własnych upodobań, ale nie dodawaj żadnych jednostek typu ‘px’, ‘em’, ‘rem’ itp. Co robi ten fragment? Ciągle monitoruje jak daleko użytkownik przewinął stronę

Czytaj więcej
Elementor: automatyczna zmiana daty w stopce

Elementor: automatyczna zmiana daty w stopce

29 maja 2023

Witaj, w dzisiejszym wpisie chciałbym pokazać Ci jedną z bardzo prostych, acz przydatnych sztuczek przy budowie strony internetowej w Elementor. Automatyczna zmiana daty w stopce pozwoli Ci zaoszczędzić trochę czasu na corocznej aktualizacji informacji o prawach autorskich. Jeśli chcesz posiadać w stopce automatycznie aktualizujący się zapis podobny do “©2022 Nazwa Strony. All rights reserved.” to czytaj dalej. Automatyczna zmiana daty w stopce Wspomniana wyżej automatyczna zmiana roku jest bardzo prosta do wykonania jedynie w wersji Elementora Pro. Niektóre motywy jednak, pozwalają wstawić samodzielnie zaprojektowaną stopkę przy pomocy shortcode 😉 Podczas projektowania i budowy stopki, w miejscu w którym chcesz postawić automatycznie zmieniającą się datę wstaw widget “Edytor tekstu”. Następnie odszukaj w prawym górnym rogu ikony “Tagi dynamiczne”, kliknij ją i z rozwijanego menu, w sekcji “Site” wybierz “Current Date Time”. Domyślasz się już co dalej? Edytor tekstu zmienił swoje właściwości i zamiast zwykłego tekstu pokazuje teraz aktualną datę i godzinę. Kliknij teraz na małą ikonę klucza aby rozwinąć dodatkowe ustawienia. Jako format daty wybierz “Custom” w pierwszym polu i wpisz wielką literę “Y” w drugim polu. W ostatnim kroku przełącz się

Czytaj więcej
Przyklejone menu Elementor

Jak zrobić przyklejone menu w Elementor

27 marca 2023

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
Jak przyspieszyć Elementor

Jak przyspieszyć Elementor

24 października 2022

Wszyscy wiemy, że szybkość ładowania się witryny ma ogromne znaczenie dla odwiedzających. Aby upewnić się, że ich doświadczenie z Twoją witryną będzie na najwyższym poziomie, musisz zadbać o optymalizację. O samej optymalizacji w ujęciu ogólnym pisałem już kilkukrotnie. Dziś jednak chciałbym skupić się na optymalizacji pracy jednego z najpopularniejszych edytorów drag & drop dla WordPress, tj. Elementor. Bez wątpienia szybko rośnie on siłę i staje się coraz popularniejszy. Wraz z popularnością podnoszą się głosy krytyczne w sprawie jego wpływu na wydajność witryny. Sami autorzy wtyczki dużo się starają aby przyspieszyć swoje narzędzie i dają nam dodatkowe możliwości optymalizacji. Zatem jak przyspieszyć Elementor? Na to pytanie odpowiem właśnie w tym wpisie. Zalety Elementora Sam Elementor ma już ogromna rzeszę fanów. Licząca ponad 8 milionów użytkowników społeczność chwali go sobie za niesamowitą wygodę użytkowania oraz możliwość efektownych rozwiązań. Oferuje bardzo intuicyjne menu nawigacyjne, sporą bazę gotowych do użycia szablonów i setki, jeśli nie tysiące widżetów tworzonych przez niezależne firmy i developerów. Nie wymaga znajomości HTML ani CSS i integruje się z niemal każdym motywem WordPress. Pomimo, że posiada wiele zalet, to główną jego wadą jest generowanie dużej

Czytaj więcej
Formularz kontaktowy Elementor z Google reCAPTCHA

Formularz kontaktowy Elementor z Google reCAPTCHA

20 czerwca 2022

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

16 maja 2022

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

23 sierpnia 2021

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

Najlepsze darmowe motywy dla Elementor

9 sierpnia 2021

Witaj! W odpowiedzi na wiele powtarzających się próśb i zapytań, chciałbym w dzisiejszym wpisie opisać moim zdaniem najlepsze darmowe motywy dla Elementor. A czym jest wtyczka Elementor? Jednym z najpopularniejszych w świecie WordPress edytorów wizualnych do budowy stron internetowych. Żeby nie rozwodzić się nad opisem wtyczki, w tym miejscu odsyłam Cię drogi czytelniku do mojego wpisu „Czym jest Elementor„. Znajdziesz w nim wyczerpujący opis tego kreatora stron. Darmowe motywy dla Elementor Przejdźmy zatem do głównego tematu tego wpisu: najlepszych darmowych motywów w pełni kompatybilnych z Elemetorem. Czy da się na nich stworzyć stronę internetową WordPress totalnie za darmo? Oczywiście! Czy posiadają one dodatkowe opcje płatne, typu pakiety premium? Posiadają. Nie oznacza to jednak, że musisz sobie nimi zaprzątać głowę. Wszystkie opisane poniżej darmowe motywy w 100% pozwolą Ci zbudować dowolną, nawet najbardziej rozbudowaną stronę. Zaczynamy! 1. Astra Autor: Brainstorm ForceZastosowanie: wielofunkcyjnyLink: demo i pobieranieCena: darmowy Na początek chyba najpopularniejszy darmowy motyw do WordPress jaki kiedykolwiek powstał. Bardzo wszechstronny i współpracujący prawie z każdym page builderem. Motyw był już znany i lubiany zanim powstał Elementor. Jego twórcy współpracują jednak tak dobrze z twórcami Elementora, że powstała

Czytaj więcej
Zamknięty akordeon

Elementor: domyślnie zamknięty akordeon

19 kwietnia 2021

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

5 kwietnia 2021

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
Kategorie

Najnowsze wpisy

Wyklikane logo


+48 503 865 645

Social media