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

Если вы являетесь постоянным клиентом или приобрели новую учетную запись или обновили ее во время распродажи в Черную пятницу, вы можете скачать этот макет прямо сейчас.

Получите эксклюзивную целевую страницу UI Kit для Черной пятницы

Прежде чем приступить к этому варианту использования, вам нужно будет заполучить эксклюзивную целевую страницу Black Friday UI Kit, которую вы можете получить, став новым участником Elegant Themes, обновив свою существующую учетную запись или уже являясь пожизненным участником с нами. Если вы действительно уже являетесь пожизненным участником, вы можете войти в нашу зону для участников и загрузить все наши эксклюзивные целевые страницы здесь. Всем остальным нужно будет использовать кнопку ниже, чтобы купить или обновить, прежде чем они смогут следовать остальной части нашего руководства.

Заявите о сделке, пока она не исчезла!

Использование структуры столбцов Divi для красивого списка продуктов и функций

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

После того, как вы загрузили новую целевую страницу UI Kit из нашего личного кабинета, вы можете посмотреть видео ниже, чтобы увидеть, насколько легко ее настроить. Мы также рекомендуем вам следовать этому руководству, чтобы подготовить свой сайт к дальнейшей настройке.

В этом сообщении о сценарии использования мы покажем вам, как потрясающе составить список ваших функций и / или продуктов, используя новые структуры столбцов Divi. Дизайн, который мы будем обрабатывать, отлично смотрится с целевой страницей UI Kit и позволяет вам эффективно и красиво использовать пространство на вашей странице.

Предварительный просмотр

Давайте посмотрим на результат на экранах разных размеров.

Наведение и анимация

Мы также добавим некоторые тонкие настройки наведения и анимации для различных элементов дизайна. Это даст следующее взаимодействие:

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

Добавить новую страницу с помощью целевой страницы UI Kit

Первое, что вам нужно сделать, это создать новую страницу, используя целевую страницу UI Kit, которую вы скачали и загрузили. Если вы не знаете, как это сделать, обязательно посмотрите видео в предыдущей части этого поста, которое поможет вам шаг за шагом.

Найдите раздел функций на странице

После того, как вы загрузили макет, прокрутите вниз, пока не найдете раздел функций на странице.

Удалить существующие строки

Удалите последние две строки, которые вы можете найти в этом разделе. Мы заменим содержимое этих строк нашим списком функций / продуктов.

Добавить новую строку под строкой, содержащей строку

Структура столбца

Добавьте новую строку в раздел, используя следующую структуру столбцов:

Размеры

Еще не добавляя никаких модулей, откройте настройки строки и измените настройки размеров на вкладке дизайна.

• Сделать эту строку полной шириной: Да
• Использовать нестандартную ширину желоба: Да
• Ширина желоба: Да
• Выровнять высоту столбца: Да

Интервал

Чтобы убедиться, что этот дизайн отлично смотрится на всех размерах экрана, мы собираемся использовать разные настраиваемые значения полей и отступов:

• Верхнее поле: 100 пикселей
• Нижнее поле: 100 пикселей
• Верхний отступ: 87 пикселей
• Отступ сверху столбца 1: 100 пикселей (рабочий стол), 0 пикселей (планшет и телефон).
• Верхнее заполнение столбца 2: 100 пикселей (рабочий стол), 0 пикселей (планшет и телефон).
• Отступ сверху столбца 3: 100 пикселей (рабочий стол). 0px (планшет и телефон)
• Отступ снизу столбца 3: 50 пикселей (планшет и телефон).
• Отступ слева в столбце 4: 10 пикселей (только на телефоне).
• Колонка 4, отступ справа: 10 пикселей
• Отступ слева в столбце 5: 5 пикселей (компьютер и планшет), 10 пикселей (телефон).
• Отступ справа в столбце 5: 5 пикселей (компьютер и планшет), 10 пикселей (телефон).
• Колонка 6, отступ слева: 10 пикселей.
• Отступ слева в столбце 6: 10 пикселей (только на телефоне).

Добавить текстовый модуль в столбец 1

Добавить содержимое

Пора начинать добавлять модули! Добавьте текстовый модуль в первый столбец с номером.

Цвет фона по умолчанию

Добавьте цвет фона к этому модулю.

• Цвет фона: # 0f0f0f

Цвет фона при наведении

И измените цвет фона при наведении курсора.

