Как использовать конструктор страниц SiteOrigin с WordPress

Как и другие конструкторы страниц WordPress, SiteOrigin здесь, чтобы помочь вам создать мощный и отзывчивый веб-сайт с некоторыми знаниями CSS и нулевым кодированием. С их стороны есть несколько тем, которые вы можете использовать (как бесплатные, так и премиальные), а также бесплатные плагины и плагины для создания страниц Pro.

Я протестировал Pro-версию SiteOrigin и создал целевую страницу. Он поставляется с функцией перетаскивания и работает с любой темой, и вы можете использовать все виджеты Free, Pro и WordPress одновременно. Давайте прочитаем эту статью, чтобы узнать больше об установке и настройке SiteOrigin с помощью WordPress.

Почему стоит выбрать конструктор страниц SiteOrigin?

Создание сайта начинается с панели инструментов редактора WordPress, с которой мы все знакомы, как Classic, так и Gutenberg. Он генерирует небольшой объем выходного кода, и он не раздувается, но каждая строка выходного кода максимально оптимизирована для одностраничного конструктора.

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

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

Особенности конструктора страниц SiteOrigin

Бесплатная версия SiteOrigin поставляется с довольно ограниченными опциями «виджетов», но с версией Pro у вас есть множество полезных дополнительных виджетов, с помощью которых можно легко создать свой сайт.

Конструктор пользовательских типов сообщений

Одна из самых популярных и полезных функций SiteOrigin - это Custom Post Type Builder с многоразовыми макетами Page Builder и шаблонами WooCommerce. Он немного отличается от других инструментов, и я дам более подробное объяснение того, как его использовать.

Чтобы создать собственный шаблон пост-типа в SiteOrigin, необходимо выполнить важные шаги.

Шаг 1

Вам нужно будет добавить новый настраиваемый тип сообщения, построить макет типа сообщения с помощью Page Builder и выбрать параметры отображения типа сообщения.

На панели инструментов WordPress перейдите в Инструменты → Типы сообщений и нажмите кнопку «Добавить новую», например, назовите ее «Портфолио». Теперь щелкните вкладку «Построитель страниц» рядом с вкладками «Текст» и «Визуализация», используйте кнопки «Добавить виджет» и «Добавить строку» в конструкторе страниц, чтобы создать собственный макет типа публикации в своем портфолио.

Обратите внимание, что любой контент, который вы добавляете в шаблон, будет отображаться в каждой публикации портфолио, опубликованной в будущем. Так что это очень полезно, если вы хотите отображать определенный блок контента на каждой из этих страниц, например, призыв к действию, подписку на нашу рассылку новостей, обо мне, отзывы и т. Д.

Шаг 2

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

После того, как вы создали портфолио Custom Post Type, вы сможете увидеть элемент Portfolio на левой боковой панели вашей панели инструментов WordPress. Щелкните по нему, а затем щелкните по Добавить новый.

Когда вы назовете свой элемент портфолио, вы сможете добавлять в него контент. Помните, что вы можете редактировать только те виджеты, которые не являются частью глобального шаблона, и эти виджеты будут отмечены текстом «Прочтите мне». И последнее, но не менее важное: как добавить эти сообщения в карусель сообщений или в виджет цикла сообщений.

Виджет цикла сообщений

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

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

На последнем шаге щелкните свой настраиваемый тип сообщения в раскрывающемся списке Тип сообщения в верхней части виджета построителя запросов.

Если вы хотите сделать это в пост-карусели, единственное отличие состоит в выборе виджета пост-карусель вместо пост-цикла, остальная процедура такая же.

Конструктор шаблонов WooCommerce

Шаблоны WooCommerce позволяют создавать красивые страницы для WooCommerce и единый внешний вид продукта. Интерфейс конструктора шаблонов WooCommerce разделен на семь вкладок:

1. Продукт
2. Архив продуктов
3. Магазин
4. Корзина
5. Пустая корзина
6. Проверить
7. Мой аккаунт

Для WooCommerce все фактические отдельные элементы, необходимые для создания единого продукта, распределяются в виде виджета, что позволяет легко создавать продукты. Вы можете создать макет и использовать виджеты WooCommerce, такие как цена, артикул, добавить в корзину, краткое / длинное описание, изображение продукта, заголовок и т. Д.

