Приветствую вас! В этой статье мы продолжаем изучать тему «Как создать лендинг самому». (Первая часть)
Остановились мы на теме выбора структуры сайта для лендинга. В прошлой статье мы ознакомились с документацией по bootstrap.
Структура лендинга, который мы создадим с помощью bootstrap
Итак, создадим структуру сайта, состоящую из трех строчек, в каждой из которых будет по 3 колонки — шапка, контентная часть и подвал.
В шапке мы добавим заголовок и номер телефона. В контентной части добавим изображение товара, преимущества заказа на нашем сайте, и в правой части добавим форму для заполнения, которая будет содержать 2 поля и кнопку. В подвале добавим информацию о нашей компании. Для примера такая простенькая структура будет у нашего будущего лендинга.
Работа с лендингом в конструкторе интерфейсов bootstrap layoutit
Для того, чтобы создать такую структуру необходимо воспользоваться конструктором, который находится по адресу www.layoutit.com . Перейдем на этот сайт и посмотрим, что это за конструктор. На этом сайте можно зарегистрироваться с помощью Фейсбука и создать структуру нашего сайта с помощью bootstrap3 либо bootstrap2. Конструктор работает по принципу перетягивания, то есть мы берем какой-то набор и перетягиваем мышью на наш будущий сайт. К сожалению, конструктор представлен только на английском языке.
Для начала работы нажмите на кнопку Start Now with Bootstrap3. Переходим в наш личный кабинет и видим интерфейс, где вверху страницы панель инструментов, где можно, например, скачать, очистить то, что мы создали и т.п.
Слева мы видим сайт-бар, который содержит компоненты bootstrap. Будет открыто Grid System, с помощью которой мы сможем сделать адаптивный дизайн. Затем раскрывающийся список BASE CSS базовых правил, с помощью которых можно вставить заголовок, параграф, цитату и т.д. Затем COMPONENTS набор готовых компонентов, таких как группы кнопок, навигация, текст и т.п. И наконец JAVASCRIPT, где мы можем вставить модальное окно, готовую навигацию, табы, карусель и прочее.
В центре интерфейса у нас есть готовый шаблон сайта, где мы и будем строить структуру своего лендинга. Для начала работы нажмите на кнопку Clear чтобы очистить все.
Теперь создаем нашу структуру с чистого листа. Предлагаю сделать 3 строчки с двумя не равными колонками, одна из которых будет занимать 2/3 страницы, а другая 1/3. Из меню Grid System перетягиваем эти колонки в правую часть страницы.
Из меню Base CSS добавляем в шапку заголовок, перетаскиваем из TITLE в первую колонку и во вторую колонку для номера телефона, тоже используя стиль заголовка. Во вторую строчку добавляем изображение из IMAGES, и список выводов, почему стоит заказывать у нас из UNORDERED LIST. А в правую часть контентную мы добавим с вами форму из FORMS и большую кнопку BUTTON. При перетаскивании кнопки, выберите в всплывающем меню стиль вашей кнопки. Изменить цвет на красный, размер на большой, и разместите кнопку на весь блок. Лишние компоненты из формы мы уберем позднее. В подвал сайта мы добавим информацию о нашей компании из ADDRESS. Если он сразу не вставляется, то вставьте его сначала в другое место шаблона, а потом перетащите в подвал.
Вот, собственно, мы создали структуру. Теперь ее необходимо скачать к себе на компьютер. Нажимаем DOWNLOAD. И мы сможем скачать просто html код, который можно скопировать и вставить в блокнот Notepad++ и уже подключить в нем bootstrap. Так же можно скачать себе папку zip, в котором уже будет bootstrap. После скачки и распаковки файла, переходим в папку SRC, открываем файл INDEX, открываем его с помощью браузера Google Chrome и видим, как выглядит наш будущий сайт. Чтобы внести изменения на сайте необходимо открыть этот файл в блокноте Notepad++.
Изменяем созданный лендинг в Notepad++
Например, изменим заголовок. Заменим <h3> на <h1> и вместо стандартного текста, напишем наш заголовок, например, «Игры для девочек». Следующий компонент в шапке с заголовком <h3> это номер телефона, изменим его, например, на <h4> и добавим сам номер телефона.
Ниже мы видим, что изображение image подключается из внешнего сайта, можно добавить свое изображение. Для этого необходимо добавить его в папку и прописать в коде путь к нему. Ниже в <ul> напишем некоторые преимущества нашего товара, например, «Игры проходят модерацию «, «Проверено антивирусом Касперский», «Игры без возрастных ограничений», и т.д. Лишние строчки просто убираем.
Затем переходим к форме для заполнения. Вместо Email address напишем «Введите email», вместо Password — «Введите имя», изменим тип поля с password на text, и уберем группу с файлом File Input. Для этого выделяем мышью весь класс начиная с <div> и заканчивая </div>. В коде кнопки button вместо default пишем «получить доступ».
В подвале сайта изменим адрес. Например, ООО «Игры разума», Москва, ул. Тверская. Сохраните файл и обновите сайт на браузере. Вы увидите изменения.
Чтобы поработать с дизайном, необходимо открыть файл CSS, STYLE в блокноте. Например, пропишем стиль нашему бакграунду. Пишем body {background-color: #fff;}. Сохраним. Обновим сайт и увидим изменения — фон страницы стал серым.
Чтобы разместить наше изображение по центру, в файле INDEX находим тег img, обернем его в специальный блок <div>class =»text-center» </div>. Если добавить в img class= «img-circle», то изображение примет форму круга. Сохраним и посмотрите изменения.
Чтобы разделить зрительно блоки друг от друга, добавьте в код между блоками пустые строчки <hr>.
Вот так делается простой симпатичный лендинг. Еще можно немного поработать с дизайном. Но в принципе с помощью конструктора вы получаете такой удобный адаптивный лендинг. То есть посетители с мобильного устройства будут видеть наш лендинг в удобном для него виде. Такой лендинг подстраивается под любое мобильное устройство. Чтобы проверить адаптивный ли ваш сайт или нет, просто измените размер окна браузера, уменьшите его, и если текст и изображения на сайте читаемы и не изменили свои пропорции, то ваш сайт адаптивный.
Лендинг (сайт) также можно скопировать
Если у вас остались вопросы, пишите комментарии.
Спасибо вам за внимание! До встречи!
↓ Презентация cloud.mail.ru