Advanced Gutenberg: Konfiguracja bloków

1. Zaawansowany blok przycisków

Możesz utworzyć Przycisk zaawansowany klikając jego przycisk w sekcji Advanced Gutenberg.

 

przycisk zaawansowany

 

W prawym panelu możesz dostosować niektóre ustawienia przycisku:

  • Style: 4 predefiniowane style

    • strona głównayślna

    • Przedstawione

    • Do kwadratu

    • Kwadratowy kontur

  • Link do przycisku:

    • Link URL

    • Otwórz w nowej karcie: Włącz / Wyłącz.

 

Ustawienia przycisku Adv

 

  • Kolor tekstu:

    • Rozmiar czcionki

    • Kolor tła

    • Kolor tekstu

 

ustawienia przycisku koloru tekstu

 

  • Granica:

    • Promień graniczny

    • Styl obramowania: pełny, kropkowany, kalenica, ...

    • Kolor ramki

    • Szerokość granicy

 

granica przycisku przysł

 

  • Margines: góra, prawo, dół i lewo.

  • Wyściółka: góra, prawo, dół i lewo.

 

zaawansowane wypełnianie przycisków

 

  • Wahać się:

    • Ustawienia kolorów: Kolor tła, Kolor tekstu i Kolor cienia.

    • Przesunięcie cienia (H (w poziomie), przesunięcie V (w pionie), rozmycie, rozłożenie), prędkość krycia i przejścia.

 

zaawansowane zawijanie przycisku

 

2. Zaawansowany blok listy

Możesz utworzyć Zaawansowana lista klikając jego przycisk w kategorii Advanced Gutenberg.

 

lista zaawansowana

 

Po wprowadzeniu treści możesz dostosować ustawienia z prawego panelu:

  • Ustawienia tekstu

    • Rozmiar czcionki

  • Ustawienia ikon

    • Ikona (lista, kolor i rozmiar)

    • Wysokość linii

    • Margines

    • Wyściółka

 

zaawansowane ustawienia listy

 

3. Podsumowanie bloku

Możesz utworzyć streszczenie zablokuj, klikając jego przycisk w kategorii Advanced Gutenberg po ustawieniu co najmniej jednego tagu nagłówka w poście lub na stronie. Podsumowanie można wyrównać do lewej, do środka lub do prawej. Aby ją zaktualizować, użyj przycisku Podsumowanie aktualizacji.

 

streszczenie-zawartość gutenberga

 

W prawym panelu znajdują się opcje, które możesz dostosować:

  • Minimalizacja obciążenia: strona głównayślnie wyświetlać / ukrywać podsumowanie

  • Tytuł nagłówka podsumowania: tekst nagłówka podsumowania, który jest wyświetlany, gdy Ładuj zminimalizowany opcja jest włączona

  • Kolor kotwicy: wybierz kolor podsumowania

 

ustawienia podsumowujące

 

4. Blok licznika (Count Up)

 

Możesz utworzyć Odliczaj blok, ewentualnie z symbolem, klikając jego przycisk w kategorii Advanced Gutenberg.

 

odliczanie

 

Następnie z prawego panelu możesz dostosować niektóre opcje Licznika:

  • Ustawienia kolorów: Kolor nagłówka, kolor Count Up i kolor opisu

  • Kolumny: 1-3

  • Rozmiar licznika: ustaw rozmiar liczb

  • Symbol licznika: dodaj postać przed lub za ladą

  • Przycisk przełączania: ustaw pozycję symbolu (Włączony oznacza, że ​​symbol pojawia się po liczbach)

 

ustawienia zliczania

 

5. Zaawansowany blok obrazu

The Zaawansowany obraz blok może być użyty do utworzenia obrazu. Aby go dodać, kliknij Zaawansowany obraz w kategorii Advanced Gutenberg, a następnie wybierz obraz do wstawienia.

 

przycisk zaawansowanego obrazu

 

