Dokumentacja Advanced Gutenberg

I. INSTALACJA ADVANCED GUTENBERG

1.1 Zainstaluj

Aby zainstalować naszą wtyczkę, powinieneś użyć standardowego instalatora WordPressa lub rozpakować i umieścić wszystko w folderze w / wp-content / plugin.

 

install-wp-media-folder


Następnie kliknij aktywuj wtyczkę, aby zobaczyć menu Advanced Gutenberg w lewym menu WordPressa.

Advanced Gutenberg jest dostępny z menu Gutenberga. Masz również parametry w menu „Ustawienia”.

1.2 Zaktualizuj wtyczkę

Aby zaktualizować Advanced Gutenberg, możesz użyć strona głównayślnego aktualizatora WordPressa. Możesz także usunąć i zainstalować nową wersję z pobranego pliku .zip www.joomunited.com. W każdym razie nie stracisz żadnej zawartości, ponieważ wszystko jest przechowywane w bazie danych.

 

update-gutenberg

 

Pamiętaj, aby zawsze mieć najnowszą wersję, aby uniknąć problemów z bezpieczeństwem i stabilnością.

II. WSPÓLNE FUNKCJE

2.1. Lista zablokowanych

Korzystając z naszej wtyczki, możesz utworzyć kilka profili i wybrać bloki w Lista bloków będzie dostępny dla każdego profilu.

Aby skonfigurować własny profil, możesz użyć „Uznanie profilu” karta w „Advanced Gutenberg” menu. Wybierz jeden z profili, a zobaczysz konfigurację profilu.

 

profile użytkownika-edytora

 

Możesz włączyć / wyłączyć bloki w Gutenberg, klikając je. Po zakończeniu naciśnij przycisk Aktualizuj listę, aby zaktualizować nowe ikony bloków.

 

Lista zablokowanych

 

blocks-list-2

 

Po zapisaniu bloki będą dostępne w edytorze.

 

używany blok

 

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:

  • Link do przycisku: link URL, otwórz w nowej karcie (przycisk przełączania).
  • Kolor tekstu: Rozmiar czcionki
    • Ustawienia kolorów: Kolor tekstu i kolor tła.

 

advanced-button-settings1

 

  • Granica: promień, styl, kolor i szerokość.

 

zaawansowana krawędź przycisku

 

  • 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) i prędkość przejścia.

 

zaawansowane zawijanie przycisku

 

Blok listy zaawansowanej

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 listy
    • Kolor ikony
    • Rozmiar ikony
    • Wysokość linii
    • Margines
    • Wyściółka

 

zaawansowane ustawienia listy

 

Blok podsumowujący

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

 

Blok licznika (zliczanie)

 

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

 

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
  • Rozmiar obrazu: czy obraz powinien być wyświetlany z pełną szerokością, czy z niestandardową wysokością i szerokością
  • 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 (w lewo, w środku, w prawo)

 

zaawansowane ustawienia obrazu

 

Blok referencyjny

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

 

Na koniec w prawym panelu możesz dostosować ustawienia opinii.

  • Widok suwaka: przycisk przełączania
  • 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

 

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
  • Style map: srebrny, retro, noc ... i możesz dodać swój własny styl.

 

ustawienia mapy

 

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

 

Zaawansowany blok tabeli

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 tabeli
    • 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.

Blok akordeonowy

Możesz utworzyć Akordeon kiedy musisz wyświetlić więcej treści na mniejszym obszarze, klikając Akordeon przycisk w kategorii Advanced Gutenberg.

 

blok akordeonowy

 

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

  • Ustawienia akordeonu:
    • Odstępy dolne: Zdefiniuj przestrzeń do następnego bloku. To zastąpi opcję odstępów między blokami (tylko widok Frontend)
  • Ustawienia nagłówka
    • Styl ikony nagłówka
    • Ustawienia kolorów: Kolor tła, kolor tekstu i kolor ikony

 

nagłówek akordeonu

 

  • Ustawienia koloru ciała
    • Kolor tła
    • Kolor tekstu
  • Ustawienia obramowania
    • Styl obramowania: stałe, przerywane lub kropkowane
    • Ustawienia kolorów
    • Szerokość granicy
    • Promień graniczny
  • Stan akordeonów: Włącz to ustawienie, aby zwinąć wszystkie akordeony.

 

ustawienia akordeonu

 

Blok karty

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

 

blok kart

 

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

  • 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: stałe, przerywane lub kropkowane
    • Kolor
    • Szerokość
    • Promień

 

tab-settings1

 

Blok linków społecznościowych

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
    • Miejsce na ikonę

 

ustawienia powiązań społecznych

 

