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

31.10.2016

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

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

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

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

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

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

 

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

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

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

 

2. CSS стили

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

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

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

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

Вывод

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

 

Залишити відповідь

Ваша e-mail адреса не оприлюднюватиметься.