Плагин Oxygen - визуальный редактор страниц

Когда я наткнулся на него, совершенно случайно, то даже не представлял себе с чем мне придется иметь дело. Разумеется, я решил его протестировать, как всегда из любопытства. Боюсь, друзья, перед нами полноценный конкурент с очень неплохими перспективами старому доброму — Visual Composer — плагин для wordpress. Перед тем, как начинать тестировать плагин, я по не понятной до сих пор самому себе привычке, сначала пытаюсь сделать его перевод, а уже потом начинать тестировать.

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

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

Для начала пример сайта для фрилансера:

После того, как вы установили плагин Oxygen к себе на сайт и активируете его. Перед вами откроется окно следующего вида:

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

Может показаться, что 15 вариантов потенциально готовых сайтов это не очень то и много. Поверьте, это лишь первое впечатление. Они созданы исключительно для того, чтобы упростить жизнь тем, кто только начинает работать с визуальным редактором.

Например, выбираете шаблон «Дантист». Устанавливаете его, меняете текст с английского на русский и перед вами готовый рабочий сайт стоматологической клиники. Ставите свои контактные данные для клиентов и вперед работать.

Плагин Oxygen Builder вид изнутри

В настройках этого плагина существует 4 раздела:

• Home — здесь вы можете добавлять новые страницы или же воспользоваться библиотекой с готовыми вариантами сайтов. Так же представлены ссылки на страницы с информацией о плагине и ссылками на поддержку.
• Templates — в этом разделе есть специальные заготовки, которые разработчик предлагает использовать и их можно изменять с помощью плагина визуальный редактор страниц.
• Export & Import — используется для того, чтобы переносить данные.
• Settings — в этом разделе находятся основные настройки плагина и вот как раз он то и переведен частично. Будет свободное время переведу окончательно.

Останавливаться на настройках долго нет особого смысла, интуитивно в них все понятно. Так что пройдемся по ним для общего понимания. Что куда и зачем.

Здесь уже выставлено все по умолчанию, разве что осталось вставить API ключ Google, но это уже на ваше усмотрение. К примеру, я им не пользуюсь.

На второй вкладке стандартное распределение ролей на сайте. Кому что можно и что нельзя делать.

На третьей вкладке вы выбираете в каких именно типах постах отображать или не отображать настройки Oxygen. Например, он нужен вам только на страницах, но ни как ни в новостях блога. Снимаете или ставите галочку с конкретной позиции.

SVG Sets — раздел которым лично я не пользуюсь, но возможно кого-то и заинтересует возможность масштабируемая векторная графика.

Typekit — работа со шрифтами.

Oxygen License — раздел про лицензию и все такое.

CSS Cache — оставляем галочку на месте и идем дальше.

Bloat Eliminator — на ваше усмотрение, можете оставить все как есть по умолчанию.

Library — вот в этом разделе у меня перевод явно не задался.

Вот, собственно, и все настройки плагина. Больше ни чего настраивать и не нужно.

Так что переходим к визуальной части редактора. Вот в ней то самое интересное. Раздолье для творчества. Я покажу на примере уже установленной демо версии сайта, так чтобы примерно было понятно с чем придется иметь дело. Но скажу честно, даже кинув быстрый взгляд на настройки, я понял, что с этим плагином мы будем дружить.

Плагин Oxygen — визуальный редактор страниц и его визуальная составляющая

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

Сначала разберем верхний правый угол, потом перейдем к левому.

В правом углу находятся:

Структура — здесь находятся все блоки, которые представлены на страницы. И возможность с ними взаимодействовать (кроме подвала). В ней есть 2 кнопки: «Развернуть Все» и «Свернуть все». Если нажать первую, то вы увидите какие блоки и что они содержат находятся на странице. Разумеется, что если перейти на какой-то отдельно взятый блок его можно изменить, так как необходимо.

Управление — в нем находится 3 пункта:

Настройки — здесь представлены общие настройки страницы. Например, увеличение уменьшение её + вы можете менять стили страницы. Кроме того можно менять шрифты и цвета.
Таблица стилей — здесь вы можете добавлять свои стили.
Селекторы — здесь точно так же как и в стилях. Можно добавлять и убирать по необходимости.
Вернуться к WP — это возвращение в панель администратора либо переход на front-and

Сохранить — сохраняем то, во что внесли изменения.

В левом углу находится только одна кнопка — «Добавить»:

Здесь в принципе ни чего особенного нет. Все как и в обычном редакторе. В той же стороне находится возможность редактирования страницы. Точнее её шаблона:

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

Ради эксперимента я добавил картинку с текстовым блоком. В принципе, можно вставлять все что угодно. Единственное отличие, от других редакторов в том, что перетаскивать мышкой не получится. То есть сначала ставите контейнер, потом в него уже закидываете то, что вам нужно.

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

Как я и предполагал, все оказалось предельно просто.

Идем в плагин Oxygen находим в нём Templates — находим в нём шаблон «Main» и отправляемся его править. А там уже все по стандарту:

В принципе больше про этот плагин рассказывать особо не чего. Он отлично подойдет для Landing Page. Думаю, при его использовании стандартный лендос можно сделать часа за 3-4. Тупо используя встроенные шаблоны.

Есть ещё пару моментов, у плагина есть 2 дополнительные фишки:

• WooCommerce
• Gutenberg Block Builder

На этом все. Удачи!