Как сделать так, чтобы модуль отслеживания социальных сетей был исправлен как Monarch
Опубликовано: 2017-08-07В сегодняшнем уроке мы покажем вам, как настроить модуль «Следование в социальных сетях» под определенные нужды. Social Media Follow - это модуль, который редко отсутствует на любой странице любого веб-сайта. Это один из основных способов связать каналы социальных сетей с сайтом. Чтобы помочь вам достичь желаемой связи между вашим сайтом и каналами социальных сетей, у нас есть Monarch. Плагин, который легко помогает отображать кнопки подписки в социальных сетях на вашем веб-сайте. Но если вы предпочитаете достигать некоторых результатов Monarch с помощью конструктора Divi, то этот пост может вам пригодиться.
Мы собираемся показать вам, как создать фиксированный модуль подписки в социальных сетях для вашего веб-сайта, что является одной из вещей, которые предоставляет плагин Monarch. Помимо размещения его слева или справа (стандартные настройки в Monarch), мы также покажем вам, как сделать так, чтобы он оставался вверху и внизу вашей страницы. В дополнение к тому, что он будет прикрепляться к верхней части страницы, мы также включим часть, где мы покажем вам, как сделать так, чтобы модуль отслеживания в социальных сетях появлялся под основным меню на вашем веб-сайте (независимо от того, является ли ваше основное меню фиксированным или нет). .
Давайте посмотрим на окончательные результаты ниже.
Пример левой стороны
Пример правой стороны
Верхний пример (стандартный)
Без фиксированной навигации
С фиксированной навигацией
Нижний пример
Как сделать так, чтобы модуль отслеживания социальных сетей был исправлен как Monarch
Подпишитесь на наш канал Youtube
Общие шаги
Поскольку основные шаги добавления модуля подписки в социальных сетях на страницу одинаковы во всех примерах, мы покажем это только один раз. Если вы хотите достичь того же результата для правой стороны, верхнего или нижнего размещения, вам нужно сначала добавить модуль подписки в социальных сетях, как описано в следующей части этого сообщения.
Добавить модуль подписки в социальных сетях на страницу
Чтобы упростить эту задачу, мы собираемся добавить модуль подписки в социальных сетях в первый раздел нашей страницы. Сделав это, вы сразу узнаете, где его найти, если захотите внести какие-либо изменения в будущем. На самом деле нам не нужна отдельная строка для этого модуля, поскольку мы собираемся назначить ему фиксированную позицию.
Добавление каналов социальных сетей в социальные сети Follow Module +
Следующее, что нам нужно сделать, это добавить необходимые каналы социальных сетей в модуль отслеживания социальных сетей. Откройте настройки модуля и нажмите «Добавить новую социальную сеть». Как только вы это сделаете, вы можете выбрать социальную сеть, которую хотите добавить, и назначить ей URL-адрес.
Каждой социальной сети автоматически назначается цвет значка, соответствующий этой социальной сети. Однако если вы предпочитаете использовать цвета в стиле вашего собственного веб-сайта, вы можете выбрать другой цвет на вкладке «Дизайн». Для примера, который мы покажем вам, как сделать, мы включим четыре социальные сети; Facebook, Twitter, Google+ и LinkedIn. Вместо использования стандартных цветов мы дадим каждой социальной сети один и тот же цвет, но с разной степенью прозрачности. Мы также упорядочим каналы социальных сетей по важности.
Настройки Facebook
Щелкните «Добавить новую социальную сеть». В параметрах социальной сети выберите Facebook. Находясь на вкладке «Контент», добавьте URL-адрес, связанный с каналом социальной сети Facebook.
Затем перейдите на вкладку «Дизайн». В этом случае Facebook - самая важная социальная сеть. Вот почему мы собираемся придать ему оттенок цвета, который привлекает наибольшее внимание. Мы использовали цвет rgba (59,89,152,0.94).
Настройки Twitter
Затем добавьте новую социальную сеть. Вместо того, чтобы выбирать Facebook, на этот раз выберите Twitter. Добавьте URL-адрес на той же вкладке «Содержимое» и перейдите на вкладку «Дизайн». На вкладке «Дизайн» выберите цвет фона «rgba (59,89,152,0.76)». В этом случае Twitter является важным каналом социальных сетей, но не таким важным, как Facebook. Вот почему он занимает второе место в ряду и имеет немного более прозрачный и менее заметный цвет.
Настройки LinkedIn
Повторите тот же процесс для социальной сети LinkedIn на вкладке «Контент» и перейдите на вкладку «Дизайн». На вкладке «Дизайн» назначьте значку цвет rgba (59,89,152,0.6).
Настройки Google+
И последний по порядку но не по значимости; добавить значок социальной сети Google+. Введите URL-адрес и перейдите на вкладку «Дизайн». Это «наименее» важная социальная сеть, которую мы хотим добавить в список в этом примере, и она будет иметь цвет значка «rgba (59,89,152,0.42)».
Создать левую боковую панель Социальные сети Follow
Первый фиксированный модуль подписки в социальных сетях, который мы покажем вам, расположен в левой части вашей страницы. Это наиболее часто используемый и, возможно, тот, который сразу заставляет вас думать о Монархе больше всего. Сначала выполните общие шаги и продолжите, добавив код CSS, который вы найдете в следующей части этого сообщения. Мы покажем вам два способа добавления кода CSS; к параметрам темы и, в частности, к одной странице. После этого примера вы также можете выбрать один из двух вариантов для других примеров.
Добавить строки кода CSS в параметры темы
Один из методов добавления дополнительного кода CSS - это параметры темы. Этот метод чаще всего используется, когда вы хотите создать эффект на всем сайте. Но помни; если вы используете этот эффект, вам нужно будет включить модуль подписки в социальных сетях на каждой странице вашего веб-сайта (или на тех страницах, на которых вы хотите, чтобы он отображался).
Чтобы добавить код CSS в параметры темы, перейдите в панель управления WordPress> Divi> Параметры темы> Общие> Прокрутите вкладку Общие и добавьте следующие строки кода CSS в поле Пользовательский CSS:
ul.et_pb_social_media_follow {
position: fixed;
left: 0;
top: 35%;
padding: 0 !important;
z-index: 999 !important;
}
.et_pb_social_media_follow li {
margin: 0 !important; padding: 0 !important;
}
.et_pb_social_media_follow li a.icon.rounded_rectangle {
border-radius: 1px;
margin: 0 !important;
}
В частности, добавьте строки кода CSS на одну страницу
Другой метод, который поможет вам применить код CSS, - это добавить его, в частности, на одну страницу. Этот метод чаще всего используется, когда вы решите добавить модуль отслеживания социальных сетей только на одну страницу. Используя этот метод, ваш веб-сайт не будет загружать строки кода CSS на всех остальных страницах вашего веб-сайта, которые не содержат модуль отслеживания социальных сетей. Или, если вы хотите, чтобы модуль отслеживания социальных сетей на других страницах вел себя как обычно, этот метод также поможет вам.
Нажмите следующую кнопку на вашем конструкторе Divi:
Затем скопируйте и вставьте код CSS в поле Custom CSS.
Создать правую боковую панель в социальных сетях Follow
Следующий код, которым мы поделимся, поможет вам разместить модуль подписки в социальных сетях с правой стороны вашего веб-сайта.
Необходимые строки кода CSS
Добавьте следующие строки кода CSS в параметры темы или, в частности, на одну страницу, как описано в примере выше.
ul.et_pb_social_media_follow {
position: fixed;
top: 40%;
padding: 0 !important;
right: 0;
width: 30px;
z-index: 999 !important;
}
.et_pb_social_media_follow li {
margin: 0 !important;
padding: 0 !important;
}
.et_pb_social_media_follow li a.icon.rounded_rectangle {
border-radius: 1px;
margin: 0 !important;
}
Создайте популярную подписку в социальных сетях
Двигаясь дальше, вы также можете разместить модуль подписки в социальных сетях вверху вашего сайта. На самом деле это очень интересный способ позволить значкам социальных сетей следовать за вашими посетителями через веб-сайт. Он используется не так часто, поэтому привлекает внимание людей.
Необходимые строки кода CSS
Скопируйте и вставьте следующие строки кода CSS в параметры темы или добавьте их, в частности, на одну страницу.
ul.et_pb_social_media_follow {
position: fixed;
left: 45%;
top: 0;
z-index: 999 !important;
}
.et_pb_social_media_follow li {
margin: 0 !important;
padding: 0 !important;
}
.et_pb_social_media_follow li a.icon.rounded_rectangle {
border-radius: 1px;
margin: 0 !important;
}
Создать топ в социальных сетях Следуйте под основным меню
Ранее показанный метод добавления модуля отслеживания социальных сетей на ваш веб-сайт не учитывает основное меню. Однако, если вы хотите, чтобы подписка в социальных сетях отображалась под основным меню и возвращалась вверх при прокрутке, эта часть сообщения может вам помочь.
Добавьте код CSS
В обоих случаях, когда фиксированная навигация активирована, а где нет, вам следует добавить следующие строки кода CSS в Параметры темы или, в частности, добавить их на одну страницу:
ul.et_pb_social_media_follow {
position: fixed;
left: 45%;
top: 0;
z-index: 999 !important;
}
.et_pb_social_media_follow li {
margin: 0 !important;
padding: 0 !important;
}
.et_pb_social_media_follow li a.icon.rounded_rectangle {
border-radius: 1px;
margin: 0 !important;
}После этого вам также нужно будет добавить код jQuery. Код jQuery зависит от того, активировали ли вы фиксированную навигацию или нет.
С фиксированной навигацией
Если у вас активирована фиксированная навигация, вам необходимо добавить следующие строки кода jQuery в заголовок вашего веб-сайта или в модуль кода на странице, на которой вы хотите, чтобы он работал:
<script text= "text/javascript">
jQuery(function($) {
$("ul.et_pb_social_media_follow").css("margin-top", $("#main-header").outerHeight());
$(window).bind('scroll', function() {
var navi = $("#main-header");
var naviHeight= navi.outerHeight();
if ($(window).scrollTop() <= naviHeight){
$("ul.et_pb_social_media_follow").css("margin-top", naviHeight);
}
});
});
</script>
Не забудьте также использовать строки кода CSS. Код jQuery является дополнительным. Кроме того, убедитесь, что при прокрутке высота основного изображения остается прежней. Вы можете сделать это, перейдя в панель управления WordPress> Внешний вид> Настройка> Заголовок и навигация> Фиксированные настройки навигации> Выберите минимум для фиксированной высоты меню.
Без фиксированной навигации
Если вы хотите добиться того же результата, но у вас нет фиксированной навигации, код будет немного другим:
<script text= "text/javascript">
jQuery(function($) {
$("ul.et_pb_social_media_follow").css("margin-top", $("#main-header").outerHeight());
$(window).bind('scroll', function() {
var navi = $("#main-header");
var naviHeight= navi.outerHeight();
if ($(window).scrollTop() <= naviHeight){
$("ul.et_pb_social_media_follow").css("margin-top", naviHeight);
}
else {
$("ul.et_pb_social_media_follow").css("margin-top", 0);
}
});
});
</script>
Создать нижнюю подписку в социальных сетях
Последний в строке - это нижний модуль подписки в социальных сетях.
Необходимые строки кода CSS
Добавьте следующие строки кода CSS в поле Custom CSS параметров темы или, в частности, на одну страницу:
ul.et_pb_social_media_follow {
position: fixed;
left: 45%;
bottom: 0;
padding: 0 !important;
z-index: 999 !important;
}
.et_pb_social_media_follow li {
margin: 0 !important;
padding: 0 !important;
}
.et_pb_social_media_follow li a.icon.rounded_rectangle {
border-radius: 1px;
margin: 0 !important;
}
Последние мысли
В этом уроке мы показали вам, как создать модуль подписки в социальных сетях в том же стиле, что и плагин Monarch. Используя этот метод, вам не нужно будет загружать плагин Monarch, если вы используете его исключительно для обмена своими каналами в социальных сетях. Для публикации в социальных сетях вам все равно придется использовать плагин Monarch. Если у вас есть вопросы или предложения; не стесняйтесь оставлять комментарии в разделе комментариев ниже, чтобы мы могли связаться!
Обязательно подпишитесь на нашу рассылку по электронной почте и канал на YouTube, чтобы не пропустить важное объявление, полезный совет или бесплатную поддержку Divi!
Лучшее изображение Снопек Надя / shutterstock.com