Существует также один очень полезный виджет для дополнительных продаж продукта, который дает вам свободу использования функциональности WooCommerce Upsell. Однако обратите внимание, что дизайн этих виджетов и страниц WooCommerce определяется CSS вашей темы, и его можно редактировать с помощью CSS.

Другие виджеты распространены, например Карты, Аккордеоны, CTA, Вкладки, Социальные виджеты, Карусели и т. Д.

С подпиской Pro вы получаете не только Pro Page Builder, но и доступ ко всем функциям Pro, темам Premium, CSS и виджетам.

Цены и планы SiteOrigin Page Builder

SiteOrigin предлагает две модели ценообразования. Первый и самый полезный - это годовая подписка, которая состоит из трех пакетов.

• Одноместный для одного сайта по цене 29 $
• Бизнес до 5 сайтов по цене 49 $
• Разработчик для неограниченного количества сайтов по цене 99 $

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

• Одноместный для одного сайта по цене 38 $
• Бизнес до 5 сайтов по цене 64 $
• Разработчик для неограниченного количества сайтов по цене 128 $

Системные / хостинговые требования SiteOrigin

Хотя довольно сложно найти системные требования SiteOrigin. Судя по некоторым форумам поддержки и комментариям в Интернете, кажется, что PHP 7.4 с как минимум 512 МБ памяти PHP сделает свое дело. Однако для тестирования я использовал VultrHF с 2 ГБ памяти PHP.

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

Установите и настройте конструктор страниц SiteOrigin

Когда дело доходит до установки и настройки, SiteOrigin предлагает кое-что интересное, чего нет у большинства конструкторов страниц.

Что касается всего, что есть в WordPress, вы должны установить бесплатный SiteOrigin прямо из репозитория, а затем загрузить версию Pro, загруженную из вашей учетной записи SiteOrigin. После того, как вы закончите установку, следуйте инструкциям и установите / активируйте рекомендуемые плагины.

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

Что замечательно в SiteOrigin, так это то, что вам не нужно активировать ненужные виджеты, и тем самым вы можете сэкономить некоторые ресурсы и использовать только те параметры, которые вам нужны. Синие активны, а серые - неактивные виджеты.

Когда вы закончите, вы можете приступить к созданию своего сайта с помощью конструктора страниц SiteOrigin. Перейдите в Pages → Add New и, нажав на стрелку раскрывающегося списка, вам будет предложено добавить новую страницу с помощью SiteOrigin Page Builder и Block Editor → выберите SiteOrigin Page Builder.

Лично я не самый большой поклонник конструкторов бэкэнд-страниц в эпоху конструкторов интерфейсов. Однако это означает, что он потребляет меньше ресурсов и легче для вашего сервера. Не так уж и голодны, как строители в целом.

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

Когда вы щелкаете страницу редактирования, вы попадете в внутренний редактор, оттуда просто нажмите Live Editor на панели инструментов, и вы попадете в него.

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

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

В верхнем левом углу вы увидите панель инструментов с 4 элементами. Слева направо они делали следующее.

Значок шестеренки откроет доступные виджеты, которые вы можете вставить в созданные вами строки. Вы можете увидеть как виджеты WordPress, так и виджеты SiteOrigin в одном месте. Однако вы также можете выбрать слева, чтобы увидеть только WordPress или только SiteOrigin.

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

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

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

Производительность конструктора страниц SiteOrigin на Cloudways

Как и ожидалось, SiteOrigin работает довольно хорошо, поскольку в нем нет большого количества раздуваемого кода и он довольно прост, что одновременно является преимуществом и недостатком. Стоит отметить, что мы вообще не оптимизировали изображения.

- Результаты SiteOrigin на GTMetrix

- Результаты SiteOrigin на Pingdom Tools

- Результаты SiteOrigin на WebPageTest

Отзывы пользователей о конструкторе страниц SiteOrigin

И то, что всегда нужно проверять перед установкой любого плагина, - это обзоры и рейтинги в репозитории плагинов WordPress.org. На данный момент у SiteOrigin 922 5-звездочных рейтинга, и недавние отзывы просто потрясающие.

Резюме

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

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

Экосистема вокруг SiteOrigin не такая большая, как у некоторых других конструкторов страниц, но мы должны учитывать, что у нее 1 миллион активных установок для бесплатной версии и 900 000 для пакета виджетов, а у некоторых внешних авторов добавлено 30 000+ активные установки.