Создание лендинга: Урок #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.  Сохраните изменения. 



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

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

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

Cookies в CMS Smart Engine