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

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

Работа с ссылками

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

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

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

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

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

Шаг #6. Над текстом (в верхнем левом углу) нажмите на иконку «Редактировать» (знак карандаша) → вставьте или наберите текст (КОНТАКТЫ) → в текстовом редакторе выберите ориентацию текста по центру.

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

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

Шаг #9. Над изображением (в верхнем левом углу) появятся иконки с возможными действиями. Нажмите на иконку «Настройки» (знак шестеренки) → укажите цвет разделителя (#3db2d3).

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

Шаг #11. Скопируйте разделитель → над изображением (в верхнем левом углу) появятся иконки с возможными действиями. Нажмите на иконку Копировать (знак «+»).

Шаг #12. Переместите скопированный элемент правее (важно, чтобы скопированный разделитель находился ниже оригинала) → выделите все разделители → в появившейся панели перейдите во вкладку «Выравнивание» → выберите вертикальное выравнивание: по верху.

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

Шаг #14. Нажмите на разделитель → над разделителем (в верхнем левом углу) появятся иконки с возможными действиями. Нажмите на иконку «Копировать» (знак «+»).

Шаг #15. Переместите скопированный элемент между разделителем №1 и разделителем №2 (важно, чтобы скопированный разделитель находился ниже оригинала) → выделите все разделители → в появившейся панели перейдите во вкладку «Выравнивание» → выберите вертикальное выравнивание: по верху → перейдите во вкладку «Специальное» → выберите распределить: по горизонтали.

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

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

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

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

Шаг #20. Нажмите на текст → над разделителем (в верхнем левом углу) появятся иконки с возможными действиями. Нажмите на иконку «Копировать» (знак «+»).

Шаг #21. Выделите скопированный текст и разделитель по середине → в появившейся панели перейдите во вкладку «Выравнивание» → выберите горизонтальное выравнивание: по правому краю.

Шаг #22. Выделите текстовые элементы → в появившейся панели перейдите во вкладку «Выравнивание» → выберите вертикальное выравнивание: по верху.

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

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

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

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

Шаг #27. Выделите скопированный текст и разделитель по правому краю → в появившейся панели перейдите во вкладку «Выравнивание» → выберите горизонтальное выравнивание: по правому краю.

Шаг #28. Выделите скопированный текст и текст №2 → в появившейся панели перейдите во вкладку «Выравнивание» → выберите вертикальное выравнивание: по верху.

Шаг #29. Нажмите на скопированный текст → Над текстом (в верхнем левом углу) нажмите на иконку «Редактировать» (знак карандаша) → вставьте или наберите текст (demo.smart-engine@mail.ru)

Шаг #30. Выделите E-mail (demo.smart-engine@mail.ru) → в текстовом редакторе нажмите на иконку «Ссылка» → выберите тип ссылки «E-mail» → укажите E-mail (demo.smart-engine@mail.ru) → нажмите «Сохранить».

Шаг #31. Сохраните изменения.

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

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