Загрузите уникальный дизайн социальных сетей с 5 цветовыми палитрами для Divi

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

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

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

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

Давайте начнем с рассмотрения различных вариантов этого дизайна и представления на экранах разных размеров.

Скачайте The Social Follow Design БЕСПЛАТНО

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

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

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

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

СКАЧАТЬ

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

Цветовые палитры

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

Палитра # 1

• Цвет # 1: # D09CF1
• Цвет # 2: # 00e2df

Палитра # 2

• Цвет # 1: # ffa0a0
• Цвет # 2: # 10007f

Палитра # 3

• Цвет # 1: # ff3273
• Цвет # 2: # 050042.

Палитра # 4

• Цвет # 1: # f954ee
• Цвет # 2: # 00aeff

Палитра # 5

• Цвет # 1: # ffca3a
• Цвет # 2: # ff6005

Воссоздайте дизайн социальной подписки с нуля

Добавить раздел # 1

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

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

• Цвет 1: цвет № 1 (найти в цветовой палитре)
• Цвет 2: Цвет № 2 (Найдите в цветовой палитре)
• Тип градиента: радиальный
• Радиальное направление: центр
• Стартовая позиция: 6%

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

Затем загрузите фоновый узор, который вы можете найти, перейдя в загруженную папку> Фоновый узор . Совместите фоновый узор со следующими настройками фона:

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

Верхний разделитель

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

• Стиль разделителя: найти в списке
• Цвет разделителя: rgba (72,0,79,0.08)
• Высота разделителя: 500 пикселей
• Переворот разделителя: вертикальный

Нижний разделитель

Также добавьте нижний разделитель.

• Стиль разделителя: найти в списке
• Цвет разделителя: #FFFFFF
• Высота разделителя: 500 пикселей

Интервал

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

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

Анимация

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

• Стиль анимации: слайд
• Направление анимации: вниз
• Интенсивность анимации: 2%
• Начальная непрозрачность анимации: 100%

Добавить ряд

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

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

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

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

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

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

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

• Размер текста: 16 пикселей
• Высота текстовой строки: 2em
• Ориентация текста: по центру
• Цвет текста: светлый

Настройки текста H1 / H2

Измените также настройки заголовка, который вы выбрали.

• Шрифт заголовка: Рубик
• Стиль шрифта заголовка: прописные.
• Размер текста заголовка: 100 пикселей (рабочий стол), 42 пикселя (планшет), 32 пикселя (телефон).
• Высота строки заголовка: 1,2 м

Размеры

Затем уменьшите ширину модуля.

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

Добавить раздел # 2

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

Добавить ряд

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

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

Размеры

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

• Сделать эту строку полной шириной: Да

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

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

Пора начинать добавлять модули! Начните с добавления модуля изображения во второй столбец. Загрузите макет, соответствующий выбранной вами цветовой палитре. Вы можете найти все разновидности мокапов, перейдя в загруженную папку> Мокапы .

Размеры

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

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

Интервал

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

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

Добавить модуль Blurb в столбец 3

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

Теперь мы можем добавить все социальные сети! Для их создания мы используем модули Blurb. Идите вперед и добавьте первый модуль Blurb в третий столбец и измените содержимое.

Добавить ссылку

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

Выберите значок

Также выберите свой значок.

Фоновый цвет

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

• Цвет фона: rgba (255,255,255,0.79)

Настройки значков

Затем измените настройки значка. Здесь мы используем один из официальных цветов Instagram.

• Цвет значка: # fb3958
• Расположение значков: слева

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

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

• Плотность шрифта заголовка: полужирный
• Цвет текста заголовка: # fb3958
• Высота строки заголовка: 1,7 мкм

Интервал

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

• Верхнее поле: -170 пикселей (рабочий стол), -800 (планшет), -700 (телефон)
• Левое поле: -60% (компьютер), 0% (планшет и телефон)
• Правое поле: 60% (ПК), 0% (планшет и телефон)
• Верхний отступ: 20 пикселей
• Нижний отступ: 20 пикселей
• Отступ слева: 50 пикселей
• Отступ справа: 50 пикселей

Граница

Мы также поиграем с настройками границ.

• Верхняя левая граница: 20 пикселей
• Нижняя левая граница: 20 пикселей
• Ширина правой границы: 5 пикселей
• Цвет правой границы: # fb3958

Коробка Тень

Добавление тени блока придаст элементу дизайна некоторую глубину.

• Сила размытия тени коробки: 80 пикселей
• Сила распространения тени коробки: -11 пикселей

Анимация

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

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

Клонировать модуль Blurb три раза

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

Удалить отрицательную верхнюю маржу дубликатов

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

Уникальные настройки модуля Blurb

Рекламный модуль № 2

Изменить копию

Откройте второй модуль Blurb в третьем столбце и измените содержимое.

Выберите значок

Также выберите другой значок.

Настройки значков

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

• Цвет значка: # 3b5998

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

Используйте тот же цвет для цвета текста заголовка.

• Цвет текста заголовка: # 3b5998

Интервал

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

• Левое поле: -170% (компьютер), 0% (планшет и телефон)
• Правая маржа: 170% (компьютер), 0% (планшет и телефон)

Граница

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

• Правый верхний угол: 20 пикселей
• Нижний правый угол: 20 пикселей
• Ширина левой границы: 5 пикселей
• Цвет левой границы: # 3b5998

Анимация

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

• Направление анимации: вправо
• Задержка анимации: 100 мс

Рекламный модуль № 3

Изменить копию

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

Выберите значок

Далее выберите другой значок.

Настройки значков

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

• Цвет значка: # 1da1f2

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

Используйте тот же цвет для цвета текста заголовка.

• Цвет текста заголовка: # 1da1f2

Интервал

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

• Левое поле: -80% (компьютер), 0% (планшет и телефон)
• Правое поле: 80% (компьютер), 0% (планшет и телефон)

Граница

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

• Цвет правой границы: # 1da1f2

Анимация

Наконец, добавьте небольшую задержку к уже существующей анимации.

• Задержка анимации: 200 мс

Рекламный модуль №4

Изменить копию

Для последнего модуля Blurb мы начинаем с изменения содержимого.

Выберите значок

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

Настройки значков

Цвет значка должен соответствовать цвету отображаемой социальной сети.

• Цвет значка: # 0077B5

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

Используйте тот же цвет для текста заголовка.

• Цвет текста заголовка: # 0077B5

Интервал

Сдвиньте модуль Blurb влево, используя также другие настройки интервала.

• Левое поле: -180% (компьютер), 0% (планшет и телефон)
• Правая маржа: 180% (компьютер), 0% (планшет и телефон)

Граница

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

• Правый верхний угол: 20 пикселей
• Нижний правый угол: 20 пикселей
• Ширина левой границы: 5 пикселей
• Цвет левой границы: # 0077B5

Анимация

И последнее, но не менее важное: добавьте другое направление анимации и некоторую задержку анимации в этот модуль Blurb.

• Направление анимации: вправо
• Задержка анимации: 300 мс

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

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

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

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