Размер шрифта
Цвет фона и шрифта
Изображения
Озвучивание текста
Обычная версия сайта
Вебформат
+7 (499) 394-16-29
+7 (499) 394-16-29Офис в Москве
+7 (800) 550-16-29Бесплатно по России
+7 (717) 269-66-29Офис в Астане
Заказать звонок
E-mail
mail@webformat.ru
Адрес
г. Москва, Кожевническая ул., 10, стр. 1, эт. 7
Режим работы
Пн. – Пт.: с 9:00 до 18:00
Заказать звонок
Продукты
  • Лицензии 1С-Битрикс
  • Битрикс 24
  • Интернет-магазин + CRM
  • Приложения Битрикс24
Услуги
  • Битрикс24
    • Внедрение Битрикс24
    • Предпроектный аудит
    • Внедрение Битрикс24
    • Доработка Битрикс24
    • Сопровождение Битрикс24
    • Энтерпрайз: Крупные внедрения
    • Интеграция Битрикс24
    • Обучение Битрикс24
    • Переход с зарубежного ПО на Битрикс24
    • Установка/перенос Битрикс24 в коробку
  • Интернет-магазины
    • Разработка интернет-магазина
    • Сопровождение интернет-магазинов
    • Разработка интернет-магазина
    • Интернет-магазин + CRM
    • Интеграция интернет-магазина с 1С
    • Сервер для сайта на 1С-Битрикс
  • Чат-боты
    • Разработка чат-ботов
    • Интернет магазин в Telegram
  • Импортозамещение
  • Переход на PHP 8
Кейсы
  • Битрикс24
    • Кейсы по внедрению Битрикс24
    • Кейсы по доработке Битрикс24
  • Маркетинг
  • Сайты и интернет-магазины
    • Кейсы по сопровождению интернет-магазинов
Акции
Блог
Компания
  • История
  • Лицензии и сертификаты
  • Партнеры и полезные сервисы
  • Клиенты
  • Вакансии
  • Отзывы
  • Блог
  • Акции
  • Реквизиты
  • Контакты
Партнерам
Контакты
Вебформат
О нас
  • История
  • Лицензии и сертификаты
  • Партнеры и полезные сервисы
  • Клиенты
  • Вакансии
  • Отзывы
  • Блог
  • Акции
  • Реквизиты
  • Контакты
Услуги
  • Битрикс24
    • Внедрение Битрикс24
      • Пакетное внедрение
      • Проектное внедрение
    • Предпроектный аудит
    • Доработка Битрикс24
    • Сопровождение Битрикс24
    • Энтерпрайз: Крупные внедрения
    • Интеграция Битрикс24
    • Обучение Битрикс24
    • Переход с зарубежного ПО на Битрикс24
    • Установка/перенос Битрикс24 в коробку
  • Интернет-магазины
    • Разработка интернет-магазина
      • Готовое решение
      • Интернет-магазин с нуля и под ключ
    • Сопровождение интернет-магазинов
    • Интернет-магазин + CRM
    • Интеграция интернет-магазина с 1С
    • Сервер для сайта на 1С-Битрикс
  • Чат-боты
    • Разработка чат-ботов
    • Интернет магазин в Telegram
  • Импортозамещение
  • Переход на PHP 8
Продукты
  • Лицензии 1С-Битрикс
    Лицензии 1С-Битрикс
  • Битрикс 24
    Битрикс 24
  • Интернет-магазин + CRM
    Интернет-магазин + CRM
  • Приложения Битрикс24
    Приложения Битрикс24
Кейсы
  • Битрикс24
    • Кейсы по внедрению Битрикс24
    • Кейсы по доработке Битрикс24
  • Маркетинг
  • Сайты и интернет-магазины
    • Кейсы по сопровождению интернет-магазинов
