Как создать табло игры с помощью пакета макетов футбольного клуба Divi

Каждую неделю мы предоставляем вам новые бесплатные пакеты макетов Divi, которые вы можете использовать в своем следующем проекте. Для одного из пакетов макетов мы также расскажем о сценарии использования, который поможет вам вывести свой веб-сайт на новый уровень. На этой неделе, в рамках нашей текущей инициативы по дизайну Divi, мы собираемся показать вам, как создать классное игровое табло с помощью пакета Divi Soccer Club Layout Pack. Мы создадим это табло с результатами последней игры, используя только встроенные функции Divi, так что давайте приступим к делу!

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

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

Загрузите макет пакета макетов футбольного клуба

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

Добавить новый раздел

Затем добавьте новый раздел прямо здесь:

Фоновый цвет

Откройте настройки раздела и затем добавьте цвет фона.

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

Интервал

Поиграйте также со значениями интервалов.

• Верхний отступ: 55 пикселей
• Нижний отступ: 140 пикселей

Клонировать строку и разместить в разделе

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

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

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

Изменить текст

Измените копию текстового модуля в строке, чтобы она соответствовала новому разделу.

Добавить строку №2

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

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

Фоновый цвет

Откройте настройки строки и измените цвет фона.

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

Цвет фона столбца 1

Также добавьте цвет фона столбца 1.

• Цвет фона столбца 1: #fcfcfc

Цвет фона столбца 3

Повторите тот же шаг для столбца 3.

• Цвет фона столбца 3: #fcfcfc

Размеры

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

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

Интервал

Затем удалите все отступы по умолчанию.

• Верхний отступ: 0 пикселей
• Нижний отступ: 0 пикселей

Граница

Чтобы соответствовать пакету макетов, добавьте к строке верхнюю и нижнюю границу.

• Ширина нижней границы: 8 пикселей
• Цвет нижней границы: # 00aaff

Коробка Тень

Наконец, добавьте легкую тень блока, чтобы создать глубину на странице.

• Положение прямоугольной тени по вертикали: 20 пикселей
• Сила размытия тени коробки: 80 пикселей
• Сила распространения тени коробки: -20 пикселей
• Цвет тени: rgba (0,0,0,0.56)

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

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

Пора начинать добавлять модули! Начните с текстового модуля в столбце 1 и добавьте немного содержимого.

Фоновый цвет

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

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

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

Продолжайте поиграть с настройками текста.

• Шрифт текста: Squada One
• Стиль шрифта текста: прописные.
• Цвет текста: # 333333
• Размер текста: 20 пикселей
• Ориентация текста: по центру

Интервал

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

• Верхний отступ: 10 пикселей
• Нижний отступ: 10 пикселей
• Отступ слева: 10 пикселей
• Отступ справа: 10 пикселей

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

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

Добавьте новый текстовый модуль прямо под предыдущим текстовым модулем в столбце 1. После этого добавьте содержимое в поле содержимого.

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

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

• Шрифт текста: Open Sans
• Толщина шрифта текста: полужирный
• Цвет текста: # 333333
• Размер текста: 18 пикселей
• Ориентация текста: по центру

Интервал

Поиграйте также со значениями интервалов.

• Верхний отступ: 20 пикселей
• Нижний отступ: 20 пикселей

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

Загрузить логотип клуба

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

Размеры

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

• Ширина: 45% (рабочий стол), 16% (планшет), 28% (телефон)
• Выравнивание модуля: по центру

Интервал

Продолжите, добавив пользовательские значения полей в настройках интервалов.

• Верхнее поле: 20 пикселей
• Нижнее поле: 50 пикселей

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

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

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

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

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

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

Во втором столбце мы разместим дату и конечный результат. Начните с добавления текстового модуля с датой.

Фоновый цвет

Затем добавьте цвет фона, соответствующий пакету макетов.

• Цвет фона: # 00aaff

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

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

• Шрифт текста: Squada One
• Стиль шрифта текста: прописные.
• Цвет текста: #FFFFFF
• Размер текста: 42 пикс.
• Ориентация текста: по центру

Интервал

Затем перейдите к настройкам интервалов и дайте модулю больше отступов.

• Верхний отступ: 30 пикселей
• Нижний отступ: 30 пикселей

Видимость

Наконец, отключите модуль на телефоне и планшете.

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

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

Второй текстовый модуль в столбце 2 должен содержать счет игры.

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

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

• Шрифт текста: Squada One
• Цвет текста: # 333333
• Размер текста: 150 пикселей
• Высота текстовой строки: 1em
• Ориентация текста: по центру

