Jak utworzyć stronę internetową infograficzną z elementorem

Dzięki opowieściom i informacjom zaledwie kilka kliknięć, ludzie coraz częściej polegają na statystykach i danych liczbowych w zakresie abstrakcyjnych narracji w celu podejmowania świadomych decyzji. Tutaj lśnią strony infograficzne strony internetowe. Nie tylko przyciągają odwiedzających, ale także urzekają i przyciągają uwagę, co sprawia, że ​​złożone informacje są dostępne i angażujące.

Poza tym strony internetowe infograficzne mogą prezentować złożone dane w sposób przekonujący i łatwy do odczytania. Gdy infografiki towarzyszą wszelkim studiom przypadku lub hipotetycznym historie/pomysłom, mogą one tworzyć potężne wartości dla odbiorców rynkowych. Jednak nie jest trudno tworzyć infograficzne strony internetowe.

Dzięki Elementor i HappyAddons możesz stworzyć dowolny rodzaj projektowania strony internetowej na WordPress. W tym samouczek pokażemy przewodnik krok po kroku, jak utworzyć stronę internetową infograficzną z Elementor. Zacznijmy!

Co to jest strona internetowa infograficzna?

Infograficzna strona internetowa została zaprojektowana do prezentacji informacji przy użyciu reprezentacji graficznych w celu zilustrowania pojęć. Łączy różne elementy wizualne, takie jak obrazy, wykresy, liczby statystyczne, ikony itp., Z minimalnymi tekstami w celu uproszczenia kompleksowych danych.

Infograficzne strony internetowe priorytetowo traktują treści wizualne w celu poprawy czytelności, aby ludzie mogli łatwo zrozumieć całą koncepcję od pierwszego wejrzenia. Ten typ strony jest zwykle tworzony do opowiadania historii, wizualizacji danych i celów edukacyjnych. Bez wątpienia strony internetowe infograficzne mają wyższy wskaźnik retencji i zaangażowania.

Dlaczego i kiedy potrzebujesz stron internetowych infograficznych

Przyjrzyjmy się teraz, dlaczego i kiedy potrzebujesz projektów stron infograficznych na swojej stronie internetowej przed nurkowaniem w sekcji samouczka. Poznajmy.

• Upraszcza złożone informacje

Elementy wizualne pomagają użytkownikom zrozumieć złożone tematy danych bez przytłoczenia przez rozkładanie kluczowych informacji.

• Dłużej utrzymuje odwiedzających na swojej stronie internetowej

Skuteczna strona infograficzna motywuje odwiedzających do dłuższego pozostania w Twojej witrynie poprzez zmniejszenie szybkości odrzuceń i zwiększając potencjał konwersji.

• Wzmacnia autorytet marki

Wyświetlając wizualnie strukturalne dane i cenne spostrzeżenia, możesz ustanowić swoją witrynę jako zaufanego dostawcy informacji.

• Dla treści marketingowych i promocyjnych

Strony infograficzne wyróżniają się jako skuteczny sposób wyświetlania porównań produktów wraz z najważniejszymi najważniejszymi kampaniami. Możesz także wyświetlać referencje klientów, aby zwrócić uwagę klientów.

• Udostępnij posty w mediach społecznościowych

Treści infograficzne są łatwe do udostępnienia na platformach społecznościowych. Poza tym, w ostatnim czasie ludzie uwielbiają oglądać infografiki i informacje statystyczne bardziej niż historie tekstowe.

Jak utworzyć stronę internetową infograficzną z elementorem

Jeśli używasz WordPress od co najmniej kilku tygodni, być może słyszałeś o Elementor . Jest to potężna wtyczka dla konstruktora stron przeciągania i upuść, za pomocą której można projektować strony internetowe bez kodowania. Wszystko, co musisz zrobić, to wybrać widżety projektowe, przeciągnąć i upuścić na stronie i dostosować je.

HappyAddons to znany dodatek do wtyczki Elementor. Jest wyposażony w wiele dodatkowych widżetów i funkcji projektowych. Jeśli kiedykolwiek uważasz, że Elementor nie wystarczy, możesz spróbować z nim HappyDdons. Za pomocą dwóch wtyczek możesz wykonać magię w dziedzinie projektowania stron internetowych.

Pobierz wtyczki, klikając poniższe linki.

• Elementor
• Happyaddons
• Happyaddons Pro

Możesz tworzyć strony infograficzne za pomocą tylko bezpłatnych wersji Elementor i HappyAddons. Ale wersja premium zawiera bardziej ekscytujące zasoby. W tym samouczku użyjemy wersji premium Happyaddons.

