Как создать красивую мобильную социальную подписку с помощью Divi (бесплатная загрузка!)

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

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

Давайте приступим к делу!

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

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

Пример 1

Пример 2

Начать воссоздание примера №1

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

Фоновый цвет

Начнем с первого примера! Создайте новую страницу или откройте существующую и добавьте к ней обычный раздел. Откройте настройки раздела и добавьте белый цвет фона.

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

Интервал

Затем перейдите к настройкам интервала раздела и внесите некоторые изменения. Вы заметите, что значения различаются в зависимости от размера экрана. Мы сохраняем тот же тонкий дизайн на экранах разных размеров, изменяя левые и правые отступы по мере продвижения.

• Верхний отступ: 50 пикселей (компьютер и планшет), 0 пикселей (телефон)
• Нижний отступ: 50 пикселей (компьютер и планшет), 0 пикселей (телефон)
• Левое заполнение: 36vw (рабочий стол), 23vw (планшет), 0vw (телефон)
• Правая прокладка: 36vw (рабочий стол), 23vw (планшет), 0vw (телефон)

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

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

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

Фоновый цвет

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

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

Размеры

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

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

Коробка Тень

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

• Сила размытия тени коробки: 80 пикселей
• Цвет тени: rgba (0,0,0,0.3)

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

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

Пора начинать добавлять модули! Начните с модуля изображения с соотношением сторон 1: 1. Например, изображение, которое мы используем, имеет ширину и высоту 500 пикселей.

Выравнивание

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

• Выравнивание изображения: по центру

Размеры

Мы уменьшаем размер изображения, изменяя ширину в настройках размера.

• Ширина: 33%
• Выравнивание модуля: по центру

Граница

Мы также превращаем изображение в круг, добавляя «50vw» к каждому углу в настройках границы. Вдобавок мы добавим белую рамку, используя следующие настройки:

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

Коробка Тень

И последнее, но не менее важное: добавьте тень блока, чтобы создать объемный дизайн.

• Положение прямоугольной тени по вертикали: 40 пикселей
• Сила размытия тени коробки: 100 пикселей
• Цвет тени: # 000000

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

Добавить контент H3

Переходим к следующему модулю! Добавьте текстовый модуль прямо под модулем изображения с некоторым содержанием H3.

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

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

• Шрифт заголовка 3: Open Sans
• Толщина шрифта заголовка 3: полужирный
• Выравнивание текста заголовка 3: по центру
• Цвет текста заголовка 3: #ffffff
• Высота строки заголовка 3: 0,1 мкм

Интервал

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

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

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

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

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

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

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

• Шрифт текста: Open Sans
• Толщина шрифта текста: Обычный
• Цвет текста: # 919191
• Ориентация текста: по центру

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

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

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

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

Зайдите в настройки текста и внесите некоторые изменения.

• Шрифт текста: Open Sans
• Цвет текста: # b7b7b7
• Высота текстовой строки: 1,6 мкм
• Ориентация текста: по центру

Размеры

Также измените ширину модуля.

• Ширина: 68%
• Выравнивание модуля: по центру

Интервал

И добавьте немного верхнего и нижнего поля, чтобы создать дополнительное пространство.

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

Добавить модуль кнопок

Добавить копию

Следующий и последний модуль, который нам нужен в этой строке, - это кнопочный модуль. Добавьте копию.

Выравнивание

Затем перейдите на вкладку дизайна и измените выравнивание кнопок, чтобы оно соответствовало предыдущим модулям.

• Расположение кнопок: по центру

Настройки кнопок

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

• Использовать пользовательские стили для кнопки: Да
• Размер текста кнопки: 13 пикселей
• Цвет текста кнопки: #ffffff
• Цвет 1: # ad32ff
• Цвет 2: # 32baff
• Направление градиента: 96 градусов
• Ширина границы кнопки: 0 пикселей
• Радиус границы кнопки: 30 пикселей
• Шрифт кнопки: Open Sans
• Толщина шрифта: Ультра полужирный
• Стиль шрифта: прописные

Интервал

Затем добавьте настраиваемые поля и отступы.

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

Коробка Тень

И завершите дизайн кнопки, добавив тень блока.

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

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

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

К следующему ряду! Используйте следующую структуру столбцов:

Градиентный фон

Еще не добавляя никаких модулей, откройте настройки строки и добавьте градиентный фон:

