Как добавить социальные иконки в основное меню Divi

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

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

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

Рабочий стол

Мобильный

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

В этой статье мы будем использовать макет Tennis Club и бесплатные заголовки / нижние колонтитулы. Вы можете загрузить пакет макетов из своего конструктора Divi, а пакет верхнего / нижнего колонтитула - из нашего блога. Когда вы его загрузите, файлы будут в виде архива .zip . Убедитесь, что вы распаковали их, чтобы у вас был файл .json для загрузки в Divi.

Теперь зайдите в панель управления WordPress и найдите Divi Theme Builder в Divi - Theme Builder . Щелкните значок стрелки вверх и вниз в правом верхнем углу страницы. Откроется модальное окно « Переносимость» , выберите вкладку « Импорт », найдите файл .json для загруженного верхнего / нижнего колонтитула и нажмите « Импортировать шаблоны Divi Theme Builder» .

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

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

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

Добавление значков социальных сетей в основную строку меню

Прежде всего, давайте изменим структуру строки / столбца. Мы хотим найти строку в разделе №2 (нижний со ссылками Home / Contact ).

Мы выбираем структуру из двух столбцов для этого руководства, но это то, что лучше всего подходит для вашего сайта. После того, как вы выбрали это, перейдите в настройки Row и перейдите на вкладку Design . Найдите меню « Размер» и включите параметр « Использовать нестандартную ширину желоба» . Установите для параметра Ширина желоба значение 1. Вы можете ввести число или использовать для этого ползунок.

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

Затем перейдите на вкладку « Дополнительно ». Найдите область Custom CSS и щелкните поле Main Element . Внутри этого поля вы захотите добавить следующий CSS.

width:80%;

или

width:80%!important;

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

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

Затем повторите этот шаг для второго столбца. Только на этот раз установите значение по умолчанию на 20% и оставьте мобильное значение на 100% .

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

Добавить модуль подписки в социальных сетях

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

Независимо от заголовка, который вы используете, значки социальных сетей по умолчанию, скорее всего, не будут соответствовать вашему стилю. И они не будут правильно расположены. Следующим шагом будет их правильное оформление и размещение. В настройках модуля Social Media Follow перейдите в Design, а затем в Alignment . Выберите, где вы хотите разместить модуль.

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

Далее следует прокрутка вниз до значка меню. Выберите нужный цвет значка. Это f для Facebook, птичка для Twitter, камера для Instagram. Это, например, не синий фон.

Далее идет интервал. На самом деле главное, что нужно отрегулировать, - это верхняя граница. Мы собираемся применить верхнее поле 1.5 vw, чтобы оно располагалось по центру текста меню. Если вы хотите, чтобы это было более или менее для мобильных устройств, вы также можете настроить это.

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

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

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

Затем прокрутите вниз до записи « Граница» на вкладке « Дизайн », и в ней вы найдете ширину границы . Установите это значение на 3 пикселя, а затем выберите цвет границы, который выделяется на фоне основного меню Divi.

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

Затем щелкните правой кнопкой мыши другие сети, которые вы хотите стилизовать, и выберите « Вставить стили элементов» .

Вот и все! Обязательно нажмите кнопку « Сохранить» в правом нижнем углу экрана, чтобы сохранить общий макет. Затем вы можете выйти из экрана редактирования в правом верхнем углу на X.

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

Окончательные результаты

И вот на что должны напоминать ваши окончательные результаты.

Рабочий стол

Мобильный

Заключение

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

Что вы думаете о значках социальных сетей в главном меню? Где вы их обычно размещаете?