Jak osadzić arkusz Google w tabeli WordPress i sprawić, że jest to sortowanie

Google Sheets to bezpłatna i internetowa aplikacja, która pozwala tworzyć, edytować i współpracować w arkuszach kalkulacyjnych online w czasie rzeczywistym. Wiele osób, które dziś korzystają z WordPress, często szuka opcji, aby osadzić arkusze Google w WordPress i tworzyć sortowalną tabelę.

Tabela sortowalna pozwala użytkownikom zorganizować swoją zawartość poprzez zmianę kolejności wierszy i kolumn. Na przykład w przypadku sortowalnego stołu cenowego możesz zmienić jego kolejność z najniższego do najwyższego lub odwrotnie. Ta funkcja jest niezwykle pomocna, aby umożliwić użytkownikom badanie i porównywanie informacji bez konieczności przewijania i eksploracji każdej komórki na stole.

Elementor jest jedną z najlepszych i bogatych w funkcje wtyczki budowniczej strony. Obejmuje potężne widżety do tworzenia oszałamiających stron internetowych. Za pomocą tej wtyczki możesz wyświetlać swoje arkusze Google na WordPress. W tym poście pokażemy, jak osadzić arkusz Google w tabeli WordPress i sprawić, by można go było sortować.

Dlaczego powinieneś utworzyć tabelę sortowalną: Kluczowe korzyści

Przed rozpoczęciem samouczka miejmy jeszcze kilka minut, aby zbadać, dlaczego powinieneś stworzyć tabelę sortowaną i jej kluczowe korzyści. Spójrz na nie poniżej.

• Łatwe do filtrowania danych

Dzięki sortowalnej tabeli użytkownicy mogą szybko filtrować i organizować informacje w oparciu o to, czego potrzebują. Na przykład sortowanie wierszy/kolumn tabeli alfabetycznie lub ceny od niskiego do wysokiego może pomóc im szybko ukończyć badania.

• Niezwykle oszczędzanie czasu

Zamiast przewijać, ponieważ użytkownicy mogą eksplorować długie tabele danych, po prostu sortowanie, może to zaoszczędzić dużo czasu. Tak więc ten rodzaj tabeli jest świetny, szczególnie w przypadku szczegółowych lub złożonych informacji.

• Wygląda bardziej czysto

Tabele sortowani organizują starannie, ponieważ wiersze i kolumny są organizowane w określonej kolejności, alfabetycznie lub numerycznie. To sprawia, że ​​stół wygląda czysto i bardziej profesjonalnie.

• Bardziej angażujące

Ponieważ ten typ tabeli zawiera wiele opcji dla użytkowników do ponownego zamówienia wierszy, kolumn i danych, użytkownicy uważają, że jest bardziej wciągający.

• Dobry do dużego zestawu danych

Często może być konieczne utworzenie setek wierszy i dziesiątki kolumn, aby wyświetlić duży zestaw danych. Może to przytłaczać użytkowników. Tabele sortowani mogą zapisać użytkowników w tym przypadku.

Jak osadzić arkusz Google w tabeli WordPress i sprawić, że jest sortowalny

Aby rozpocząć samouczek, musisz zainstalować i aktywować następujące wtyczki na swojej stronie. Happyaddons to znany dodatek do wtyczki Elementor. Chociaż sam Elementor jest ogromnym narzędziem, brakuje mu kilku istotnych widżetów i funkcji do projektowania stron internetowych.

• Elementor
• Happyaddons
• Happyaddons Pro

Po ich zainstalowaniu i aktywowaniu w Twojej witrynie możesz zacząć wykonać kroki wyjaśnione w poniższym samouczku.

Krok 01: Otwórz stronę z płótnem elementarnym

Otwórz post lub stronę z płótnem Elementor, w którym chcesz utworzyć tabelę sortowalną.

Krok 02: Przeciągnij i upuść widżet zaawansowanego tabeli danych

Wpisz zaawansowany tabela danych w polu wyszukiwania. Gdy widżet się pojawi, przeciągnij i upuść go do edytora.

Zobaczysz, że do edytora jest dodawana zaawansowana tabela danych.

Krok 03: Dodaj dane do tabeli z arkusza Google

Rozwiń sekcję tabeli danych . Od następnego typu tabeli wybierz opcję arkusza Google .

Teraz, aby wyświetlić dane z arkusza Google jako tabela w WordPress z Elementor, musisz dodać kluczowy klucz API, identyfikator arkuszy Google i zakresie Google w odpowiednich polach, jak zaznaczono na poniższym obrazku.

# Zdobądź swój klucz Google API

Kliknij tutaj, Google API Key, aby odwiedzić stronę, na której otrzymasz klucz.

Następnie kliknij trzy-linię ikon> poświadczenia > Utwórz poświadczenia .

Lista otworzy się. Kliknij klawisz API opcji.

Wystrój otworzy się z kluczem. Skopiuj klucz .

Przyjdź na płótno żywiołowe. Wklej klucz API Google do odpowiedniego pola po lewej stronie, jak zaznaczono na poniższym obrazku.

# Pobierz identyfikator arkusza Google

W linku są trzy części.

• Pierwsza część - https://docs.google.com/spreadsheets/d/
• Druga część - /13Nierdo5sylJ9fwudWomlBqODZ4XERE2EZYM1BIAQJG /
• Trzecia część - /edytuj? Gid = 0#gid = 0