Następnie możesz zmienić tytuł obrazu i jego podtytuł. Możesz dostosować ustawienia obrazu z prawego panelu.

  • Akcja po kliknięciu: albo otwórz obraz w lightbox, albo otwórz niestandardowy URL

  • URL linku: Otwórz link w nowej karcie (przycisk przełączania)

  • Otwórz link w nowej karcie: Włącz / Wyłącz

  • Rozmiar obrazu: czy obraz powinien być wyświetlany z pełną szerokością, czy z niestandardową wysokością i szerokością

 

zaawansowane ustawienia obrazu

 

  • Wybór punktu kontaktowego: wybierz punkt, aby ustawić ostrość na obrazie lub ustaw pozycję poziomą / pionową

  • strona głównayślnie krycie nakładki

  • Najechanie kursorem krycia nakładki

  • Ustawienia kolorów: Kolor tytułu, kolor napisów, kolor nakładki

  • Wyrównanie tekstu: Wyrównanie w pionie (góra, środek, dół), wyrównanie w poziomie (lewo, środek, prawo)

 

przesuń obraz

 

6. Blok świadectw

Możesz wstawić referencję do treści, klikając Zaświadczenie przycisk w kategorii Advanced Gutenberg. Następnie możesz zmienić awatar referencji, imię, stanowisko i opis.

 

świadectwo-przycisk

 

Wreszcie, w prawym panelu możesz dostosować ustawienia Referencji. Gdy opcja widoku suwaka jest wyłączona, oto ustawienia:

  • Kolumny: Zakres kolumn w widoku normalnym wynosi 1-3, aw widoku suwaka 4-10.

  • Awatara: Rozmiar awatara, kolor tła i ustawienia obramowania, które obejmują kolor, promień i szerokość

  • Kolory tekstu:

    • Nazwa Kolor

    • Pozycja Kolor

    • Opis Kolor

 

ustawienia referencyjne

 

Po włączeniu Widok suwaka opcja, pojawią się dodatkowe opcje suwaka:

  • Liczba przedmiotów
  • Elementy do pokazania
  • Elementy do przewijania

suwak-kolumna widoku

  • Tryb środkowy
  • Zatrzymaj po najechaniu myszką
  • Automatyczne odtwarzanie
  • Szybkość autoodtwarzania (ms)
  • Nieskończona pętla
  • Szybkość przejścia (ms)
  • Pokaż kropki
  • Pokaż strzałki
  • Wielkość strzały

 

ustawienia suwaka

  • Kolory suwaka:
    • Kolor strzałki i obramowania
    • Kolor kropek

 

kolor suwaka

 

7. Blok mapy

Aby użyć Mapa blok, musisz dodać klucz Google API w konfiguracji. Po tym powinieneś to zrobić połączyć, Kliknij Włącz interfejsy API i usługi następnie wyszukaj i włącz API geolokalizacji, API JavaScript Maps.

Po dodaniu możesz utworzyć mapę, klikając Mapa przycisk w kategorii Advanced Gutenberg.

 

blok mapy

 

Z prawego panelu możesz wstawić lokalizację, wprowadzając szerokość i długość geograficzną lub wpisując adres, a następnie naciskając przycisk Pobierz lokalizację.

Dostępne są dodatkowe opcje mapy:

  • Stopień przybliżenia

  • Wysokość

  • Ikona znacznika

  • Tytuł znacznika

  • Opis markera

  • Otwórz etykietkę znacznika

  • Style map: srebrny, retro, noc ... i możesz dodać swój własny styl.

 

ustawienia mapy

 

8. Zaawansowany blok wideo

Możesz utworzyć film wideo do posta, klikając Zaawansowane wideo przycisk w sekcji Advanced Gutenberg. Następnie możesz wkleić adres URL z serwisu YouTube lub Vimeo lub użyć dowolnego lokalnego wideo z serwera. Możesz zmienić podgląd obrazu, klikając przycisk Edytuj w lewym górnym rogu.

 

