Простой Адаптивный Лендинг – Маленькие Хитрости - Телефон и Логотип

Простой Адаптивный Лендинг – Маленькие Хитрости - Телефон и Логотип
19 ноября 2014
Описание
Начиная с версии 1.2.3 решения "Простой Адаптивный Лендинг" в шапке лендинга помимо логотипа появился номер телефона с симпатичной иконкой:

На десктопах:
1.jpg

На мобильных:  
2.jpg


Как можно заметить, характерной особенностью функционала является то, что на устройствах с шириной экрана менее 480 пикселей (т.е. на мобильных телефонах) телефон сворачивается, оставляя только кликабельную иконку на которую можно нажать для совершения звонка.
Да, совершенно верно - телефон в шапке находится в машиночитаемом виде и доступен для прямого набора с мобильного устройства или звонка через skype!
Первичную настройку как телефона, так и логотипа сайта можно произвести во время прохождения мастера установки:


Дальнейшая статья ориентирована на тех, у кого возникла потребность изменения телефона (или логотипа) после создания лендинга, либо если вы создаёте несколько лендингов на одном сайте.
Итак, начиная с версии 1.2.3 в системе присутствуют 3 свойства:

  • telephonetech - Телефон в тех формате (только цифры, начинается с +7) - используется для Skype и других программ при нажатии на телефон в публичной части (для совершения звонка)
  • telephone - Телефон - тот текст телефона, который отображается пользователям
  • Headerlogo - ЛОГО (в шапке) - текст логотипа слева от телефона
Эти свойства опытный администратор или разработчик 1С-Битрикс может напрямую прописать для страницы или раздела, мы же опишем сценарий действий контент-редактора в публичной части:

Создание свойств страницы

Нажмём в панели инструментов кнопку "изменить страницу" и выберем пункт "Заголовок и свойства страницы":




Обратим внимание на то, что:

  • Свойство "Заголовок" задаёт SEO title страницы (заголовок браузера), а не логотип в шапке или текст страницы. Это стандартное поле 1С-Битрикс!
  • Если мы не заполним свойство "Телефон в тех формате", то телефон в публичной части выведется некликабельный и другого цвета
  • Свойства могут быть заданы для КАЖДОЙ СТРАНИЦЫ (если их несколько), тем самым на одном решении мы можем сделать несколько разных лендингов.
Так же решение поддерживает и более сложную логику, когда значение свойства будет наследоваться для разделов. Для этого необходимо заполнить свойство не для страницы, а для корневого раздела.

Создание свойств раздела (с наследованием)

Для того чтобы задать свойства раздела нажмите кнопку "изменить раздела" и "свойства раздела".




Чтобы проиллюстрировать работу свойств раздела мы создадим раздел сайта /novyy-razdel/ и страницу в нём аналогичную главной странице сайта.
Наша новая страница не будет содержать заполненных свойств логотипа и телефонов.
Однако мы создадим свойства для корневого раздела следующим образом:

  • Технический телефон - оставим пустой
  • Телефон - поставим значение, отличающееся от значения на странице в корне
  • Лого - поставим значение, совпадающее со значение на странице в корне
и получим результат:


В качестве результата отметим следующее:

  • Значения свойств страницы имеют преимущества над значением свойств раздела (для корневой страницы отображается телефон страницы)
  • Значения свойств раздела наследуются и выводятся, если нет других значений разделов/страниц (телефон и логотип)
  • Значения свойств страниц не наследуются (технический телефон не заполнен у подраздела, а потому ссылка некликабельна)

Schema.org

Важной фишкой обновления 1.2.3 является поддержка стандарта микроразметки schema.org! Это позволяет поисковым системам проще читать контент вашей страницы (сразу в удобочитаемом машинном виде), а потому отдавать приоритет таким специально подготовленным страницам.
В частности, это позволяет поисковым системам Яндекс и Google выводить ваш номер телефон в подсказках к результату поиска рядом со ссылкой на вашу страницу!
Это работает автоматически, достаточно лишь заполнить номер телефона (обычный, не технический) в свойствах страницы/раздела!


Вам нужна консультация?

Можете связаться с нами удобным удобным способом

Ready.KZ: Готовые сайты