Вы здесь: Блог > Как создать Landing Page в конструкторе Gridbox

Как создать Landing Page в конструкторе Gridbox

210
Как создать Landing Page в конструкторе Gridbox
Рейтинг: 5, голосов - 2

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

Это платный конструктор, но Вам не нужно платить каждый месяц, стоит заплатить один раз и спокойно пользоваться, не думая об оплате. Вы можете попробовать использование бесплатной версии, но в таком случае не получите никаких дополнительных преимуществ, поэтому лучше приобрести один из платных пакетов Lite или PRO. Ознакомиться с ценами Вы можете на официальном сайте balbooa.com.

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

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

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

  1. Создаем страницу в Gridbox

Переходим в Панель управления — Компоненты — Gridbox

Теперь создаем новую страницу. Для этого в правом нижнем углу нажимаем на красную кнопку:

В открывшейся странице, нам нужно написать название и указать тему шаблона нашего сайта и нажимаем кнопку “Next”.

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

Выбираем количество нужных нам колонок.

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

  1. Добавляем фоновую картинку

Для этого нам нужно:

  • нажать на боковой шестеренке и выбрать редактирование.

  • перейти во вкладку BACKGROUND, выбрать тип Image и загрузить картинку.


(Чтобы добавить заливку цветом, нужно сделать те же шаги, что и для добавления картинки, только в Type выбрать не Image, а Color и Ваш фон готов.)

  • после того как загрузили, нажимаем галочку и смотрим результат.

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

  • перейти в редактирование блока, вкладка GENERAL
  • поставить галочку  напротив FULL WIDTH

  1. Добавляем лого. В данном лендинге их два, поэтому нужно добавить две колонки:
  • наводим на шестеренку и нажимаем “добавить поле”

  • теперь в окошке нужно выбрать две колонки.

  • чтобы добавить лого, нажимаем на редактирование элемента.

  • в списке плагинов выбираем IMAGE.

  • добавляем лого и смотрим, как выглядит теперь.

После добавления лого, картинка стала заметно шире. Это нам и нужно.

  1. Заголовок и подзаголовок лендинга:
  • Выбираем на шестеренке добавить новый элемент, нам нужна одна колонка.
  • Теперь нужно нажать на редактирование самого элемента.

  •  выбираем из списка плагинов нужный Вам. В данном случае TEXT.

В результате, вышел вот такой первый экран лендинга.

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

6. Обводка блоков

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

  • навести на элемент и нажать редактирование.

  • перейти во вкладку LAYOUT и добавить BORDER.

Можете добавлять только нижнюю границу или верхнюю, делать обводку толще или тоньше, скруглять ее, делать сплошной или пунктирной.

  1. Оформление текста

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

Так же помните, что нужно расставлять акценты в самом тексте.

Это может быть выделение:

  • цветом
  • курсивом
  • размером шрифта

8. Блок цен

Чтобы создать такой блок можно воспользоваться уже готовыми вариантами блоков. Нажимаем сюда:

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

Здесь есть готовые оформления:

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

Сейчас нам нужен блок цен, выбираем Pricing и подбираем тот вариант, который нам подходит.  

9. Блок с видео

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

Чтобы добавить видео нужно:

  • создать новый блок
  • в редактировании блока зайти в плагины
  • выбрать CUSTOM HTML

  • вставить в редактор HTML и сохранить

  1.  Редактирование мобильной версии

В новой версии Gridbox очень удобно реализована функция редактирования мобильной версии сайта.

Для этого Вам нужно:

  • Перейти во вкладку Phone и поправить блоки таким образом, чтобы все красиво отображалось.

 

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

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

comments powered by HyperComments
Top