Дарим фонарики за Хостинг и VPS до 31.10.2024

Забрать подарок

Как создать лендинг-пейдж с конструктором SiteJet Builder

post thumbnail

Ранее мы сообщали, что в новых версиях cPanel появилась возможность использовать встроенный бесплатный конструктор сайтов SiteJet Builder. Это топовая фича, о которой стоит узнать больше.

И в этом материале мы решили показать на практике, как пользоваться SiteJet Builder и создать с его помощью простенький лендинг-пейдж.

Как найти SiteJet Builder

Чтобы начать пользоваться этим продуктом, достаточно зайти в Личный кабинет HostPro и нажать кнопку «Редактировать веб-сайт».

SiteJet Builder в личном кабинете | Wiki HostPro

Другой вариант – зайти в панель управления cPanel. SiteJet Builder будет размещен в меню слева.

SiteJet Builder в cPanel | Блог HostPro

Выбор шаблона

Первое, что рекомендует сделать SiteJet Builder, – выбрать шаблон для нашего будущего сайта из более чем 140 вариантов. Для облегчения поисков шаблоны разделены на категории, такие как «Бизнес», «IT & медиа», «Искусство и дизайн», «Блог», «Здоровье», «Событие» и т.д.

Одна из категорий называется «Blank». Это просто чистая страница. Подойдет, если вы хотите самостоятельно собрать страницу с нуля.

Шаблон «Blank» | Wiki HostPro

Также шаблоны различаются по типу сайтов: лендинги, одно- и многостраничные. Мы будем выбирать среди шаблонов для лендинга: «Layout» ⇨ «Landing Page».

Шаблоны в SiteJet Builder | Wiki HostPro

Работа з SiteJet Builder

Что хорошего в SiteJet Builder, так это то, что он позволяет настроить шаблон под себя с помощью функции перетаскивания (drag&drop) и менять абсолютно все, что вы видите перед собой. Наводим курсор на элементы, и сразу понимаем, как они организованы.

Познакомимся с основными действиями на верхней панели конструктора.

Верхнее меню

Здесь расположены кнопки «Undo» и «Redo». Первая отменяет последнее действие, вторая возвращает к тому, что было перед нажатием Undo.

Верхнее меню SiteJet Builder | Wiki HostPro

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

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

Также на верхней панели видим кнопку «Design». Название говорит само за себя, с ее помощью можно менять все элементы дизайна любой части сайта. Что касается кнопки «Pages», то она позволяет увидеть все страницы будущего ресурса. А с помощью «Navigator» можно быстро переключаться между частями одной страницы.

Если вам нужно создать креативный текст для сайта, то в SiteJet Builder есть функция «AI Writer». Дополнительно на верхнем меню расположена кнопка «More», которая откроет настройки, в частности язык. Ну и конечно кнопка «Publish», которая опубликует сайт.

Верхнее меню SiteJet Builder | Wiki HostPro

Логотип

Начнем с изменения логотипа. После двойного клика на месте лого вы увидите такую картину.

Изменение логотипа | Wiki HostPro

Слева вы можете загрузить лого своей компании. Или же, если уже загружали ранее, просто выбрать готовый файл. Мы же воспользуемся одной из фишек SiteJet Builder и найдем логотип для нашей демонстрационной лендинг-страницы из стоковых фото и видео внутри самого конструктора.

Стоковые фото | Wiki HostPro

Еще один из вариантов добавления логотипа – использовать боковое меню. Там в разделе «Elements» нужно выбрать «Logo».

Добавление логотипа | Wiki HostPro

Также в правом верхнем углу можете нажать «More» и выбрать «Website Settings». Это даст вам возможность выполнять различные настройки сайта, в частности логотипа, названия сайта и фавикона на вкладках браузера. Подробнее об иконках для сайтов читайте здесь.

Настройки сайта | Wiki HostPro

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

Изменение логотипа | Wiki HostPro

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

Выбор цветов сайта | Wiki HostPro

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

Промежуточный вид лендинговой страницы | Wiki HostPro

Элементы

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

Добавление элементов на сайт | Wiki HostPro

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

Выбор нужного элемента | Wiki HostPro

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

Перетаскивание нужного элемента | Wiki HostPro

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

Есть также несколько способов перемещения блоков. Щелкните на нужный элемент, а затем нажимайте на клавиши Ctrl + стрелка вверх или Ctrl + стрелка вниз. Еще один вариант – просто взять и перетащить элемент в нужное место. Обращайте внимание на уже знакомую нам зеленую линию, которая покажет, где в результате он окажется.

Вкладка «Стиль»

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

Layout

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

Раздел Layout | Wiki HostPro

Visible

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

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

Раздел Visible | Wiki HostPro

Spacing

Здесь у вас есть возможность указать margin – внешние отступы между блоками, и padding – внутренние отступы от содержимого до края элемента. Чтобы задать свои, а не те, что по умолчанию, выберите опцию «Custom».

Раздел Spacing | Wiki HostPro

Border

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

Раздел Border | Wiki HostPro

Shadow

С помощью затенения можно придать объектам глубины, «поднять», «опустить», или же просто сфокусировать на них внимание.

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

Раздел Shadow | Wiki HostPro

Text Shadow

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

Раздел Text Shadow | Wiki HostPro