Po zainstalowaniu i aktywowaniu wtyczek w Twojej witrynie, zacznij śledzić samouczek, jak pokazano poniżej.

Krok 01: Otwórz post lub stronę z Elementor

Otwórz post lub stronę z Elementor. Po lewej stronie znajduje się panel Elementor , w którym znajdziesz wszystkie widżety i funkcje projektu. Po prawej stronie znajduje się Elementor Canvas , w którym musisz przeciągnąć i upuścić widżety, aby zaprojektować stronę internetową infografiki.

Krok 02: Utwórz kolumny do umieszczania widżetów

Przed umieszczeniem dowolnego widżetu musisz utworzyć kolumny. Aby to zrobić, kliknij ikonę (+) plus . Następnie wybierz opcję kontenera FlexBox . Następnie wybierz strukturę kolumny, której potrzebujesz do projektu.

Sprawdź, jak dodać Lightbox w WordPress z Elementor.

Krok 03: Rozpocznij dodawanie odpowiednich widżetów do kolumn

Zgodnie z preferencjami projektowymi umieść widżety w utworzonych kolumnach. Zobaczmy, jak projektujemy tę sekcję.

# Dodaj widżet obrazu

Wpisz „ obraz ” w polu wyszukiwania. Gdy widżet obrazu pojawi się poniżej, przeciągnij go i upuść do odpowiedniej sekcji w obszarze struktury kolumny.

Prześlij obraz lub dodaj jeden z biblioteki multimediów do obszaru widżetu z sekcji oznaczonej na poniższym obrazku.

# Dodaj widżet nagłówka

Znajdź widżet nagłówka i umieść go w prawej kolumnie.

Napisz tytuł strony infografiki. Gdy utworzę tę stronę dla cukrzycy , napisałem ją dla tytułu strony.

Przyjdź do zakładki Style . Otrzymasz opcje zmiany wyrównania, typografii, koloru tekstu i nie tylko.

# Dodaj widżet edytora tekstu

Następnie dodaj widżet edytora tekstu poniżej nagłówka. Pozwoli ci dodać proste teksty i akapity do płótna.

Teraz, w ten sam sposób, dodaj żądany tekst do widżetu edytora tekstu. Następnie zwiększ czcionkę, zmień rodzinę czcionki i wybierz kolor, jak pokazaliśmy powyżej.

Jeśli chcesz zmniejszyć lukę między dwoma widżetami, możesz dostosować ustawienia marginesu .

W ten sam sposób dodaj dodatkowy tekst i obrazy do płótna za pomocą odpowiednich widżetów.

Korzystając z opcji marginesu , możesz przenieść i umieścić dowolny widżet w innym miejscu, takim jak mapa na poniższym obrazku. Mam nadzieję, że to rozumiesz.

Dowiedz się, jak utworzyć kalendarz zdarzeń w WordPress.

Krok 04: Utwórz nową sekcję, aby dodać wykresy statystyczne

Strona internetowa to kombinacja kilku sekcji. Aby utworzyć nową sekcję, musisz dodać nowy obszar struktury kolumny do strony.

Korzystając z widżetu edytora tekstu, dodaj kopię do nowej sekcji infografiki, jak to zrobiliśmy poniżej.

# Dodaj widżet wykresu do płótna

HappyAddons jest wyposażony w sześć widżetów wykresów, które są naprawdę pomocne w projektowaniu strony internetowej infografiki. Po prostu eksploruj widżety wykresów i wybierz te, które lubisz projekt strony internetowej.

Użyjemy widżetu pasków umiejętności, aby pokazać określone dane statystyczne.

Presete są wyposażone w szablony wstępnie zaprojektowane. Możesz wybrać dowolny ustawienie do widżetu pasków umiejętności lub pozostać z domyślnym.

Z sekcji Umiejętności możesz dodać informacje do wszystkich pasków jeden po drugim, klikając odpowiednie karty. Widać, że przemianowaliśmy je i ustalamy procenty dla każdego z nich.

Przejdź do zakładki Style , aby wybrać widżet pasków umiejętności. Możesz zmienić kolor tekstu, typografię i różne inne ustawienia widżetu.

Korzystając z bloku edytora tekstu, możesz dodać więcej informacji na lewą stronę, aby wykorzystać białą przestrzeń.

Krok 05: Utwórz nową strukturę kolumny, aby uzyskać więcej informacji