Блог
Партнерам
Контакты
    +7 (499) 394-16-29
    +7 (499) 394-16-29Офис в Москве
    +7 (800) 550-16-29Бесплатно по России
    +7 (717) 269-66-29Офис в Астане
    Заказать звонок
    E-mail
    mail@webformat.ru
    Адрес
    г. Москва, Кожевническая ул., 10, стр. 1, эт. 7
    Режим работы
    Пн. – Пт.: с 9:00 до 18:00
    Заказать звонок
    Вебформат
    О нас
    • История
    • Лицензии и сертификаты
    • Партнеры и полезные сервисы
    • Клиенты
    • Вакансии
    • Отзывы
    • Блог
    • Акции
    • Реквизиты
    • Контакты
    Услуги
    • Битрикс24
      • Внедрение Битрикс24
        • Пакетное внедрение
        • Проектное внедрение
      • Предпроектный аудит
      • Доработка Битрикс24
      • Сопровождение Битрикс24
      • Энтерпрайз: Крупные внедрения
      • Интеграция Битрикс24
      • Обучение Битрикс24
      • Переход с зарубежного ПО на Битрикс24
      • Установка/перенос Битрикс24 в коробку
    • Интернет-магазины
      • Разработка интернет-магазина
        • Готовое решение
        • Интернет-магазин с нуля и под ключ
      • Сопровождение интернет-магазинов
      • Интернет-магазин + CRM
      • Интеграция интернет-магазина с 1С
      • Сервер для сайта на 1С-Битрикс
    • Чат-боты
      • Разработка чат-ботов
      • Интернет магазин в Telegram
    • Импортозамещение
    • Переход на PHP 8
    Продукты
    • Лицензии 1С-Битрикс
      Лицензии 1С-Битрикс
    • Битрикс 24
      Битрикс 24
    • Интернет-магазин + CRM
      Интернет-магазин + CRM
    • Приложения Битрикс24
      Приложения Битрикс24
    Кейсы
    • Битрикс24
      • Кейсы по внедрению Битрикс24
      • Кейсы по доработке Битрикс24
    • Маркетинг
    • Сайты и интернет-магазины
      • Кейсы по сопровождению интернет-магазинов
    Блог
    Партнерам
    Контакты
      +7 (499) 394-16-29Офис в Москве
      +7 (800) 550-16-29Бесплатно по России
      +7 (717) 269-66-29Офис в Астане
      Заказать звонок
      E-mail
      mail@webformat.ru
      Адрес
      г. Москва, Кожевническая ул., 10, стр. 1, эт. 7
      Режим работы
      Пн. – Пт.: с 9:00 до 18:00
      Заказать звонок
      Вебформат
      Телефоны
      +7 (499) 394-16-29 Офис в Москве
      +7 (800) 550-16-29 Бесплатно по России
      +7 (717) 269-66-29 Офис в Астане
      Заказать звонок
      Вебформат
      • О нас
        • О нас
        • История
        • Лицензии и сертификаты
        • Партнеры и полезные сервисы
        • Клиенты
        • Вакансии
        • Отзывы
        • Блог
        • Акции
        • Реквизиты
        • Контакты
      • Услуги
        • Услуги
        • Битрикс24
          • Битрикс24
          • Внедрение Битрикс24
            • Внедрение Битрикс24
            • Пакетное внедрение
            • Проектное внедрение
          • Предпроектный аудит
          • Доработка Битрикс24
          • Сопровождение Битрикс24
          • Энтерпрайз: Крупные внедрения
          • Интеграция Битрикс24
          • Обучение Битрикс24
          • Переход с зарубежного ПО на Битрикс24
          • Установка/перенос Битрикс24 в коробку
        • Интернет-магазины
          • Интернет-магазины
          • Разработка интернет-магазина
            • Разработка интернет-магазина
            • Готовое решение
            • Интернет-магазин с нуля и под ключ
          • Сопровождение интернет-магазинов
          • Интернет-магазин + CRM
          • Интеграция интернет-магазина с 1С
          • Сервер для сайта на 1С-Битрикс
        • Чат-боты
          • Чат-боты
          • Разработка чат-ботов
          • Интернет магазин в Telegram
        • Импортозамещение
        • Переход на PHP 8
      • Продукты
        • Продукты
        • Лицензии 1С-Битрикс
        • Битрикс 24
        • Интернет-магазин + CRM
        • Приложения Битрикс24
      • Кейсы
        • Кейсы
        • Битрикс24
          • Битрикс24
          • Кейсы по внедрению Битрикс24
          • Кейсы по доработке Битрикс24
        • Маркетинг
        • Сайты и интернет-магазины
          • Сайты и интернет-магазины
          • Кейсы по сопровождению интернет-магазинов
      • Блог
      • Партнерам
      • Контакты
      Заказать звонок
      • +7 (499) 394-16-29 Офис в Москве
        • Телефоны
        • +7 (499) 394-16-29 Офис в Москве
        • +7 (800) 550-16-29 Бесплатно по России
        • +7 (717) 269-66-29 Офис в Астане
        • Заказать звонок
      • г. Москва, Кожевническая ул., 10, стр. 1, эт. 7
      • mail@webformat.ru
      • Пн. – Пт.: с 9:00 до 18:00
      Главная
      —
      Блог
      —
      IT-специалистам
      —Требования к верстке сайтов на 1С-Битрикс

      Требования к верстке сайтов на 1С-Битрикс

      Требования к верстке сайтов на 1С-Битрикс
      9 июля 2021
      Верстка сайтов на 1С-Битрикс
      Требования к верстке
      1. Файлы стилей разделить на 2: styles.css и template_styles.css.Первый из них содержит стили, которые относятся к рабочей (контентной) части страницы, то есть к ее "телу". Эти стили будут применяться в визуальном редакторе битрикс.Второй - стили, относящиеся непосредственно к шаблону сайта. Это все, что относится к "шапке" (хедеру), "подвалу" (футеру), меню, боковому меню и пр. Стили из файла template_styles.css подключаются вторыми, поэтому они будут иметь больший приоритет.
      2. Тело страницы должно быть обернуто в контейнер с неким классом или id (для примера - main) помимо body. Стили контентной части страницы могут быть указаны относительно элементов внутри него (включая его самого), но никак не внешних. Например, допускается использование такого стиля:.main .big p{background:pink;}
        И нельзя использовать такой:
        .wrapper .main p{background:pink;} или такой: p{background:pink;}
        Объясняется это тем, что при редактировании страницы в визуальный редактор вставляется iframe, тегу <body> которого прописывается класс / идентификатор main. Содержимое страницы вставляется в этот <body>. Вышележащих над main контейнеров добавлено не будет. Соответственно, задействовавшие их стили применены тоже не будут.
      3. Стилевая страница должна быть написана таким образом, чтобы стили применялись ко всем тэгам внутри тела страницы, таким как элементы формы, списки, заголовки и пр. Селекторы этих элементов не должны использовать классы непосредственно этих элементов.
        Это нужно для того, чтобы элементы, добавленные на страницу через визуальный редактор Битрикс, получили эти стили (а они добавляются без дополнительных классов и элементов-оберток). 
        Эти стили лучше всего задавать относительно главного контейнера (см. п. 2). Например, допустимо использовать стиль 
        .main ul{...} 
        Но недопустимо 
        ul.red{...}
      4. Крошки и заголовок h1 НЕ должны входить в тело страницы. Наоборот, контейнер для тела страницы должен открываться следом за ними.
      5. Структура шаблонной части различных страниц сайта должна быть максимально похожей (т.е. той, которую описывает файл template_styles.css). НЕ следует использовать различные классы / id для контейнера тела основной части различных страниц (например списка товаров и карточки товара).
      6. Табу на названия классов "title" и "mail", они используются в окнах визуального редактора.
      7. На странице должен быть ровно один тэг h1.
      8. Если верстаете баннеры, то учитывайте, что они могут быть отключены со страницы в любое время. Удалённый баннер не должен оставлять после себя пустое место, которое все прочие элементы всегда обтекают и не могут заполнить.
      9. При верстке списка новостей учесть:
        1. У новости может не быть изображения (и делать изображение-заглушку здесь не имеет смысла).
        2. Длина анонса новости может существенно превышать размеры выделенного для него html-элемента. Поэтому контейнер анонса должен учитывать этот факт и скрывать "лишний" текст. 
        3. Если высота контейнера анонса новости больше высоты изображения, картинка должна быть обтекаема этим текстом.
        4. Учесть, что вставляемая картинка (рядом с новостью) может существенно отличаться по пропорциям / размерам от эталонной. При этом ширина контейнера картинки должна быть фиксированной при любых размерах изображения (вертикальная линия, пущенная от правой стороны верхнего изображения должна касаться всех изображений). Если у новости нет картинки, текст анонса должен быть смещен влево на соответствующее пространство.
        5. Заголовок новости, картинка (если есть), "Подробнее" (если есть) - ссылки на страницу новости
      10. В контейнере, в который предусматривается вставка статей / текста, нельзя прописывать изображениям margin:0 и padding:0. Иначе невозможно редактировать отступы от картинок до текста средствами визуального редактора.
      11. По возможности не следует использовать селекторы прямых потомков (>) и псевдоклассы n-ых потомков (nth-child). В режиме правки Битрикс обрамляет элемент дополнительным div'ом, поэтому селекторы прямых потомков могут перестать работать (между ними появляется посредник). Использование псевдоклассов n-ых потомков не желательно по причине возможной смены номера в процессе развития проекта (например, из таблицы убрали колонку, номер всех колонок уменьшился на 1 и пр.).
      12. Для формирования текста-заглушки, присутствующего в текстовых элементах (input type="text"), желательно использовать атрибут placeholder и плагин jquery.placeholder (для IE).
      13. Кросс-браузерность. Проверять, в том числе, в IE9+.
      14. Крайне желательно, чтобы html-код разных страниц до начала html-кода контентной части (тела страницы) был абсолютно идентичен (включая классы элементов-контейнеров). Различия могут быть после контентной части. В частности, это значит, что  html-код боковой колонки должен идти ПОСЛЕ html-кода контентной части, т.к. в большинстве случаев приходится делать еще и одноколоночный шаблон (убирать боковую колонку).
      15. Помнить о том, что должны быть хлебные крошки (навигационна цепочка).
      16. В контейнере, содержащем приглашение авторизоваться / зарегистрироваться (обычно в "шапке" сайта) предусмотреть содержимое для авторизованного пользователя.
      17. Если есть возможность в контентной части поставить изображение в тег img вместо фона какому-либо элементу, ставить в тег img. Тогда при редактировании содержимого в визуальном редакторе можно будет изменить это изображение через интерфейс редактора.
      18. Если есть выпадающее меню, убедиться, что поверх выпавшей части не будут показываться какие-то другие элементы (для этого надо добавить хотя бы 10-15 пунктов). Часто оказывается, что определенные части слайдера на главной странице показываются поверх выпавшей части меню.
      19. Если на сайте используются стилизованные ссылки / кнопки, то класс кнопки должен одинаково оформлять как ссылку (тег a), так и теги input[type="submit"] и button.
      20. Табу на прописывание стилей ВСЕМ элементам формы / спискам / изображениям - обязательно нужно указывать в их селекторе, что интересуют только элементы из главного контейнера. 
        Иначе эти стили будут присвоены даже служебным элементам, относящимся к интерфейсу Битрикса (в списке параметров компонентов, например). 
        То есть нельзя использовать такой стиль: input[type="text"] {...} 
        И можно такой: .main input[type="text"] {...}
      21. Input[type="file"] должен быть стилизован. Надо помнить про этот элемент формы. Для этого можно использовать вспомогательные скрипты.
      22. Нельзя использовать кириллицу в именах файлов / папок.
      23. При верстке меню учесть, что от всех остальных визуально должны отличаться 2 пункта меню: тот, на который наведен курсор мыши и тот, который активен в данный момент (в котором находится пользователь).
      24. Если в какой-либо таблице предусмотрена сортировка по столбцу, то часто в шапке столбца используются треугольнички, обозначающие направление сортировки (с вершиной вверх или вниз). Такие треугольнички лучше делать с помощью CSS и свойства border-width, чем создавать под каждый из них картинки.
      25. В списке товаров / новинок / лидеров продаж и пр. предусмотреть, что у товара может быть не одна, а несколько лычек (одновременно и новинка, и хит продаж, например).
      26. При верстке картинок в списках любых элементов, а также карточке товара и пр. учитывать, что реальные изображения по соотношению сторон могут отличаться от запланированных. При этом изображение должно быть корректно вписано в указанную для него область по меньшей из двух сторон, центрироваться по обоим измерениям, а по большей стороне должно обрезаться все, что не вошло в отведенный контейнер. Этого эффекта можно добиться с помощью стиля background-size:cover;
      27. Все всплывающие окна желательно делать библиотекой fancybox. Предусмотреть всплывающие окна при добавлении товара в корзину, при клике на ссылку "заказать звонок".
      28. При верстке форм вроде отправки заявки обратного звонка, обратной связи и пр. добавлять поле ввода CAPTCHA. Размеры картинки капчи 180x40 пикселей, пример: 

      Назад к списку


      Закажите бесплатную консультацию

      Оставьте свои контакты,
      мы свяжемся с вами в ближайшее время.

      Поменять картинку

      Нажимая на кнопку «отправить», вы подтверждаете свое согласие на обработку пользовательских данных

      • IT-специалистам 8
      • Битрикс24 и CRM 38
      • Интернет-магазины и сайты 14
      • Продажи, маркетинг, аналитика 13
      Продукты
      Акции
      Услуги
      Кейсы
      Реквизиты
      Вакансии
      Партнеры
      Партнерская программа
      Контакты
      Подписаться на рассылку
      +7 (499) 394-16-29
      +7 (499) 394-16-29Офис в Москве
      +7 (800) 550-16-29Бесплатно по России
      +7 (717) 269-66-29Офис в Астане
      Заказать звонок
      E-mail
      mail@webformat.ru
      Адрес
      г. Москва, Кожевническая ул., 10, стр. 1, эт. 7
      Режим работы
      Пн. – Пт.: с 9:00 до 18:00
      Заказать звонок
      mail@webformat.ru
      © 2023 Вебформат
      Политика конфиденциальности