Jak zbudować niestandardowy widget Elementor bez znajomości kodowania

Widżety Elementora pomagają dodawać elementy do tworzenia stron, takie jak menu nawigacyjne, przycisk, pole obrazu, sekcja często zadawanych pytań i wiele innych. Chociaż kilka dodatków do Elementora zawiera widżety Elementora, jest mało prawdopodobne, że w tych dodatkach znajdziesz wszystkie wymagane widżety.

Tutaj potrzebujesz niestandardowych widżetów Elementora, które spełnią Twoje potrzeby. ElementsKit posiada funkcje, które pomogą Ci szybko zbudować wymagane widżety.

W tym poście dowiesz się, jak w minimalistyczny sposób zbudować niestandardowy widget Elementora bez kodowania.

Kontynuujmy… teraz!

Co to jest widget?

Widget to mała aplikacja z graficznym interfejsem użytkownika, która służy do wykonywania określonego zadania. Widżetem może być dowolny element Twojej witryny, taki jak przycisk, pole wyboru, okno dialogowe, pasek przewijania, pole wyszukiwania, mapa, zegar, licznik odwiedzających itp.

Rozważmy jako przykład narzędzie do tworzenia stron Elementor. Ten kreator stron jest wyposażony w liczne wbudowane widżety. Możesz dodać najlepsze darmowe widżety Elementora, aby zaprojektować swoją stronę internetową.

W razie potrzeby możesz jednak utworzyć niestandardowy widżet dla Elementora. I, Kreator widżetów ElementsKit pomoże Ci to zrobić!

Korzyści z używania kreatora widżetów ElementsKit do tworzenia niestandardowych widżetów

Wszyscy wiemy, że widżety dodają doskonałej funkcjonalności stronom internetowym. Jednak znalezienie odpowiedniego widżetu do wykonania niestandardowego zadania jest prawie niemożliwe. W takim przypadku nie masz innego wyjścia, jak zbudować niestandardowy widget.

Dzięki kreatorom widżetów proces tworzenia niestandardowych widżetów jest łatwiejszy niż kiedykolwiek. Przyjrzyjmy się kluczowym zaletom korzystania z narzędzia do tworzenia widżetów.

• Twórz niestandardowe widżety bez znajomości kodowania
• Widżety są w pełni responsywne
• Twórz widżety wizualnie, przeciągając i upuszczając elementy
• Obsługuje treści strukturalne
• Zawiera samodzielny edytor kodu
• Obsługa wielu typów pól itp.

Oto kluczowe zalety narzędzia do tworzenia widżetów ElementsKit. 

Jak zbudować niestandardowy widget Elementor za pomocą ElementsKit (bezpłatny)?

W pełni funkcjonalny widget może ulepszyć proces tworzenia witryny internetowej. Dlatego ważne jest, aby zbudować niestandardowy widżet Elementora dla swojej witryny.

Chcesz wiedzieć, jak zbudować niestandardowy widget Elementora? Oto szczegółowy proces tworzenia bezpłatnego, niestandardowego widżetu Elementor przy użyciu narzędzia do tworzenia widżetów ElementsKit.

Warunek wstępny

Aby zbudować niestandardowy widget Elementora, będziesz potrzebować następujących wtyczek –

• Elementora
• Zestaw elementów

Po zainstalowaniu i aktywowaniu tych narzędzi w witrynie WordPress nadszedł czas, aby rozpocząć tworzenie niestandardowego widżetu Elementor.

Krok #1: Włącz narzędzie do tworzenia widżetów

Aby rozpocząć proces tworzenia widżetów, upewnij się, że w panelu kontrolnym włączyłeś moduł Widget Builder.

Aby go włączyć, przejdź do panelu kontrolnego ElementsKit, a następnie kliknij MODUŁY. W sekcji modułów znajdź moduł „Kreator widżetów” i włącz go.

Oto proces sprawdzania, czy kreator widżetów jest włączony, czy wyłączony –

Włączanie narzędzia do tworzenia widżetów

Nie zapomnij kliknąć „Zapisz zmiany' po włączeniu lub wyłączeniu modułu.

Krok #2: Utwórz widżet

