профессиональное Создание сайта с лендинговой структурой каждой страницы

«MagicCMS» —
конструктор сайтов нового поколения

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

Если Вы новичок, то рекомендуем смотреть все уроки последовательно. Если же Вы уже имеете опыт создания сайтов на конструкторах, то можете пропустить уроки 01-05 и переходить инструкции по установке системы управления.

Содержание

01. Подключение DNS

Чтобы «привязать» домен к хостингу, Вам необходимо выполнить настройки, указанные в данном уроке.

Вы можете купить домен и хостинг на beget.com и тогда DNS будет настроен автоматически.

PS: Нам не платят за рекламу) Мы рекомендуем то, что используем для своих проектов.

02. Настройка работы домена на хостинге

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

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

Но это необязательное условие, Вы можете разместить сайт на любом хостинге.

03. Создание почтового ящика на домене

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

04. Создание базы данных

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

05. Загрузка установочного файла CMS на хостинг

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

06. ВАЖНО! Как включить режим сохранения изменений на сайте

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

1. Установка и настройка CMS на домене

Если Вы когда-либо устанавливали «Wordpress», то сразу заметите, что процесс установки практически идентичен. 

2. Основные настройки сайта

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

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

3. Создание новых страниц и заполнение мета тегов

Работа с админкой системы. Как добавлять страницы на сайт и заполнять поля title, description, keywords. Выведение новых страниц в меню и создание структуры сайта.

4. Создание шапки сайта

Как добавлять и изменять логотип, контакты и менять внешний вид шапки сайта.

5. Создание меню сайта

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

Эти элементы также находятся в блоке «меню» и размещаются аналогичным образом.

6. Добавление обложки

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

Сюда же можно разместить кнопку действия: «заказать звонок», «подписаться на рассылку» и другие.

7. Создание отдельного заголовка

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

8. Выведение текстового блока

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

9. Добавляем фотогалереи

Уже после записи данного урока была добавлена функция увеличения фотографий при клике.

10. Встраиваем видео на сайт

Вы можете выводить видео не только с YouTube, но и из других источников.

11. Вставляем форму «заказать звонок», «обратная связь» и т. д.

Также доступны:

  • подписка на рассылку
  • отправить заявку
  • заказать

12. Добавление и настройки блока «колонки»

С картинками, заголовками, ссылками и без них.

13. Блок «Аккордеон»

Аккордеон— это разворачивающийся текст по клику с подзаголовками. Удобно использовать, если на странице необходимо структурировать большой объем информации.

14. Создание блока «Вкладки»

Это почти то же, что и аккордеон, только визуально текст распределен иначе. Я часто использую этот модуль для создания прайс-листов или списков, где нужно разделить несколько категорий услуг.

15. Размещение списка статей, новостей и каталога товаров

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

16. Создание блока тарифы, онлайн оплата на сайте

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

Система интегрирована с «Robokassa».

17. Добавление блока «Обратный отсчет до окончания акции»

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

18. Редактирование хлебных крошек

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

Инструмент также может использоваться SEO- специалистами для корректировки плотности ключевых фраз на странице.

19. Добавление формы поиска по сайту

Имеет смысл размещать форму если у Вас многостраничный сайт.

20. Создание подвала
21. Добавление карты сайта

22. Голосовое управление при наполнении сайта

Уникальная функция, которой вы не встретите в других системах управления сайтом.

23. Работа с визуальным редактором форматирование текста и создание таблиц

Урок про наполнение сайта.

24. Клонирование и копирование блоков

Создание шапки, меню и подвала для всех страниц сайта.

25. Добавление Яндекс карты на страницу
26. Технические настройки и инструменты для вебмастера и SEO специалиста