Jak dodać pola z ikonami w WordPress

Spójrz na dowolną udaną stronę biznesową, a prawdopodobnie zobaczysz pola z ikonami podkreślającymi ich kluczowe oferty.

To sprawdzony wzorzec projektowy, którego używaliśmy niezliczoną ilość razy, ponieważ działa. Pomaga odwiedzającym szybko zobaczyć, co czyni Twoją firmę wyjątkową, bez czytania długich bloków tekstu.

Po przeprowadzeniu wielu użytkowników WordPress przez ulepszenia stron, wiemy, że tworzenie tych profesjonalnie wyglądających pól funkcyjnych może wydawać się uciążliwe.

Ale oto, czego większość ludzi nie zdaje sobie sprawy: nie musisz być projektantem ani programistą, aby dodawać piękne pola wyróżnione do swojej witryny.

W tym przewodniku podzielimy się najprostszymi sposobami tworzenia pól funkcyjnych z ikonami w WordPress. I

Czym są pola funkcyjne z ikonami?

Większość ludzi nie przeczyta każdego słowa na Twojej stronie WordPress, zwłaszcza jeśli strona jest bardzo tekstowa.

Zamiast tego odwiedzający będą skanować stronę, aby szybko znaleźć informacje, których szukają. Oznacza to, że musisz prezentować ważne informacje w sposób, który jest łatwy do zeskanowania i angażujący, dlatego tak wiele stron internetowych używa pól z funkcjami.

Na poniższym obrazku możesz zobaczyć, jak WPForms wykorzystuje pola funkcyjne do podkreślenia głównych zalet wtyczki.

Możesz nawet dodać przycisk wezwania do działania, aby użytkownicy mogli dowiedzieć się więcej o konkretnej funkcji.

Mając to na uwadze, pokażemy Ci, jak dodawać pola funkcyjne z ikonami w WordPress. Po prostu użyj poniższych szybkich linków, aby przejść bezpośrednio do metody, której chcesz użyć:

• Metoda 1: Dodaj pola funkcji z ikonami za pomocą edytora bloków WordPress (nie wymaga wtyczki)
• Metoda 2: Dodaj pola funkcyjne z ikonami za pomocą wtyczki Page Builder (zalecane)

Metoda 1: Dodaj pola funkcji z ikonami za pomocą edytora bloków WordPress (nie wymaga wtyczki)

Możesz dodawać pola z funkcjami i ikonami do swojej witryny WordPress, korzystając ze standardowego edytora treści i bloku kolumn. Oznacza to, że nie musisz instalować nowej wtyczki WordPress, więc jest to szybka i łatwa metoda.

Aby rozpocząć, otwórz stronę, na której chcesz dodać pole funkcji. Następnie kliknij ikonę dodawania bloku „+”.

Następnie wpisz „Kolumny” w polu wyszukiwania.

Gdy pojawi się odpowiedni blok, kliknij, aby dodać go do strony.

WordPress będzie teraz pokazywał wszystkie różne bloki kolumn. Liczby oznaczają, ile miejsca zajmuje każda kolumna w bloku. Na przykład, '50/50' tworzy dwie kolumny, z których każda zajmuje 50% dostępnej szerokości.

Na przykład wybierzemy blok kolumnowy '33/33/33', ponieważ daje nam to trzy kolumny o równej szerokości, ale możesz użyć dowolnego układu, jaki chcesz.

Następnie możesz dodać ikony do kolumn.

Najprostszym sposobem na zrobienie tego są czcionki z ikonami, które są symbolami o zmiennym rozmiarze, które nie spowolnią Twojej witryny. Zalecamy użycie Font Awesome, ponieważ mają jedną z największych kolekcji darmowych ikon.

Po dodaniu ikon czcionek w swoim motywie WordPress, łatwo je pokazać w swoich kolumnach za pomocą skróconego kodu.

Po prostu kliknij ikonę „+” przy kolumnie i wpisz „Shortcode”. Gdy pojawi się odpowiedni blok, kliknij go, aby dodać do swojego układu.

Następnie możesz wprowadzić następujący skrócony kod, ale upewnij się, że zastąpisz 'bus' nazwą ikony, której chcesz użyć:

[icon name="bus"]