Aby utworzyć nowy widget, przejdź do Zestaw elementów > Kreator widżetów. Na nowej stronie zauważysz nowy przycisk o nazwie „Dodaj nowe”. Kliknięcie tego przycisku spowoduje utworzenie nowego widżetu na lewym panelu Elementora.

Tworzenie nowego widgetu

Teraz na tej stronie możesz dostosować tytuł, ikonę i kategorię widżetu. Umieść tytuł i ikonę widżetu na niestandardowym widżecie. Możesz użyć dowolnej ikony z biblioteki ikon Font Awesome.

Dostosowywanie tytułu i ikony widżetu

Nazywając widżet, pamiętaj, aby był on odpowiedni do wykonywanego zadania. I dodaj odpowiednią ikonę do swojego widżetu.

Krok #3: Dostosowywanie nowego widgetu

Tworzenie widżetu Elementor zostało zakończone, teraz czas na personalizację. Aby zbudować nowy niestandardowy widget dla Elementora, nie potrzebujesz żadnej dogłębnej wiedzy na temat kodowania. Kreator widżetów ElementsKit sprawia, że proces jest płynniejszy niż kiedykolwiek. 

Po prostu przeciągnij widżet ElementsKit z lewego panelu i upuść go na środkowym panelu. Upuszczony widget automatycznie utworzy zmienną na prawej tablicy.

Kliknij tę zmienną, a zostanie ona automatycznie uwzględniona w edytorze kodu. W razie potrzeby możesz dodać dodatkowe znaczniki HTML, CSS i JavaScript za pomocą edytora kodu.

Po utworzeniu nowego widżetu lub dokonaniu dostosowań kliknij przycisk Zapisz i gotowe.

Oto szczegółowy proces –

Tworzenie nowego widgetu

Możesz także dodać te elementy sterujące do karty Styl lub Zaawansowane.

Krok #4: Modyfikowanie pól widżetu

Tworząc widżet, możesz dostosować wszystkie pola lub elementy widżetu. Możesz na przykład dostosować nazwę etykiety, symbol zastępczy, wartość domyślną itp.

Jednak opcje dostosowywania nie są takie same dla każdego panelu. Różne panele sterowania mają różne pola wejściowe.

Dostosowywanie pól widżetów

Wskazówki dla profesjonalistów: Podczas wielokrotnego dodawania tej samej kontrolki Nazwa musi być unikalna. W przeciwnym razie stworzy to zmienny konflikt.

Krok #5: Wyświetl podgląd nowo utworzonego widgetu

Nowo zbudowany widżet działa całkowicie podobnie do istniejących widżetów Elementora. Świeżo zbudowany niestandardowy widget będzie dostępny na panelu Elementora. Aby sprawdzić nowy widget, otwórz nową stronę internetową i przeciągnij i upuść widget na nową stronę.

Sprawdzam nowy widget

Wskazówki dla profesjonalistów: Możesz dodać każdą kontrolkę ElementsKit, aby zbudować niestandardowy widget Elementor za pomocą narzędzia do tworzenia widgetów Elementor. Pobierz wersję ElementsKit pro, aby uzyskać dostęp do większej liczby elementów sterujących Elementora.

Obejrzyj poniższy film, aby dowiedzieć się więcej o narzędziu do tworzenia widżetów ElementsKit.

Lista pól kontrolnych obsługiwanych przez ElementsKit

ElementKit oferuje wiele pól kontrolnych do tworzenia niestandardowego widgetu. Oto lista obsługiwanych pól kontrolnych –

