Przejdź do głównej treści

Jak dodać funkcjonalność z pola ikonę na WordPress

Divi: najłatwiejszy w użyciu motyw WordPress

Divi: Najlepszy motyw WordPress wszechczasów!

więcej Pobieranie 901.000, Divi jest najpopularniejszym motywem WordPress na świecie. Jest kompletny, łatwy w użyciu i zawiera więcej niż darmowe szablony 62. [Zalecane]

Czy chcesz dodać pole funkcji z ikoną na swojej stronie głównej?

Ta funkcja wyświetla ważne informacje o Twoich produktach i usługach. Udowodniono, że jest to angażująca technika prezentacji produktów potencjalnym klientom.

W tym samouczku pokażę, jak dodać tę funkcję do bloga WordPress.

Ale wcześniej, jeśli nigdy nie instalowałeś WordPress, odkryj Jak zainstalować WordPress blogu kroki 7 et Jak znaleźć, zainstalować i aktywować WordPress na swoim blogu 

Wróćmy do tego, dlaczego tu jesteśmy.

dodać pole funkcji z ikoną

Co to jest pole funkcji z ikonami?

Większość osób, które odwiedzają witrynę internetową, nie czyta jej w pełni. Jako ludzie stajemy się profesjonalnymi skanerami.

Oznacza to, że jako właściciel firmy internetowej musisz przedstawiać ważne informacje w dość łatwy do przeanalizowania i angażujący sposób.

Dlatego większość firmowych witryn internetowych zwykle zawiera obraz na suwaku z przyciskiem wezwania do działania.

Tuż poniżej możesz użyć pola funkcji, które umożliwia wyświetlanie ważnych informacji o Twoich produktach i usługach. Każde pole funkcji może mieć własny przycisk wezwania do działania, aby użytkownicy mogli dowiedzieć się więcej.

Oto konkretny przykład:jak dodać funkcjonalną ikonę wordpress pola

Jak dodać pole funkcji do strony głównej swojego bloga WordPress

Pierwszą rzeczą, którą musisz zrobić, to zainstalować i aktywować wtyczkę Zaawansowane kolumny WP, Aby uzyskać więcej informacji, zobacz nasz przewodnik na Jak zainstalować lub dodać wtyczkę do WordPress

Łatwo stwórz swoją stronę internetową dzięki Elementor

Elementor pozwala łatwo stworzyć dowolny projekt strony internetowej o profesjonalnym wyglądzie. Przestań płacić drogo za to, co możesz zrobić sam. [Bezpłatny]

Po aktywowaniu wtyczki musisz uzyskać dostęp do „ Ustawienia> Zaawansowane kolumny WP Aby skonfigurować wtyczkę.

Wystarczy przewinąć w dół do opcji „ Klasa kolumny Wpisz tekst, na przykład „moje kolumny” (Wrócimy). Nie zapomnij kliknąć przycisku Zapisz, aby zapisać ustawienia.

colclass

Następnie wszystko, co musisz zrobić, to dodać ikony SVG do pól funkcji. W tym celu zapraszam do instalacji i aktywacji wtyczki Ikony WP SVG.

Jesteś teraz gotowy do tworzenia skrzynek funkcji. Możesz zacząć od zmodyfikowania strony, na której ma się pojawiać okno funkcji.

Zauważysz dwie nowe opcje w edytorze postów. Pierwsza umożliwia dodanie ikony i znajduje się nad paskiem narzędzi edytora. Drugi znajduje się na pasku narzędzi edytora wizualnego.

Jeśli nie widzisz tej opcji, musisz rozwinąć przyciski paska narzędzi.

newbuttons

Pierwszą rzeczą, którą musisz zrobić, to kliknąć przycisk „ Zaawansowane kolumny WP”. Spowoduje to wyświetlenie wyskakującego okienka, w którym możesz kliknąć "Pusty" i wybierz liczbę kolumn, które chcesz dodać.

Tworzenie-kolumnyMożesz kliknąć każdy obszar i dodać dowolny tekst. Jeśli nie dodasz teraz tekstu, nie będziesz w stanie później zobaczyć różnicy między kolumnami. Gdy skończysz, kliknij przycisk „ Dodaj kolumny Na dole

Zauważysz, że kolumny zostały dodane w edytorze wizualnym. Następnym krokiem jest dodanie ikon nad tekstem.

Umieść kursor i dodaj go na początku pola tekstowego, a następnie dodaj nowy podział wiersza. Spowoduje to dodanie nowej przestrzeni, w której możesz dodać ikonę. Teraz kliknij przycisk „ Dodaj nową ikonę„, I zobaczysz nowe okno, w którym możesz wybrać ikonę.

addingicons

W tym oknie możesz wybrać ikonę, którą chcesz dodać. Następnie kliknij przycisk „span”, aby treść została dodana do elementu „ ”.

Na koniec kliknij przycisk Wstaw ikonę„Zauważysz, że ikona SVG została dodana w edytorze. W zależności od nazwy ikony, krótki kod będzie wyglądał następująco:

[ikona wp-svg-icons = "rakieta" wrap = "rozpiętość"]

Powtórz ten proces za każdym razem na pozostałych pudełkach. Kiedy skończysz, nie zapomnij zapisać ustawień.

Jesteś gotowy do zakończenia pracy, jednak jeśli zauważysz, że ikony są bardzo małe.

featureboxes-SmallIcons

Wszystko, co musisz zrobić, to dodać kod CSS, aby rozwiązać problem. Oto przykład kodu CSS, który możesz dodać do pliku stylu motywu potomnego.

Z łatwością stwórz swój sklep internetowy

Uzyskaj woocommerce, najlepsze wtyczki e-commerce do sprzedaży produktów swoich fizycznych i cyfrowych na WordPressie. [Zalecane]

span.wp-svg-rocket.rocket {rozmiar czcionki: 100px; } span.wp-svg-cloud.cloud {rozmiar czcionki: 100px; } span.wp-svg-headphones.headphones {rozmiar czcionki: 100px; } .mycolumns {border: 1px solid #eee; min wysokość: 250px; padding-top: ważny 20px; }

Pamiętaj, że klasa ikon musi odpowiadać tej, którą dodałeś. W tym przypadku użyłem ikon: rakieta, chmura, słuchawki.

featureboxesfinal

Pamiętaj, że napisaliśmy tutorial, który Ci na to pozwoli poprawić swoje umiejętności CSS, Możesz także użyć bardziej zaawansowanej strony konstruktora, takiej jak Visual Composer, dla której napisaliśmy dość szczegółowy samouczek.

To wszystko w tym samouczku. Mam nadzieję, że pomoże Ci to stworzyć dobre pola funkcji na Twoim blogu WordPress. Podziel się tym samouczkiem ze znajomymi. Korzystam z okazji, aby przesłać Ci najlepsze życzenia od całego zespołu BlogPasCher.

Ten artykuł zawiera komentarze 0

Zostaw komentarz

Twoj adres e-mail nie bedzie opublikowany. Wymagane pola są oznaczone *

Ta strona używa Akismet, aby zmniejszyć niechciane. Dowiedz się więcej o sposobie wykorzystania danych komentarzy.

Powrót do góry
2 akcji
udział
ćwierkanie
Enregistrer2