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

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

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

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

К счастью, плагин WordPress « WPBakery Page Builder Ранее известный как " Визуальный Композитор » предоставляет решение этой проблемы. С последним даже большинство начинающие блогеры могут создавать страницы с совершенно уникальным внешним видом для своего веб-сайта.

С помощью этого плагина вы можете создать:

  • Привлекательные целевые страницы (целевая страница)
  • Со страниц продаж на профессиональный вид
  • Сайты-витрины для вашего бизнеса
  • модули страниц для вашего обучения
  • короткое время

На мой взгляд, это лучший инструмент форматирования (или верстки) в Интернете. Специально для пользователей WordPress.

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

Так что ...

Как установить и настроить Плагин WPBakery Page Builder

WPBakery Page Builder является плагин премию, которую вы можете купить Codecanyon : Лучшая платформа продаж на интернет-плагинов.

ЛАДНО. После того, как вы приобрели и загрузили этот плагин макета в WordPress, все, что вам нужно сделать, это установить его и активировать.

Тогда мы начнем с внесения некоторых основных корректировок. Для этого перейдите в локацию «Настройки >> Визуальный Композитор » на приборной панели.

Общие настройки

общие настройки визуального композитораПервая вкладка (общие настройки), Позволяет изменить:

  • Содержание, на котором визуальный составление будет доступно. Вы можете проверить элементы (после) и / или страницы (страница)
  • Различные правиладоступ разные роли. С помощью этой опции вы можете определить что изменения, что. Будут отображены различные доступные роли. Вам нужно будет нажать на каждый из них, чтобы проверить элементы, к которым он (роль) будет иметь доступ. У вас есть возможность запретить использование " визуальный композитор »пользователям с определенной ролью.
    активировать редактор в конструкторе страниц WPbakery
  • Включить или отключить элементы отзывчивый
  • Определить подмножества для шрифтов Google

подбор ролей wpbakeryВарианты конструкции

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

Настройки CSS

Эти параметры позволят вам определить цвет, который применяется ко всем элементам. 

  • " Пользовательский CSS »Дает вам возможность дополнительно настраивать каждый элемент, только разработчики могут знать, что это такое.
  • Вкладка « лицензия на продукт »Позволяет активировать плагин получать автоматические обновления.
  • Вкладка « шорткоды активы По сути о разработчиках.

Хорошо, теперь мы собираемся создать собственную веб-страницу с визуальный композитор.

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

Чтобы легко создавать персонализированные веб-страницы, у вас есть выбор между редактором " бэк-офис ", Это означает, что вы изменяете сайт со своей панели управления WordPress, где" фронт-офис .

редактор заместитель переднего конца заместитель редактора бэкенд

Если вы используете Gutenberg, вы заметите кнопку «Редактор страницы» на верхней панели задач.

редактор визуального композитора приборной панели редактор гутенберг

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

С редактором бэк-офиса

Чтобы получить доступ к редактору " бэк-офис », Приглашаю вас нажать на« Издатель BACK-OFFICE . Вы можете вернуться к визуальному редактору WordPress в любое время, нажав " Классический режим ». Но я думаю, что в этом нет необходимости, поэтому форматирование веб-страницы этого плагина завершено.

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

Обновления страница варьируются в зависимости от того, что вы планируете делать со страницей. Таким образом, вы можете выбрать « посадка страница » для создания домашней страницы, "Список услуг" для страницы, которая показывает услуги, и так далее. С опытом вы даже сможете делать ставки en страниц индивидуальный дизайн очень про.

Какой бы ни был ваш выбор страница, представление элементов похоже на все последние. Вы можете добавить новый élément нажав "+" на самой вершине цель коробка « Визуальный редактор », Или добавьте модель, нажав на значок «Шаблон».

В каждой строке вы можете (слева направо) :

  • Переместить линию
  • Управление столбцами в строке
  • Добавить новый столбец

интерфейс компоновщика страниц wpbakeryДругие параметры доступны справа от поля. Эти параметры позволяют (слева направо) Кому:

  • уменьшить линию
  • редактировать строку
  • продублировать строку
  • удалить строку

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

Параметры раздела wpbackeryПараметры раздела wpbackery

Рекомендуемые ресурсы

Вот некоторые расширения визуального композитора, которые мы настоятельно рекомендуем:

