TechBlogSD - Все для WordPress и WEB разработки
WEB и WordPress инструкции, новости, обзоры тем и плагинов

Visual Composer: руководство по созданию страницы с перетаскиванием

77

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

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

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

Что такое Visual Composer

Visual Composer – фантастический плагин, разработанный WP Bakery, который добавляет конструктор страниц перетаскивания в вашу тему WordPress. Мы добавили его в нашу тему Total Multipurpose WordPress, но вы также можете увидеть его почти в каждом новом бестселлере на Themeforest. Он дает вам инструменты, необходимые для создания сложных макетов страниц без необходимости касаться единственной строчки кода.

[iframe src=”https://www.youtube.com/embed/mMBaQiG9Er4″]

Как работает Visual Composer и что он может делать

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

Visual Composer: руководство по созданию страницы с перетаскиванием

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

Рядов

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

Visual Composer: руководство по созданию страницы с перетаскиванием

Элементы страницы


Visual Composer: руководство по созданию страницы с перетаскиванием

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

Кроме того, в зависимости от темы WordPress и совместимых плагинов, которые вы используете с Visual Composer, вы увидите больше или меньше элементов страницы. Приведенный выше пример взят из нашей темы WordPress Total Drag & Drop, поэтому есть дополнительные 30 элементов компоновщика страниц, которые мы создали и стилизовали исключительно для Total. Сюда входят настраиваемые разделители, поля значков, вехи, карусели и многое другое.

Щелкните любой элемент, чтобы открыть параметры этого элемента. Ниже приведен пример «параметров» для нашего модуля Icon Box в теме Total. Как видите, каждый модуль может иметь множество настроек и даже несколько вкладок настроек.

Visual Composer: руководство по созданию страницы с перетаскиванием

Конструктор также поддерживает четыре замечательных сторонних плагина: Layer Slider, Revolution Slider, Gravity Forms и Contact Form 7. Если у вас установлен какой-либо из этих плагинов, для темы автоматически появится элемент страницы. Когда вы выбираете вставку элемента страницы для одного из этих плагинов, Visual Composer отображает раскрывающийся список соответствующих ползунков / форм, которые вы создали, или отображает поле ввода, чтобы вы могли добавить свой идентификатор слайдера. Больше никакого копирования и вставки шорткодов!

Перетаскивания


Visual Composer: руководство по созданию страницы с перетаскиванием

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

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

Параметры строки: форматирование, клонирование и удаление строк

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

Visual Composer: руководство по созданию страницы с перетаскиванием

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

Редактор внешнего интерфейса

Мощный Visual Composer теперь включает в себя редактор внешнего интерфейса, который упрощает, как никогда, создание собственных страниц и макетов. Единственное предостережение в том, что не все темы пока поддерживают интерфейсный редактор. Не забудьте дважды проверить список функций темы или связаться с разработчиком темы напрямую, чтобы узнать, совместим ли интерфейсный редактор Visual Composer с вашей темой WordPress. Наша тема Total WordPress на 100% совместима с интерфейсным редактором, поэтому, если ваша текущая тема не подходит, вы можете рассмотреть возможность «обновления» до нашей темы.

Расширения

Последняя особенность, которую я хотел бы коснуться, – это расширяемость Visual Composer. Если вы опытный программист или разработчик тем, вы можете интегрировать свои собственные шорткоды в плагин. Фактически, мы добавили в наш собственный Symple Shortcodes Premium, чтобы дать пользователям Total дополнительные элементы построения страниц. Это дает пользователям еще больше возможностей при создании страниц!

Если вы не программист, загляните в CodeCanyon и выполните быстрый поиск надстройки Visual Composer. Существует множество отличных плагинов премиум-класса, которые добавляют дополнительные функции в Visual Composer, и даже несколько хороших бесплатных, таких как наш плагин Symple Shortcodes.

Параметры настроек Visual Composer

Я продолжаю называть Visual Composer конструктором страниц, но он также отлично работает с сообщениями и пользовательскими типами сообщений. Все, что вам нужно сделать, это включить эту опцию. Перейдите в Настройки> Visual Composer. Вы должны увидеть экран, подобный этому:

Visual Composer: руководство по созданию страницы с перетаскиванием

Плагин автоматически отображает различные типы контента, включенные в вашу тему WordPress. Просто выберите, что вы хотите использовать с конструктором страниц Visual Composer. Пример выше взят из нашей темы Total, поэтому добавлены параметры для портфолио, персонала и отзывов (все настраиваемые типы сообщений), а также форумов, тем, ответов и продуктов (связанных с плагинами bbPress и WooCommerce, поддерживаемыми Total). .

Вы также можете сопоставить любые плагины коротких кодов с Visual Composer, который вы уже установили на своем сайте WordPress. На странице настроек щелкните вкладку «Мои шорткоды» вверху и нажмите кнопку «Сопоставить шорткоды». Это должно добавить ваши сторонние шорткоды к вашим элементам композитора. Легко!

Посмотреть в действии

Как я уже сказал, нам так нравится Visual Composer, что мы встроили его в нашу самую продаваемую тему Total WordPress (которая входит в комплект бесплатно при покупке). Взгляните на различные страницы любой из наших демонстрационных версий Total Theme. Большинство страниц, которые вы увидите в наших живых демонстрациях, были созданы с помощью Visual Composer! Добавление фона, заголовков, текста, изображений, значков… и т.д. Это все «кусок пирога».

Visual Composer: руководство по созданию страницы с перетаскиванием

Полное руководство по использованию Visual Composer

Если у вас уже есть плагин и вы ищете руководство по его использованию, ознакомьтесь с нашим полным руководством по использованию Visual Composer, которое шаг за шагом проведет вас и покажет, как использовать плагин.

Где это достать

Visual Composer доступен на CodeCanyon, если вы хотите получить его самостоятельно. Он также полностью интегрирован с нашей премиальной темой WordPress Theme Total (вместе с двумя другими премиальными плагинами общей стоимостью 67 долларов – это больше, чем вы платите за тему!).

Получить Итого Получить Visual Composer

Сообщите нам, что вы думаете о плагине ниже. Мы действительно впечатлены Visual Composer, и мы хотели бы услышать ваше мнение о нем!

Источник записи: https://www.wpexplorer.com

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