Jak tworzyć stylowe pola funkcji za pomocą kreatora stron Elementor (proste metody 2)

Opublikowany: 2022-09-07

Jeśli chodzi o tworzenie stylowych układów na stronie internetowej, pola funkcji są koniecznością.

Pola funkcji pomogą Ci zaprezentować Twoje produkty i usługi w najlepszy możliwy sposób, wyświetlając je w atrakcyjnym układzie. Taki, który sprawi, że będą dobrze wyglądać i będą zachęcać potencjalnych klientów.

Chcesz stworzyć stylowe pola funkcji za pomocą kreatora stron Elementor?

Elementor to popularny program do tworzenia stron, który zawiera wiele funkcji i pozwala na kreatywność w projektowaniu witryny.

W tym artykule wyjaśnię, czym są pola funkcji i jak używać kreatora stron Elementor do tworzenia elementów pól funkcji.

Zanurzmy się prosto!

Spis treści
  1. Co to jest pole funkcji? Dlaczego jest to wymagane?
    • Przykłady skrzynek funkcji
  2. Metoda 1: Pojedynczy kafelek i wezwanie do działania (3 proste kroki)
    • Krok 1: Utwórz nową stronę i edytuj w Elementor
    • Krok 2: Utwórz dwukolumnową strukturę układu
    • Krok 3: Dodaj dzielnik kształtu
  3. Metoda 2: Wiele kafelków i wezwań do działania
    • Krok 1: Utwórz trzykolumnową strukturę układu
    • Krok 2: Dodaj zawartość i obraz tła
    • Krok 3: Powtórz proces
  4. Czy stworzyłeś stylowe pudełko z funkcjami?

Co to jest pole funkcji? Dlaczego jest to wymagane?

Pole funkcji to interaktywna sekcja witryny, która umożliwia odwiedzającym nawigację między różnymi sekcjami i stronami. Służy podwójnemu celowi prowadzenia użytkowników i wyświetlania kuszących treści o Twojej marce i produktach.

Posiadając pole funkcji, przyciągasz uwagę odwiedzających. Działa to niesamowicie dobrze, gdy masz stronę internetową z dużą ilością tekstu.

Użyj pól funkcji, aby zaprezentować informacje w łatwym do skanowania i atrakcyjnym formacie.

Pola funkcji mogą służyć do generowania leadów, wyświetlania produktów i usług sklepu, informacji o cenach oraz dodatkowych informacji o Twojej marce.

Możesz również umieścić wezwanie do działania w polach funkcji, aby skierować użytkowników do Twojej strony produktów lub usług.

Przykłady skrzynek funkcji

Prawdopodobnie znajdziesz pole funkcji na prawie każdej stronie internetowej. Jako właściciel firmy, jeśli chcesz wypromować swój produkt lub usługę, z pewnością chciałbyś skorzystać z pola funkcji.

Oto kilka przykładów pól funkcji, z których możesz szukać inspiracji.

Jeśli prowadzisz firmę związaną z przygodami, możesz zaprezentować swoje najlepsze produkty w polu funkcji, jak pokazano poniżej.

Pola funkcji dla stron internetowych związanych z przygodami

Możesz także dołączyć przycisk wezwania do działania, który przeniesie odwiedzających Twoją witrynę bezpośrednio na stronę sklepu.

Prowadzisz sklep internetowy z produktami dla dzieci?

Pola funkcji na stronach internetowych związanych z produktami dla dzieci

Twórz stylowe pudełka z funkcjami, aby promować swoje najlepsze produkty i najnowsze oferty. Każdy z nich prowadzi do odpowiedniej strony docelowej.

Oto kilka przykładów osób prowadzących agencje marketingu cyfrowego.

Pole funkcji dla agencji marketingu cyfrowego

Spraw, aby potencjalni klienci mogli się z Tobą skontaktować, tworząc profesjonalnie wyglądające pole funkcji na stronie głównej swojej witryny.

Przycisk wezwania do działania może być skierowany do formularza zgody lub aplikacji, takiej jak Calendly, w celu umówienia spotkania z Tobą.

Możesz także tworzyć pola funkcji, które zawierają ikony promujące różne usługi.

Pole informacyjne promujące różne usługi marketingu cyfrowego

Dołącz opis tego, co zapewniasz w ramach każdej usługi i połącz ją z odpowiednią stroną docelową.

Prowadzisz bar typu fast food? Chcesz promować swoje oferty i najlepsze oferty na swojej stronie internetowej restauracji?

Pole funkcji promujące najlepsze oferty i oferty

Dzięki polam funkcji możesz to zrobić.

Istnieje kilka przykładów pól funkcji, a my ledwo zarysowaliśmy powierzchnię. Zależy to całkowicie od Twoich konkretnych potrzeb i treści, które chcesz promować.

Chcesz stworzyć stylowe pudełka z funkcjami za pomocą Elementora? Zacznijmy!

Metoda 1: Pojedynczy kafelek i wezwanie do działania (3 proste kroki)

Najpierw stwórzmy pole funkcji za pomocą Elementora, podobne do poniższego.

Twórz stylowe pola funkcji za pomocą kreatora stron Elementor

Krok 1: Utwórz nową stronę i edytuj w Elementor

Przejdź do Strony > Dodaj nowy i nazwij swoją stronę.

