Advanced Gutenberg Документация

I. ADVANCED GUTENBERG УСТАНОВИТЬ

1.1 Установить

Чтобы установить наш плагин, вы должны использовать стандартный установщик WordPress или разархивировать и поместить все в папку в / wp-content / plugin.

 

установить-WP-медиа-папки


Затем нажмите на активировать плагин, чтобы увидеть меню Advanced Gutenberg появиться в левом меню WordPress.

Advanced Gutenberg доступен из меню Гутенберга. У вас также есть параметры в меню «Настройки».

1.2 Обновите плагин

Чтобы обновить Advanced Gutenberg, вы можете использовать средство обновления по умолчанию для WordPress. Вы также можете удалить и установить новую версию из ZIP-файла, загруженного с www.joomunited.com, В любом случае вы не потеряете контент, потому что все хранится в базе данных.

 

обновление Гутенберга

 

Обязательно всегда используйте последнюю версию, чтобы избежать проблем с безопасностью и стабильностью.

II. ОБЩИЕ ФУНКЦИИ

2.1. Черный список

Используя наш плагин, вы можете создать несколько профилей и выбрать, какие блоки в Список блоков будет доступен для каждого профиля.

Чтобы настроить свой собственный профиль, вы можете использовать «Атрибуция профиля» вкладка в «Advanced Gutenberg» меню. Выберите один из профилей, и вы увидите конфигурацию профиля.

 

пользователь-редактор профилей

 

Вы можете включить / отключить блоки в Гутенберге, нажав на них. Когда вы закончите, нажмите кнопку Обновить список, чтобы обновить новые значки блоков.

 

блок-лист

 

blocks-list-2

 

После сохранения блоки будут доступны в вашем редакторе.

 

Блок-используется

 

Расширенный блок кнопок

Вы можете создать Расширенная кнопка нажав на кнопку в разделе Advanced Gutenberg.

 

передовая кнопка

 

На правой панели вы можете настроить некоторые параметры для кнопки:

  • Ссылка на кнопку: URL ссылки, открыть в новой вкладке (кнопка переключения).
  • Цвет текста: Размер текста
    • Настройки цвета: Цвет текста и цвет фона.

 

advanced-button-settings1

 

  • Граница: радиус, стиль, цвет и ширина.

 

передовые кнопки границы

 

  • Обивка: сверху, справа, снизу и слева.

 

Продвинутые пуговицы обивка

 

  • Hover:
    • Настройки цвета: Цвет фона, Цвет текста и Цвет тени.
    • Тень (H (горизонтальное) смещение, V (вертикальное) смещение, размытие, распространение) и скорость перехода.

 

передовые кнопки при наведении курсора

 

Блок расширенного списка

Вы можете создать Расширенный список нажав на кнопку в категории Advanced Gutenberg.

 

Продвинутый список

 

После ввода содержимого вы можете настроить параметры на правой панели:

  • Настройки текста
    • Размер текста
  • Настройки значка
    • Значок списка
    • Цвет значка
    • Размер значка
    • Высота линии
    • Поле
    • набивка

 

Продвинутый список-параметры

 

Сводный блок

Вы можете создать Резюме заблокировать, нажав его кнопку в категории Advanced Gutenberg после установки хотя бы одного тега заголовка в записи или на странице. Сводка может быть выровнена по левому краю, по центру или справа. Чтобы обновить его, используйте кнопку «Обновить сводку».

 

Резюме Гутенберга-контент

 

На правой панели есть несколько параметров, которые вы можете настроить:

  • Минимизирована нагрузка: показать / скрыть сводку по умолчанию
  • Заголовок сводного заголовка: текст заголовка резюме, который отображается, когда Нагрузка сведена к минимуму опция включена
  • Цвет якоря: выберите цвет для Резюме

 

суммарная-настройка

 

Счетчик (обратный отсчет) блок

 

Вы можете создать Посчитать блок, возможно, с символом, нажав на его кнопку в категории Advanced Gutenberg.

 

Посчитать

 

Затем с правой панели вы можете настроить некоторые параметры для счетчика:

  • Настройки цвета: Цвет заголовка, цвет Count Up и цвет описания
  • Колонки: 1-3
  • Размер счетчика установить размер чисел
  • Счетчик вверх символ: добавить символ до или после счетчика
  • Кнопка-переключатель: установить положение символа (On означает, что символ следует за цифрами)

 