Ta druga część to właściwie identyfikator arkusza. Skopiuj to .

W ten sam sposób wklej identyfikator arkusza Google do odpowiedniego pola i zasięgu arkuszy do drugiego pola.

Tabela pojawi się natychmiast.

UWAGA: Nie martw się, jeśli tabela nie jest wyświetlana. Przyjdź do opcji Usuń pamięć podręczną , przewijając sekcję paska bocznego. Włącz i wyłącz. Mam nadzieję, że pojawi się stół.

Poza tym po wyświetleniu tabeli zobaczysz, że opcja sortowania jest włączona w górnym rzędzie tabeli. Klikając tę ​​opcję, możesz zmienić informacje, ponownie zamawiając wiersze tabeli.

Krok 04: Zmień wyrównanie zawartości tabeli

W sekcji tabeli danych zobaczysz dwie opcje wyrównania - wyrównanie głowy i wyrównanie wiersza . Korzystając z nich, możesz zmienić wyrównanie zawartości tabeli. Zrób to.

Widać, że centralnie wyrównaliśmy treść.

Krok 05: Skonfiguruj ustawienia tabeli

Możesz wyświetlić pole wyszukiwania, paginację i liczbę wierszy, które chcesz wyświetlić na stronę. Aby to zrobić, poszerz sekcję Ustawienia . Włącz, aby włączyć następujące opcje:

• Włącz wyszukiwanie
• Włącz paginację
• Włącz wpisy

Zobaczysz wpisy i pola wyszukiwania na górze, a paginacja pod stołem.

Krok 06: Użyj ustawień wstępnych (opcjonalnie)

Presegs to czytelne szablony z zapisanymi ustawieniami. Jeśli masz mało czasu, możesz natychmiast przygotować stół za pomocą dowolnego ustawienia. HappyAddons zapewnia cztery ustawienia o zaawansowanym widżecie tabeli danych.

Aby to zrobić, poszerz sekcję ustawień wstępnych . Kliknij dowolną opcję. Zobaczysz, że styl jest nakładany na stół.

Krok 07: Stylizuj tabelę

Możesz dodatkowo dostosować wyściółkę, promień graniczny, rodzaj granicy, kolor graniczny i więcej opcji, aby stół wyglądał atrakcyjnie. Możesz dostosować każdą część treści tabeli.

# Stylizuj wspólne opcje

Przejdź do Table Style> Common . Z tej sekcji możesz stylizować pole wyszukiwania, paginację i wpisy.

Najpierw stylizujmy pole wyszukiwania . Widać, że zmieniliśmy kolor graniczny i wejściowy kolor tła. W razie potrzeby możesz również dostosować promień wyściółki i granicy.

Przewijanie w dół, przejdź do opcji paginacji . Dokonaj potrzebnych zmian. Nieco zwiększyliśmy przestrzeń i zmieniliśmy promień graniczny.

Ostatnie kilka opcji w sekcji wspólnej są zarezerwowane do dostosowania wpisów . Widać, że zmieniliśmy kolory opcji wpisów.

# Stylizuj głowę stołową

Następnie poszerz sekcję głowy tabeli . Możesz zmienić stylizację górnego rzędu tabeli. Widać, że zmieniliśmy jego kolor, zwiększyliśmy rozmiar czcionki i wybraliśmy inny kolor dla opcji sortowania.

# Stylizuj wiersz stołu

W ten sam sposób poszerz sekcję wiersza tabeli . Możesz zmienić wyściółkę, kolor tła, kolor tekstu, typ czcionki i inne opcje, jak pokazano w powyższych krokach. Mam nadzieję, że sam możesz to zrobić sam.

Krok 08: Spraw, aby tabela mobilna reaguje

Wreszcie, aby upewnić się, że stół wygląda równie dobrze na wszystkich typach urządzeń, musisz zoptymalizować swój układ osobno dla każdego urządzenia.

Aby to zrobić, kliknij tryb responsywny na dole panelu elementor. Na płótnie Elementor pojawi się górny pasek, gdzie otrzymasz opcje zmiany płótna na różne rozmiary ekranu.

Twoje dostosowania w karcie Style zostaną zapisane tylko dla tego konkretnego typu urządzenia. W ten sposób możesz uczynić tabelę mobilną.

Krok 09: Podgląd tabeli

Teraz przyjdź na frontend postu/strony. Sprawdź, czy tabela działa idealnie, czy nie. Mam nadzieję, że po twoim końcu zadziała dobrze.

Wniosek

Mam nadzieję, że podobał Ci się ten samouczek. Odtąd nie będzie trudno wyświetlać duże treści z arkuszy Google na swojej stronie WordPress. Jeśli jesteś nowy w WordPress i nie masz pojęcia o Elementor, powinieneś spędzić co najmniej kilka godzin na badaniu tego narzędzia.

Bez względu na to, czy jesteś użytkownikiem bez kodu. Sam Elementor wystarczy, abyś mógł samodzielnie zaprojektować całą witrynę bez pomocy żadnego profesjonalisty. Nie tylko to. Wykorzystując moc wtyczki, możesz tworzyć witryny zorientowane na konwersję, które przynoszą potencjalnych klientów i przychody.

Omówiliśmy już wiele samouczków na temat projektowania różnych aspektów strony internetowej z wtyczką Elementor. Odwiedź naszą stronę archiwum bloga, aby je zbadać i zwiększyć swoją bazę wiedzy.