Создание лендинга: Урок #11

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

Cоздание шапки сайта. Работа с навигацией

Шаг #1. На главной странице перейдите в раздел «Хедер/Футер» → задайте название для футера (Шапка сайта) → выберите тип «Шапка (Header)» → нажмите кнопку «Создать» → зайдите в созданную шапку.

Шаг #2. В разделе «Блоки» на панели инструментов выберите «Адаптивный блок» → перетащите элемент в среду визуальной верстки.

Шаг #3. Нажмите на блок в любом свободном месте → в нижнем или в верхнем углу блока появится иконка «Настройки» → нажмите на иконку.

Шаг #4. В «Настройках» укажите высоту блока - 100 px.

Шаг #5. Правой клавишей мышки нажмите на блок → в появившейся панели выберите «Добавить колонку».

Шаг #6. Задайте ширину колонки 370 px → задайте расположение колонки слева → нажмите «Добавить».

Шаг #7. Повторите действия → правой клавишей мышки нажмите на блок → в появившейся панели выберите «Добавить колонку №2».

Шаг #8. В разделе «Медиа» на панели инструментов выберите «Фото» → перетащите элемент в среду визуальной верстки, в колонку №1.

Шаг #9. Загрузите изображение с компьютера или из интернета.

Шаг #10. В появившейся панели «Информация» установите ширину и высоту изображения (ширина: 253 px, высота: 55 px) → в этой же панели переключитесь во вкладку «Ориентация» → укажите ориентацию объекта (слева, по середине) → укажите отступы от базовой точки (по оси x: 5.4 %, по оси y: 0 px) → нажмите «Сохранить»

Шаг #11. Перейдите в раздел «Навигация».

Шаг #12. Задайте название для навигации (Навигация) → нажмите кнопку «Создать».

Шаг #13. Дайте название первому пункту навигации (О САЛОНЕ) → выберите тип пункта "Якорь" → в поле «Ссылка» пока укажите (#) → нажмите кнопку «Добавить».

Шаг #14. Дайте название первому пункту навигации (УСЛУГИ) → выберите тип пункта "Якорь" → в поле «Ссылка» пока укажите (#) → нажмите кнопку «Добавить».

Шаг #15. Дайте название первому пункту навигации (ЗАПИСАТЬСЯ) → выберите тип пункта "Якорь" → в поле «Ссылка» пока укажите (#) → нажмите кнопку «Добавить».

Шаг #16. Дайте название первому пункту навигации (КОНТАКТЫ) → выберите тип пункта "Якорь" → в поле «Ссылка» пока укажите (#) → нажмите кнопку «Добавить».

Шаг #17. Вернитесь к шапке сайта.

Шаг #18. В разделе «Меню» на панели инструментов выберите «Меню» → перетащите элемент в среду визуальной верстки, в колонку №2.

Шаг #19. В появившемся окне выберите созданную навигацию навигацию.

Шаг #20. Над текстом (в верхнем левом углу) появятся иконки с возможными действиями → настройте цвет основной навигации (во всех полях укажите прозрачность цвета: 0 ).

Шаг #21. Перейдите в раздел «Текст» → укажите базовые параметры «Основной навигации» → установите «Основной стиль» (Верхняя навигация) → установите «Стиль активного пункта» (Верхняя навигация) → установите «Ориентацию текста» (По центру).

Шаг #22. Задайте размеры горизонтальных отступов «Основной навигации» (Слева/Справа: 2 px) → задайте размеры вертикальных отступов «Основной навигации» (по оси x: 2 px; по оси y: 2 px).

Шаг #23. Пункт «Оформление» оставляем без изменений.

Шаг #24. В панели «Информация» установите размеры элемента (ширина: 100%, высота: 50 px) → в этой же панели переключитесь во вкладку «Ориентация» → укажите ориентацию объекта (по середине, по центру) → укажите отступы от базовой точки (по оси x: 0 px, по оси y: 0 px).

Шаг #25. В разделе «Наполнение» на панели инструментов выберите «Текст» → перетащите элемент в среду визуальной верстки.

Шаг #26. Над текстом (в верхнем левом углу) появятся иконки с возможными действиями → нажмите на иконку «Настройки» (знак шестеренки) → выберите стиль текста (Телефон в шапке (черный)).

Шаг #27. Над текстом (в верхнем левом углу) нажмите на иконку «Редактировать» (знак карандаша) → вставьте или наберите текст (8 800 600 20 48, +7 499 959 03 37) → выделите данный текст → в текстовом редакторе выберите ориентацию текста по правой стороне.

Шаг #28. Выделите номер (+7 800 600 20 48)→ в текстовом редакторе нажмите на иконку «Ссылка» → выберите тип ссылки «Телефон» → укажите телефон через +7, без пробелов → нажмите «Сохранить».

Шаг #29. Выделите номер (+7 499 959 03 37)→ в текстовом редакторе нажмите на иконку «Ссылка» → выберите тип ссылки «Телефон» → укажите телефон через +7, без пробелов → нажмите «Сохранить».