кол-вверх-настройки

 

Расширенный блок изображений

null Расширенное изображение Блок может быть использован для создания изображения. Чтобы добавить один, нажмите на Расширенное изображение кнопку в категории Advanced Gutenberg, а затем выберите изображение для вставки.

 

Продвинутая изображение кнопки

 

Далее вы можете изменить заголовок изображения и его субтитры. Вы можете настроить параметры изображения на правой панели.

  • Действие по клику: либо откройте изображение в лайтбоксе, либо откройте пользовательский URL
  • URL ссылки: Открыть ссылку в новой вкладке (кнопка переключения)
  • Открыть ссылку в новой вкладке
  • Размер изображения: должно ли изображение отображаться с полной шириной или с произвольной высотой и шириной
  • Настройки цвета: Цвет заголовка, цвет субтитров, цвет оверлея
  • Выравнивание текста: вертикальное выравнивание (сверху, по центру, снизу), горизонтальное выравнивание (слева, по центру, справа)

 

Продвинутые изображения-настройка

 

Отзыв блок

Вы можете вставить отзыв в свой контент, нажав на свидетельство кнопка в категории Advanced Gutenberg. Затем вы можете изменить аватар, имя, должность и описание отзыва.

 

свидетельство кнопки

 

Наконец, в правой панели вы можете отрегулировать настройки для Рекомендации.

  • Слайдер вид: Кнопка-переключатель
  • Колонки: Диапазон столбцов в обычном представлении составляет 1-3, а в режиме слайдера - 4-10.
  • Аватар: Размер аватара, цвет фона и настройки границ, включая цвет, радиус и ширину
  • Цвета текста:
    • Название Цвет
    • Цвет позиции
    • Описание Цвет

 

Благодарственное-настройки

 

Блок карты

Для того, чтобы использовать карта блок, вам нужно добавить ключ API Google в конфигурации. После этого вы должны следовать этому ссылка на сайт, нажмите на Включить API и сервисы Нажмите кнопку, затем найдите и включите API геолокации, API JavaScript Карт.

После добавления вы можете создать карту, нажав на карта кнопка в категории Advanced Gutenberg.

 

Карта-блок

 

На правой панели вы можете вставить местоположение, введя широту и долготу, или введя адрес, а затем нажав кнопку «Выбрать местоположение».

Некоторые дополнительные опции для карты доступны:

  • Уровень масштабирования
  • Рост
  • Значок маркера
  • Название маркера
  • Описание маркера
  • Стили карты: серебро, ретро, ​​ночь, ... и вы также можете добавить свой собственный стиль.

 

карта-настройка

 

Расширенный видео блок

Вы можете создать видео к сообщению, нажав на Расширенное видео кнопка в разделе Advanced Gutenberg. Затем вы можете вставить URL с Youtube или Vimeo или использовать любое локальное видео с вашего сервера. Вы можете изменить изображение предварительного просмотра, нажав на кнопку «Редактировать» в верхнем левом углу.

 

Продвинутая видео

 

Далее вы можете настроить параметры видео на правой панели.

  • Открыть видео в лайтбоксе: лайтбокс предлагает дополнительные опции отображения
  • Полная ширина: если он выключен, вам нужно установить ширину для видео
  • Высота видео
  • Настройки цвета: Наложение цвета и цвет кнопки воспроизведения
  • Кнопка воспроизведения: Стиль иконок, размер кнопки воспроизведения

 

Продвинутые видео-настройка

 

Расширенный блок таблиц

Вы можете создать таблицу, нажав Расширенный стол кнопка в категории Advanced Gutenberg.

 

расширенный стол кнопки

 

Вы можете редактировать таблицу после установки номера столбца и строки.

 

расширенный стол

 

После этого вы можете вводить текст или настраивать строки и столбцы в самом редакторе непосредственно над блоком таблицы. Дополнительные параметры могут быть изменены в правой панели.

  • Стили
    • По умолчанию
    • полосы

 

