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

    • Domyś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

 

obramowanie przycisku Adv

 

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

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

 

zaawansowana wyściółka przycisków

 

  • Unosić się:

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

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

 

zaawansowany aktywowany przycisk

 

2) Zaawansowany blok listy

Możesz utworzyć Lista zaawansowana 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) Blok podsumowań

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

 

Podsumowanie-treść Gutenberga

 

W prawym panelu znajduje się kilka opcji, które możesz dostosować:

  • Obciążenie zminimalizowane: aby domyślnie wyświetlać / ukrywać Podsumowanie

  • Tytuł nagłówka podsumowania: tekst nagłówka Podsumowania, który jest wyświetlany, gdy Obciążenie zminimalizowane opcja jest włączona

  • Kolor kotwy: wybierz kolor dla Podsumowania

 

ustawienia podsumowania

 

4) Blok licznika (Count Up)

 

Możesz utworzyć Count Up blok, prawdopodobnie 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 znak przed lub za licznikiem

  • Przycisk przełączania: ustaw pozycję symbolu (On oznacza, że ​​symbol występuje po liczbach)

 

ustawienia zliczania

 

5) Zaawansowany blok obrazu

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

 

przycisk zaawansowanego obrazu

 

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

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

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

  • Otwórz link w nowej karcie: On / Off

  • 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ą

  • Domyś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 (lewy, środkowy, prawy)

 

przesuń obraz

 

6) Blok referencji

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

 

przycisk referencji

 

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, a w widoku suwaka 4-10.

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

  • Kolory tekstu:

    • Nazwa koloru

    • Kolor pozycji

    • Opis Kolor

 

ustawienia referencji

 

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

  • Liczba przedmiotów
  • Elementy do pokazania
  • Elementy do przewinięcia

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 skorzystać z Mapa blok, musisz dodać klucz Google API w konfiguracji. Następnie powinieneś to zrobić  połączyć, Kliknij Włącz interfejsy API i usługi , a następnie wyszukaj i włącz Geolocation API, Maps JavaScript API.

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

 

blok mapy

 

Z prawego panelu można 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:

  • Poziom przybliżenia

  • Wysokość

  • Ikona znacznika

  • Tytuł znacznika

  • Opis znacznika

  • Otwórz etykietkę znacznika

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

 

ustawienia mapy

 

8) Zaawansowany blok wideo

Możesz utworzyć wideo do postu, klikając przycisk Zaawansowane wideo przycisk w sekcji Advanced Gutenberg . Następnie możesz wkleić adres URL z Youtube lub Vimeo albo 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 light boxie: lightbox oferuje dodatkowe opcje wyświetlania

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

  • Wysokość wideo

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

  • Przycisk Play: Styl ikony, rozmiar przycisku Play

 

zaawansowane ustawienia wideo

 

9) Zaawansowany blok tabel

Możesz utworzyć tabelę, klikając Zaawansowany stół 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

    • Domyślna

    • Stripe s

 

stylowy stół

 

  • 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

 

ustawienia zaawansowane tabeli 1

 

  • Ustawienia komórki

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

    • Granica: styl, kolor i szerokość obramowania

    • Wyściółka: górna, dolna, lewa i prawa wyściółka

    • Wyrównanie tekstu: wyrównanie w poziomie i pionie

 

ustawienia pojedynczych komórek

 

Możesz nawet scalić komórki (za pomocą przycisku Shift) i podzielić scalone komórki za pomocą Zaawansowany stół blok.

10) Zaawansowany blok akordeonu

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

 

blok akordeonu

 

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

  • Ustawienia akordeonu:

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

    • Początkowe zwinięte: Domyślnie wszystkie akordeony 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 granicy

    • Styl obramowania: pełne, 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świetlić więcej treści na mniejszym obszarze. Aby wstawić, kliknij  Karta Zaawansowane przycisk w kategorii Advanced Gutenberg .

 

blok kart

 

Następnie możesz dostosować opcje zakładki, treści lub ramki 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 tabulatorów

 

  • Kolory nadwozia

    • Kolor tła

    • Kolor tekstu

  • Ustawienia granicy

    • Styl: brak, lity, przerywany lub w kropki

    • Kolor

    • Szerokość granicy, promień

 

tab-ustawienia 1

 

Możesz bardzo łatwo udostępniaj swoje linki społecznościowe, korzystając z 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ć własną ikonę

  • Ustawiony kolor ikony

  • Ustawienia ikon

    • Rozmiar ikony, spacja

 

ustawienia linków społecznościowych

 

