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

Начиная с версии 1.2.3 решения "Простой Адаптивный Лендинг" в шапке лендинга помимо логотипа появился номер телефона с симпатичной иконкой:

На десктопах:


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



Как можно заметить, характерной особенностью функционала является то, что на устройствах с шириной экрана менее 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 выводить ваш номер телефон в подсказках к результату поиска рядом со ссылкой на вашу страницу!
Это работает автоматически, достаточно лишь заполнить номер телефона (обычный, не технический) в свойствах страницы/раздела!