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

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

К счастью, WordPress Visual Composer plugin упростил эту проблему. С помощью этого изумительного плагина построения страниц, пользователь, который обладает лишь базовыми знаниями WordPress, может модифицировать тему и создавать абсолютно уникальный вид своего сайта. Для экспертов WordPress — это главное средство сохранения времени и инструмент, с помощью которого можно модифицировать страницы всего за несколько минут. В целом, этот плагин стал таким большим успехом, что его начали включать во многие последние темы WordPress.

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

Главные особенности

Visual Composer разработан парнями из WP Bakery. Это платный плагин, который не находится в открытом доступе в каталоге плагинов WordPress. Вы можете скачать его только с CodeCanyon.

Он был скачан более чем 70 000 пользователями и кажеться только более и более набирает популярности! Visual Composer имеет несколько полезнейших преимуществ, которые создают невероятно приятное впечатление от построения страниц в WordPress. Вот их быстрый обзор.

Frontend и Backend построение страниц

Наиболее мощное преимущество Visual Composer — это возможности простого drag and drop конструктора страниц, который может быть использован для стандартного редактирования страницы/поста WordPress или напрямую с frontend.

Универсальная совместимость с темами

Visual Composer не создан для конкретных тем. Это значит, что вы можете использовать его с любыми темами WordPress без необходимости вносить изменения в имеющийся код.

Легко настраиваемый макет

«Drag and drop» элементы Visual Composer имеют стандартный макет и тему по умолчанию. Тем не менее, вы можете изменить их в соответствии с цветовой гаммой и интерфейсом вашего сайта.

Более 40 готовых к использованию элементов дизайна

«Drag and drop» интерфейс Visual Composer имеет более чем 40 готовых к использованию drag and drop элементов, которые могут быть использованы для создания уникальных макетов для ваших сайтов всего за минуты.

100% адаптивные элементы

Элементы дизайна и страниц, созданные с помощью Visual Composer, полностью адаптивны и готовы для использования на мобильных устройствах.

Легок в программировании

Visual Composer состоит из множества «drag & drop» элементов. И если вы хотите добавить их ещё, ви можете легко это осуществить благодаря легкости в программировании элементов.

Установка и настройка плагина

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

Шаг 1

Процесс установки такой же, как и для других плагинов WordPress. После активации плагин появится в опции Settings, в левом меню основной панели WordPress.

Шаг 2

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

Шаг 3

Вы можете включить Visual Composer для страниц и постов вместе, или по-отдельности. Вы также можете установить определенные права доступа для отдельных типов пользователей. Для каждого типа пользователя вы можете выбрать: или отображать и Visual Composer в области редактирования записей, и стандартный редактор WordPress, или отображать только Visual Composer. Вы также можете включить или отключить отдельные элементы Visual Composer для различных пользователей.

Шаг 4

На вкладке Design Options вы можете изменить внешний вид элементов Visual Composer в соответствии с темой вашего сайта. Вкладка Custom CSS позволяет вам менять CSS без изменения любого другого файла, в то время как вкладка Product License позволяет вам интегрировать ваш аккаунт Envato для включения поддержки и автоматических обновлений. На вкладке My Shortcodes вы можете добавить любой дополнительно разработанный шорткод к уже существующему списку шорткодов в Visual Composer.

Теперь перейдем к фактическому использованию плагина!

Использование VC на страницах и записях

Как я упомянул выше, вы можете включить Visual Composer для записей и страниц: вместе или по-отдельности. После активации плагина вы увидите панель Visual Editor вверху вашего стандартного текстового редактора WordPress.

Две панельки над текстовым редактором — это Backend Editor и Frontend Editor. Благодаря этим настройкам использование плагина -просто радость. Здесь вы можете создать абсолютно любую структуру сайта, какую только захотите. Начнем с «backend» редактора.

Backend Editor

Шаг 1

Когда вы нажимаете на кнопку Backend editor, область вашего текстового редактора превратится в «drag and drop» окно, куда вы сможете добавлять элементы, просто выбрав их из списка. Но сначала вам нужно добавить ряд. С этого момента, единственное ограничение вашего дизайна — ваше воображение.

Шаг 2

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

Элементы разделены по категориям: Content, Social, Site Structure, New Elements и WordPress Widgets, но вы также можете посмотреть их все вместе. Щелкните на выбранный вами вариант и перетащите его в окошко контента. Ваша страница в основном делится на несколько различных рядов. Вы можете продолжить добавлять новые ряды с новыми элементами.

Шаг 3

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

Шаг 4

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

Шаг 5

Visual Composer также позволяет вам добавлять пользовательский CSS для отдельных страниц или записей. Он будет воздействовать только на эти отдельные страницы и записи.

Visual Composer также поддерживает несколько знаменитых плагинов WordPress таких как, Contact Form 7Layer SliderRevolution Slider and Gravity Forms. Если какой-либо из этих плагинов уже установлен у вас, он будет автоматически добавлен в окошко Add element. Когда из списка элементов вы выберете любой из них, он будет непосредственно вставлен в вашу страницу без необходимости добавлять какой-либо шорткод. Backend editor дает вам столько гибкости и настроек, что вы можете создавать любой дизайн, даже если вы всего лишь аматор.

Frontend Editor

Frontend editor позволяет вам перетаскивать элементы страницы в режиме ее реального просмотра. Так намного легче увидеть, как непосредственно влияют сделанные вами изменения, при этом пользуясь настройками backend editor.

Шаг 1

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

Шаг 2

Вы также можете добавлять ряды и столбцы с помощью знака + в содержимом страницы.

Шаг 3

Все элементы Visual Composer полностью адаптивны и могут работать на мобильных устройствах. У вас есть возможность просмотра в реальном режиме на различных устройствах в frontend editor с помощью нижних иконок.

Шаг 4

Несмотря на все эти преимущества и широкий спектр элементов, Visual Composer позволяет вам добавлять ваши собственные шорткоды, а также разрабатывать дизайн элементов. Вы можете сами создавать элементы или импортировать их с любого другого сервиса.

Заключение

WordPress всегда был гибкой платформой, способной с помощью плагинов поддерживать разные функции. Но с помощью Visual Composer page builder plugin дизайн WordPress, который когда-то был доступен только опытным пользователям, теперь может быть редактируемым в очень короткие сроки.

Лично для меня, Visual Composer существенно сократил время, которое я тратил на дизайн сайта заказчика и редактирование задач: от нескольких часов до нескольких минут. С ростом популярности этого плагина я вижу все больше и больше пользователей WordPress, полагающихся на него в эти дни.

Источник: code.tutsplus.com