zaawansowane wideo

 

Następnie możesz dostosować ustawienia wideo w prawym panelu.

  • Otwórz wideo w lekkim pudełku: lightbox oferuje dodatkowe opcje wyświetlania

  • Pełna szerokość: jeśli jest wyłączony, musisz ustawić niestandardową szerokość wideo

  • Wysokość wideo

  • Ustawienia kolorów: Kolor nakładki i kolor przycisku Odtwórz

  • Przycisk Odtwórz: Styl ikony, rozmiar przycisku Play

 

zaawansowane ustawienia wideo

 

9. Zaawansowany blok tabel

Możesz utworzyć tabelę, klikając Zaawansowana tabela przycisk w kategorii Advanced Gutenberg.

 

przycisk zaawansowanego stołu

 

Możesz edytować tabelę po ustawieniu liczby kolumn i wierszy.

 

zaawansowany stół

 

Następnie możesz wprowadzić tekst lub dostosować wiersze i kolumny z samego edytora tuż nad blokiem tabeli. Więcej ustawień można zmodyfikować w prawym panelu.

  • Style

    • strona głównayślna

    • Paski

 

styl tabeli

 

  • Ustawienia tabeli

    • Maksymalna szerokość: Ustaw na 0, aby maksymalna szerokość odpowiadała 100%

    • Komórki tabeli o stałej szerokości

    • Nagłówek tabeli, stopka

    • Granica się zawaliła

 

advanced-table-settings1

 

  • Ustawienia komórki

    • Ustawienia kolorów: Kolor tła, Kolor tekstu

    • Granica: styl obramowania, kolor i szerokość

    • Wyściółka: górne, dolne, lewe i prawe wypełnienie

    • Wyrównanie tekstu: wyrównanie poziome i pionowe

 

ustawienia pojedynczych komórek

 

Możesz nawet scalić komórki (za pomocą przycisku Shift) i podzielić połączone komórki za pomocą Zaawansowana tabela blok.

10. Zaawansowany blok akordeonu

Możesz utworzyć Zaawansowany akordeon kiedy musisz wyświetlić więcej treści na mniejszym obszarze, klikając zaawansowane Akordeon przycisk w kategorii Advanced Gutenberg. Następnie będą strona głównayślnie wyświetlane 2 elementy akordeonu grupowego.

 

blok akordeonu

 

Po utworzeniu możesz dostosować opcje nagłówka, treści lub obramowania z prawego panelu.

  • Ustawienia akordeonu:

    • Odstępy dolne: Zdefiniuj przestrzeń między każdym akordeonem (tylko widok Frontend)

    • Początkowe zwinięte: strona głównayślnie wszystkie akordeony są zwinięte.

  • Ustawienia nagłówka

    • Styl ikony nagłówka

    • Ustawienia kolorów: Kolor tła, kolor tekstu i kolor ikony

 

adv-akordeon-nagłówek

 

  • Ustawienia koloru ciała

    • Kolor tła

    • Kolor tekstu

  • Ustawienia obramowania

    • Styl obramowania: stałe, przerywane lub kropkowane

    • Ustawienia kolorów

    • Szerokość granicy, promień

 

ustawienia akordeonu

 

11. Zaawansowany blok kart

Podobnie możesz utworzyć Zaawansowane Patka blokuj, gdy potrzebujesz wyświetlać więcej treści na mniejszym obszarze. Aby wstawić jeden, kliknij Karta Zaawansowane przycisk w kategorii Advanced Gutenberg.

 

blok kart

 

Następnie możesz dostosować opcje karty, treści lub obramowania z prawego panelu.

  • Styl zakładek
    • Komputer stacjonarny, tablet lub telefon komórkowy
    • Pozioma lub pionowa
  • Ustawienia kart
    • Początkowa otwarta karta

 