Шаг #30. Нажмите на созданный текст → в появившейся панели «Информация» укажите ширину текстового элемента (ширина: 300 px) → переключитесь во вкладку «Ориентация» → укажите ориентацию объекта (по центру, справа) → укажите отступы от базовой точки (по оси x: 5.4 %, по оси y: 12 px).

Шаг #31. В разделе «Наполнение» на панели инструментов выберите «Текст» → перетащите элемент в среду визуальной верстки.

Шаг #32. Над текстом (в верхнем левом углу) появятся иконки с возможными действиями → нажмите на иконку «Настройки» (знак шестеренки) → выберите стиль текста (Текст голубой (16 px)).

Шаг #33. Над текстом (в верхнем левом углу) нажмите на иконку «Редактировать» (знак карандаша) → вставьте или наберите текст (г. Москва, Пресненская наб., 2) → выделите данный текст → в текстовом редакторе выберите ориентацию текста по правой стороне.

Шаг #33. Нажмите на созданный текст → в появившейся панели «Информация» укажите ширину текстового элемента (ширина: 300 px) → переключитесь во вкладку «Ориентация» → укажите ориентацию объекта (по центру, справа) → укажите отступы от базовой точки (по оси x: 5.4 %, по оси y: 12 px).

Шаг #34. Перейдите к шаблону «Главной страницы».

Шаг #35. В настройках шаблона включите отображение «Шапки» и «Подвала сайта» → так же подключте настройку «Шапка поверх страницы» и «Фиксированная шапка».

Шаг #36. В разделе «Меню» на панели инструментов выберите «Якорь» → перетащите элемент в среду визуальной верстки, в блок №2.

Шаг #37. Над элементом (в верхнем левом углу) нажмите на иконку «Ссылка» → дайте название «Якорю» → название якорей важно прописывать латинскими буквами, указывая пробелы через нижнее подчеркивание (o_salone) → нажмите «Сохранить».

Шаг #38. В появившейся панели «Ориентация» укажите расположение объекта (сверху, слева) → укажите отступы от базовой точки (по оси x: 0 px, по оси y: 0 px).

Шаг #39. В разделе «Меню» на панели инструментов выберите «Якорь» → перетащите элемент в среду визуальной верстки, в блок №3.

Шаг #40. Над элементом (в верхнем левом углу) нажмите на иконку «Ссылка» → дайте название «Якорю» → название якорей важно прописывать латинскими буквами, указывая пробелы через нижнее подчеркивание (uslugi) → нажмите «Сохранить».

Шаг #41. В появившейся панели «Ориентация» укажите расположение объекта (сверху, слева) → укажите отступы от базовой точки (по оси x: 0 px, по оси y: 0 px).

Шаг #42. В разделе «Меню» на панели инструментов выберите «Якорь» → перетащите элемент в среду визуальной верстки, в блок №8.

Шаг #43. Над элементом (в верхнем левом углу) нажмите на иконку «Ссылка» → дайте название «Якорю» → название якорей важно прописывать латинскими буквами, указывая пробелы через нижнее подчеркивание (zapisatsya) → нажмите «Сохранить».

Шаг #44. В появившейся панели «Ориентация» укажите расположение объекта (сверху, слева) → укажите отступы от базовой точки (по оси x: 0 px, по оси y: 0 px).

Шаг #45. В разделе «Меню» на панели инструментов выберите «Якорь» → перетащите элемент в среду визуальной верстки, в блок №9.

Шаг #46. Над элементом (в верхнем левом углу) нажмите на иконку «Ссылка» → дайте название «Якорю» → название якорей важно прописывать латинскими буквами, указывая пробелы через нижнее подчеркивание (kontakty) → нажмите «Сохранить».

Шаг #47. В появившейся панели «Ориентация» укажите расположение объекта (сверху, слева) → укажите отступы от базовой точки (по оси x: 0 px, по оси y: 0 px).

Шаг #48. Сохраните шаблон.

Шаг #49.Скопируйте название «Якоря» из блока №2 (o_salone) → перейдите в раздел «Навигация» → откройте созданную вами навигацию → перейдите к настройкам первого пункта навигации (О САЛОНЕ) → в поле «Ссылка» вставьте название якоря после знака # (#o_salone) .

Шаг #50.Скопируйте название «Якоря» из блока №3 (uslugi) → перейдите в раздел «Навигация» → откройте созданную вами навигацию → перейдите к настройкам первого пункта навигации (УСЛУГИ) → в поле «Ссылка» вставьте название якоря после знака # (#uslugi).

Шаг #51.Скопируйте название «Якоря» из блока №8 (zapisatsya) → перейдите в раздел «Навигация» → откройте созданную вами навигацию → перейдите к настройкам первого пункта навигации (ЗАПИСАТЬСЯ) → в поле «Ссылка» вставьте название якоря после знака # (#zapisatsya).

Шаг #52.Скопируйте название «Якоря» из блока №9 (kontakty) → перейдите в раздел «Навигация» → откройте созданную вами навигацию → перейдите к настройкам первого пункта навигации (КОНТАКТЫ) → в поле «Ссылка» вставьте название якоря после знака # (#kontakty).

В следующем уроке вы узнаете, как cоздать подвал сайта.

Была ли полезна для вас данная статья?