Как добавить социальные иконки в основное меню Divi
Опубликовано: 2017-06-27В сегодняшнем руководстве по Divi мы покажем вам, как добавить значки социальных сетей в главное меню вашего веб-сайта Divi. Пошагово следуя этому руководству, вы сможете добавлять значки социальных сетей на любой созданный вами веб-сайт - будь то для себя или для клиента.
У нас уже есть возможность добавлять значки социальных сетей непосредственно в верхний и нижний колонтитулы веб-сайта с помощью настройщика темы Divi. Но если это не то, что вы ищете, это руководство может вам помочь, потому что во многих случаях; люди предпочитают, чтобы значки социальных сетей находились в основном меню, а не в верхнем или нижнем колонтитуле своего веб-сайта.
Мы покажем вам, как именно их можно добавлять, как настраивать и как открывать в новой вкладке. Это все, что вам действительно нужно знать, чтобы значки социальных сетей в основном меню могли повысить ценность всего вашего веб-сайта.
Зачем добавлять социальные иконки в главное меню?
Веб-сайты и каналы социальных сетей во многих случаях дополняют друг друга. Не весь контент, которым делятся на веб-сайте, появляется в каналах социальных сетей и наоборот. Вот почему продвижение вашего сайта в ваших социальных сетях и ваших социальных сетях на вашем сайте не редкость и откровенно; очень поощряется.
Вы хотите, чтобы люди взаимодействовали с вашей компанией или брендом наиболее привычным для них способом. Ваш веб-сайт для них обычно « неизведанная территория ». Таким образом, барьер для связи с вами напрямую через ваш веб-сайт может быть больше, чем для каналов социальных сетей. Большинство людей, которые посещают вашу страницу Facebook или Twitter, уже интегрированы в платформы, и ощущение комфорта может положительно повлиять на их поведение.
Вот почему в целом очень рекомендуется размещать значки социальных сетей на своем веб-сайте. Но зачем делиться ими явно в главном меню? Мы перечислили две основные причины.
Легко найти / меню следует за посетителем во время его посещения
Когда вы добавляете значки социальных сетей на свой сайт, вы хотите, чтобы они были как можно более заметными. Людям не нужно прилагать усилия, чтобы найти значки социальных сетей на вашем веб-сайте. Вот где размещение значков социальных сетей в главном меню может иметь значение. Главное меню следует за человеком на протяжении всего его пребывания на вашем сайте. Не нужно искать значки, значки приходят к вам. Единственное, что нужно сделать человеку, это щелкнуть мышью, и он доберется туда.
Главное меню следует за человеком на протяжении всего его пребывания на вашем сайте. Не нужно искать значки, значки приходят к вам. Единственное, что нужно сделать посетителю, - это щелкнуть по ним, и он попадет туда.
Запуск действия
Как упоминалось ранее; каналы социальных сетей и веб-сайты дополняют друг друга. Они работают вместе и обычно преследуют одни и те же цели, такие как информирование потенциальных клиентов и привлечение их к предлагаемым услугам или продуктам. Чем больше они сталкиваются с ними, тем больше у них пробуждается любопытство.
Чтобы поддерживать связь между веб-сайтом и каналами социальных сетей, полезно как можно чаще сталкивать посетителей с социальными значками. Чем больше они сталкиваются с ними, тем больше вероятность того, что у них возникнет любопытство, и тем больше вероятность, что они в конечном итоге нажмут на них.
Как добавить социальные иконки в основное меню Divi
Подпишитесь на наш канал Youtube
Установить Font Awesome
Прежде всего, нам нужно установить Font Awesome на наш сайт WordPress. Мы собираемся сделать это, добавив немного кода CSS в параметры темы Divi.
Откройте свой веб-сайт WordPress, перейдите в Divi> Параметры темы> Интеграция и вставьте следующий код в раздел <head>:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" />
Font awesome теперь должен быть добавлен к шрифтам, которые используются на вашем веб-сайте. Теперь вы можете добавить эти значки в свое главное меню, следуя шаг за шагом следующей части нашей публикации.
Начать создание основного меню
Скорее всего, вы уже создали собственное настраиваемое главное меню, в котором перечислили все страницы, которые должны отображаться в основном меню вашего веб-сайта. Если вы еще этого не сделали, перейдите на страницу «Меню» в разделе «Внешний вид» и создайте новое меню.
Затем назовите меню, добавьте страницы, которые должны отображаться в основном меню, и выберите опцию «Основное меню» ниже.
Добавить социальные иконки
Двигаясь дальше, мы хотим добавить значки социальных сетей. При создании основного меню вы можете выбрать, где будут отображаться значки социальных сетей. В большинстве случаев они появляются сразу после страниц, но вы также можете поместить их первыми. Доступны значки социальных сетей для всех важных и самых популярных веб-сайтов; из Facebook в Twitter, Instagram, LinkedIn и другие.
Начните с открытия следующей ссылки на веб-сайте Font Awesome. Нам понадобится этот веб-сайт для следующей части этого поста, где мы будем добавлять значки вручную.
Добавить значки вручную
Такой же способ работы применяется для каждого значка социальной сети, который вы добавляете в свое основное меню. В качестве примера мы покажем вам, как добавить значок Instagram. Для всех остальных значков, которые вы хотите добавить; знайте, что это тот же способ работы (соответственно различаются только значок, HTML-код и URL-адрес).
Откройте опцию «Пользовательские ссылки», и вы увидите два поля: URL-адрес и ярлык навигации. Очевидно, что в поле URL-адреса вы вводите URL-адрес, который ведет посетителя на один из каналов социальных сетей. В этом примере мы хотим, чтобы значок вел в Instagram, поэтому просто введите свой URL-адрес Instagram.
Затем перейдите на сайт Font Awesome в своем браузере и найдите значок Instagram в строке поиска. Точно так же вы можете искать Facebook, LinkedIn и любой другой значок.
После того, как вы нажмете значок Instagram, вы увидите, что веб-сайт предоставляет следующий HTML-код:
<i class="fa fa-instagram" aria-hidden="true"></i>
Это точный код, который нам нужно использовать в поле Navigation Label, поэтому продолжайте и заполните настраиваемую ссылку, скопировав и вставив код в поле.
Повторите тот же процесс для каждого из значков социальных сетей, которые вы хотите отобразить в основном меню, и посмотрите, как он выглядит в интерфейсе вашего веб-сайта.
Изменение внешнего вида значков социальных сетей
Коллективные изменения в основном меню (включая значки социальных сетей)
Настройщик тем позволяет вам вносить все изменения внешнего вида, которые вы хотите внести в основное меню, в одном месте.
Изменения, которые вы можете внести в основное меню с помощью параметров Divi, также применяются к значкам социальных сетей. Например, когда вы задаете определенный цвет своему основному меню, значки социальных сетей будут иметь тот же цвет. Это потому, что для работы мы используем шрифт вместо изображения.
Вы можете внести все эти изменения, которые хотите внести во внешний вид в Настройщике тем, перейдя в Заголовок и навигация> Основная строка меню. Вносимые вами изменения применяются в режиме реального времени и дают вам хорошее представление о том, как вы хотите, чтобы ваше главное меню выглядело.
Открыть социальные иконки в новой вкладке
Эта часть поста - это что-то еще, что вы можете сделать с помощью значков социальных сетей. Вероятно, вы не хотите отсылать посетителей с веб-сайта, даже если они переходят на ваши каналы в социальных сетях. Вы хотите сохранить оба взаимодействия как можно дольше, открывая ссылки социальных сетей на новой вкладке каждый раз, когда кто-то нажимает на них.
Мы можем легко заставить опцию «Открыть в новой вкладке» работать со всеми значками социальных сетей, вернувшись в меню, которое мы создали ранее. Нам нужно вручную внести все изменения в каждый из значков. В этом примере мы собираемся внести изменения в значок Instagram.
Удалите URL-адрес, который вы указали в поле URL-адреса, и вместо этого вставьте следующий код в URL-адрес навигации:
<a href="http://www.instagram.com" target="_blank"><i class="fa fa-instagram" aria-hidden="true"></i></a>
Сделайте то же самое для каждого из значков, если хотите, чтобы они открывались в новой вкладке. Каждый раз, когда посетитель нажимает на них, они открываются на новой вкладке, что позволяет удерживать посетителей как можно дольше.
Последние мысли
Это руководство наверняка поможет вам интегрировать значки социальных сетей в ваш собственный веб-сайт Divi так, как вы хотите. Вы можете настроить их так, чтобы они соответствовали остальной части вашего основного меню. Если у вас есть вопросы или предложения; обязательно оставьте комментарий в разделе комментариев ниже. Мы будем на связи и постараемся ответить на все ваши вопросы и предложения.
Обязательно подпишитесь на нашу рассылку по электронной почте и канал на YouTube, чтобы не пропустить важное объявление, полезный совет или бесплатную поддержку Divi!
Лучшее изображение через Oceans / shutterstock.com