Витрина дизайна Divi: новые материалы с июля 2019 г.

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

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

Витрина дизайна Divi: новые материалы с июля 2019 г.

1. Enash

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

Просмотр веб-сайта

2. Люба - Рифлесси Дигитали

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

Просмотр веб-сайта

3. Режим успеха

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

Просмотр веб-сайта

4. Эрик Хупер

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

Просмотр веб-сайта

5. Отель Harmona Beach

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

Просмотр веб-сайта

6. Профессиональный веб-сайт Базеля

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

Просмотр веб-сайта

7. Просто VR

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

Просмотр веб-сайта

8. Николай Сёренсен

Этот сайт был представлен Николаем Сёренсеном. Он отображает большое фоновое изображение с наложением и призывом к действию в центре. При прокрутке отображается раздел из двух столбцов с призывом к действию на одной стороне с зелеными кнопками, которые соответствуют призыву к действию в меню, и изображением офиса на другой. На странице есть несколько похожих призывов к действию. В разделе «О программе» с одной стороны отображается информация, а с другой - изображение в кружке и награда. Несколько разделов рекламных объявлений включают изображения, нарисованные зелеными линиями, которые соответствуют бренду сайта. Тематические исследования представлены в виде больших изображений с разделителем, заголовком и описанием. При наведении курсора появляется кнопка «Читать дальше». Мне нравится раздел серых логотипов внутри линейной сетки, которая не закрывается по внешним краям. Это минимальный элемент, который имеет большое значение. На странице "Маркетинг" отображаются изображения клиентов с подробной статистикой.

Просмотр веб-сайта

9. Emerge

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

Просмотр веб-сайта

10. Утренние люди

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

Просмотр веб-сайта

В заключение

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

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

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

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