Aby dodać kolejną sekcję, utwórz ponownie nową strukturę kolumny. Następnie dodaj obraz i opis tekstowy, tak jak zrobiliśmy na poniższym obrazku.

Następnie, po prawej stronie, wypełnij białą przestrzeń odpowiednimi informacjami. Dodaliśmy dwa teksty za pomocą widżetu edytora tekstu. Pomiędzy nimi zachowaliśmy sekcję za pomocą kontenera FlexBox.

Możesz utworzyć te podsekcje za pomocą tego kontenera FlexBox .

Teraz dodaj widżet ikon do sekcji kontenerów.

Widżet ikony ma kompleksowy zbiór ikon w bibliotece. Możesz zmienić ikonę jeden po drugiej dla wszystkich sekcji. Zrób to tak, jak to zrobiliśmy.

Aby zmienić kolor ikon , przejdź do zakładki Style> Kolor podstawowy .

Aby zmienić swoją pozycję, przejdź do zakładki układu> margines . Mam nadzieję, że możesz zrobić resztę.

Krok 06: Utwórz ostatnią sekcję dla projektowania strony internetowej infografiki

Podobnie jak powyżej, utwórz nową sekcję i strukturę kolumny za pomocą kontenera FlexBox. Dodaj także nagłówek do sekcji.

# Dodaj wykres kołowy

Jak wspomniano powyżej, HappyAddons ma wiele przydatnych widżetów wykresów. W tej sekcji użyjemy wykresu kołowego. Przeciągnij i upuść go do odpowiedniej sekcji.

Z sekcji wykresu kołowego widżetu określ informacje o wykresie kołowym za pomocą wszystkich kart jeden po drugim.

Rozwiń sekcję Ustawienia . Stąd możesz dostosować wiele rzeczy. Ale najbardziej widoczne, jakie możesz zrobić, to napisać tytuł i zmienić pozycję legendy .

Przejdź do zakładki Style . Możesz dostosować typografię, rozmiar czcionki i różne efekty kolorów dla widżetu.

# Dodaj wykres słupkowy

W ten sam sposób dodaj widżet wykresu paska do płótna.

Podobnie jak paski umiejętności i widżety wykresu paska, dostosuj widżet wykresu paska, ustawiając informacje i stylizację, jak chcesz. Mam nadzieję, że możesz to zrobić sam. Zrób to.

Oto przewodnik na temat wyświetlania fotografii produktu o 360 stopni w WordPress.

Krok 07: Ustaw kolor tła dla projektowania strony internetowej infografiki

Ustawienie koloru tła na całej stronie może sprawić, że projekt strony internetowej infograficzny jest bardziej rozpowszechniany. Aby to zrobić, kliknij trzyprowisną ikonę w lewym rogu.

Zostaniesz zabrany do nowego panelu. Kliknij opcję Ustawienia witryny .

Ponownie zostaniesz zabrany do nowego panelu. Naciśnij opcję tła .

Z opcji koloru wybierz kolor. Zobaczysz, że kolor jest stosowany na tle strony.

W ten sposób możesz tworzyć i zaprojektować projekt strony internetowej infografiki.

Krok 08: Podgląd projekt strony internetowej infografiki

Przejdź do strony podglądu i sprawdź, czy wszystko działa dobrze. Po twoim końcu działa dobrze.

Zamknięcie!

Rzeczywiście, Elementor, w połączeniu z HappyAddons, upoważnia Cię do tworzenia oszałamiających stron internetowych infograficznych, które upraszczają złożone informacje. Jednak, aby osiągnąć najlepsze wyniki, należy starannie rozważyć niektóre kluczowe punkty.

Utrzymuj swój projekt w czystości i uporządkowany, unikając nadmiernego tekstu i wizualizacji. Użyj palety kolorów, która jest zgodna z tożsamością marki i zapewnij reaktywność mobilną, aby zachować spójny wygląd na wszystkich urządzeniach. Jeśli to możliwe, dodaj efekty animacji i unoszenia, ponieważ mogą uczynić Twoje treści interaktywne.

Dąż do harmonijnej równowagi między treścią tekstową a elementami projektowymi. Priorytetyzuj użycie wykresów i wykresów, ponieważ idealnie łączą się one z celami stron infograficznych. Wreszcie, zoptymalizuj swoją stronę, aby upewnić się, że ładuje się szybko bez uszczerbku dla wydajności.

Dlatego, postępując zgodnie z tymi najlepszymi praktykami, możesz tworzyć wspaniałe strony infograficzne, które dodają wartości i przynoszą konwersje.