Использование Visual Composer Website Builder для создания сайтов WordPress

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

Даже если у вас есть навыки программирования, переход к коду каждый раз, когда вам нужно решить проблему (добавить новый элемент пользовательского интерфейса или изменить параметры стиля для существующего), может быть утомительным. Слишком часто мы слышим: «Нам нужно больше работать, чтобы достичь наших целей». Хотя усердно работать, безусловно, важно, мы также должны работать умнее.

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

В этой статье я рассмотрю Visual Composer Website Builder и создам реальный пример — целевую страницу для цифрового продукта — просто с помощью этого инструмента.

Что такое конструктор сайтов Visual Composer?

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

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

Визуальный композитор и WPBakery

Visual Composer Website Builder — это конструктор от создателей WPBakery Page Builder. Если у вас была возможность использовать конструктор страниц WPBakery раньше, вы могли бы задаться вопросом, в чем разница между двумя плагинами. Давайте проясним эти два продукта:

Между ними есть несколько существенных различий:

• Основное различие между конструктором страниц WPBakery и Visual Composer заключается в том, что WPBakery предназначен только для контентной части, а с конструктором веб-сайтов Visual Composer вы можете создать полный веб-сайт (включая верхние и нижние колонтитулы).
• Visual Composer не основан на шорткоде, что помогает генерировать чистый код. Кроме того, отключение плагина не оставит вас в «аду шорткодов» (ситуация, когда шорткоды не могут отображаться без активированного плагина).

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

Теперь Visual Composer Website Builder не является «расширенной» версией WPBakery. Это совершенно новый продукт, созданный для удовлетворения растущих потребностей веб-профессионалов. Visual Composer — это не просто плагин; это мощная платформа, которую можно расширять по мере развития потребностей пользователей.

Краткий список возможностей Visual Composer

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

• Это редактор с предварительным просмотром в реальном времени с функциями перетаскивания и сотнями готовых к использованию элементов контента, которые дают большую свободу дизайна. Вы можете мгновенно вносить изменения и видеть конечные результаты перед публикацией.
• Два способа редактирования страницы — с помощью внешнего редактора и просмотра в виде дерева . Представление в виде дерева позволяет перемещаться по элементам, доступным на странице, и значительно упрощает процесс проектирования.
• Готовые к использованию шаблоны WordPress для всех типов страниц — от целевых страниц и портфолио до бизнес-сайтов с выделенными страницами продуктов, потому что редактировать существующий шаблон намного проще, чем начинать с нуля с пустой страницы.
• Visual Composer работает с любой темой (т.е. можно интегрировать Visual Composer Website Builder в ваши существующие темы)
• Отзывчивый дизайн из коробки. Все элементы и шаблоны адаптивны и адаптированы для мобильных устройств. Вы можете настроить скорость отклика для каждого независимого столбца.
• Редактор хедера, футера и боковой панели. Обычно заголовок, нижний колонтитул и боковая панель определяются используемой вами темой. Когда веб-специалистам нужно изменить их, они обычно переходят к коду. Но с Visual Composer вы можете быстро и легко изменить макет, используя только визуальный редактор. Эта функция доступна в Премиум-версии продукта.
• Впечатляющая коллекция надстроек (есть возможность получить надстройки из Хаба или получить их от сторонних разработчиков)

Есть также три функции, которые выделяют Visual Composer из толпы. Они здесь:

1. Концентратор визуального композитора

Visual Composer Hub — это облако, в котором хранятся все элементы, доступные пользователям. Это в основном похоже на систему дизайна, которая постоянно обновляется и где вы можете получить новые элементы, шаблоны, элементы, блоки (скоро).

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

2. Новый технический стек

Конструктор веб-сайтов Visual Composer построен на новом стеке технологий — он работает на ReactJS и не использует шорткоды WordPress. Это помогает добиться лучшей производительности — команда Visual Composer провела серию внутренних тестов и показала, что страницы, созданные с помощью Visual Composer, загружаются на 1-1,5 секунды быстрее, чем те же макеты, воссозданные с помощью WPBakery.

3. API

Конструктор веб-сайтов Visual Composer имеет хорошо документированный открытый API. Если у вас есть навыки кодирования, вы можете расширить Visual Composer своими собственными пользовательскими элементами, которые могут быть полезны для некоторых пользовательских проектов.

Как создать целевую страницу с помощью Visual Composer

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

Наше путешествие начинается в интерфейсе WP, где нам нужно создать новую страницу — дать ей название и нажать кнопку «Редактировать с помощью Visual Composer».

Создание макета целевой страницы

Процесс создания страницы начинается с создания соответствующего макета. Обычно создание макета целевой страницы занимает много времени и сил. Дизайнеры должны попробовать множество различных подходов, прежде чем найти тот, который лучше всего подходит для контента. Но Visual Composer упрощает задачу для дизайнеров — он предоставляет список готовых к использованию макетов (доступен в опции « Добавить шаблон »). Итак, все, что вам нужно сделать, чтобы создать новую страницу, — это найти подходящий макет из списка доступных вариантов и посмотреть, как он работает для вашего контента.

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

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

Совет : Обратите внимание, что Visual Composer использует рамки разного цвета для единиц пользовательского интерфейса. Когда мы выбираем строку, мы видим рамку синего цвета, когда мы выбираем столбец, мы видим рамку оранжевого цвета. Эта функция может быть чрезвычайно полезной, когда вы работаете над созданием сложных макетов.

Отличительной особенностью Visual Composer является то, что мы можем настраивать все свойства макета — добавлять/удалять элементы или изменять их параметры стиля (такие как поля, отступы между элементами). Например, нам не нужно углубляться в код, чтобы изменить размеры столбцов; мы можем просто перетаскивать границы отдельных элементов.

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

