Trusted WordPress tutorials, when you need them most.
Beginner’s Guide to WordPress
Puchar WPB
25 Million+
Websites using our plugins
16+
Years of WordPress experience
3000+
WordPress tutorials
by experts

Jak dodać pola funkcji z ikonkami w WordPress?

Uwaga redakcyjna: Otrzymujemy prowizję z linków partnerskich na WPBeginner. Prowizje nie mają wpływu na opinie i oceny naszych redaktorów. Dowiedz się więcej o Proces redakcyjny.

Czy chcesz dodać boksy funkcji z 111111 pięknymi ikonkami do twojej witryny WordPress?

Pola funkcji można wykorzystać do podkreślenia największych zalet produktu lub usługi. Są one również doskonałym sposobem na przedstawienie funkcji nowym klientom, aby mogli zdecydować, czy dany produkt lub usługa jest dla nich odpowiednia.

W tym artykule pokażemy, jak dodać boksy funkcji z ikonkami do twojej witryny WordPress.

How to add feature boxes with icons in WordPress (2 ways)

Czym są pola funkcji z ikonkami?

Większość ludzi nie przeczyta każdego słowa na twojej witrynie internetowej WordPress, zwłaszcza jeśli strona zawiera dużo tekstu.

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 można skanować i angażować, dlatego tak wiele witryn internetowych korzysta z pól funkcji.

Na poniższym obrazku można zobaczyć, jak WPForms wykorzystuje pola funkcji, aby podkreślić największe zalety wtyczki.

WPForms feature box icon example

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

Powiedziawszy to, pokażmy, jak dodać pola funkcji z ikonkami w WordPress. Skorzystaj z poniższych odnośników, aby przejść bezpośrednio do wybranej metody:

Metoda 1: Dodawanie pól funkcji z ikonkami za pomocą edytora bloków WordPress (bez wtyczki)

Możesz dodać pola funkcji z ikonkami do swojej witryny WordPress za pomocą standardowego edytora treści i bloku kolumn. Oznacza to, że nie trzeba instalować nowej wtyczki WordPress, więc jest to szybka i łatwa metoda.

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

Add new block to WordPress

Następnie wpisz „Columns” w polu wyszukiwania.

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

Add columns block

WordPress pokaże teraz 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.

Jako przykład wybierzemy blok kolumn „33/33/33”, ponieważ daje nam to trzy kolumny o równej szerokości, ale można użyć dowolnego układu.

Select three part columns block

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

Najprostszym sposobem na to jest użycie krójów pisma z ikonami, które są symbolami o zmiennym rozmiarze, które nie spowolnią twojej witryny internetowej. Zalecamy korzystanie z Font Awesome, ponieważ mają jedną z największych kolekcji darmowych ikonek.

Po dodaniu krójów pisma z ikonami do twojego motywu WordPress, możesz łatwo wyświetlać je w kolumnach za pomocą krótkiego kodu.

Wystarczy kliknąć ikonkę „+” w kolumnie i wpisać „krótki kod”. Gdy pojawi się odpowiedni blok, kliknij, aby dodać go do twojego układu.

Select shortcode block

Następnie możesz wpisz następujący krótki kod, ale pamiętaj, aby zastąpić „autobus” nazwą ikonki, której chcesz użyć:

[ikonka name="bus"]

Aby zobaczyć pełną listę dostępnych ikonek, wystarczy przejść do biblioteki ikon Font Awesome.

The Font Awesome website

Po znalezieniu ikonki, która ci się podoba, kliknij ją, aby zobaczyć jej nazwę.

Na przykład na poniższym obrazku patrzymy na ikonkę o nazwie „książka adresowa”.

An icon on the Font Awesome website

Możesz teraz dodać tę nazwę do krótkiego kodu.

Aby dowiedzieć się więcej o pracy z krótkimi kodami, zapoznaj się z naszym przewodnikiem dla początkujących, jak dodać krótki kod w WordPress.

Add new icon font name to shortcode block

