Архив шаблона должен включать в себя следующие файлы:
- Default
- Index.html — страница, предоставленная разработчиками, на которой демонстрируется работа шаблона на различных мобильных устройствах и ПК. Данная страница нам не потребуется.
В свою очередь папка Default включает в себя папку с CSS-элементами, js, home.html.
- CSS — изображения и стили, которые используются в текущем шаблоне сайта на MODx.
- Js — элементы jquery + элементы (скрипты) для отображения на главной странице слайдера.
- home.html – является основным файлом в этой папке.
Шаблоны вашего сайта на MODx хранятся в директории /assest/templates. В данную папку скопируйте файлы приобретенного HTML-шаблона.
Настраиваем дизайн главной страницы сайта
Откройте административную панель сайта (http://мой_сайт.ru/manager). Перейдите в раздел «Элементы» — «Управление элементами» — «Шаблоны». Откройте страницу «Minimal Template».
Рис. 1
Из данного шаблона мы будем формировать страницу, а именно, главную страницу сайта (home).
Форма состоит из следующих полей:
- Имя шаблона – как мы уже сказали, из этого шаблона мы будем формировать главную страницу сайта — поэтому имя шаблона будет «Главная» (или Home).
- Описание — небольшое описание шаблона, которое будет отображаться только здесь и в общем списке шаблонов.
- Существующие категории — категории уже созданных шаблонов.
- Новая категория — если ни одна категория из списка выше не подходит, то можно задать новую группу для данного шаблона.
- Код шаблона HTML — добавьте в данное поле код страницы home.html, которая находится у нас в директории assets/templates/shablon/home.html.
Рис. 2
Этого будет недостаточно, так как у вас подключится только путь к структуре, но не подключатся необходимые стили и скрипты. Это происходит потому, что мы сменили путь к данными файлам.
Для того чтобы подключить стили и скрипты шаблона MODx, необходимо снова перейти в управление элементами и открыть наш шаблон для главной.
Как настроить скрипты и стили:
- Между тегом <head> </head> пропишите путь к шаблону, например:
<base href=””>. - Замените пути к файлам всех строчек, которые имеют значение «src».
Например, у нас прописан путь «<img src=”css/images/cart-uim.png” alt=”” />», тогда перед «css/images/cart-uim.png» необходимо добавить «assets/templates/shablon/».
После этого нажмите на кнопку "Сохранить".
Варианты готовых шаблонов для CMS MODx
Помимо HTML-шаблона, на сайт можно также установить и готовый шаблон, настроенный под определенную CMS, в нашем случае — MODx.
"Booom!" — шаблон для MODX — красочный и привлекательный шаблон, который подойдет для проекта или компании, ориентированных на услуги по воспитанию детей или развлечения для детей. Шаблон построен на Bootstrap 3.0. Простое управление шаблоном. |
![]() |
"Cube" — интересный шаблон для ночного клуба или проекта, который освещает все грядущие развлекательные события в городе. Шаблон разработан на Twitter Bootstrap Grid System. Респонсивный шаблон. Использование HTML5 и CSS3, гибкая настройка, события, медиа, галерея, блог, AjaxForm. |
![]() |
"Light" — Целевая страница для компании в сфере бизнес-услуг. Многофункциональный шаблон MODX. Поддержка Wayfinder и Formlt элементов. Шрифты PT Serif и PT Sans (шрифты Google). |
![]() |
"Other" — шаблон для фотостудии. Идеально подходит для демонстрации творческих работ. Основное место на сайте уделяется изображениям и галереям. Использование AJAX для загрузки. |
![]() |
Write a comment