Нажав на значок «Перо», мы активируем экран с индивидуальными свойствами стиля для элемента.

Растянуть содержимое

Visual Composer позволяет сделать макет как коробочным, так и растянутым. Если вы установите переключатель «Растягивать содержимое» в положение «Вкл.», ваш макет будет иметь полную ширину.

Изменение заголовка страницы

Visual Composer позволяет пользователям изменять заголовок страницы. Это можно сделать в настройках макета. Назовем нашу страницу следующим названием: « CalmTech: лучший цифровой помощник».

Добавление верхнего меню

Теперь пришло время добавить верхнее меню на нашу целевую страницу. Предположим, у нас есть следующее меню в WP:

И мы хотим разместить его в верхней части нашей недавно созданной целевой страницы. Для этого нам нужно перейти в Visual Composer -> Заголовки (поскольку верхняя часть страницы является местом по умолчанию для навигации) и создать новый заголовок.

Как только мы нажмем кнопку «Добавить заголовок», мы увидим экран, который попросит нас указать заголовок для страницы — давайте назовем его «Верхний заголовок». Это техническое имя, которое поможет нам идентифицировать этот объект.

Затем Visual Composer направит нас в Hub, где мы сможем добавить все необходимые элементы пользовательского интерфейса в наш заголовок. Поскольку мы хотим иметь меню, мы вводим «меню» в поле поиска. Hub предоставляет нам два варианта: основное меню и сэндвич-меню. В нашем случае мы будем использовать * Основное меню *, потому что у нас есть ограниченное количество вариантов навигации верхнего уровня, и мы хотим, чтобы все они были видны все время (скрытая навигация, такая как сэндвич-меню, может быть плохой для обнаружения).

Наконец, нам нужно выбрать источник меню (в нашем случае это будет Главное меню, то, что у нас есть в WP) и изменить внешний вид параметров навигации.

Давайте изменим выравнивание меню (сдвинем его вправо).

И это все. Теперь мы можем использовать настройки страницы шапки. Давайте изменим нашу домашнюю страницу, чтобы включить заголовок. Наведите указатель мыши на элемент *Please select Your Header*, и вы увидите кнопку Добавить заголовок .

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

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

Делаем верхнее меню липким

Основополагающий принцип хорошей навигации гласит, что меню навигации должно быть доступно для пользователей все время. Но, к сожалению, на многих веб-сайтах верхнее меню навигации скрывается при прокрутке. Такое поведение заставляет пользователей прокручивать страницу вверх, чтобы перейти на другую страницу. Это вводит ненужные затраты на взаимодействие. К счастью, есть простое решение этой проблемы — мы можем сделать верхнее меню липким. Прилепленное меню остается видимым все время, независимо от того, где находится пользователь на странице.

Чтобы включить прилипание, нам нужно включить переключатель Sticky для нашего заголовка (для всего контейнера Menu) и добавить отступ в 50 пикселей в поле Margin top .

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

Сопряжение изображения с текстом

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

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

Далее нам нужно добавить текстовый раздел слева от изображения. В западном мире пользователи просматривают страницу слева направо, поэтому посетители читают текстовое описание и сопоставляют его с изображением. Visual Composer использует объект Text Block для хранения текстовой информации. Давайте заменим текст, поставляемый с темой, нашим собственным текстом «CalmTech Прорывной динамик, который адаптируется к своему местоположению». Давайте также изменим цвет текста, чтобы сделать текст более соответствующим теме (белый для заголовка и оттенок серого для подзаголовка).

Создание группы элементов

У нас есть изображение товара и текстовое описание, но не хватает одного элемента. Как вы, наверное, догадались, это призыв к действию (CTA). Хорошие дизайнеры создают не просто отдельные страницы, а целостный путь пользователя. Таким образом, чтобы создать приятное путешествие пользователя, важно направлять пользователей на этом пути. В то время, когда посетители читают необходимую информацию, жизненно важно предоставить им следующий логический шаг, и CTA является как раз подходящим элементом для этой роли.

В нашем случае нам понадобятся два CTA — «Купить сейчас» и «Узнать больше». Основная кнопка призыва к действию «Купить сейчас» должна стоять на первом месте и быть более привлекательной (мы ожидаем, что пользователи будут нажимать на нее). Таким образом, нам нужно сделать его более контрастным, а кнопка «Подробнее» должна быть полой.

Visual Composer упрощает настройку общих параметров элемента пользовательского интерфейса (например, пробела), а также отдельных параметров стиля. Поскольку мы заинтересованы в изменении отдельных свойств, нам нужно нажать «Изменить» для определенной кнопки.

Игра с анимацией для передачи динамики и рассказывания историй

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

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

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

Окончательная полировка

Давайте посмотрим, как наша страница выглядит для посетителей нашего сайта. Очевидно, что у него есть две проблемы:

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

Давайте решим первую задачу. Перейдите в раздел «Заголовки» и выберите наш верхний заголовок. Нажмите на элемент «+» и выберите объект Single Image . Загрузите новое изображение (значок). Обратите внимание, что мы можем изменить размер изображения прямо в Visual Composer. Сделаем размер нашей иконки 50px x 50px (в разделе Size ).

Теперь пришло время решить вторую проблему. Выберите первый столбец и отрегулируйте размер текста (установите размер 40 для подзаголовка). Вот как будет выглядеть наша страница после изменений.

Заключение

Visual Composer Website Builder упрощает процесс создания страниц в WordPress. Процесс веб-дизайна становится не только быстрым и легким, но и более увлекательным, потому что у дизайнеров гораздо больше творческой свободы для выражения своих идей. А когда веб-профессионалы имеют больше творческой свободы, они могут придумывать лучшие дизайнерские решения.