Czy chcesz dodać okno funkcji z pięknymi ikonami na stronie głównej swojej witryny WordPress? Te pola funkcji pokazują ważne punkty sprzedaży Twoich produktów i usług. Okazało się, że jest to bardzo angażująca Technika w prezentowaniu funkcji nowym klientom. W tym artykule pokażemy, jak łatwo dodać pola funkcji z ikonami w witrynie WordPress.

Adding feature boxes in WordPress with icons

Co to są pola funkcji z ikonami?

Większość ludzi, gdy odwiedzają strony internetowe, w rzeczywistości ich nie czyta. Jako ludzie stajemy się profesjonalnymi skanerami.

Oznacza to, że jako właściciel firmy musisz przedstawić ważne informacje w łatwym do skanowania i bardzo angażującym formacie.

Dlatego większość popularnych witryn biznesowych ma zwykle duży obraz lub suwak na górze z przyciskiem wezwania do działania.

Tuż pod tym możesz użyć pola funkcji, które pozwala zaprezentować ważne funkcje Twojego produktu lub usługi. Każde okno funkcji może mieć własne wezwanie do działania, które może skłonić użytkowników do Dowiedz się więcej.

Oto przykład z naszej strony OptinMonster:

Example of feature boxes on the homepage of a WordPress powered website

Video Tutorial

Subskrybuj WPBeginner

Jeśli nie podoba Ci się film lub potrzebujesz więcej instrukcji, Kontynuuj czytanie.

Dodawanie pól funkcji z ikonami na stronie głównej WordPress

Pierwszą rzeczą, którą musisz zrobić, to zainstalować i aktywować wtyczkę Advanced WP Columns. Po aktywacji musisz odwiedzić Ustawienia ” zaawansowane kolumny WP aby skonfigurować wtyczkę.

Po prostu przewiń w dół do opcji “Klasa kolumny” i wprowadź mycolumns obok. Nie zapomnij kliknąć przycisku zapisz zmiany, aby zapisać swoje ustawienia.

Adding CSS class for your columns

Następnie będziesz potrzebować wtyczki, aby wstawić piękne ikony SVG do pól funkcji. Zainstaluj i aktywuj wtyczkę WP SVG Icons.

Teraz jesteś gotowy, aby utworzyć swoje pola funkcji.

Zacznij od edycji strony, na której chcesz dodać pola funkcji.

Zauważysz dwa nowe przyciski na ekranie edytora postów. Pierwszym z nich jest przycisk Dodaj ikonę znajdujący się tuż nad edytorem. Drugi przycisk znajduje się jako ostatnia Pozycja w menu edytora wizualnego.

Jeśli twój edytor wizualny pokazuje tylko jeden rząd przycisków, musisz kliknąć przycisk toggle toolbar, aby go rozwinąć.

Advanced columns and svg icon buttons in post editor

Najpierw musisz kliknąć przycisk Zaawansowane kolumny WP. Spowoduje to wyświetlenie wyskakującego okienka, w którym musisz kliknąć Pusty a następnie wybierz liczbę kolumn, które chcesz dodać.

Creating feature boxes columns

Następnie musisz kliknąć każdą kolumnę, aby dodać tekst. Jeśli nie dodasz teraz tekstu, trudno będzie zobaczyć kolumny w edytorze postów. Po zakończeniu kliknij przycisk Dodaj kolumny na dole.

Teraz zobaczysz kolumny w edytorze postów. Następnym krokiem jest dodanie ikon nad tekstem.

Przesuń kursor myszy na początek obszaru tekstowego w pierwszej kolumnie i kliknij przycisk enter. Spowoduje to przesunięcie tekstu w dół i pozostawienie miejsca na wstawienie ikon.

Teraz musisz kliknąć przycisk Dodaj ikonę, który wyświetli ładne okienko, takie jak ten:

Adding icons to feature boxes in WordPress

Stamtąd możesz wybrać ikonę, której chcesz użyć, klikając na nią. Następnie musisz kliknąć przycisk span, aby Twoja ikona była zawinięta wewnątrz elementu < span>.

Na koniec kliknij przycisk Wstaw. Zobaczysz teraz Skrót ikony SVG w edytorze postów. W zależności od nazwy wybranej ikony będzie ona wyglądać mniej więcej tak:

[wp-svg-icons icon = "rocket" wrap = "span"]

Powtórz proces, aby dodać ikony również w innych polach funkcji.

Po zakończeniu kliknij przycisk Aktualizuj, aby zapisać swoją stronę.

Prawie skończyłeś, ale jeśli przejrzysz swoją stronę, zauważysz, że ikony są zbyt małe, a pola funkcji są ledwo zauważalne.

Feature boxes with small icons and no styling

Musisz dodać trochę CSS, aby rozwiązać ten problem. Po prostu dodaj ten fragment CSS do arkusza stylów motywu lub motywu podrzędnego.

span.wp-svg-rakieta.rocket { 
font-size: 100px; 
} 

span.wp-svg-Chmura.cloud { 
font-size: 100px; 
} 
span.wp-svg-słuchawki.słuchawki { 
font-size: 100px; 
} 
.mycolumns { 
border: 1px solid #eee;
min-height:250px; 
padding-top:20px !ważne;
}

Nie zapomnij dostosować CSS, aby dopasować nazwy ikon, których używasz.

feature boxes with proper styling and large icons

Mamy nadzieję, że ten artykuł pomógł Ci dodać piękną sekcję pudełek z funkcjami na swojej stronie głównej. Możesz również zobaczyć nasz przewodnik na temat najlepszych kreatorów stron 5 przeciągnij i upuść WordPress, ponieważ wiele z tych kreatorów stron ma wbudowaną funkcjonalność tego pola funkcji.

Jeśli podoba Ci się ten artykuł, zasubskrybuj nasz kanał YouTube dla samouczków wideo WordPress. Znajdziesz nas również na Twitterze i Facebooku.

You May Also Like

Jak naprawić nieprawidłowy błąd JSON w WordPress (Przewodnik dla początkujących)

W artykule: Co powoduje błąd “nieprawidłowa odpowiedź JSON” w WordPress?1. Sprawdź adresy…

Jak zmienić kolor linku w WordPress (poradnik dla początkujących)

W artykule: Dlaczego Linki Są Ważne?Jak dodawać linki w postach i stronach…

Jak naprawić błąd krytyczny w WordPress (krok po kroku)

W artykule: Co To jest błąd krytyczny w WordPress?Co powoduje krytyczny błąd…

Jak zainstalować WordPress lokalnie na komputerze Mac za pomocą MAMP

W artykule: Jak zainstalować MAMP na komputerze MacInstalacja WordPress na komputerze MacWypróbowanie…