• Цвет 1: # 1e1e1e
• Цвет 2: # 3f3f3f
• Тип градиента: радиальный
• Радиальное направление: вверху слева
• Стартовая позиция: 26%
• Поместите градиент над фоновым изображением: Да

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

Сохраните следующее изображение на свой компьютер и используйте его в качестве фонового изображения для строки:

Наряду со следующими настройками фона:

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

Размеры

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

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

Интервал

Затем добавьте пользовательские отступы.

• Верхний отступ: 84 пикселя
• Нижний отступ: 84 пикселей
• Левое заполнение: 4vw (рабочий стол), 7vw (планшет), 14vw (телефон)
• Правая прокладка: 4vw (рабочий стол), 7vw (планшет), 14vw (телефон)

Коробка Тень

Вместе с тенью коробки.

• Сила размытия тени коробки: 80 пикселей
• Цвет тени: rgba (0,0,0,0.3)

Отображать

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

display: flex;

Добавить модуль отслеживания социальных сетей в столбец 1

Выравнивание

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

• Выравнивание предмета: по центру

Добавить новую социальную сеть

Продолжите, добавив новую социальную сеть. В этом примере мы используем Dribbble.

Ссылка

Добавьте ссылку в свой профиль Dribbble.

Градиентный фон

Затем измените фон градиента, используя следующие настройки:

• Цвет 1: # ea0061
• Цвет 2: # ea4c8d
• Направление градиента: 136 градусов

Интервал

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

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

Граница

Мы также превращаем модуль в круг, добавляя «20vw» к каждому углу в настройках границы.

Коробка Тень

И последнее, но не менее важное: добавьте тень блока.

• Положение прямоугольной тени по вертикали: 20 пикселей
• Сила размытия тени коробки: 80 пикселей
• Цвет тени: # 000000

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

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

Добавьте текстовый модуль к следующему первому столбцу.

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

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

• Шрифт текста: Open Sans
• Толщина шрифта текста: Ультра полужирный
• Цвет текста: #ffffff
• Ориентация текста: по центру

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

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

Добавьте еще один под предыдущим.

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

Измените также текстовые настройки этого модуля.

• Шрифт текста: Open Sans
• Цвет текста: # 898989
• Размер текста: 11 пикселей
• Ориентация текста: по центру

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

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

Изменить социальные сети

Конечно, вам нужно будет сменить социальные сети.

Изменить ссылки в социальных сетях

Вместе со ссылками.

Изменение фона градиента социальных сетей

И сетевые градиентные фоны.

• Цвет 1: # 0043ff
• Цвет 2: # 00aced

• Цвет 1: # ea2c59
• Цвет 2: # fed270

Начать воссоздание примера №2

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

Фоновый цвет

Переходим к следующему примеру! Добавьте новый раздел с белым фоном.

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

Интервал

Затем добавьте пользовательские отступы.

• Верхний отступ: 50 пикселей (компьютер и планшет), 0 пикселей (телефон)
• Нижний отступ: 50 пикселей (компьютер и планшет), 0 пикселей (телефон)
• Левое заполнение: 36vw (рабочий стол), 23vw (планшет), 4vw (телефон)
• Правая прокладка: 36vw (рабочий стол), 23vw (планшет), 4vw (телефон)

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

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

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

Размеры

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

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

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

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

Пора начинать добавлять модули! Первый модуль, который нам нужен, - это модуль изображения с соотношением сторон 1: 1.

Выравнивание

Измените выравнивание изображения.

• Выравнивание изображения: по центру

Размеры

Измените также ширину.

• Ширина: 33%
• Выравнивание модуля: по центру

Граница

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

Коробка Тень

Завершите дизайн изображения, добавив легкую тень блока.

• Box Shadow Blur Strength: 51px.
• Цвет тени: rgba (0,0,0,0.37)

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

Добавить контент H3

Следующий необходимый нам модуль - это текстовый модуль. Добавьте контент H3 по выбору.

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

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

• Шрифт заголовка 3: Open Sans
• Толщина шрифта заголовка 3: Ультра полужирный
• Стиль шрифта заголовка 3: прописные
• Выравнивание текста заголовка 3: по центру
• Цвет текста заголовка 3: # 000000
• Интервал между буквами заголовка 3: -1px
• Высота строки заголовка 3: 0.9em

Интервал

Затем добавьте верхнее поле.

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

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

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

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

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

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

• Шрифт текста: Open Sans
• Цвет текста: # 919191
• Ориентация текста: по центру

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

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

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

