Jak utworzyć wykres kołowy w WordPress bez znajomości kodowania

Wyświetlenie wykresu kołowego może być przydatne do zaprezentowania różnych typów danych na stronie internetowej. Ale jeśli nie jesteś programistą lub masz wystarczające umiejętności edycji CSS, może to być trudne.

Nawiasem mówiąc, nie z ElementsKit!

Jeśli masz zainstalowany zestaw ElementsKit w swojej witrynie, możesz łatwo dodać wykres kołowy do strony internetowej, po prostu przeciągając i upuszczając.

W tym poście na blogu dowiesz się, jak w kilku prostych krokach tworzyć wykresy kołowe w WordPress.

Co to jest wykres kołowy?

Wykres kołowy przedstawiający dane w formie graficznej z różnymi sekcjami koła. Dane i styl prezentacji mogą się różnić, ale dane będą w graficznym okręgu. Czasami możesz dostosować dane dla kręgu i wymyślić coś wyjątkowego.

Jak utworzyć wykres kołowy w WordPress?

Utwórz wykres kołowy bezpośrednio w panelu WordPress, wykonując kilka prostych kroków. Postępuj zgodnie z wytycznymi, które tutaj udostępniłem.

Krok 1: Zainstaluj wtyczki

Tutaj naszym celem jest utworzenie wykresu kołowego w WordPress bez pisania żadnego kodu. Będziemy więc używać najpopularniejszych wtyczek Elementora dodatek Zestaw elementów.

W tym celu przejdź do swojego Panel WordPress > Wtyczki > Dodaj nowe. Teraz na górny pasek wyszukiwania, wyszukaj Elementora. Gdy go znajdziesz, zainstaluj i aktywuj.

Podobnie zainstaluj i aktywuj ElementsKit.

Krok 2: Wybierz ustawienia wtyczki

Musisz skonfigurować pewne ustawienia we wtyczce ElementsKit. W tym celu przejdź do pulpitu nawigacyjnego WordPress i najedź kursorem na ElementsKit. Teraz wybierz „Widżety”, aby utworzyć wykres kołowy za pomocą widżetu wykresu kołowego.

Na liście widżetów włącz widżet „Wykres kołowy”. Zalecałbym jednak włączenie wszystkich widżetów, aby uzyskać najlepsze wrażenia z tworzenia stron internetowych.

Krok 3: Utwórz nową stronę

Teraz możesz już utworzyć wykres na stronie internetowej. Utwórz stronę, na której chcesz wyświetlić wykres z niestandardowymi danymi. Możesz też wybrać jedną z istniejących stron.

Niezależnie od tego, którą stronę wybierzesz do wyświetlania wykresu kołowego, wybierz opcję „Edytuj za pomocą Elementora” w prawym górnym rogu.

Przekieruje Cię na stronę edytora, gdzie możesz korzystać ze wszystkich funkcji ElementsKit. 

Krok 4: Dodaj widżet Wykres kołowy

W lewym panelu wyszukaj widżet Wykres kołowy, a następnie przeciągnij go i upuść na stronę.

Jeżeli chcesz, możesz przed przeciągnięciem i upuszczeniem widżetu na stronę utworzyć sekcję określonego typu.

Aby dodać sekcję, kliknij ikonę plusa i dodaj sekcję.

Krok 5: Dostosuj wykres kołowy

Domyślnie na wykresie kołowym znajdują się pewne ustawienia wstępne. Możesz dostosować te ustawienia za pomocą kilku kliknięć.

Na karcie Zawartość możesz zmienić styl wykresu kołowego, zawartość wykresu i wartość procentową wykresu.

Styl wykresu kołowego: Tutaj możesz wybrać prosty lub z treścią.

Treść wykresu: W tej sekcji możesz użyć wartości procentowych lub ikony dla wykresu. Jeśli wybierzesz ikonę, wyświetli się wiele opcji jej dostosowania. Prześlij niestandardową ikonę, aby pokazać ją na wykresie.

Odsetek: Tutaj możesz wybrać i ustawić wartość procentową wykresu.

Następnie przejdź do zakładki styl, aby nadać wykresowi styl.

Rozmiar wykresu kołowego: Jeśli chcesz, dostosuj rozmiar wykresu kołowego. Możesz zapisać rozmiar lub przeciągnąć pasek, aby zwiększyć lub zmniejszyć rozmiar.

Rozmiar obramowania: Ustaw tutaj rozmiar obramowania za pomocą paska regulacji.

Typ koloru: Wybierz niestandardowy kolor wykresu, jak chcesz.

Kolor paska: Dodaj kolor paska pasujący odpowiednio do projektu strony.

Kolor tła paska: Dodaj kolor tła do wykresu kołowego, aby wyglądał lepiej.

Kolor ikony: Jeśli dodałeś ikonę do wykresu, tutaj możesz wybrać dla niej niestandardowy kolor.

Jeśli chcesz większej personalizacji, przejdź do ustawień zaawansowanych i wprowadź niezbędne zmiany, aby wykres był przyjazny dla użytkownika.

Krok 6: Dostosuj wygląd strony

Możesz także dostosować wygląd strony za pomocą Elementora. W tym celu na górze sekcji znajduje się przycisk z kropką. Kliknij na niego, a przekieruje Cię do zakładki układu.

Otrzymasz wszystkie opcje dostosowania układu strony.

Krok 7: Wyświetl podgląd i opublikuj

Na koniec, jeśli wszystko wykonałeś poprawnie, sprawdź podgląd wykresu kołowego. Jeśli wygląda idealnie, naciśnij przycisk publikowania.

Dodatkowe zasoby, z którymi chciałbyś się zapoznać:

Jak stworzyć witrynę internetową agencji marketingu cyfrowego [styl bez kodu]

Jak stworzyć witrynę internetową firmy sprzątającej w WordPress

Jak utworzyć stronę kariery w witrynie WordPress

Dlaczego warto zastosować wykres kołowy na swojej stronie internetowej?

Wykresy kołowe ułatwiają zrozumienie informacji na stronie internetowej. Używają kolorów i kształtów, aby pokazać wartości procentowe i porównania, ułatwiając odwiedzającym zrozumienie złożonych danych. Korzystając z wykresów kołowych, możesz uatrakcyjnić swoją witrynę internetową i pomóc ludziom lepiej zrozumieć informacje.

Ostatnie słowa

Utworzenie wykresu kołowego nie będzie dla Ciebie trudnym zadaniem. Po prostu użyj mocy. z ElementsKit. Podobnie jak konwencjonalne wtyczki, nie jest przeznaczony do jednego typu zadań. Za pomocą ElementsKit możesz zaprojektować całą witrynę internetową. Zatem nie wahaj się i zacznij nadawać idealny kształt swojej witrynie.