Выдающийся продукт Divi: DiviCity

DiviCity — это одностраничный макет Divi, доступный на Divi Marketplace. Он имеет универсальный дизайн, который можно использовать для разных типов веб-сайтов, он полностью адаптивен и настраивается. В этом обзоре продукта мы рассмотрим макет DiviCity и поможем вам решить, подходит ли он вам.

Давайте начнем!

Установка ДивиСити

DiviCity поставляется в виде ZIP-файла, содержащего файлы Divi Visual Builder .json. Чтобы установить макет, начните с разархивирования файла. Затем откройте свою страницу в Divi Builder.

Щелкните параметр переносимости в нижней части страницы и выберите вкладку импорта. Затем выберите файл .json для макета DiviCity и начните импорт макета. После того, как макет был импортирован, все, что вам нужно сделать, это заменить содержимое своим собственным, и ваш веб-сайт готов!

ДивиСити

DiviCity состоит из одностраничного макета Divi Builder. Он поставляется без каких-либо демонстрационных изображений, поэтому я добавил свое собственное для целей этой статьи. Давайте посмотрим на разделы, которые идут с этим макетом!

Раздел заголовка DiviCity

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

Раздел о DiviCity

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

Раздел блога DiviCity

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

Кроме того, вы можете получить дизайн, представленный в демо-версии макета, установив бесплатный плагин Divi Article Cards. После того, как плагин будет установлен и активирован на вашем сайте, откройте настройки Divi 100 в меню панели инструментов WordPress. Активируйте карточку статьи, затем нажмите «Сохранить».

Теперь модули блога на странице DiviCity должны выглядеть примерно так, как показано выше.

Секция номеров DiviCity

В разделе чисел есть четыре столбца на фоне изображения — числовые счетчики загружаются по мере загрузки страницы.

DiviCity Что делать Раздел

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

DiviCity Где это сделать Раздел

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

DiviCity Посетите нас Раздел

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

Раздел контактов DiviCity

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

Мобильный макет DiviCity

DiviCity полностью адаптируется к планшетам и мобильным устройствам. Давайте взглянем на мобильную версию нескольких разделов.

Во-первых, это раздел заголовка с большим фоновым изображением, текстом заголовка и кнопкой. Первое текстовое поле перекрывает заголовок, а остальная часть содержимого раздела заголовка следует ниже.

Это часть мобильного раздела с изображениями, разделенными некоторыми разделами с текстом.

Это мобильная версия раздела «Где это сделать». У него есть большое изображение вверху, текст заголовка, основной текст, а затем три изображения с меткой на каждом.

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

Купить DiviCity

DiviCity доступен на Divi Marketplace. Это стоит 19 долларов за неограниченное использование веб-сайта и пожизненные обновления. Цена также включает 30-дневную гарантию возврата денег.

Последние мысли

DiviCity — это простой и красивый макет веб-сайта, который невероятно универсален. Поскольку он создан с помощью Divi, макет легко и интуитивно настраивается для вашего собственного использования. Анимация загрузки и эффекты наведения по всему макету выглядят красиво и связно и не слишком отвлекают от содержимого страницы или удобства использования. Мне также нравится использование больших изображений в дизайне, а также типографика, используемая в макете. Если вы ищете простой макет одностраничного веб-сайта для своего следующего проекта Divi, возможно, этот продукт вам подойдет.

Мы были бы рады получить известия от вас! Вы пробовали ДивиСити? Дайте нам знать, что вы думаете об этом в комментариях!