Większość odwiedzających skanuje stronę, zanim zdecyduje, czy ją przeczytać. Jeśli Twoje kluczowe korzyści są ukryte w akapitach tekstu, wiele osób może odejść, nawet ich nie widząc.
Pola z funkcjami rozwiązują ten problem, łącząc każdą korzyść z małą ikoną i krótkim opisem, dzięki czemu odwiedzający od razu rozumieją, co oferujesz. Możesz również dodać przycisk wezwania do działania do każdego pola, aby skierować czytelników do dalszych szczegółów.
W tym przewodniku pokażemy Ci, jak dodawać pola z funkcjami i ikonami w WordPressie, korzystając z wbudowanego edytora bloków lub wtyczki Page Builder.
Której metody należy użyć do dodawania pól z funkcjami?
Jeśli dodajesz jedną lub dwie sekcje z funkcjami do istniejącej strony lub wpisu, użyj metody z edytorem bloków. Jest ona bezpłatna, wbudowana w WordPressa w wersji 7.0 i nowszych, i nie wymaga dodatkowej wtyczki.
Jeśli projektujesz całą stronę docelową od podstaw, lepszym wyborem będzie Page Builder. Otrzymujesz gotowe szablony i więcej opcji stylizacji dla każdej ikony.
Możesz skorzystać z poniższych szybkich linków, aby przejść bezpośrednio do metody, której chcesz użyć:
Metoda 1: Dodaj pola cech z ikonami za pomocą edytora bloków (bezpłatne)
Edytor bloków WordPressa tworzy strony z bloków, które są indywidualnymi elementami treści, takimi jak akapit, obrazek lub przycisk.
WordPress 7.0 dodał wbudowany blok Ikona, który pozwala na wstawianie ikon SVG bez wtyczki. SVG to format obrazu stworzony z kodu, dzięki czemu ikony pozostają ostre w każdym rozmiarze i szybko się ładują.
Jeśli korzystasz ze starszej wersji WordPressa, nie znajdziesz bloku Ikona w edytorze. Będziesz musiał zaktualizować WordPressa przed zastosowaniem tej metody.
Krok 1: Dodaj blok Kolumny
Zacznij od dodania bloku Kolumny. Najpierw otwórz stronę, na której chcesz dodać pola z funkcjami. Następnie kliknij ikonę + Dodaj blok, wyszukaj Kolumny i kliknij blok Kolumny, aby go dodać.
WordPress pokaże Ci kilka układów kolumn. Liczby wskazują, jaką szerokość zajmuje każda kolumna. Na przykład, 50 / 50 tworzy dwie kolumny o równej szerokości.
Wybierzemy 33 / 33 / 33, aby utworzyć trzy równe kolumny, ale możesz wybrać dowolny układ, który pasuje do Twojej treści.
Krok 2: Dodaj ikony do pól cech
Następnie kliknij przycisk + w kolumnie i wyszukaj Ikona. Gdy pojawi się blok Ikona, kliknij go, aby go dodać.
WordPress automatycznie doda ikonę Informacji do kolumny. Kliknij przycisk „Zamień”, aby wybrać inną ikonę.
Otworzy się biblioteka ikon. Możesz wpisać nazwę, na przykład zdjęcie lub sklep, w pasku wyszukiwania lub przewijać dostępne ikony.
Gdy znajdziesz ikonę, której chcesz użyć, kliknij ją, aby dodać do swojej kolumny.
Następnie możesz dostosować ikonę za pomocą ustawień bloku. W zależności od Twojego motywu i konfiguracji możesz zmienić kolor ikony, kolor tła, wymiary i obramowanie. Możesz również użyć paska narzędzi, aby wyśrodkować ikonę.
Krok 3: Dodaj tekst do pól cech
Gdy ikony będą na miejscu, kliknij przycisk + pod ikoną w pierwszej kolumnie i dodaj blok Nagłówek dla nazwy funkcji.
Następnie dodaj blok Akapit poniżej i wpisz krótki opis funkcji. Zazwyczaj wystarczy jedno lub dwa zdania.
Powtórz ten sam proces dla pozostałych kolumn.
Krok 4: Tworzenie kolejnych wierszy pól z funkcjami (Opcjonalnie)
Jeśli chcesz dodać więcej niż jeden wiersz pól z funkcjami, wybierz blok Kolumny i kliknij menu z trzema kropkami na pasku narzędzi. Następnie wybierz Duplikuj.
Spowoduje to utworzenie kopii całego wiersza. Następnie możesz zastąpić ikony i tekst nową zawartością, wykonując te same kroki, co powyżej.
Krok 5: Publikowanie pól z funkcjami i ikonami
Gdy będziesz zadowolony z pól z funkcjami, kliknij przycisk Zapisz lub Opublikuj, aby je udostępnić.
Następnie możesz odwiedzić swoją witrynę, aby zobaczyć pola z funkcjami w akcji:
Metoda 2: Dodaj pola cech z ikonami za pomocą konstruktora stron
Edytor bloków sprawdza się dobrze, gdy chcesz dodać sekcję funkcji do istniejącej strony. Ale jeśli projektujesz całą stronę docelową i chcesz mieć większą kontrolę nad układem i stylizacją, narzędzie do tworzenia stron metodą przeciągnij i upuść może zapewnić większą elastyczność.
Użyjemy SeedProd do tej metody, ponieważ używamy go na własnych stronach. Większość narzędzi do tworzenia stron metodą przeciągnij i upuść, takich jak Elementor, oferuje element pola z ikoną i wbudowaną bibliotekę ikon. Aby uzyskać więcej informacji, zobacz naszą recenzję SeedProd.
Krok 1: Instalacja i konfiguracja Page Buildera
Najpierw musisz zainstalować i aktywować wtyczkę SeedProd. Aby uzyskać więcej szczegółów, zobacz nasz przewodnik jak zainstalować wtyczkę WordPress.
Uwaga: Istnieje bezpłatna wersja wtyczki, ale użyjemy wersji płatnej, ponieważ blok Pole z ikoną i biblioteka ikon są dostępne tylko w planach licencjonowanych.
Po aktywacji wtyczki przejdź do SeedProd » Ustawienia i wprowadź swój klucz licencyjny. Klucz można znaleźć, logując się na swoje konto SeedProd.
Krok 2: Wybierz szablon strony docelowej
Następnie przejdź do SeedProd » Strony docelowe i kliknij „+ Dodaj nową stronę docelową”.
Następnie wprowadź nazwę swojej strony. SeedProd użyje tej nazwy również do utworzenia adresu URL strony, ale możesz edytować adres URL, jeśli zajdzie taka potrzeba.
Na następnym ekranie wybierzesz szablon. Każdy szablon można dostosować metodą przeciągnij i upuść, ale wybranie tego, który odpowiada Twojemu celowi, może zaoszczędzić trochę czasu.
W tym przewodniku użyjemy pustego szablonu. Najedź na niego kursorem i kliknij ikonę zaznaczenia, aby go wybrać.
Następnie kliknij „Zapisz i zacznij edytować stronę”.
Krok 3: Tworzenie pól z funkcjami i ikonami
Ponieważ zaczynamy od pustego szablonu, pierwszym krokiem jest wybór układu. Tutaj wybierzmy układ z jedną kolumną, aby zaprojektować obszar nagłówka nad polami funkcji.
Następnie możesz przeciągnąć blok Nagłówek z menu po lewej stronie na stronę. Wybierz blok, aby edytować jego tekst i dostosować jego formatowanie za pomocą opcji w panelu po lewej stronie.
Powtórz proces z blokiem Tekst.
Możesz również dostosować nagłówek, dodając obraz tła lub zmieniając jego formatowanie. Aby uzyskać więcej opcji, kliknij kartę „Zaawansowane”, aby dostosować odstępy, dodać obramowanie, dodać efekty animacji i więcej.
Po zakończeniu pracy z nagłówkiem możesz utworzyć pola funkcji. Przeciągnij blok Kolumny z panelu po lewej stronie do edytora i umieść go tuż pod obszarem nagłówka.
Następnie możesz wybrać układ. W tym przykładzie użyjemy opcji z trzema równymi kolumnami.
Następnie znajdź blok Pole ikony w menu po lewej stronie i przeciągnij go do pierwszej kolumny.
Blok zawiera domyślną ikonę, nagłówek i przykładowy tekst, które możesz dostosować.
Aby zmienić ikonę, znajdź sekcję Ikona/Obraz w panelu po lewej stronie. Następnie najedź kursorem na bieżącą ikonę i kliknij przycisk, aby ją zastąpić.
Otworzy to bibliotekę ikon. Możesz wyszukać konkretną ikonę lub przeglądać dostępne opcje. Kiedy znajdziesz taką, która Ci się spodoba, kliknij ją, aby dodać do pola funkcji.
Po wybraniu ikony kliknij ją, aby otworzyć jej ustawienia w menu po lewej stronie. Tutaj możesz zmienić jej wyrównanie, rozmiar i kolor.
Krok 4: Dostosowywanie zawartości pól z funkcjami
Następnie zaznacz tekst w swoim Polu ikony, aby otworzyć jego ustawienia w menu po lewej stronie.
Możesz zastąpić przykładowy nagłówek i opis własnym tekstem funkcji. Możesz również dodać linki lub zmienić wyrównanie i kolor tekstu.
Powtórz te kroki dla pozostałych kolumn, dodając do każdej inną ikonę i tekst funkcji.
Krok 5: Publikowanie strony docelowej
Jeśli chcesz dodać kolejny wiersz pól funkcji, najedź kursorem na sekcję i kliknij przycisk Powiel wiersz. Następnie zastąp ikony i tekst nową treścią.
Możesz również dostosować resztę swojej strony docelowej, dodając obrazy, przyciski wezwania do działania lub inne bloki. Proces jest podobny: przeciągnij blok, który chcesz, do edytora i dostosuj go z panelu po lewej stronie.
Gdy będziesz zadowolony ze swojej strony docelowej, kliknij przycisk „Zapisz”, a następnie wybierz „Opublikuj”, aby ją udostępnić. Teraz możesz zobaczyć stronę docelową w akcji:
Często zadawane pytania dotyczące pól z funkcjami i ikonami
Oto kilka często zadawanych pytań dotyczących dodawania pól funkcji z ikonami w WordPressie:
Jak dodać ikony w WordPressie?
Jeśli korzystasz z WordPressa w wersji 7.0 lub nowszej, możesz użyć wbudowanego bloku Ikona, który pozwala wyszukiwać ikony z biblioteki WordPressa po nazwie. W przypadku większych zestawów ikon, takich jak Font Awesome, będziesz potrzebować wtyczki lub konstruktora stron z własną biblioteką ikon.
Jak dodać niestandardowe ikony do WordPressa?
Blok Ikona wyświetla tylko ikony z biblioteki WordPressa, więc nie możesz przez niego przesłać własnych. Zamiast tego możesz przesłać swoją ikonę jako plik PNG, używając bloku Obraz.
Mamy nadzieję, że ten artykuł pomógł Ci dowiedzieć się, jak dodawać pola funkcyjne z ikonami w WordPress. Możesz również zapoznać się z naszym przewodnikiem na temat dostosowywania kolorów na Twojej stronie WordPress oraz sposobów tworzenia przyjaznej dla urządzeń mobilnych strony WordPress.
Jeśli podobał Ci się ten artykuł, zasubskrybuj nasz kanał YouTube po samouczki wideo WordPress. Możesz nas również znaleźć na Twitterze i Facebooku.
micahel
Naprawdę świetny artykuł i pomógł rozwiązać mój problem. Ale oto moje pytanie.
-Jak tworzysz piękne boczne panele widoczne w tym poście, takie jak jak zacząć bloga, plan strony, potrzebuję pomocy z…, przydatne poradniki WordPress, oferty i kupony
- Naprawdę potrzebuję pomocy w tworzeniu tych pasków bocznych, ponieważ czytam, jak stworzyć bloga
Ashutosh Panda
To był świetny artykuł..
Bardzo mi pomógł
Rob
Cześć. Moje ikony nie centrują się w samej kolumnie. Czy jest jakiś parametr, który możemy dodać, aby zapewnić ich wyśrodkowanie? 2 z moich ikon centrują się poprawnie, ale 2 wyrównują się tylko do lewej, nawet jeśli wyrównam je do środka za pomocą formatowania w edytorze formatowania WordPress (przy użyciu wtyczki). Dzięki.
Hassan NAITALI
Świetny artykuł, uwielbiam go,
Więc mam jedno pytanie, czy mogę wprowadzać zmiany w tych ikonach i powiększać je, dokonując zmian w motywie nadrzędnym graficznie i bez dotykania kodu CSS?
Dziękuję !!
Wsparcie WPBeginner
Cześć Hassan,
Nadal potrzebowałbyś trochę CSS.
Administrator
Chris
Próbowałem wszystkiego, co zostało powiedziane w samouczku, ale zamiast ustawić to w kolumnach, wszystko jest ustawione w jednej kolumnie. Ikony są obok słów. Chciałem stworzyć trzy kolumny, a wszystko jest jedno pod drugim w jednej kolumnie. Dlaczego tak się dzieje?
Roshni
Dziękuję. Bardzo pomocne!
Paul
Czy masz samouczek, jak to zrobić za pomocą CSS, HTML i PHP bez konieczności używania wtyczki? Szukałem, ale nic nie mogę znaleźć.
Jan
Jak sprawić, aby ikona wyśrodkowała się nad treścią?
Evan herman
Dla każdego, kto używa WP SVG Icons i nie czuje się komfortowo z pisaniem CSS, można dostosować rozmiar ikony, przekazując parametr size=”#px” do kodu skrótu wp-svg-icons.
Przykład:
[wp-svg-icons icon=”rocket” wrap=”span” size=”100px”]
Spowoduje to ustawienie ikony na 100px i uniknięcie konieczności pisania niestandardowego CSS. Nadal może być konieczne dostosowanie odstępów.
Andre Page
To było bardzo pomocne Evan, dziękuję!!
Roshni
Dzięki, Evan. Zadziałało.
Bobby
Dobry artykuł o ważnej funkcji dla Twojej witryny. Jednak polecana wtyczka nie była aktualizowana od 2 lat. Jestem stosunkowo nowy w WordPress i powiedziano mi, abym unikał wtyczek, które nie były aktualizowane w ciągu ostatniego roku. Zgaduję, że zależy to od tego, ponieważ jesteś bardzo biegły w WordPress i podkreśliłeś wtyczkę w tym artykule. Daj mi znać, co myślisz.
Wsparcie WPBeginner
Bobby, wtyczka działa poprawnie, przetestowaliśmy ją. Skontaktowaliśmy się również z autorem wtyczki, aby mógł ją zaktualizować.
Idealnie powinieneś instalować wtyczki, które są niedawno zaktualizowane. Istnieje jednak wiele wtyczek WordPress, które nie wymagają aktualizacji. Autorzy wtyczek uważają, że skoro wtyczka nie jest zepsuta i działa świetnie, to nie ma potrzeby jej aktualizować.
Administrator
Bobby
Ok, to dobrze wiedzieć. Jeszcze raz dziękuję.
arun
Świetny post, ja też prowadzę bloga na WordPressie. Zastosuję te ikony na moim blogu, dzięki za udostępnienie.
Hemang Rindani
Miły artykuł. WordPress to świetne rozwiązanie do zarządzania treścią dla przedsiębiorstw, które może sprostać wszelkim złożonym wymaganiom biznesowym i rozwijać potężne strony internetowe. Zawiera tysiące elastycznych, konfigurowalnych i responsywnych motywów, modułów i wtyczek, które można wykorzystać do łatwego projektowania wielu stron internetowych. Rosnąca konkurencja wymaga interaktywnej i angażującej strony internetowej, dlatego ważne jest, aby uwzględnić różnorodne narzędzia, które zachęcają odwiedzających do dłuższego pozostawania na stronie. Wtyczki w WordPressie dodają wartości stronie internetowej, szczególnie poprzez uczynienie jej bardziej interesującą. Wykorzystanie odpowiednich narzędzi, takich jak przyciski Call to Action oraz przyciski logowania i udostępniania w mediach społecznościowych wraz z treścią na stronie, pomaga poprawić doświadczenie użytkownika. Artykuł słusznie podkreślił, że wybór odpowiedniego narzędzia i wykorzystanie jego możliwości pozwala deweloperowi CMS na lepszą kontrolę nad stroną internetową.