Blokuj ostatnie posty

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

 

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

 

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
    • Żaden
    • Otwórz obraz w lightbox
    • 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

 

Formularz kontaktowy

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

 

Blok newslettera

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

 

Menedżer 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
    • Wyściółka
    • Margines

 

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,%)
    • Maksymalna wysokość treści (px, vw, vh)

 

column-settings-2

 

2.2. Konfiguracja

Aby użyć funkcji lightbox i caption dla obrazów, musisz włączyć Otwórz galerie w lightbox i Tytuł Zdjęcia opcje odpowiednio w Karta Konfiguracja Advanced Gutenberg w ustawieniach.

 

ustawienia adv-gutenberg

 

  • Otwórz galerie w lightbox: Otwórz obrazy galerii jako popup stylu lightbox
  • Tytuł Zdjęcia: Wczytaj atrybut obrazów (alt) jako podpis dla obrazów lightbox
  • Usuń autop: Usuń autoport funkcji WordPress, używany do zapobiegania dodawaniu niechcianego akapitu w niektórych blokach
  • Klucz API Google: ten klucz API jest wymagany do korzystania z bloku mapy

Ustawienia bloków

  • Włącz odstępy bloków: Automatycznie zastosuj minimalne odstępy między blokami pionowymi - strona głównayślnie jest to brak, a wartości powinny być podane w pikselach
  • Blokuje kolor ikony: Ustaw kolor ikon bloków na admin, dotyczy tylko bloków Advanced Gutenberg
  • Szerokość edytora: Zdefiniuj rozmiar edytora administratora Gutenberga
  • strona głównayślna miniatura: Ustaw strona głównayślną miniaturę postu, która będzie używana w blokach Ostatnie wpisy
  • Włącz wizualny przewodnik po kolumnach: Włącz obramowanie, aby zmaterializować Adv. Blok kolumny Gutenberga

Możesz również znaleźć Adv. Ustawienia Gutenberga w prawym górnym rogu edytora, obok Ustawienia Ikona.

 

ustawienia editor-adv-gutenberg

 

2.3 Konfiguracja strona głównayślnych bloków

 

Aby dostosować bloki w Advanced Gutenberg, możesz przejść do menu Advanced Gutenberg> Konfiguracja> Zakładka strona głównayślne bloki Konfiguracja.

 

default-blocks-config

 

Dla każdego bloku możesz edytować jego ustawienia strona głównayślne, klikając sąsiedni Ustawienia Ikona.

 

bloki-edycja

 

2.4 E-mail i formularz

Ustawienia poczty e-mail

Możesz ustawić informacje o nadawcy i odbiorcy Formularz kontaktowy blok:

 

Ustawienia poczty e-mail

 

Formularz ReCaptcha

Po pierwsze, powinieneś zarejestrować reCaptcha na swojej stronie tutaj, a następnie kliknij Konsola administracyjna przycisk, aby wprowadzić informacje.

Następnie wypełnij stronę reCAPTCHA i dokonaj reCAPTCHA Secret Key. Pamiętaj, aby włączyć opcję reCAPTCHA. Możesz również wybrać język i motyw dla reCAPTCHA.

 

forma-recaptcha

 

Tworzy dane

Z tego miejsca możesz pobrać Formularz kontaktowy i Formularz newslettera dane. Możesz wyeksportować plik .CSV lub .JSON.

 

tworzyć dane

 

2.5 Niestandardowe style

The Advanced Gutenberg konfiguracja umożliwia również definiowanie własnych fragmentów kodu CSS, które mogą być używane w opcjach edytora i znaczników HTML. Aby użyć niestandardowych stylów, przejdź do Niestandardowe style Strona z Advanced Gutenberglewe menu.

Aby utworzyć nowy styl, kliknij „Dodaj nową klasę” przycisk na dole listy stylów. Możesz edytować swój CSS bezpośrednio w polu Custom CSS.

 

custom-styles-gutenberg

 

Wszystkie wprowadzone zmiany zostaną wyświetlone w lewej części strony. Zostaną zastosowane do ciągu za pomocą „Przykładowego tekstu”. Tekst powyżej i poniżej napisu pokazuje, jak twoje style będą wyglądać wśród pozostałych elementów.
Po edycji własnego stylu zapisz go za pomocą „Zapisz style” przycisk.
Aby zastosować styl do elementu w edytorze, należy wybrać element i wybrać styl z listy rozwijanej o nazwie „Style niestandardowe”. Aby przywrócić strona głównayślny styl i usunąć wszystkie niestandardowe style, wybierz "Ustęp" opcja.

 

blok stylu niestandardowego css