Jeśli wolisz użyć obrazka z biblioteki multimediów WordPress, możesz dodać blok obrazu zamiast używać kroju pisma ikonki.

Aby to zrobić, wystarczy kliknąć „+” w pierwszej kolumnie, a następnie dodać blok „Obrazek” zamiast bloku z krótkim kodem.

Możesz teraz wybrać obrazek z biblioteki multimediów lub przesłać nowy plik z twojego komputera.

Add new image block

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

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

Select paragraph block to add text

Następnie wystarczy wpisać twój rodzaj tekstu do bloku akapitu.

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

Customize remaining columns

Czy chcesz, aby twoja funkcja miała wiele wierszy?

Wystarczy kliknąć blok Kolumny, a następnie wybrać trzy kropki na pasku narzędzi. Następnie można wybrać opcję „Duplicator”.

Click options and duplicate column

Spowoduje to utworzenie kopii bloku Columns.

Teraz wystarczy wykonać ten sam proces opisany powyżej, aby dodać treść do drugiego wiersza.

Final duplicate column example

Gdy jesteś zadowolony z pola funkcji, możesz dodać inne treści do strony, takie jak obrazek wyróżniający produkt lub kategorie i tagi.

Aby uruchomić funkcję, wystarczy kliknąć przycisk „Aktualizuj” lub „Opublikuj”.

Publish or update page to make live

Możesz teraz przejść na swoją witrynę internetową, bloga lub do sklepu internetowego, aby zobaczyć pole ikonki funkcji w działaniu.

Oto przykład tego, co ludzie zobaczą, gdy przejdą na twój blog WordPress.

A featured block with icons created using the block editor

Metoda 2: Dodawanie pól funkcji z ikonkami za pomocą wtyczki Page Builder (zalecane)

Jeśli chcesz utworzyć prosty boks funkcji, to edytor bloków WordPress jest dobrym wyborem. Jeśli jednak chcesz stworzyć bardziej zaawansowany boks z całkowicie własnym projektem, będziesz potrzebować wtyczki do tworzenia stron.

SeedProd to najlepszy na rynku kreator stron WordPress, który umożliwia tworzenie własnych konfiguratorów za pomocą edytora typu „przeciągnij i upuść”.

SeedProd posiada ponad 300 profesjonalnie zaprojektowanych szablonów, które można wykorzystać do szybkiego tworzenia 111111 pięknych stron. Posiada również całą bibliotekę ikonek, które możesz dodać do swoich pól funkcji za pomocą jednego kliknięcia.

Oto przykład pola funkcji utworzonego przy użyciu gotowych bloków i ikonek SeedProd.

SeedProd feature boxes with icons example

Pierwszą rzeczą, którą musisz zrobić, jest zainstalowanie i włączanie wtyczki SeedProd. Aby uzyskać więcej informacji, zapoznaj się z naszym przewodnikiem dla początkujących, jak zainstalować wtyczkę WordPress.

Uwaga: Istnieje darmowa wersja SeedProd, ale my będziemy korzystać z wersji Pro, ponieważ ma ona więcej funkcji. Jeśli używasz e-mail marketingu do promowania twoich produktów, to SeedProd Pro integruje się również z wieloma najlepszymi usługami e-mail marketingu.

Po włączaniu przejdź do SeedProd ” Ustawienia i wpisz swój klucz licencyjny.

Enter SeedProd license key

Informacje te można znaleźć logując się na Twoje konto SeedProd.

Wybierz profesjonalnie zaprojektowany szablon

Aby rozpocząć, przejdź do SeedProd ” Landing Pages i kliknij „Utwórz nową stronę docelową”.

SeedProd's page design templates

Na następnym ekranie można wybrać szablon. Możesz dostosować wszystkie te szablony za pomocą kreatora przeciągnij i upuść SeedProd, ale nadal dobrym pomysłem jest wybranie szablonu, który pasuje do twoich celów.

