[contact-form-7 id="24085" title="Feedback RU"]

Новые шаблоны

Monstroid. Как добавить значки «Следите за нами в соцсетях» в хедер

Из этого туториала Вы узнаете, как добавить значки Следите за нами в соцсетях (Follow Us) в хедер шаблона Monstroid.

Monstroid. Как добавить значки «Следите за нами в соцсетях» в хедер

Используя шаблон Monstroid, Вы можете добавить неограниченное число значков соцсетей по главным меню. По-умолчанию, область Боковая панель хедера (Header Sidebar) не активна, поэтому Вы не увидите ничего под главным меню сайта. Мы покажем Вам, как использовать эту область:

Monstroid._How_to_add_Follow_Us_icons_to_the_header-1

Для того чтобы добавить значки «Следите за нами а сойсетсях» в хедер, следуйте таким инструкциям:

  1. Войдите в вашу Админ панель (Dashboard). Перейдите на вкладку Cherry -> Дизайнер статических областей (Cherry -> Static Area Builder). Добавьте Боковую панель хедера (Header Sidebar) в позицию Верх хедера (Header Top):

    Monstroid._How_to_add_Follow_Us_icons_to_the_header-2

  2. Прокрутите вниз и нажмите на кнопку Сохранить статические блоки (Save statics):

    Monstroid._How_to_add_Follow_Us_icons_to_the_header-3

  3. Перейдите на вкладку Внешний вид -> Виджеты (Appearance -> Widgets). Добавьте виджет Cherry – Следуйте за нами в соцсетях (Cherry Follow US) в область Боковая панель хедера (Header Sidebar):

    Monstroid._How_to_add_Follow_Us_icons_to_the_header-4

  4. Выберите социальные сети (networks), которые Вы хотели бы отобразить в хедере. Нажмите на кнопку Сохранить (Save):

    Monstroid._How_to_add_Follow_Us_icons_to_the_header-5

  5. Обновите Домашнюю страницу вашего сайта. Вы увидите, что выбранные значки были добавлены прямо под логотип:

    Monstroid._How_to_add_Follow_Us_icons_to_the_header-6

  6. Вы можете легко изменить оформление добавленных значков. Вам лишь нужно скопировать несколько правил CSS.

  7. Перейдите на вкладку Cherry -> Настройки -> Общие -> Пользовательский CSS (Cherry -> Options -> General -> User CSS). Используйте следующие правила CSS, для того чтобы изменить оформление значков Следите за нами в соцсетях (Follow US):

    • Уменьшение размера значка FontAwesome:

      					.sidebar-header .cherry-follow_wrap .cherry-follow_list .cherry-follow_item a i:before {
      					font-size: 20px;
      					}
      				
    • Изменение размера цветного фона значка (при помощи изменения отступа):

      					.sidebar-header .cherry-follow_wrap .cherry-follow_list .cherry-follow_item a {
      					padding: 10px 0px;
      					}
      				
    • Уменьшения ширины цветного фона значка и перемещение его вправо:

      					.sidebar-header .cherry-follow_wrap .cherry-follow_list .cherry-follow_item {
      					width: 200px;
      					float: right;
      					}
      				
    • Для изменения размера шрифта ярлыка соцсети:

      					.sidebar-header .cherry-follow_wrap .cherry-follow_list .cherry-follow_item a:after {
      					font-size: 14px;
      					}
      				

      Monstroid._How_to_add_Follow_Us_icons_to_the_header-7

  8. Прокрутите вниз и нажмите на кнопку Сохранить настройки (Save Options):

    Monstroid._How_to_add_Follow_Us_icons_to_the_header-8

  9. Перезагрузите страницу. Теперь значки меньше и расположены правильно:

    Monstroid._How_to_add_Follow_Us_icons_to_the_header-9

Вы можете также ознакомиться с детальным видео-туториалом ниже:

Monstroid. Как добавить значки «Следите за нами в соцсетях» в хедер