Витрина дизайна Divi: новые работы с августа 2019 г.

И снова настало время для нашей ежемесячной выставки Divi Showcase, где мы рассмотрим 10 удивительных веб-сайтов Divi, созданных членами нашего сообщества. Каждый месяц мы представляем лучшие веб-сайты Divi, представленные нашим сообществом, и сегодня мы хотим поделиться с вами десятью лучшими веб-сайтами за август. В этом посте я буду указывать на некоторые из моих любимых дизайнерских функций, которые привлекают меня на каждый из веб-сайтов.

Я надеюсь, они тебе нравятся!

Витрина дизайна Divi: новые работы с августа 2019 г.

1. Матричная кровля

Этот сайт был представлен Кристианом Макминном. Он использует полноэкранное фоновое изображение, чтобы показать тип доступной работы, и помещает CTA в оверлей. Информация о компании размещена в виде двух столбцов с изображением с одной стороны и маркерами с другой. Кнопка «Подробнее» переводит читателя на страницу «О нас». В аналогичном разделе из двух столбцов показаны отзывы со ссылкой на дополнительную информацию. Сервисы показаны в виде объявлений с большими одноцветными иконками. Дополнительные ссылки на информацию помещаются в CTA с темными наложениями. Нижний колонтитул включает карту во всю ширину в черно-белом цвете, которая по умолчанию не прокручивается. Мне нравится страница Color Guide, на которой изображен один и тот же дом с крышами разного цвета.

Посетить сайт

2. Группа Brightworks

Этот сайт был представлен Бриттом Бау. За вращающимся текстом заголовка находится темный фоновый узор. Угловой разделитель отделяет главный раздел от следующего, в котором вертикальный текст, слоган и услуги отображаются жирным зеленым шрифтом, масштабируемым при наведении курсора. В следующем разделе отображается серый фон с угловыми разделителями сверху и снизу. Большой текст ведет читателя к загрузке CTA. Раздел для сервисов также включает в себя выровненный по вертикали текст для заголовка и показывает сервисы в виде размытых фрагментов. Простой слайдер с отзывами начинается с большого заголовка. В другом угловом разделе показаны логотипы клиентов. Раздел контактов создает CTA и предоставляет контактную информацию. Мне нравится, как логотип смещен от центра в меню.

Посетить сайт

3. Исла

Этот сайт был представлен Саскией Лунд. Этот сайт включает в себя фоновое изображение с истинным параллаксом в разделе героев, чтобы показать типы доступных мест для отдыха. Наложение включает слоган, написанный шрифтом со сценарием, и поле поиска с вкладкой, где вы можете выполнять расширенный поиск конкретных вариантов размещения. Высокие и тонкие пятна с эффектами наведения показывают изображения и описание ожидаемого отпуска. В разделе спецпредложений отображаются каникулы в слайдере. Каждая из них представляет собой высокую карточку с изображением и описанием и включает эффекты наведения. В разделе проката показаны местоположения на карточке с изображением, описанием и информацией. События отображаются в полноэкранном слайдере. Раздел блога соответствует дизайну высокой карты, а также включает эффекты наведения. На странице журнала статьи в категориях отображаются в виде нескольких столбцов.

Посетить сайт

4. Хедсхед

Этот сайт был представлен Густавом Эспенесом. CTA и графика размещаются поверх фонового рисунка с истинным параллаксом. На графике есть кнопка для воспроизведения видео во всплывающем оверлее. Подобная графика используется по всему сайту в качестве элементов с призывом к действию, рекламными объявлениями и фоном. Сайт включает в себя множество стилизованных разделителей, которые помогают создавать фоны. Размытые изображения смещены друг от друга, чтобы создать интересный вертикальный дизайн, а цвета переходят в фон. В разделе вопросов отображаются ответы в виде переключателей. В другом разделе объявлений показаны преимущества использования значков. Он также включает полноразмерный слайдер с отзывами, логотипы клиентов и стилизованную контактную форму. Мне нравятся одноколоночные персональные модули для членов команды и страница блога с ее чистым дизайном.

Посетить сайт

5. Эмердж Ричмонд

Этот сайт был представлен Кристианом Шиком. На этом сайте используется множество зеленых бликов вместе с волнистыми разделителями разделов, чтобы придать макету интересный, но минималистичный дизайн. В разделе героев с одной стороны размещается призыв к действию, а с другой - пример продукта, который перекрывает разделитель раздела. В следующем разделе показан аналогичный продукт с одной стороны и преимущества с другой. В другом разделе показаны значки со стилизованным фоном для создания цветка, показывающего услуги. Проекты отображаются в разделе, состоящем из нескольких столбцов, с изображением с одной стороны и описанием с другой. Отзыв помещается в рамку по центру экрана и перекрывает разделители разделов, которые ведут к следующему призыву к действию. Пользовательский нижний колонтитул также включает волнистые разделители, которые перекрываются формой информационного бюллетеня. Мне нравятся зеленые блики по всему сайту.