1 - Как управлять столбцами

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

Конечно, в 11 доступны разные шаблоны столбцов, но вы можете создать столько, сколько захотите, нажав на ссылку "Custom" чуть ниже списка столбцов.

Например, чтобы отобразить раздел страницы со столбцами 2 с одинаковой шириной, необходимо выбрать (Или добавить) "1 / 2 + 1 / 2". 

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

макет wpbakery раздела

Различные элементы можно перемещать в любые столбцы.

перемещение WordPress текстовое поле wpbakeryНаведя указатель мыши на каждый элемент, вы сможете получить доступ к его параметрам, в частности к кнопке, которая позволяет:

  • движение элемент
  • изменение элемент
  • дублировать элемент
  • Supprimer элемент

Параметры-The-элементы

2 - Как добавить элементы

У вас есть возможность настроить каждый столбец с элементами, предложенными " визуальный Композитор . Чтобы добавить предмет, нажмите на кнопку "+" на определенный столбец или на кнопку "+" Главное меню плагин.

добавить элемент wpbakery
Когда столбец пуст (ne содержит нет содержания)у нее есть кнопка "+" внутри.
 Например, чтобы добавить видео, нажмите эту кнопку и выберите элемент видео.

добавить-а-видео

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

wpbakery видео тюнингВаше видео будет доступно в редакторе бэк-офиса. Сохраните изменения еще раз. Теперь вы можете просмотреть его, просто нажав "превью".

добавить видео wpbakery wordpressПроцесс добавления элемента одинаков для всех остальных, за некоторыми исключениями. Заполняемая информация может варьироваться в зависимости от элементов. 

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

настройки текстового блокаСамое интересное с этим плагин, что вы сможете создать боковые панели если ваша тема не работает, например. Для этого нажмите кнопку добавления (" + »), и выберите элемент " Комментарии WP недавний "," Facebook  такое как И наконец « Wp Категории .

Теперь создайте этот пользовательский шаблон столбца 1 / 3 + 2 / 3 »Или любой другой и добавьте элемент боковая панель в левом столбце или в правом столбце. Это не имеет значения, потому что все зависит от того, какой ширины вы хотите придать боковую панель, созданную с помощью этого расширения макета, чем в Visual Composer.

конфигурация столбцов wpbakery

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

3 - Как сохранить и повторно использовать шаблон страницы

Есть возможность сохранить шаблон вашей страницы и использовать его в дальнейшем. Мне нравится этот вариант, потому что он позволяет сэкономить часы, пытаясь скопировать шаблон со страницы. Здесь все делается в один клик. Да, вы не ослышались, В ОДИН ЩЕЛЧОК… или в два 🙂

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

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

зарегистрировать модель wpbakery

Таким же образом вы найдете различные модели, которые вы сохранили, далее в том же окне в разделе «Загрузить модель».

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

С редактором фронт-офиса

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

Вы можете переключаться с одного варианта на другой в любое время (Управление бэк-офис или край).

Редактор фронт-офиса не так уж отличается от редактора бэк-офиса тем, что здесь есть панель. utilisateur идентичны, но все параметры редактора бэк-офиса такие же, как и в редакторе фронт-офиса.

Панель инструментов wpbakeryОднако было добавлено пять новых кнопок, в том числе:

  • Активация или деактивация гидов
  • Эмулятор, который позволяет увидеть, как ваш блог будет выглядеть на разных устройствах.
  • Кнопку назад в бэк-офис
  • Кнопка сохранения изменений
  • Кнопка выхода визуальный композитор

Варианты wpbakeryКаждый элемент страницы может быть изменен, вы сможете увидеть доступные параметры, наведя курсор на каждый элемент. Форма кнопки "ИГРАТЬ", позволит вам отобразить больше параметров для элемента.

Параметры-The-элементы-оф-фронт-офиса

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

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

Я надеюсь, что это руководство полностью на французском языке поможет вам сделать первые шаги с плагин « Визуальный Композитор . Если у вас есть проблема, мы (или помощь) будем рады вам помочь. Не забудьте: красивый веб-страница преобразует более любопытные клиент.

Рекомендуемые расширения

Вот некоторые расширения визуального композитора, которые мы настоятельно рекомендуем:

Узнайте больше плагинов на Codecanyon

Установить ссылку на эту обучающую программу с тем, кто нуждается.