ustawienia karty Adv

 

  • Kolory kart

    • Kolor tła

    • Kolor tekstu

    • Kolor tła aktywnej karty

    • Kolor tekstu aktywnej karty

 

ustawienia karty

 

  • Kolory nadwozia

    • Kolor tła

    • Kolor tekstu

  • Ustawienia obramowania

    • Styl: brak, pełny, przerywany lub w kropki

    • Kolor

    • Szerokość granicy, promień

 

tab-settings1

 

Możesz udostępniaj swoje linki społecznościowe bardzo łatwo za pomocą Linki społecznościowe blok, który można utworzyć, klikając jego przycisk w kategorii Advanced Gutenberg.

 

linki społecznościowe

 

Możesz użyć gotowej ikony lub przesłać własną ikonę i dostosować kilka opcji z prawego panelu.

  • Zaprogramowane ikony: możesz przesłać swoją niestandardową ikonę

  • Wstępnie ustawiony kolor ikony

  • Ustawienia ikon

    • Rozmiar ikony, spacja

 

ustawienia powiązań społecznych

 

13. Blok najnowszych postów

Dostępne są 3 układy do wyświetlania ostatnich postów: widoki siatki, listy i suwaka. Możesz utworzyć dowolny z tych widoków, klikając Najnowsze posty przycisk w kategorii Advanced Gutenberg.

 

blok ostatnich postów

 

Możesz zobaczyć, jak bloki będą wyświetlane w interfejsie na obrazku powyżej lub w naszym Demo Advanced Gutenberg.

Z prawego panelu możesz dostosować ustawienia każdego układu:

  • Zamów przez

Zamów przez

 

  • Kategoria

  • Liczba przedmiotów

  • Kolumny (tylko dla widoku siatki)

  • Wyświetl wyróżniony obraz

  • Wyświetl posta autora

  • Wyświetl datę postu

  • Wyświetl Czytaj więcej Link

  • Przeczytaj więcej tekstu

  • Wyświetl fragment wiastrona głównaości

  • Pierwszy tekst postu jako fragment: wyświetlać fragment pierwszego tekstu znalezionego w poście jako fragment.

 

ustawienia ostatnich postów

 

14. Blok produktów Woo

Dostępne są 2 układy Produkty Woo block: widoki Normal i Slide mogą wyświetlać produkty WooCommerce na blogu WordPress. Możesz wstawić ten blok, klikając Produkty Woo przycisk w kategorii Advanced Gutenberg.

 

blok woo

 

Możesz zobaczyć, jak bloki będą wyświetlane w interfejsie na obrazku powyżej lub w naszym Demo Advanced Gutenberg

W prawym panelu możesz dostosować ustawienia każdego układu:

  • Ustawienia produktów

    • Stan produktu

    • Kategoria

  • Ustawienia układu

    • Kolumny

    • Liczba produktów

    • Zamówienie

 

ustawienia woo

 

15. Blok suwaka obrazów

Jeśli chcesz wyświetlić kilka obrazów jako slajd, kliknij, aby Suwak obrazów przycisk w kategorii Advanced Gutenberg.

 

nowy suwak obrazu

 

Następnie naciskając Dodaj obrazy przycisk, aby wybrać zdjęcia pokazane na slajdzie. Następnie możesz wprowadzić tekst Tytuł i tekst opis każdego zdjęcia.

 

suwak obrazu

 

Możesz edytować ustawienia suwaka na prawym panelu.

Ustawienia obrazu

  • Akcja po kliknięciu: Brak, Otwórz obraz w lightbox i Otwórz niestandardowy link

  • Pełna szerokość

  • Automatyczna wysokość

  • Zawsze pokazuj nakładkę

Ustawienia kolorów

  • Hover Color

  • Kolor tytułu

  • Kolor tekstu

 

slide-settings-1

 

Wyrównanie tekstu

  • Wyrównanie w pionie

    • Top

    • Środek

    • Dolny

  • Wyrównanie w poziomie

    • Lewo

    • Środek

    • Dobrze