• Цвет фона: # ff5400

Фоновая картинка

Вы также можете добавить одно из изображений значков, которые вы можете найти в своей медиатеке, на фон:

• Размер фонового изображения: фактический размер
• Положение фонового изображения: по центру
• Повтор фонового изображения: без повтора

Настройки текста по умолчанию

Продолжите, изменив настройки текста.

• Шрифт текста: Muli
• Толщина шрифта текста: легкий
• Цвет текста: #ffffff
• Размер текста: 80 пикселей (компьютер и телефон), 40 пикселей (телефон)
• Высота текстовой строки: 1em

• Цвет тени текста: ## ffffff
• Ориентация текста: влево

Интервал по умолчанию

Добавьте пользовательские отступы, чтобы создать квадрат.

• Верхний отступ: 200 пикселей
• Отступ слева: 50 пикселей (только для телефона)
• Отступ справа: 50 пикселей (только для телефона)

Расстояние при наведении

Измените настройки интервала при наведении.

• Отступ слева: 100 пикселей

Граница

Чтобы соответствовать целевой странице UI Kit, мы также добавляем несколько тонких закругленных углов. Добавьте «20 пикселей» к каждому из углов.

Коробка Тень

Используйте следующую тень блока, чтобы добавить немного цвета и к модулю:

• Горизонтальное положение тени блока: 20 пикселей
• Вертикальное положение тени блока: -50 пикселей
• Сила распространения тени коробки: 17 пикселей
• Цвет тени: # 593aff

Анимация

И последнее, но не менее важное: добавьте в текстовый модуль очень тонкую слайд-анимацию.

• Стиль анимации: слайд
• Направление анимации: вправо
• Интенсивность анимации: 3%

Добавить модуль разделителя в столбец 2

Видимость

Следующий модуль, который нам понадобится, - это Divider Module. Продолжайте и добавьте единицу во второй столбец. Убедитесь, что опция «Показать разделитель» включена.

• Показать разделитель: Да

Цвет

Затем измените цвет разделителя.

• Цвет: #ffffff

Интервал

Чтобы перекрыть текстовый модуль в первом столбце, мы собираемся использовать некоторые настраиваемые значения полей, которые мы настроим в соответствии с различными размерами экрана.

• Верхнее поле: 30 пикселей
• Левое поле: -200 пикселей (компьютер и планшет), 0 пикселей (телефон)
• Правое поле: 200 пикселей (компьютер и планшет), 0 пикселей (телефон)

Добавить текстовый модуль №1 в столбец 3

Добавить содержимое

К следующей колонке! Здесь первый модуль, который нам понадобится, - это текстовый модуль заголовка. Идите вперед и добавьте название вашей первой функции или продукта.

Настройки текста заголовка

Затем перейдите к настройкам текста заголовка и внесите некоторые изменения в соответствии с пакетом макетов UI Kit.

• Шрифт заголовка 3: Muli
• Толщина шрифта заголовка 3: светлый
• Цвет текста заголовка 3: #ffffff
• Размер текста заголовка 3: 30 пикселей (компьютер и планшет), 18 пикселей (телефон)

Интервал

Чтобы сдвинуть этот модуль влево, мы собираемся использовать некоторые настраиваемые значения интервала.

• Верхнее поле: 20 пикселей
• Нижнее поле: 20 пикселей
• Левое поле: -180 пикселей (компьютер и планшет), 0 пикселей (телефон)
• Отступ слева: 20 пикселей (компьютер и планшет), 50 пикселей (телефон)
• Отступ справа: 20 пикселей (компьютер и планшет), 50 пикселей (телефон)

Добавить текстовый модуль №2 в столбец 3

Добавить содержимое

Следующий модуль, который нам понадобится, - это текстовый модуль описания. Идите вперед и введите описание вашей функции или продукта.

Настройки текста

Затем измените настройки текста.

• Цвет текста: rgba (255,255,255,0,5)
• Высота текстовой строки: 2.2em

Интервал

Сдвиньте этот модуль влево, используя некоторые настраиваемые значения интервала.

• Левое поле: -180 пикселей (компьютер и планшет), 0 пикселей (телефон)
• Отступ слева: 20 пикселей (компьютер и планшет), 50 пикселей (телефон)
• Отступ справа: 20 пикселей (компьютер и планшет), 50 пикселей (телефон)

Клонировать и поместить модуль кнопок в столбец 3