Wszystkie szablony SeedProd są podzielone na różne rodzaje kampanii, takie jak kampanie ” coming soon ” i „lead squeeze”. Możesz nawet użyć szablonów SeedProd, aby ulepszyć twoją stronę 404.

W tym przewodniku użyjemy szablonu „Blank Template”, ale można użyć dowolnego szablonu.

Aby wybrać szablon, wystarczy najechać na niego kursorem, a następnie kliknąć ikonkę „Znacznik wyboru”.

Select new SeedProd template

Spowoduje to wyświetlenie wyskakującego okienka, w którym można nadać stronie nazwę. SeedProd używa nazwy strony w adresie URL, ale możesz zmienić ten odnośnik, jeśli chcesz. Na przykład, możesz chcieć poprawić swoje WordPress SEO poprzez dodanie odpowiednich słów kluczowych.

Następnie kliknij przycisk „Zapisz i rozpocznij edycję strony”.

Name SeedProd page

Spowoduje to otwarcie szablonu w edytorze stron SeedProd typu „przeciągnij i upuść”.

Zaprojektuj swoją skrzynkę funkcji

Ponieważ korzystasz z pustego szablonu, pierwszym krokiem jest wybór układu. W tym celu wystarczy kliknąć dowolny układ kolumn.

Select three column layout

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

Możesz teraz przeciągnąć i upuścić ten blok na pierwszą pustą kolumnę.

Add an icon block

Spowoduje to dodanie bloku ikony do twojego układu, z już wybraną domyślną ikonką.

Aby zmienić ikonkę, kliknij na nią, a następnie wybierz przycisk „Wybierz obrazek”.

Click icon block twice

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

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

Choose icon from icon library

Aby dostosować własną ikonkę, kliknij, aby ją wybrać.

Możesz teraz modyfikować tę ikonkę za pomocą ustawień w menu po lewej stronie, w tym zmieniać jej wyrównanie, rozmiar, kolor i nie tylko.

Change icon settings

Aby zobaczyć więcej opcji, kliknij kartę „Zaawansowane”.

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

Adding animations to a feature box using SeedProd

Gdy już to zrobisz, dodaj blok „Tekst” pod ikonką.

Wystarczy znaleźć blok „Tekst” w menu po lewej stronie, a następnie umieścić go pod twoją ikonką metodą przeciągnij i upuść.

Add new text block

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

Można tu dodawać odnośniki, zmieniać wyrównanie tekstu, zmieniać kolor tekstu i nie tylko.

Click to edit text block

Aby dostosować pozostałe kolumny, wystarczy wykonać te same kroki, co powyżej.

Jeśli chcesz dodać kolejny rząd pól funkcji z ikonkami, najedź swoim kursorem myszy na sekcję, a następnie kliknij przycisk „Duplicator Row”.

Sekcję można powielać dowolną liczbę razy, aby szybko utworzyć więcej pól funkcji z ikonkami.

Duplicate icon and text row

Następnie można utworzyć nowe ikonki i tekst, wykonując ten sam proces opisany powyżej.

Możesz kontynuować pracę nad stroną, dodając kolejne bloki i dostosowując je w menu po lewej stronie.

Kiedy będziesz zadowolony z wyglądu strony, kliknij przycisk „Zapisz”. Następnie możesz wybrać opcję „Opublikuj”, aby uruchomić stronę.

Save and publish page

Mamy nadzieję, że ten artykuł pomógł ci nauczyć się dodawać pola funkcji z ikonkami w WordPressie. Zachęcamy również do zapoznania się z naszym przewodnikiem na temat tworzenia newslettera e-mail i wyborem najlepszego oprogramowania do czatu na żywo dla małych firm.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.

Ujawnienie: Nasze treści są wspierane przez czytelników. Oznacza to, że jeśli klikniesz na niektóre z naszych linków, możemy otrzymać prowizję. Zobacz jak WPBeginner jest finansowany, dlaczego to ma znaczenie i jak możesz nas wspierać. Oto nasz proces redakcyjny.

Avatar