стиль стол

 

  • Настройки таблицы
    • Максимальная ширина: Установите это в 0, чтобы сделать максимальную ширину эквивалентной 100%
    • Ячейки таблицы фиксированной ширины
    • Заголовок таблицы
    • Нижний колонтитул
    • Граница рухнула

 

advanced-table-settings1

 

  • Настройки ячейки
    • Настройки цвета: Цвет фона, Цвет текста
    • Граница: стиль границы, цвет и ширина
    • Обивка: верхний, нижний, левый и правый отступы
    • Выравнивание текста: горизонтальное и вертикальное выравнивание

 

одиночная-клетка-настройка

 

Вы даже можете объединить ячейки (используя кнопку Shift) и разделить объединенные ячейки с помощью Расширенный стол блок.

Аккордеонный Блок

Вы можете создать аккордеон когда вам нужно отобразить больше контента в меньшей области, нажав на аккордеон кнопка в категории Advanced Gutenberg.

 

гармошки блок

 

После создания вы можете настроить параметры заголовка, тела или границы с правой панели.

  • Настройки Аккордеона:
    • Нижний интервал: Определите место для следующего блока. Это переопределит опцию «Заблокировать интервал» (только внешний вид)
  • Настройки заголовка
    • Стиль Иконки Заголовка
    • Настройки цвета: Цвет фона, цвет текста и цвет значка

 

аккордеон заголовка

 

  • Настройки цвета кузова
    • Фоновый цвет
    • Цвет текста
  • Настройки границы
    • Стиль границы: сплошная, пунктирная или пунктирная
    • Настройки цвета
    • Ширина рамки
    • Радиус границы
  • Состояние Аккордеонов: Включите эти настройки, чтобы свернуть все аккордеоны.

 

гармошка-настройка

 

Блок вкладок

Точно так же вы можете создать табуляция блокировать, когда вам нужно отобразить больше контента в меньшей области. Чтобы вставить один, нажмите табуляция кнопка в категории Advanced Gutenberg.

 

Вкладка-блок

 

Затем вы можете настроить параметры вкладки, тела или границы на правой панели.

  • Цвета вкладок
    • Фоновый цвет
    • Цвет текста
    • Цвет фона активной вкладки
    • Цвет текста активной вкладки

 

Таб-настройка

 

  • Цвета тела
    • Фоновый цвет
    • Цвет текста
  • Настройки границы
    • Стиль: сплошная, пунктирная или пунктирная
    • цвет
    • ширина
    • Радиус

 

tab-settings1

 

Блок социальных ссылок

Вы можете поделиться своими социальными ссылками очень легко с помощью Социальные ссылки блок, который можно создать, нажав на его кнопку в категории Advanced Gutenberg.

 

социал- ссылки

 

Вы можете использовать готовый значок или загрузить свой собственный значок, а также настроить другие параметры на правой панели.

  • Предустановленные значки: Вы можете загрузить свой собственный значок
  • Цвет значка предустановки
  • Настройки иконок
    • Размер значка
    • Иконка космос

 

социал- ссылка-настройка

 

Блок последних сообщений

Для отображения последних сообщений доступны 3 макета: таблицы, список и слайдер. Вы можете создать любой из этих видов, нажав на Недавние Посты кнопка в категории Advanced Gutenberg.

 

последние косяки-блок

 

Вы можете увидеть, как блоки будут отображаться в интерфейсе на изображении выше или в нашем Advanced Gutenberg Демо.

На правой панели вы можете настроить параметры каждого макета:

  • Сортировать по

Сортировать по

  • категория
  • Количество предметов
  • Колонны (только для таблицы)
  • Показывать избранные изображения
  • Показать сообщение Автор
  • Показать дату публикации
  • Показать Подробнее Ссылка
  • Читать больше текста
  • Показать пост выдержки
  • Текст первого поста как отрывок: отображать некоторую часть первого текста, найденного в посте, как отрывок.

 

последние косяки-настройка

 

Ву Продукты Блок

Есть 2 макета для Ву Продукты блок: представления «Обычный» и «Слайд» могут отображать продукты WooCommerce в вашем блоге WordPress. Вы можете вставить этот блок, нажав Ву Продукты кнопка в категории Advanced Gutenberg.

 

Woo-блок

 

Вы можете увидеть, как блоки будут отображаться в интерфейсе на изображении выше или в нашем Advanced Gutenberg Демо