13) Blokowanie 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 przycisk  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 Advanced Gutenberg demo Advanced Gutenberg.

W prawym 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 polecany obraz

  • Wyświetl autora postu

  • Wyświetl datę postu

  • Wyświetl link Czytaj więcej

  • Przeczytaj więcej tekstu

  • Wyświetl fragment wiadomości

  • Tekst pierwszego 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 dla Produkty Woo blok: widoki Normalny i Slajd mogą wyświetlać produkty WooCommerce na blogu WordPress . Możesz wstawić ten blok, klikając  Produkty Woo przycisk w kategorii Advanced Gutenberg .

 

woo-block

 

Możesz zobaczyć, jak bloki będą wyświetlane w interfejsie na obrazku powyżej lub w naszym Advanced Gutenberg 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 zdjęć jako slajd, kliknij, aby Suwak zdjęć przycisk w kategorii Advanced Gutenberg .

 

suwak nowego obrazu

 

Następnie naciskając Dodaj obrazy przycisk, aby wybrać obrazy 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

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

  • Pełna szerokość

  • Auto wysokość

  • Zawsze pokazuj nakładkę

Ustawienia kolorów

  • Kolor aktywacji

  • Kolor tytułu

  • Kolor tekstu

 

ustawienia-slajdów-1

 

Wyrównanie tekstu

  • Wyrównanie w pionie

    • Top

    • Centrum

    • Dolny

  • Wyrównanie w poziomie

    • Lewo

    • Centrum

    • Dobrze

ustawienia-slajdów-2

 

16) Blok formularza kontaktowego

Za pomocą tego bloku możesz otrzymywać powiadomienia e-mail o kontaktach z klientami. 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 ustawieniach włączysz opcję reCAPTCHA.

  • Nadawca e-maila: Możesz zmienić w Ustawieniach. Wiadomość e-mail zostanie wysłana na adres administratora (domyślnie) za każdym razem, gdy zostanie przesłany formularz kontaktowy.

  • Etykieta tekstowa:

    • Nazwa zastępcza wprowadzania nazwy

    • Symbol zastępczy wprowadzania adresu e-mail

    • Symbol zastępczy wprowadzania wiadomości

    • Prześlij tekst

    • Tekst ostrzeżenia o pustym polu

    • Prześlij tekst sukcesu

 

ustawienia kontaktów 1

 

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

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

  • Ustawienia przycisku Prześlij:

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

    • Promień obramowania przycisku

    • Pozycja przycisku: Lewy, środkowy i prawy

ustawienia kontaktów 2

 

17) Blok biuletynu

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

 

biuletyn

 

Możesz edytować ustawienia Newslettera na prawym panelu.

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

  • Ustawienia formularza:

    • Styl formularza: domyślny / alternatywny

    • Szerokość formularza (px)

  • Etykieta tekstowa:

    • Symbol zastępczy wprowadzania adresu e-mail

    • Prześlij tekst

    • Tekst ostrzeżenia o pustym polu

    • Prześlij tekst sukcesu

 

ustawienia biuletynu 1

 

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

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

  • Ustawienia przycisku Prześlij:

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

    • Promień obramowania przycisku

 

ustawienia biuletynu 2

 

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 dla 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 Advanced Image, a prawy akapit, Advanced List.

 

blok menedżera kolumn

 

A w prawym panelu możesz dostosować ustawienia bloku Menedżera kolumny.

  • Ustawienia responsywne

    • Styl dla każdego typu urządzenia: komputer stacjonarny, tablet, telefon komórkowy

    • Odstęp między kolumnami

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

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

 

ustawienia-kolumny-1

 

 

  • Ustawienia wiersza

    • Zawinięte kolumny: jeśli kolumny są przepełnione, zostaną rozdzielone do nowej linii (np .: użyj tego z odstępami między kolumnami).

    • Tag opakowania: Div, Nagłówek, Główny, ...

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

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

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

 

ustawienia-kolumny-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 Logowanie 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

    • Symbol zastępczy wprowadzania adresu e-mail

  • Kolor tekstu / wprowadzania

    • Wprowadź kolor tła

    • Wprowadź kolor

    • Kolor tekstu

  • Ustawienia granicy

    • Kolor ramki

    • Styl granicy

    • Szerokość granicy

 

wejściowe ustawienia symboli zastępczych

 

  • Ustawienia przycisku Prześlij

    • Obramowanie i tekst

    • tło

    • Promień obramowania 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: domyślny i klasyczny

  • Stan paska wyszukiwania

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

    • Szerokość

  • Szukaj Ikona 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