Aby zobaczyć pełną listę dostępnych ikon, po prostu przejdź do biblioteki ikon Font Awesome.

Gdy znajdziesz ikonę, która Ci się podoba, kliknij ją, aby zobaczyć jej nazwę.

Na przykład na poniższym obrazku widzimy ikonę o nazwie „address-book”.

Teraz możesz dodać tę nazwę do shortcode'u.

Aby dowiedzieć się więcej o pracy z krótkimi kodami, zapoznaj się z naszym przewodnikiem dla początkujących na temat dodawania krótkiego kodu w WordPress.

Jeśli wolisz użyć obrazu z biblioteki mediów WordPress, możesz zamiast tego dodać blok obrazu zamiast używać czcionki ikon.

Aby to zrobić, po prostu kliknij „+” w pierwszej kolumnie, a następnie dodaj blok „Obraz” zamiast bloku skróconego kodu.

Możesz teraz wybrać obraz z biblioteki mediów lub przesłać nowy plik z komputera.

Po dodaniu wszystkich ikon, następnym krokiem jest dodanie tekstu do pola funkcji.

Aby to zrobić, kliknij przycisk „+” w bloku Kolumny. Następnie dodaj blok Akapit.

Następnie po prostu wpisz swój tekst w bloku akapitu.

Możesz dodać ikony i tekst do innych kolumn, powtarzając ten sam proces.

Czy chcesz, aby pole funkcji miało wiele wierszy?

Po prostu kliknij blok Kolumny, a następnie wybierz trzy kropki na pasku narzędzi. Następnie możesz wybrać opcję „Duplikuj”.

Spowoduje to utworzenie kopii bloku Kolumny.

Teraz po prostu wykonaj ten sam proces opisany powyżej, aby dodać zawartość do drugiego wiersza.

Kiedy będziesz zadowolony z pola funkcji, możesz dodać inne treści do strony, takie jak zdjęcie produktu lub kategorie i tagi.

Aby funkcja pola była aktywna, po prostu kliknij przycisk „Zaktualizuj” lub „Opublikuj”.

Możesz teraz odwiedzić swoją stronę internetową, blog lub sklep internetowy, aby zobaczyć pole ikony funkcji w akcji.

Oto przykład tego, co zobaczą ludzie, odwiedzając Twojego bloga WordPress.

Metoda 2: Dodaj pola funkcyjne z ikonami za pomocą wtyczki Page Builder (zalecane)

Jeśli chcesz stworzyć proste pole funkcyjne, edytor bloków WordPress jest dobrym wyborem. Jednak jeśli chcesz stworzyć bardziej zaawansowane pole o całkowicie niestandardowym wyglądzie, będziesz potrzebować wtyczki do tworzenia stron.

SeedProd to najlepszy kreator stron WordPress na rynku, który pozwala tworzyć niestandardowe strony za pomocą edytora metodą przeciągnij i upuść.

Posiada ponad 300 profesjonalnie zaprojektowanych szablonów, których możesz użyć do szybkiego tworzenia pięknych stron. Posiada również całą bibliotekę ikon, które możesz dodać do swoich pól z funkcjami jednym kliknięciem.

Oto przykład pola z funkcjami stworzonego przy użyciu gotowych bloków i ikon SeedProd.

Widzieliśmy, jak nasze partnerskie marki używają tego narzędzia do tworzenia swoich stron internetowych i mają doskonałe doświadczenia. Szczegółowe informacje można znaleźć w naszej recenzji SeedProd.

Pierwszą rzeczą, którą musisz zrobić, to zainstalować i aktywować wtyczkę SeedProd. Więcej szczegółów znajdziesz w naszym przewodniku dla początkujących na temat jak zainstalować wtyczkę WordPress.

Po aktywacji przejdź do SeedProd » Settings i wprowadź swój klucz licencyjny.

Te informacje znajdziesz, logując się na swoje konto SeedProd.

Wybierz profesjonalnie zaprojektowany szablon

Aby rozpocząć, przejdź do SeedProd » Strony docelowe i kliknij „Dodaj nową stronę docelową”.

Na następnym ekranie możesz wybrać szablon. Możesz dostosować wszystkie te szablony za pomocą kreatora przeciągnij i upuść SeedProd, ale nadal warto wybrać szablon, który odpowiada Twoim celom.