На правой панели вы можете настроить параметры каждого макета:

  • Настройки продуктов
    • Статус продукта
    • категория
  • Настройки макета
    • Колонны
    • Количество продуктов
    • порядок

 

Woo-настройка

 

Блок слайдера изображений

Если вы хотите отобразить несколько изображений в виде слайда, нажмите Слайдер изображений кнопка в категории Advanced Gutenberg.

 

новый образ-слайдер

 

Затем нажав Добавить изображения Кнопка, чтобы выбрать ваши изображения, показанные на слайде. После этого вы можете ввести текст Название и текст описание для каждого изображения.

 

изображение-слайдер

 

Вы можете редактировать настройки слайдера на правой панели.

Настройки изображения

  • Действие по клику
    • Никто
    • Открыть изображение в лайтбоксе
    • Открыть пользовательскую ссылку
  • Полная ширина
  • Авто высота
  • Всегда показывать оверлей

Настройки цвета

  • Цвет наведения
  • Цвет заголовка
  • Цвет текста

slide-settings-1

 

Выравнивание текста

  • Вертикальное выравнивание
    • верхний
    • Центр
    • Низ
  • Горизонтальное выравнивание
    • Оставил
    • Центр
    • Правильно

slide-settings-2

 

Форма обратной связи

С помощью этого блока вы можете получить уведомление о контакте по электронной почте. Вы можете создать эту форму, нажав на Форма обратной связи кнопка в категории Advanced Gutenberg.

 

Форма обратной связи

 

Вы можете редактировать настройки Форма обратной связи на правой панели.

  • Обратите внимание: Он не появится, если вы включите опцию reCAPTCHA в настройках.
  • Отправитель электронной почты: Вы можете изменить в настройках. Электронная почта будет отправлена ​​администратору электронной почты (по умолчанию) при отправке контактной формы.
  • Текстовая метка:
    • Имя ввода заполнителя
    • Электронный заполнитель
    • Заполнитель сообщения ввода
    • Отправить текст
    • Пустое поле с текстом предупреждения
    • Отправить текст успеха

 

contact-settings1

 

  • Цвет ввода: Цвет фона и цвет текста
  • Настройки границы: Цвет границы, стиль границы и радиус границы
  • Настройки кнопки «Отправить»:
    • Настройки цвета: Граница и текст, фон
    • Радиус границы кнопки
    • Положение кнопки: Слева, в центре и справа

contact-settings2

 

Блок рассылки

Чтобы получить электронную почту клиента, вы можете создать блок электронной почты, нажав на Новостная рассылка кнопка в категории Advanced Gutenberg.

 

Новостная рассылка

 

Вы можете редактировать настройки новостной рассылки на правой панели.

  • Обратите внимание: Он не появится, если вы включите опцию reCAPTCHA в настройках.
  • Настройки формы:
    • Стиль формы: по умолчанию / альтернатива
    • Ширина формы (px)
  • Текстовая метка:
    • Электронный заполнитель
    • Отправить текст
    • Пустое поле с текстом предупреждения
    • Отправить текст успеха

 

newsletter-settings1

 

  • Цвет ввода: Цвет фона и цвет текста
  • Настройки границы: Цвет границы, стиль границы и радиус границы
  • Настройки кнопки «Отправить»:
    • Настройки цвета: Граница и текст, фон
    • Радиус границы кнопки

 

newsletter-settings2

 

Диспетчер столбцов

Если вы хотите создать блок, содержащий другие блоки внутри, вы должны выбрать Диспетчер столбцов в категории Advanced Gutenberg. Стиль нового блока появится при создании нового.

 

добавить колонки-менеджер-блок

 

Затем вы можете добавить любые типы блоков, которые вы хотите в каждом столбце. Здесь блок диспетчера столбцов включает в себя 2 столбца: левый - Advanced Image, а правый - Paragraph, Advanced List.

 

колонка-менеджер-блок

 

А на правой панели вы можете отрегулировать настройки блока Column Manager.

  • Отзывчивые настройки
    • Стиль для каждого типа устройства: рабочий стол, планшет, мобильный
    • Пространство между колоннами
    • набивка
    • Поле

 