• Tekst – Pole tekstowe jest używane do wprowadzania tekstu.
• Numer – Użytkownicy mogą wprowadzać liczby za pomocą pola sterowania liczbami.
• Obszar tekstowy – Pole tekstowe służy do wprowadzania liczb, tekstów, symboli itp.
• WYSIWYG – To edytor tekstu sformatowanego WordPress TinyMCE.
• Kod – Ta kontrolka doda edytor kodu oparty na edytorze Ace.
• Ukryty – Ukryte pole wprowadzania służy do zapisywania danych bezpośrednio w bazie danych bez udostępniania pola wprowadzania w panelu sterowania.
• Przełącznik – Przełącznik to fantazyjna reprezentacja pola wyboru. Służy do pokazywania/ukrywania różnych bloków lub elementów strony internetowej.
• Wybierać – Opcja wyboru udostępnia użytkownikom wiele opcji do wyboru. Pokazuje opcje w menu rozwijanym. 
• Wybierać – Opcja Wybierz służy do wyświetlania przycisku lub grupy przycisków z ikonami i innymi ustawieniami stylu lub wyrównania.
• Kolor – Włącza pole wyboru koloru wypełnione suwakiem Alpha.
• Czcionka – Kontrola czcionek umożliwia użytkownikom wybór czcionki z biblioteki czcionek Google.
• Data i godzina – Biblioteka daty i godziny używa metody Biblioteka Flatpickr aby wybrać datę i godzinę. 
• Adres URL – Pole URL zawiera link z przyciskiem. Możesz ustawić przycisk tak, aby otwierał link w tej samej lub nowej karcie, a także ustawić go na nofollow.
• Głoska bezdźwięczna – Korzystając z tej sekcji, użytkownicy mogą wybierać różne media. Pokazuje pliki multimedialne z biblioteki multimediów WordPress.
• Ikony – Kontrola ikon umożliwia użytkownikom dodawanie ikon z bibliotek ikon Font Awesome i ElementsKit lite. Użytkownicy mogą także przesłać swoją niestandardową bibliotekę ikon z biblioteki multimediów WordPress.
• Suwak – Suwak to skala, którą można przeciągać i która służy do wybierania zakresu wartości numerycznych.
• Wymiary – Kontrola wymiarów składa się z czterech paneli wejściowych umożliwiających ustawienie odpowiedniego miejsca dla elementu. Panele wejściowe znajdują się u góry, po prawej, u dołu i po lewej stronie. 
• Granica – Umożliwia użytkownikowi dostosowanie rodzaju, szerokości i koloru obramowania.
• Tło – Kontrola tła umożliwia użytkownikom dodanie obrazu tła, wideo i koloru. Do wideo możesz dodać kolory statyczne lub gradientowe.
• Pudełko Cień – Cień pudełkowy oferuje pięć różnych typów cieni wokół pudełka. Obejmuje cień poziomy, cień pionowy, rozmycie cienia, rozprzestrzenianie się cienia i cień kolorowy.
• Cień tekstu – Podobnie jak cień ramki, kontrolka cienia tekstu zapewnia również cztery różne kontrolki. Są to cień poziomy, cień pionowy, rozmycie cienia i kolorowy cień wokół tekstów.
• Typografia – Typografia pozwala użytkownikom dostosować rodzinę czcionek, rozmiar czcionki, grubość czcionki, styl czcionki, wysokość linii, transformację tekstu i odstępy między literami.
• Wymiar obrazu – Kontrola wymiarów obrazu składa się z wysokości, szerokości i przycisku stosowania.
• Wybierz2 – Tworzy również menu rozwijane, takie jak kontrolka wyboru, ale z większym stylem i wyglądem.
• Animacja zawisu – Ta kontrolka dodaje animację do różnych pól wyboru w oparciu o bibliotekę Hover.css.
• Animacja wejścia – Kontrola animacji wejścia umożliwia użytkownikowi dostosowanie wyglądu przycisku w oparciu o bibliotekę Animate.css.

Są to elementy sterujące narzędzia do tworzenia widżetów ElementsKit, których można używać podczas tworzenia niestandardowego widżetu Elementor.

Ostatnie słowa

Oto jak łatwo możesz zbudować niestandardowy widżet Elementora, dotykając ElementsKit. ElementsKit zawiera mnóstwo wbudowanych widżetów, które prawdopodobnie zminimalizują Twoje wysiłki związane z tworzeniem stron w Elementorze.

Jednocześnie oferuje minimalistyczną metodę tworzenia ulubionych niestandardowych widżetów Elementora. Teraz twoja kolej, aby zainstalować i pobrać ElementsKit i czerpać korzyści z dodatku do tworzenia niestandardowych widżetów Elementor.