Структура шаблонов дизайна

Если вы хотите вносить изменения в код шаблонов, то это автоматически подразумевает, что вы обладаете знанием HTML и CSS. В противном случае вам следует либо изучить их на любом из множества ресурсов в интернете либо обратиться к профессионалам.

Когда вы вносите правки в дизайн и не знаете как называется тот или иной файл шаблона, вам поможет следующая инструкция.

Шаблоны дизайна редактируются в:

  • Админка > Дизайн > Десктоп : Шаблоны и стили > Шаблоны
  • либо в файловом менеджере /design/ваша_тема/html/

Структура шаблонов:

Страницы сайта формируются из шаблона index.tpl, который состоит из:

  • шапка
  • левая колонка - в нее подключаются дополнительные шаблоны (меню блога, меню каталога, новинки и т.п.) через {include file=''}
  • основной контент{$content} - в нем выводится содержимое шаблонов (main.tpl, products.tpl, product.tpl, page.tpl, blog.tpl, post.tpl, articles.tpl, article.tpl, services.tpl, cart.tpl, order.tpl, register.tpl, user.tpl, login.tpl, feedback.tpl, wishlist.tpl, compare.tpl) по названию легко понять, какой контент выводится данными шаблонами
  • подвал

Соответственно, если вы хотите изменить тот или иной кусок кода, то вам нужно найти его в шаблоне.

Разберем на примере работы в браузере Хром.

Открываем сайт на нужной странице, и в нужном месте дизайна правой кнопкой мыши вызываем меню и выбираем пункт "Просмотреть код":

Работа с шаблонами 

Слева или внизу откроется панель, где будет выделен ваш исследуемый элемент:

Работа с шаблонами

Копируем id или класс верхнего узла - например id="footer"

Далее открываем файл index.tpl и ищем по тексту (CTRL F) сочетание id="footer и находим:

Работа с шаблонами

Как видите по названиям классов легко сопоставить код шаблона с кодом сайта, чтобы понять что за что отвечает.

Что делать, если не удается найти в index.tpl нужный класс или id?

Это возможно в том случае, если искомый элемент находится в подключаемом шаблоне (через include) либо шаблоне используемом в выводе основного контента.

И если со вторым вариантом все понятно - достаточно открыть соответствующий контенту файл шаблона (main.tpl, products.tpl, product.tpl, page.tpl, blog.tpl, post.tpl, articles.tpl, article.tpl, services.tpl, cart.tpl, order.tpl, register.tpl, user.tpl, login.tpl, feedback.tpl, wishlist.tpl, compare.tpl)

То первый вариант разберем отдельно, как правило он актуален для:

  • блоков в левой колонке
  • модулей
  • виджетов

Вызываем просмотр кода в браузере:

Редактирование шаблона

и если элемент находится в дополнительном шаблоне, мы увидим в коде следующую подсказку в комментарии <!-- incl. :

Редактирование шаблона

в данном примере видно, что кусок кода относится к файлу mblog.tpl, открываем его и видим:

Редактирование дизайна в 5CMS

Здесь условий конечно больше, но структура также легко читается.

Теги: шаблоны, tpl, работа с дизайном, изменение дизайна, редактирование шаблонов дизайна

Структура шаблонов дизайна

Еще нет своего сайта? Создайте интернет-магазин на платформе 5CMS - Все для продаж уже внутри!

Рекомендуем прочитать
  • Выбор: товары или услуги?

    Выбор: товары или услуги?

    Чтобы дизайн более точно соответствовал специфике вашего бизнеса мы сделали возможность выбрать что продает ваш сайт - товары или услуги. В зависимости от выбора скрываются ненужные блоки и модули.

  • Новый дизайн для мобильных устройств

    Новый дизайн для мобильных устройств

    Мы подготовили новый стильный легковесный дизайн для мобильных устройств.

    Настраиваемая из админки цветовая гамма.

  • Возможности блога в 5CMS

    Возможности блога в 5CMS

    Блог в 5CMS позволяет группировать записи (посты) по разделам (одного уровня вложенности).

    А также реализован функционал хэштегов и комментирования записей в блоге.