Продолжаем разбирать самые интересные и полезные плагины для сайта wordpress. Сегодня вы узнаете как добавить на свой сайт контакт-панель, в которой отображаются ваши контактные данные. Данная панель отображается в самом верху сайта и постоянно находится на виду у пользователей, даже когда вы прокручиваете страницу. В контакт-панели можно указать номер мобильного и стационарного телефона, email адрес, произвольную вкладку с ссылкой. Можно добавлять иконки самых популярных соцсетей, более 15 соцсетей на выбор. Можно настроить цветовую гамму панели, цвет фона, ссылок и текста.
Установить плагин Speed Contact Bar вы сможете прямо из админ-панели wordpress. Перейдите на страницу: Плагины – Добавить новый, введите название плагина в форму поиска, нажмите Enter, установите и активируйте плагин.
После установки и активации плагина, перейдите на страницу: Настройки – Speed Contact Bar. Здесь вы сможете настроить основные параметры плагина.
– Headline, здесь можно указать текст для любой вкладки, которая будет отображаться в контакт-панели.
– URL of the headline, здесь можете указать ссылку для вкладки, которую вы указали выше.
– E-Mail, здесь можно указать email адрес.
– Phone Number, укажите номер стационарного телефона.
– Cell Phone Number, укажите номер мобильного телефона.
– Соцсети, возле соответствующего значка соцсети, укажите URL адрес вашей страницы в данной соцсети.
Appeareance of the contact bar.
– Maximal viewport width to hide the bar, укажите здесь ширину, при которой контакт-панель будет скрываться. По умолчанию панель отображается на всех устройствах.
– Position of the bar, можно выбрать позицию панели, вверху или внизу. По умолчанию вверху.
– Enable fixed position, по умолчанию панель зафиксирована, то есть всегда на виду.
– Height readjustment for fixed position, высота переналадки для стационарной установки. (оставьте по умолчанию)
– Transparent background, поставьте галочку, чтобы сделать фон панели прозрачным.
– Background Color, можно выбрать цвет фона панели.
– Show shadow, показать тень для панели.
Appeareance of the headline.
– Show headline, показ заголовка, по умолчанию включен.
– Keep headline in mobile devices, показ заголовка на мобильных устройствах.
– Headline HTML Tag, здесь указан html тег для заголовка.
Appeareance of texts and links.
– Show texts on small displays, показывать номера телефонов и email адрес на небольших дисплеях.
– Text Alignment, можно выбрать расположение текста в панели, слева, справа или по центру. По умолчанию по центру.
– Font Size, размер шрифта.
– Text Color, цвет текста.
– Link Color, цвет ссылок.
– Open links in new windows, поставьте галочку, чтобы открывать ссылки в новом окне.
Appeareance of the icons.
– Icon Size, укажите размер иконок в панели.
– Icon Brightness, здесь можно выбрать ярость значков.
– Сохраните изменения.
После настройки панели и сохранения настроек, перейдите на свой сайт, вверху сайта у вас появится контакт-панель. Удачи вам !
Спасибо! Понравилось)
А если два номера, как правильно указать? Если указать два, то при нажатие набираются сразу два.
Один номер городской, другой сотовый. Что значит “набираются сразу два”?
Чтобы понять надо просто указать два номера в городской или два в мобильный телефон. Есть городской и два мобильных номера. Теперь когда в мобильной версии сайта я нажимаю на телефон (городской или мобильный) он срабатывает как гиперссылка, а т.к. в ячейке с настройками указаны два номера (не важно городской или мобильный), то в окне набора номера впечатываются два номера и уже потом можно нажать на набор номера. Но если указаны или два городских, или два мобильных, то эти номера в мобильной версии сайта набрать не возможно, сразу два номера копируются в окно набора телефона. Про “два номера” это не городской и мобильный, это когда есть два городских или два мобильных. Думаю так понятно.
Не надо два номера указывать. В плагине не предусмотрена такая возможность.
Илья привет!
Не могу отрегулировать (разными способами пробовала настраивать, меняла разные параметры размеров и через стиляи пробовала отступы делать)
У меня эта полоса с контактами наезжает на изображение заголовка.
Подскажи пожалуйста как настроить?
Чтобы сначала шла эта полоска вверху сайта, а потом изображение заголовка, друг под другом. А то сейчас половина изобр загол закрыто этой полосой.
Спасибо
Привет. Пробовала изменить в настройках параметр – Height readjustment for fixed position?
Спасибо Илья!
Да, попробовала, не получилось как хотелось бы. Я пока Через настройку CSS выбрала Position: Relative
И эта полоса теперь стоит правильно, но прокручивается. к сожалению, зато не наезжает на другое)
Да, классно и удобно когда контакты зафиксированы при прокрутке страниц.
А в CSS пробовала менять Padding или Margin? Со стилями поэкспериментируй.
Пробовала конечно же), прежде всего, как ты и подсказываешь.
Несколько часов с утра застряла над этой “фигнюшкой” не получается!
Ты бы сразу быстро настроил)
Называется: каждый спец в своем деле!
Илья, пожалуйста, можно обращусь к тебе за твоими услугами?
Сначала все оформлю как задумала, а потом в конце, напишу тебе задание, а ты мне все настроишь идеально.
Надеюсь, не откажешь в услугах, спасибо огромное!
Уже СПАСИБО огромное за твои бесплатные и профессиональные подсказки.
Пользуясь ими, у меня приблизительно получается, но у тебя бы было точно как надо.
Спасибо.
Илья, прайс твой я знаю.
Время найдешь?
Спасибо
Да, пиши на email.
Подскажите как настроить, что бы эта панель отображалась, а потом меню сайта. Я говорю о прокрутке страницы. У меня Меню фиксируется в вверху экрана при прокрутке. Спасибо!
Сейчас как отображается? Скриншот скиньте.
И на мобильно она два раза дублируется.
Сейчас эта панель закрывает само меню сайта при пролистывании вниз
Можно поправить стили с помощью плагина SiteOrigin CSS.
По стилям не совсем понятно. Необходимо добавить отступ от этой панели до меню? Но как? Буду юзать!)
А как на счет того что в мобильной версии сайта, эта панель дублируется два раза.
Спасибо за помощь!
Да, надо отступ делать. Там есть стили Margin-Top или Padding, их используйте. Если у вас тема адаптивная, то есть одна и таже, для мобильных и компьютеров, тогда отключите в настройках отображение панели на мобильных устройствах.
Вы имеете ввиду отключить Показ заголовков на мобильных устройствах? После этого не будет дублировать два раза на мобильной версии?
Нет, я имел ввиду скрыть панель с мобильных устройств, в настройках плагина – Maximal viewport width to hide the bar. Вы не пробовали изменить высоту переналадки – Height readjustment for fixed position?
Ничего не понимаю, теперь их на компьютере две.
Что меняли в настройках, перед тем как стало показываться две?
Ничего не менял вроде как. Ниже скрины настроек и как отображается. Уже неделю пытаюсь настроить. Хочется что бы эта панель была над меню при прокрутку. И на мобильных одна. А в мобильном их две как и на полной версии сайта.