Последний модуль, который нам понадобится в столбце 3, - это кнопочный модуль. Чтобы сэкономить время, мы собираемся клонировать существующую кнопку на странице и разместить ее прямо под двумя другими добавленными модулями.

Изменить содержимое

Измените содержимое модуля кнопок.

Изменить интервал

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

• Верхнее поле: 50 пикселей
• Левое поле: -160 пикселей (компьютер и планшет), 50 пикселей (телефон)
• Правое поле: 50 пикселей (только для телефона)

Добавить модуль изображения в столбец 4

Загрузить изображение

К следующей колонке! Добавьте модуль изображения в столбец 4 и загрузите изображение по выбору. В этом примере мы использовали размер изображения 500 × 500, но не стесняйтесь поэкспериментировать и с другими размерами изображения.

Коробка Тень

Добавьте к этому модулю тонкую тень блока.

• Цвет тени: #ffffff

Анимация

И в довершение всего, добавьте к изображению слайд-анимацию.

• Стиль анимации: слайд
• Направление анимации: влево
• Задержка анимации: 100 мс
• Интенсивность анимации: 3%

Добавить текстовый модуль №1 в столбец 4

Добавить содержимое

Прямо под модулем изображения добавьте заголовок «Текстовый модуль» с некоторым содержимым на выбор.

Цвет фона по умолчанию

Измените цвет фона этого модуля.

• Цвет фона: # 0f0f0f

Цвет фона при наведении

И используйте другой цвет фона при наведении.

• Цвет фона: # 593aff

Настройки текста заголовка

Продолжите, изменив настройки текста заголовка, чтобы они соответствовали целевой странице UI Kit.

• Шрифт заголовка 4: Muli
• Толщина шрифта заголовка 4: светлый
• Цвет текста заголовка 4: #ffffff
• Размер текста заголовка 4: 23 пикселя (компьютер и планшет), 18 пикселей (телефон)

Интервал по умолчанию

Затем добавьте несколько значений пользовательского интервала.

• Верхний отступ: 50 пикселей
• Отступ слева: 30 пикселей
• Отступ справа: 30 пикселей

Расстояние при наведении

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

• Нижняя граница: 50 пикселей
• Верхний отступ: 20 пикселей
• Нижний отступ: 20 пикселей

Добавить текстовый модуль №2 в столбец 4

Добавить содержимое

Второй и последний модуль, который нам понадобится в столбце 4, - это текстовый модуль описания. Введите какой-нибудь контент по выбору.

Фоновый цвет

Затем измените цвет фона.

• Цвет фона: # 0f0f0f

Настройки текста

И измените настройки текста.

• Цвет текста: rgba (255,255,255,0,5)
• Высота текстовой строки: 2.2em

Интервал

Чтобы создать чистый внешний вид, добавьте в этот модуль несколько пользовательских отступов.

• Нижний отступ: 50 пикселей
• Отступ слева: 30 пикселей
• Отступ справа: 30 пикселей

Граница

И последнее, но не менее важное: добавьте «20 пикселей» к двум нижним углам модуля.

Клонировать все модули в столбце 4 дважды и разместить в оставшихся столбцах

Изменить изображение и контент

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

Клонировать строку столько раз, сколько нужно (в соответствии с количеством элементов списка)

Мы закончили наш первый пункт списка! Теперь вы можете клонировать эту строку столько раз, сколько захотите, в зависимости от количества функций и / или продуктов, которые вы хотите продемонстрировать.

Изменить содержимое клона

Для каждого из дубликатов вам необходимо изменить содержимое.

Найти и заменить цвет

Вы также можете использовать функцию Divi «Найти и заменить», чтобы быстро изменить цветовую палитру элемента списка.

Изменить цвет фона при наведении

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

• Цвет фона: # 593aff

Изменить фоновое изображение

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

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

Этот вариант использования является частью нашего предложения «Черная пятница», в рамках которого мы делимся 6 БЕСПЛАТНЫМИ целевыми страницами ограниченного выпуска с клиентами и пожизненными участниками «Черной пятницы». Присоединяясь к нашему уполномоченному сообществу в эти дни и став его участником, вы получите:

• СКИДКА 25% НА ВСЕ
• Все 6 целевых страниц бесплатно
• Доступ к нашим потрясающим темам и плагинам
• Бонусные призы

Воспользуйтесь возможностью и станьте участником уже сегодня!