Посетить сайт

6. Южная Сервисная Корпорация

Этот сайт предоставил Мерседес Бугарин. Раздел героев включает в себя скользящий текст, показывающий преимущества услуги. Он помещает форму в раздел героя с выбором услуг. Форма использует закругленные углы с одной стороны и перекрывает изображение в разделе героя. В следующем разделе показаны сервисы в рекламных объявлениях, которые включают стилизованные углы и тени. Логотипы клиентов отображаются внутри слайдера. Далее следует небольшой раздел с кнопками социальных сетей и кнопкой, с помощью которой сотрудники могут войти в систему. Меню включает два разных CTA. Секции разделены волнистыми разделителями. Страница «Службы» имеет тот же дизайн и добавляет стилизованные переключатели для предоставления информации о каждой из служб. Ключи имеют закругленные углы с одной стороны, чтобы соответствовать форме. Формы контактного заявления имеют похожий дизайн и выделяются тенями.

Посетить сайт

7. Социальное бунгало

Этот сайт был представлен Келси Спектер. Раздел героев показывает логотип в одном углу с аналогичной графикой в ​​нескольких углах. Графика из шапки размещена по всему сайту. Информация и CTA размещены на одной стороне, а графика - на другой. Главное меню находится под этим разделом и остается в верхней части экрана при прокрутке до этого места. В разделе введения показано изображение с одной стороны и блок текста, который перекрывает его с другой. За этим следует призыв к действию и включает кнопку с углами, которые меняются при наведении курсора. Раздел блога показывает сообщения мягкими цветами, которые соответствуют сайту, и включает в себя текст со сценарием для заголовка. В полноширинном призыве к действию используются те же цвета и графика, что и в заголовке, а текст заголовка по сценарию помещается на задний план. Мне нравится элегантный дизайн страницы блога, в которой используются одни и те же цвета и шрифты с несколькими макетами.

Посетить сайт

8. Скачать Ecuakaraoke

Этот сайт был представлен Джеро Шенноном. Здесь много мультяшных анимаций. В разделе героев на заднем плане показан анимированный мультфильм с призывом к действию в оверлее. Графика перекрывает разделитель раздела, что ведет к следующему разделу с анимированными пятнами, которые смещены по вертикали друг от друга и отслеживаются вместе с разделителями. Изображение под углом ведет к следующему разделу, который включает призыв к действию и ссылку на блог. Звездные обзоры перекрывают фон и содержат еще один призыв к действию. Встроенное видео YouTube наклонено. Этот сайт включает в себя множество угловых элементов и разделителей, а также несколько призывов к действию с изображениями или цветными углами.

Посетить сайт

9. Цветущие фигуры

Этот сайт был представлен Кейт Бриттон. Он включает в себя цветной пятно на фоне и ползунок в наложении с одной стороны. Текст ползунка перекрывает изображение ползунка и содержит информацию и ссылки. Элементы управления ползунка расположены в верхнем левом и нижнем правом углах. В следующем разделе для предоставления информации используется разноцветный текст и еще одно пятно фона. Квадратные пятна со сплошными цветами показывают пронумерованные заголовки и меняют цвет при наведении курсора. Другой CTA отображает изображение с одной стороны с цветными пятнами и CTA с другой. В разделе бронирования отображается заголовок на сплошном фоне и используется карта для выбора местоположения. CTA загрузки помещает описание в блок, перекрывающий изображение. Здесь много ярких цветов, которые красиво выделяются.

Посетить сайт

10. Испытание блока головы

Этот сайт был представлен Кейт Грин. В разделе героев на заднем плане отображается блок с текстурированным фильтром для наложения. В слогане используется очень большой текст. В меню есть две кнопки с призывом к действию. Изображение блока перекрывает следующий раздел, который отображает текстовый элемент во всю ширину, чтобы показать заголовок с одной стороны и цветной блок с другой. Два чередующихся раздела показывают изображение с одной стороны и информацию с другой на текстурированном фоне. Следующие несколько разделов с призывом к действию включают еще более крупные заголовки с четким внутри текстовым блоком. Некоторые перекрывают разделы. Изображения перекрывают даже более темный текстурированный фон. Мне нравится использование зеленого цвета, изображений и шрифтов в этом.

Посетить сайт

В заключение

Это наши 10 лучших материалов для веб-сайта Divi за август. Эти сайты выглядят потрясающе, и, как всегда, мы хотим поблагодарить всех за ваши предложения!

Если вы хотите, чтобы ваш собственный дизайн был рассмотрен, пожалуйста, напишите нашему редактору Натан по адресу Elegant themes dot com. Убедитесь, что в теме письма указано «ПОДАЧА САЙТА ДИВИ».

Мы также хотели бы услышать ваше мнение в комментариях! Расскажите нам, что вам нравится в этих веб-сайтах, и если есть что-то, что они сделали, вы хотите, чтобы мы учили в этом блоге.

Лучшее изображение через ProStockStudio / shutterstock.com