Фоновый цвет

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

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

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

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

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

Выравнивание

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

• Выравнивание ряда: по левому краю

Размеры

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

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

Интервал

Мы также добавляем некоторые пользовательские отступы в строку и ее столбцы.

• Верхний отступ: 0 пикселей
• Нижний отступ: 0 пикселей
• Отступ сверху столбца 1: 20 пикселей.
• Отступ снизу столбца 1: 20 пикселей
• Отступ сверху столбца 2: 20 пикселей.
• Отступ нижнего столбца 2: 20 пикселей

Граница

Добавьте «14 пикселей» в верхний левый, верхний правый и нижний левый углы.

Коробка Тень

И завершите дизайн ряда, добавив тонкую тень блока.

• Сила размытия тени коробки: 80 пикселей
• Цвет тени: rgba (0,0,0,0.17)

Добавить модуль отслеживания социальных сетей в столбец 1

Выравнивание

В первом столбце нам понадобится модуль «Отслеживание в социальных сетях». Измените выравнивание элемента.

• Выравнивание предмета: по центру

Добавить новую социальную сеть

Затем добавьте новую социальную сеть. Мы используем Dribbble.

Ссылка

Добавьте ссылку в свое портфолио Dribbble.

Градиентный фон

И измените градиентный фон социальной сети.

• Цвет 1: # ea0061
• Цвет 2: # ea4c8d
• Направление градиента: 136 градусов

Интервал

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

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

Граница

И добавьте «10 пикселей» в каждый угол социальной сети.

Коробка Тень

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

• Сила размытия тени коробки: 80 пикселей
• Цвет тени: rgba (0,0,0,0.3)

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

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

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

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

Соответственно измените настройки текста:

• Шрифт текста: Open Sans
• Толщина шрифта текста: Ультра полужирный
• Цвет текста: # 000000
• Ориентация текста: по центру

Интервал

Создайте пространство, добавив затем верхнее поле.

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

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

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

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

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

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

• Шрифт текста: Open Sans
• Цвет текста: # 898989
• Размер текста: 11 пикселей
• Ориентация текста: по центру

Clone Row # 2

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

Замена модулей

Затем поменяйте модули местами.

Добавить цвет фона столбца 1

Затем добавьте в повторяющуюся строку цвет фона столбца 1.

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

Удалить цвет фона столбца 2

Затем удалите цвет фона столбца 2.

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

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

• Выравнивание строк: вправо

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

Наряду с нестандартной шириной в настройках размеров.

• Специальная ширина: 66,99%

Изменить границу строки

Мы также следим за тем, чтобы «14px» было присвоено только верхнему правому и нижнему правому углам.

Изменить социальную сеть подписки

Продолжите, сменив социальную сеть.

Изменить фон градиента социальной сети

Вместе с градиентным фоном.

• Цвет 1: # 0043ff
• Цвет 2: # 00aced

Клонировать обе строки подписки в социальных сетях

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

Изменить границу дубликата №1

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

Измените социальную сеть подписки на дубликат №1

Вместе с социальной сетью.

Изменить градиентный фон дубликата №1

И градиентный фон.

• Цвет 1: # ea2c59
• Цвет 2: # fed270

Изменить границу дубликата №2

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

Измените социальную сеть подписки на дубликат №2

Вместе с социальной сетью.

Изменить градиентный фон дубликата №2

И, опять же, градиентный фон, присвоенный социальной сети.

• Цвет 1: # 00306b
• Цвет 2: # 007bb6

Загрузите The Mobile Social Follow Bios БЕСПЛАТНО

Чтобы получить доступ к бесплатным разделам подписки на мобильные социальные сети, вам сначала нужно загрузить его, нажав кнопку ниже. Чтобы получить доступ к загрузке, вам необходимо подписаться на наш список рассылки Divi Daily, используя форму ниже. Как новый подписчик, вы будете получать еще больше добра Divi и бесплатный пакет Divi Layout каждый понедельник! Если вы уже есть в списке, просто введите ниже свой адрес электронной почты и нажмите «Загрузить». Вы не будете «повторно подписаны» или будете получать дополнительные электронные письма.

Скачать файлы

Скачать бесплатно

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

СКАЧАТЬ

Вы успешно подписались. Пожалуйста, проверьте свой адрес электронной почты, чтобы подтвердить подписку и получить доступ к бесплатным еженедельным пакетам макетов Divi!

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

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

Пример 1

Пример 2

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

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