Positioning

Существует несколько вариантов расположения вашего элемента:

  • Default. Так как по умолчанию в шаблоне. 
  • Static. Элемент всегда будет отображаться на том месте, куда вы его добавили в редакторе. 
  • Relative. Такие элементы служат «точками привязки» для других элементов, которые фактически находятся внутри них. 
  • Absolute. Элемент будет размещаться относительно вышестоящего элемента, у которого, в свою очередь, должно быть установлено значение «Relative». 
  • Fixed. Такие элементы зависят от окна браузера. Элемент будет отображаться в одной заданной вами позиции, независимо от того, прокручивает ли пользователь сайт вверх или вниз. 
  • Sticky. Если посетитель прокрутит сайт вниз, элемент зафиксируется в верхней части экрана.

Раздел Positioning | Wiki HostPro

Transform

Позволяет изменить внешний вид элемента. Доступны четыре варианта:

  • Move позволяет перемещать элемент, не влияя на другие.
  • Scale изменяет размер элемента в процентах.
  • Rotate поворачивает на нужный вам угол.
  • Skew делает элемент искривленным относительно осей X и Y.

Раздел Transform | Wiki HostPro

ID & Class

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

Раздел ID & Class | Wiki HostPro

Animation

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

Раздел Animation | Wiki HostPro
  • не анимировать
  • показать/скрыть
  • подвинуть вверх/вниз
  • увеличить/уменьшить
  • появление слева направо
  • появление справа налево
  • появление сверху вниз
  • появление снизу вверх
  • пульсация
  • моргание
  • появление как всплывающее окно

Разновидности анимаций | Wiki HostPro

Miscellaneous

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

Раздел Miscellaneous | Wiki HostPro

Формы

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

Добавление формы на сайт | Wiki HostPro

После нажатия на название раздела выберите необходимую вам форму и перетащите ее туда, куда посчитаете нужным.

Форма на сайте | Wiki HostPro

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

Редактирование формы | Wiki HostPro

Иконки

Чтобы добавить иконки на ваш сайт, используйте уже знакомое меню слева. Там в разделе «Elements» найдите «Icon». Как и в других случаях, элемент добавляется на сайт перетаскиванием.

Добавление иконок | Wiki HostPro

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

Библиотеки иконок в SiteJet Builder | Wiki HostPro

После добавления иконки можно будет изменить ее:

  • цвет
  • фон
  • ширину
  • высоту
  • подложку
  • ширину штриха
  • цвет обводки
  • перелив
  • выравнивание
  • тень

Код

Вы можете не только использовать собственный код, но и интегрировать инструменты сторонних разработчиков. Для этого используйте фрагменты кода HTML, CSS и/или Javascript. Но обратите внимание, что некоторые инструменты могут не работать, или отображаться некорректно, если вы используете Cookie Consent Bar.

Заголовок

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

Редактирование заголовка | Wiki HostPro

Напомним, что после выполнения каждого действия вы можете отменить его, нажав комбинацию клавиш Command+Z (Ctrl+Z), или использовать соответствующую кнопку на панели сверху. Кстати, о комбинациях клавиш. Нажмите на три полоски в левом верхнем углу, а затем выберите «Shortcuts». Тогда появятся все комбинации клавиш, которые вы можете использовать в SiteJet Builder.

Комбинации клавиш в SiteJet Builder | Wiki HostPro

Далее изменим остальной текст, а также фото человека, который сделал отзыв о наших курсах.

Редактирование надписей | Wiki HostPro

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

Редактирование кнопки | Wiki HostPro

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

Всплывающее окно | Wiki HostPro

Прайсблоки

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

Добавление прайсблоков | Wiki HostPro

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

Редактирование прайсблоков | Wiki HostPro

Футер

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

Добавление футера | Wiki HostPro

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

Футер после редактирования | Wiki HostPro

В завершение

Вместе с SiteJet Builder, вы сможете без лишних усилий создавать сайты любой сложности. Этот инструмент доступен во всех услугах хостинга, в которых используется cPanel. Он удобен для SEO-оптимизации, ведь содержит встроенное сжатие изображений, минимизацию кода и lazy loading (отложенная загрузка). И главное – полностью настраивается под вас.

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

Telegram Hostpro

Наш телеграм

с важными анонсами, розыгрышами и мемами

Присоединиться

Возможно, вас заинтересует

Работа с базой данных MySQL в cPanel

Работа с базой данных MySQL в cPanel

https://www.youtube.com/watch?v=wLyqtEg_YiM В этой статье вы узнаете, как начать работу с MySQL, самой популярной системой...

Diana Honcharenko | Обновлено: 20.09.2023

Панель cPanel: надежный инструмент управления хостингом

Панель cPanel: надежный инструмент управления хостингом

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

Diana Baranovska | Обновлено: 09.10.2020

Как проверить потребление ресурсов в cPanel

Как проверить потребление ресурсов в cPanel

При переходе в панель управления cPanel справа на экране вы можете видеть раздел со...

Diana Baranovska | Обновлено: 09.10.2020

Настройка Node.js приложений в cPanel

Настройка Node.js приложений в cPanel

Несколько лет назад, в 2016 году, мы уже предлагали вариант использования Node.js на серверах общего...

Diana Honcharenko | Обновлено: 28.05.2019