W artykule:
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.
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:
Video Tutorial
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.
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ąć.
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ć.
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:
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.
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.
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.