Editorial Staff at WPBeginner is a team of WordPress experts led by Syed Balkhi with over 16 years of experience in WordPress, Web Hosting, eCommerce, SEO, and Marketing. Started in 2009, WPBeginner is now the largest free WordPress resource site in the industry and is often referred to as the Wikipedia for WordPress.

Najlepszy zestaw narzędzi WordPress

Uzyskaj BEZPŁATNY dostęp do naszego zestawu narzędzi - zbiór produktów i zasobów związanych z WordPressem, które każdy profesjonalista powinien mieć!

Reader Interactions

18 komentarzyZostaw odpowiedź

  1. Syed Balkhi says

    Hey WPBeginner readers,
    Did you know you can win exciting prizes by commenting on WPBeginner?
    Every month, our top blog commenters will win HUGE rewards, including premium WordPress plugin licenses and cash prizes.
    You can get more details about the contest from here.
    Start sharing your thoughts below to stand a chance to win!

  2. micahel says

    Really nice article and it help solve my problem. But here is my question.

    -How to you create the beautiful sidebars in see in this post such as how to start a blog, website blueprint, I need help with …, useful wordpress guides, Deals & Coupons

    -I really need help with creating this sidebars since am reading how to create a blog

  3. Rob says

    Hey. My icons won’t centre in the column itself. Is there a parameter we can add to ensure it centres? 2 of my icons centre fine, but 2 will only align left, even if I align it to center using formatting in the WordPress formatting editor (using a plugin).
    Thanks.

  4. Hassan NAITALI says

    Great article, i love it,

    so, i have one question, can i make changes to these icons and set them bigger by making change in the parent theme graphicaly and without touching css code ?
    Thank you !!

  5. Chris says

    I tried everything that was said in the tutorial but instead of it being set into columns, everything is set under one column. While the icon are set beside the words. I wanted to create three columns and everything in under one another in one column. Why is that that?

  6. Paul says

    Do you have a tutorial on how to do this with css, html and php without having to use a plugin? I’ve looked around but cannot seem to find anything.

  7. Evan herman says

    For anyone using WP SVG Icons that isn’t comfortable writing CSS, you can actually adjust the icon size by passing in a size=”#px” parameter to the wp-svg-icons short code.

    Example:
    [wp-svg-icons icon=”rocket” wrap=”span” size=”100px”]

    That will set the icon to 100px and avoid the step of writing custom CSS. You may still need to adjust the padding.

  8. Bobby says

    Good article about an important feature for your site. However, the plugin recommended has not been updated for 2 years. I am relatively new to WordPress and I was told to steer from plugins that have not been updated in the past year. I am guessing that it depends since you are very knowledgeable about WordPress and highlighted the plugin in this article. Let me know your thoughts.

    • WPBeginner Support says

      Bobby, the plugin works fine we tested it. We have also reached out to plugin author so that they can update the plugin.

      Ideally you should install plugins that are recently updated. However, there are plenty of WordPress plugins that don’t need updates. Plugin authors feel that since a plugin is not broken and works great, then there is no need for them to update it.

      Administrator

  9. Hemang Rindani says

    Nice article. WordPress is a great enterprise content management solution that can cater to any complex business requirements and develop powerful websites. It contains thousands of flexible, customizable and responsive themes, modules and plugins that can be utilized to design multiple websites effortlessly. Increasing competition demands an interactive and engaging website and thus it is important to include variety of tools that encourage visitors to stay more on a page. Plugins in WordPress adds value to the web page specially by making it more interesting. Utilizing right tools like Call to action buttons and social media login and sharing buttons with on page content helps to enhance user experience. Article rightly highlighted the point that selecting a right tool and utilizing its powers allows a CMS developer to have better control over the website.

Zostaw odpowiedź

Dziękujemy za pozostawienie komentarza. Pamiętaj, że wszystkie komentarze są moderowane zgodnie z naszymi polityka komentarzy, a Twój adres e-mail NIE zostanie opublikowany. NIE używaj słów kluczowych w polu nazwy. Przeprowadźmy osobistą i konstruktywną rozmowę.