slide-settings-2

 

16. Blok formularza kontaktowego

Możesz uzyskać powiastrona głównaienie o kontakcie e-mail klienta z tym blokiem. Możesz utworzyć ten formularz, klikając Formularz kontaktowy przycisk w kategorii Advanced Gutenberg.

 

Formularz kontaktowy

 

Możesz edytować ustawienia Formularz kontaktowy na prawym panelu.

  • Ogłoszenie: Nie pojawi się, jeśli włączysz opcję reCAPTCHA w Ustawieniach.

  • Nadawca e-mail: Możesz zmienić ustawienia. Wiastrona głównaość e-mail zostanie wysłana do e-maila administratora (strona głównayślnie) za każdym razem, gdy zostanie przesłany formularz kontaktowy.

  • Etykieta tekstowa:

    • Symbol zastępczy wprowadzania nazwy

    • Element zastępczy wprowadzania wiastrona głównaości e-mail

    • Symbol zastępczy wprowadzania wiastrona głównaości

    • Prześlij tekst

    • Pusty tekst ostrzegawczy pola

    • Prześlij tekst sukcesu

 

contact-settings1

 

  • Kolor wejścia: Kolor tła i kolor tekstu

  • Ustawienia obramowania: Kolor obramowania, styl obramowania i promień obramowania

  • Ustawienia przycisku Wyślij:

    • Ustawienia kolorów: Granica i tekst, tło

    • Promień krawędzi przycisku

    • Pozycja przycisku: Lewo, środek i prawo

contact-settings2

 

17. Blok biuletynu

Aby otrzymać e-mail od klienta, możesz utworzyć blok e-mail, klikając Biuletyn przycisk w kategorii Advanced Gutenberg.

 

biuletyn

 

Możesz edytować ustawienia biuletynu na prawym panelu.

  • Ogłoszenie: Nie pojawi się, jeśli włączysz opcję reCAPTCHA w Ustawieniach.

  • Ustawienia formularza:

    • Styl formularza: strona głównayślny / Alternatywny

    • Szerokość formularza (px)

  • Etykieta tekstowa:

    • Element zastępczy wprowadzania wiastrona głównaości e-mail

    • Prześlij tekst

    • Pusty tekst ostrzegawczy pola

    • Prześlij tekst sukcesu

 

newsletter-settings1

 

  • Kolor wejścia: Kolor tła i kolor tekstu

  • Ustawienia obramowania: Kolor obramowania, styl obramowania i promień obramowania

  • Ustawienia przycisku Wyślij:

    • Ustawienia kolorów: Granica i tekst, tło

    • Promień krawędzi przycisku

 

newsletter-settings2

 

18. Blok menedżera kolumn

Jeśli chcesz utworzyć blok zawierający inne bloki, powinieneś wybrać Menedżer kolumn w kategorii Advanced Gutenberg. Podczas tworzenia nowego pojawi się styl bloku.

 

add-column-manager-block

 

Następnie możesz dodać dowolne typy bloków w każdej kolumnie. Oto blok menedżera kolumn zawierający 2 kolumny: lewy to Zaawansowany obraz, a drugi to Akapit, Zaawansowana lista.

 

blok-menedżer-kolumny

 

Na prawym panelu możesz dostosować ustawienia bloku Menedżer kolumn.

  • Ustawienia responsywne

    • Styl dla każdego typu urządzenia: Desktop, Tablet, Mobile

    • Odstęp między kolumnami

    • Wypełnienie: góra, prawo, lewo i dół

    • Margines: górny, prawy, lewy i dolny

 

column-settings-1

 

 

  • Ustawienia wiersza

    • Kolumny owinięte: jeśli Twoje kolumny są przepełnione, zostaną rozdzielone na nową linię (np .: Użyj tego z Odstępami kolumn).

    • Wrapper Tag: Div, Header, Main, ...

    • Maksymalna szerokość treści (px vw,%)

    • Minimalna wysokość treści (px, vw, vh)

    • Maksymalna wysokość treści (px, vw, vh)

 