column-settings-1

 

 

  • Настройки строки
    • Свернутые столбцы: если ваши столбцы переполнены, они будут разделены новой строкой (например: Используйте это с интервалом столбцов).
    • Wrapper Tag: Div, Header, Main, ...
    • Максимальная ширина содержимого (px vw,%)
    • Максимальная высота содержимого (px, vw, vh)

 

column-settings-2

 

2.2. конфигурация

Чтобы использовать лайтбокс и функцию подписи для изображений, вам необходимо включить Открытые галереи в лайтбоксе а также Подпись к изображению варианты соответственно в Вкладка Конфигурация Advanced Gutenberg в настройках.

 

ADV-Gutenberg-настройка

 

  • Открытые галереи в лайтбоксе: Открыть галерею изображений как всплывающее окно в стиле лайтбокса
  • Подпись к изображению: Загрузить изображения (alt) атрибут в качестве заголовка для изображений лайтбокса
  • Удалить Autop: Удалите функцию WordPress autop, используемую для предотвращения добавления нежелательного абзаца в некоторые блоки
  • Ключ API Google: этот ключ API необходим для использования блока карты

Настройки блоков

  • Включить интервал между блоками: Применять минимальный интервал вертикальных блоков автоматически - по умолчанию установлено значение none, а значения должны быть указаны в пикселях
  • Цвет значка блока: Установить цвет для значков блоков в админке, применимо только к блокам Advanced Gutenberg
  • Ширина редактора: Определить размер ширины редактора администратора Гутенберга
  • Миниатюра по умолчанию: Установить миниатюру сообщений по умолчанию для использования в блоках «Последние сообщения»
  • Включить визуальное руководство по столбцам: Включить границу для материализации Adv. Колонный блок Гутенберга

Вы также можете найти Adv. Настройки Гутенберга в правом верхнем углу вашего редактора, рядом с настройки значок.

 

редактор А-Gutenberg-настройка

 

2.3 Конфигурация блоков по умолчанию

 

Чтобы настроить блоки в Advanced Gutenberg, вы можете перейти в меню Advanced Gutenberg> Конфигурация> вкладка Конфигурация блоков по умолчанию.

 

по умолчанию-блоки-конфигурации

 

Для каждого блока вы можете изменить его настройки по умолчанию, щелкнув настройки значок.

 

блоки, редактировать

 

2.4 Электронная почта и форма

Настройки электронной почты

Вы можете установить информацию об отправителе и получателе Форма обратной связи блок:

 

электронная почта-настройка

 

Форма ReCaptcha

Во-первых, вы должны зарегистрировать reCaptcha на вашем сайте Вотзатем нажмите на Консоль администратора кнопка для ввода информации.

После этого заполните сайт reCAPTCHA и секретный ключ reCAPTCHA. Не забудьте включить опцию reCAPTCHA. Вы также можете выбрать язык и тему для reCAPTCHA.

 

Форма-Recaptcha

 

Данные форм

Отсюда вы можете скачать Форма обратной связи а также Форма информационного бюллетеня данные. Вы можете экспортировать файл .CSV или .JSON.

 

Форма-данные

 

2.5 Пользовательские стили

null Advanced Gutenberg Конфигурация также позволяет вам определять пользовательские фрагменты CSS, которые можно использовать в вашем редакторе, и параметры тегов HTML. Чтобы использовать пользовательские стили, перейдите к Пользовательские Стили страница из Advanced Gutenbergлевое меню.

Чтобы создать новый стиль, нажмите на «Добавить новый класс» Кнопка внизу списка стилей. Вы можете редактировать свой CSS прямо в поле Custom CSS.

 

пользовательские стили-Гутенберг

 

Все сделанные вами изменения будут отображены в левой части страницы. Они будут применены к строке с «Примером текста». Текст выше и ниже строки показывает, как ваши стили будут выглядеть среди остальных элементов.
После редактирования собственного стиля сохраните его, используя «Сохранить стили» кнопка.
Чтобы применить стиль к элементу в редакторе, вы должны выбрать элемент и выбрать стиль из выпадающего списка с именем «Пользовательские стили», Чтобы вернуться к стилю по умолчанию и удалить все пользовательские стили, выберите "Параграф" вариант.

 

заказ CSS-стиль-блок