Интервал

Продолжайте изменять значения интервалов.

• Верхнее поле: 40 пикселей (рабочий стол), 20 пикселей (планшет и телефон)
• Нижнее поле: 20 пикселей (планшет и телефон)
• Отступ слева: 10 пикселей
• Отступ справа: 10 пикселей

Видимость

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

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

Клонируйте оба модуля, которые вы можете найти в столбце 2, и поместите дубликаты в первый столбец над другими модулями.

Изменить видимость

Мы используем оба этих модуля, чтобы улучшить результат на планшете и телефоне. Чтобы эти модули отображались только на экранах меньшего размера, отключите их на рабочем столе.

Добавить строку №3

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

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

Фоновый цвет

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

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

Цвет фона столбца 2

Также измените цвет фона столбца 2.

• Цвет фона столбца 2: # f7f7f7

Размеры

Затем удалите все пробелы между столбцами в настройках размера.

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

Интервал

Также добавьте собственные значения интервала.

• Верхний отступ: 0 пикселей
• Нижний отступ: 0 пикселей
• Отступ нижнего столбца 1: 100 пикселей
• Колонка 1, отступ справа: 10 пикселей
• Колонка 3, отступ слева: 10 пикселей

Граница

Затем добавьте к строке тонкую нижнюю границу.

• Ширина нижней границы: 8 пикселей
• Цвет нижней границы: # 00aaff

Коробка Тень

Чтобы придать странице глубину, добавьте тень блока строки.

• Положение прямоугольной тени по вертикали: 20 пикселей
• Сила размытия тени коробки: 80 пикселей
• Сила распространения тени коробки: -20 пикселей
• Цвет тени: rgba (0,0,0,0.56)

Видимость

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

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

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

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

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

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

• Шрифт текста: Squada One
• Стиль шрифта текста: прописные.
• Цвет текста: # 333333
• Размер текста: 27 пикселей
• Ориентация текста: вправо

Интервал

Поиграйте также со значениями интервалов.

• Верхнее поле: 100 пикселей
• Нижний отступ: 20 пикселей

Граница

Продолжите, добавив тонкую нижнюю границу.

• Ширина нижней границы: 1 пикс.
• Цвет нижней границы: # 333333

Клонировать текстовый модуль дважды

Изменить интервал между дубликатами

Клонируйте только что созданный текстовый модуль дважды и измените значения интервалов для обоих дубликатов.

• Верхнее поле: 200 пикселей
• Нижний отступ: 20 пикселей

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

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

Клонируйте первый текстовый модуль в столбце 1 еще раз и поместите дубликат в столбец 3. Затем измените ориентацию текста.

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

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

Также необходимо увеличить верхнюю маржу.

• Верхнее поле: 200 пикселей

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

Теперь вы можете снова клонировать этот текстовый модуль.

Добавить строку №4

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

Пора добавить последнюю строку! Выберите следующую структуру столбцов:

Фоновый цвет

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

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

Размеры

Затем удалите все пространство между столбцами.

• Использовать нестандартную ширину желоба: Да
• Ширина желоба: 1

Интервал

Добавьте дополнительные верхние и нижние отступы.

• Верхний отступ: 100 пикселей
• Нижний отступ: 100 пикселей

Граница

Нам также понадобится тонкая нижняя граница для этой строки.

• Ширина нижней границы: 8 пикселей
• Цвет нижней границы: # 00aaff

Коробка Тень

Затем добавьте к строке тень блока.

• Положение прямоугольной тени по вертикали: 20 пикселей
• Сила размытия тени коробки: 80 пикселей
• Сила распространения тени коробки: -20 пикселей
• Цвет тени: rgba (0,0,0,0.56)

Видимость

Наконец, скройте строку на рабочем столе.

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

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

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

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

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

• Шрифт текста: Squada One
• Стиль шрифта текста: прописные.
• Размер текста: 27 пикселей
• Ориентация текста: вправо

Интервал

Далее используйте настраиваемые значения интервала.

• Правое поле: 150 пикселей
• Нижний отступ: 20 пикселей

Граница

Мы также добавляем тонкую нижнюю границу.

• Ширина нижней границы: 1 пикс.
• Цвет нижней границы: # 333333

Клонировать текстовый модуль

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

Клонируйте созданный вами текстовый модуль и измените ориентацию текста дубликата.

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

Интервал

Также измените значения интервала.

• Верхнее поле: 200 пикселей
• Левое поле: 150 пикселей

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

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

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

Теперь, когда мы прошли все шаги, давайте в последний раз посмотрим на результат на экранах разных размеров.

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

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