Utwórz nową stronę i edytuj za pomocą Elementora

Następnie kliknij Edytuj za pomocą Elementora .

Krok 2: Utwórz dwukolumnową strukturę układu

Kliknij ikonę Dodaj nową sekcję , a następnie wybierz dwukolumnową strukturę układu.

Utwórz dwukolumnową strukturę układu

Dodaj tekst i może przycisk wezwania do działania w jednej z kolumn.

Na przykład dołączyłem nagłówek, tekst i przycisk.

Uwzględnij elementy, takie jak nagłówek, tekst i przycisk w polu funkcji

Następnie dodaj element obrazu do drugiej kolumny i wstaw obraz.

Wstaw obraz

Krok 3: Dodaj dzielnik kształtu

Elementor sprawia, że ​​dodawanie różnych dzielników kształtów do sekcji jest bardzo łatwe. Nie wspominając o tym, że poprawia aspekt projektowy twojego pola funkcji.

Aby dodać dzielnik kształtu, zaznacz całą sekcję.

Edytuj sekcję

Po lewej stronie znajdziesz ustawienia związane z sekcją.

Wybierz kartę Styl . Następnie przewiń w dół do zakładki Shape Divider .

Karta Styl w sekcji Edytuj sekcję

Możesz teraz wybrać dzielnik kształtu według własnego uznania dla górnej lub dolnej części sekcji.

Pobaw się opcjami, takimi jak kolor, szerokość i wysokość, i stwórz dzielnik kształtu.

Możesz zrobić to samo dla dolnej części swojej sekcji.

Po zakończeniu kliknij przycisk Opublikuj/Aktualizuj , aby zapisać zmiany.

Stwórz stylowe pudełko funkcji z Elementor

I tak proste jest tworzenie stylowych pudełek funkcji za pomocą Elementora!

Metoda 2: Wiele kafelków i wezwań do działania

Następnie stwórzmy pola funkcji, jak pokazano poniżej, w których tekst i odpowiednie przyciski wezwania do działania są umieszczone przy każdym obrazie.

Funkcjonalne pudełka do sklepu internetowego

Krok 1: Utwórz trzykolumnową strukturę układu

Zakładam, że ukończyłeś pierwszy krok tworzenia nowej strony, a następnie kliknięcie przycisku Edytuj za pomocą Elementora .

Teraz kliknij ikonę Dodaj nową sekcję i wybierz trzykolumnową strukturę układu.

wybierz trzykolumnową strukturę układu

Krok 2: Dodaj zawartość i obraz tła

W jednej z kolumn dodajmy nagłówek, tekst i przycisk wezwania do działania.

Gdy to zrobisz, kliknij poszczególne ustawienia kolumny i wybierz kartę Styl .

Karta Styl w ustawieniach Edytuj kolumnę

W sekcji Tło wybierz obraz.

Możesz ustawić obraz tła zgodnie ze swoimi wymaganiami, wybierając opcję z menu rozwijanego Pozycja .

Chcesz dodać kolor tła? Poprawia wygląd pola funkcji i pomaga użytkownikom czytać tekst, zwłaszcza jeśli używasz jasnych kolorów.

Przejdź do zakładki Nakładka tła .

Dołącz nakładkę tła

Wybierz kolor i zmień krycie zgodnie z własnymi preferencjami.

Teraz dostosuj ustawienia tekstu i przycisków, aby uzyskać idealny projekt dla swojego sklepu. Możesz także bawić się odstępami, aby uzyskać idealny projekt.

Krok 3: Powtórz proces

Jeśli jesteś zadowolony z projektu swojej pierwszej kolumny, powtórz proces dla pozostałych dwóch.

Możesz także kliknąć kolumnę prawym przyciskiem myszy i wybrać opcję Duplikuj .

Zduplikuj kolumnę

Tylko upewnij się, że usuniesz puste kolumny po zduplikowaniu pierwszej.

Dostosuj treść i obrazy dla poszczególnych pól funkcji, a gdy skończysz, powinieneś mieć pola funkcji podobne do pokazanego poniżej.

Pudełka z funkcjami do sklepów internetowych

Chcesz więcej odstępów między polami funkcji?

Przejdź do ustawień sekcji i dostosuj Dopełnienie w zakładce Zaawansowane .

Powinno to zapewnić wymagane odstępy między polami funkcji.

Podobnie możesz tworzyć wszelkiego rodzaju stylowe pola funkcji za pomocą narzędzia do tworzenia stron Elementor.

Czy stworzyłeś stylowe pudełko z funkcjami?

Pola funkcji poprawiają wygląd każdej strony internetowej.

Pomaga nie tylko promować jedne z najlepszych treści w Twojej witrynie, ale także pomaga promować Twoje produkty i usługi.

Chcesz dodać wezwanie do działania? Nie ma problemu. Łatwo umieszczaj przyciski wezwania do działania w polach funkcji, aby ułatwić odwiedzającym nawigację do polecanych treści.

Ten artykuł pokazuje, że tworzenie stylowego zestawu funkcji jest dość proste. A dzięki kreatorowi stron Elementor masz nieskończone możliwości projektowania.

Czy stworzyłeś stylowe pola funkcji na swojej stronie internetowej? Daj nam znać w komentarzach poniżej. Chcielibyśmy usłyszeć od Ciebie!