Wszystkie szablony SeedProd są zorganizowane według różnych typów kampanii, takich jak kampanie typu „wkrótce” i kampanie „zdobywanie leadów”. Możesz nawet użyć szablonów SeedProd do ulepszenia strony 404.

W tym przewodniku użyjemy „Pustego szablonu”, ale możesz użyć dowolnego szablonu, który chcesz.

Aby wybrać szablon, po prostu najedź na niego kursorem, a następnie kliknij ikonę „Zaznaczenie”.

Spowoduje to wyświetlenie okna podręcznego, w którym możesz nadać stronie nazwę. SeedProd używa nazwy strony w adresie URL, ale możesz zmienić ten link, jeśli chcesz. Na przykład, możesz chcieć poprawić swoje SEO w WordPress, dodając kilka odpowiednich słów kluczowych.

Następnie kliknij przycisk „Zapisz i zacznij edytować stronę”.

Otwiera to szablon w edytorze stron metodą przeciągnij i upuść SeedProd.

Zaprojektuj swoje pole wyróżnione

Ponieważ używasz pustego szablonu, pierwszym krokiem jest wybór układu. Aby to zrobić, po prostu kliknij dowolny z układów kolumn.

Następnie znajdź blok „Ikona” w menu po lewej stronie.

Teraz możesz przeciągnąć i upuścić ten blok do pierwszej pustej kolumny.

To dodaje blok Ikony do Twojego układu, z już wybraną domyślną ikoną.

Aby zmienić ikonę, kliknij ją, a następnie wybierz przycisk „Wybierz obraz”.

Spowoduje to wyświetlenie biblioteki ikon z setkami ikon do wyboru. Możesz użyć paska wyszukiwania, aby znaleźć konkretną ikonę lub przeglądać całą listę.

Gdy znajdziesz obraz, którego chcesz użyć, po prostu najedź na niego kursorem, a następnie kliknij przycisk „+”, aby dodać go do swojej strony.

Aby dostosować ikonę, kliknij, aby ją zaznaczyć.

Możesz teraz dostosować tę ikonę za pomocą ustawień w menu po lewej stronie, w tym zmienić jej wyrównanie, rozmiar, kolor i wiele więcej.

Aby zobaczyć więcej opcji, kliknij zakładkę „Zaawansowane”.

Tutaj możesz zmienić odstępy, dodać obramowanie, a nawet dodać efekty animacji CSS.

Gdy to zrobisz, przejdź dalej i dodaj blok „Tekst” pod ikoną.

Po prostu znajdź blok „Tekst” w menu po lewej stronie, a następnie umieść go pod ikoną za pomocą przeciągnij i upuść.

Aby dodać tekst, kliknij, aby zaznaczyć blok. Następnie możesz wpisać tekst w małym edytorze tekstu w menu po lewej stronie.

Tutaj możesz dodać linki, zmienić wyrównanie tekstu, zmienić kolor tekstu i wiele więcej.

Aby dostosować inne kolumny, po prostu wykonaj te same kroki, co powyżej.

Jeśli chcesz dodać kolejny wiersz pól funkcyjnych z ikonami, najedź kursorem myszy na sekcję, a następnie kliknij przycisk „Duplikuj wiersz”.

Możesz duplikować sekcję tyle razy, ile chcesz, aby szybko tworzyć więcej pól funkcji z ikonami.

Następnie możesz dodawać nowe ikony i tekst, postępując zgodnie z tym samym procesem opisanym powyżej.

Możesz kontynuować pracę nad stroną, dodając więcej bloków i dostosowując te bloki w menu po lewej stronie.

Gdy będziesz zadowolony z wyglądu strony, kliknij przycisk 'Zapisz'. Następnie możesz wybrać 'Opublikuj', aby opublikować tę stronę.

Mamy nadzieję, że ten artykuł pomógł Ci dowiedzieć się, jak dodawać pola z ikonami w WordPress. Możesz również zapoznać się z naszym przewodnikiem na temat jak dostosować kolory na swojej stronie WordPress oraz sposobów na stworzenie strony WordPress przyjaznej dla urządzeń mobilnych.

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.