Оформляем красиво одностраничный сайт — красивое оформление сайта

31.10.2016

Принцип строения страниц по продаже любого товара практически всегда неизменен. Они состоят из отдельных блоков, обращаясь к которым, пользователь может составить мнение о продаваемых на нем товарах. Если каждый такой блок оригинально оформить, то страница, которая из них состоит, будет выглядеть ярко и привлекательно. Так, чтобы посетителю обязательно захотелось купить предлагаемый товар, даже если всего пять минут назад он об этом и не думал. Здесь мы рассмотрим, как грамотно создать блок с выгодами на CSS. Остановимся на этом вопросе отдельно, так как использование блоков – самый популярный способ организации одностраничного сайта.
Что мы должны получить в результате: конструктивно блок состоит из двух составляющих — видимой и скрытой. Видимый модуль составляют иконка и наименование выгоды, преимущества. В скрытой части помещается полное описание выгоды, оно появляется при наведении на иконку курсора.

Чтобы увидеть эффекты скачайте страницу с примером:

Как сделать красивое оформление для своего продающего сайта?

1. HTML структура

В первую очередь необходимо вставить иконки от FontAwesome между тегами <head></head>, которые будем использовать для описания:

Мы имеем один большой блок, в котором будут три блока с описаниями и иконками.

 

Описание структуры:

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

Как видим, конструкция очень простая. Теперь нужно добавить анимацию.

 

2. CSS стили

Чтобы создать анимацию нам не придется обращаться к Javascript. Нам будет достаточно возможностей CSS3.

Указываем стили, общие для всех трех блоков:

Затем следует иконка с анимацией:

В конце описываем стили для блоков с текстовым указанием выгоды:

Вывод

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

Добавить комментарий

Ваш e-mail не будет опубликован.