column-settings-2

 

19. Zaloguj się / Zarejestruj blok formularza

Możesz utworzyć formularz logowania lub formularz rejestracji na swojej stronie internetowej klikając Formularz logowania / rejestracji przycisk w sekcji Advanced Gutenberg.

 

blok formularza logowania

 

I możesz zmienić widok z Login na Zarejestruj się na pasku nawigacyjnym tego bloku lub na prawym panelu.

 

formularz rejestracyjny logowania

 

Następnie możesz przejść do prawego panelu, aby dostosować więcej szczegółów na temat formularza.

  • Formularz początkowy: Zaloguj się lub zarejestruj

  • Przekieruj po zalogowaniu: Strona główna, pulpit nawigacyjny lub niestandardowy

  • Szerokość formy (px)

  • Pokaż logo

  • Szerokość logo (px)

  • Pokaż ikonę pola wprowadzania

  • Pokaż link do rejestru / nagłówka

  • Kolor nagłówka

  • Pokaż link do utraconego hasła

 

ustalenia między stanami

 

  • Wpisz symbol zastępczy

    • Symbol zastępczy wprowadzania danych logowania

    • Nazwa zastępcza wprowadzania nazwy użytkownika

    • Element zastępczy wprowadzania wiastrona głównaości e-mail

  • Kolor tekstu / wprowadzania

    • Wprowadź kolor tła

    • Wprowadź kolor

    • Kolor tekstu

  • Ustawienia obramowania

    • Kolor ramki

    • Styl granicy

    • Szerokość granicy

 

input-placeholder-settings

 

  • Ustawienia przycisku Prześlij

    • Obramowanie i tekst

    • tło

    • Promień krawędzi przycisku

    • Pozycja przycisku

  • Prześlij przycisk Hover

    • Unieś kolory: Kolor tła, tekstu i cienia

    • Cień: Krycie, prędkość przejścia i cień (przesunięcie H (w poziomie), przesunięcie V (w pionie), rozmycie, rozkład)

  • Ogłoszenie: Zdecydowanie zalecamy włączenie Google reCaptcha, aby uniknąć spamowania bota. Możesz włączyć to w Form Recaptcha w Adv. Gutenberg> E-mail i formularz .

 

ustawienia przycisku wysyłania

 

20. Blok paska wyszukiwania

Możesz utworzyć pole tekstowe wyszukiwania na interfejsie, klikając przycisk Pasek wyszukiwania przycisk w kategorii Advanced Gutenberg.

 

blok paska wyszukiwania

 

Możesz dostosować ustawienia paska wyszukiwania na prawym panelu.

  • Style: istnieją 2 predefiniowane style: strona głównayślny i klasyczny

  • Stan paska wyszukiwania

    • Pełna szerokość: wł. / Wył

    • Szerokość

  • Wyszukaj ikonę Ustawienia

    • Ikona wyszukiwania po prawej: Wł. / Wył

    • Ikona wyszukiwania

 

ustawienia paska wyszukiwania

 

  • Wyszukaj ustawienia wprowadzania

    • Wyszukaj symbol zastępczy

    • Kolor wejściowy: Kolor tła i tekstu

 

ustawienia wyszukiwania

 

  • Ustawienia przycisku wyszukiwania

    • Pokaż przycisk przesyłania: Włącz / Wyłącz

    • Przycisk wyszukiwania po lewej: Wł. / Wył

    • Kolor tła i tekstu

    • Promień graniczny

  • Unieś kolory: Kolor tła, tekstu i cienia

  • Unieś cień: Krycie, prędkość przejścia i cień (przesunięcie H (w poziomie), przesunięcie V (w pionie), rozmycie, rozkład)

 

ustawienia przycisku wyszukiwania