Готовые шаблоны для modx revolution. Новый шаблон для MODx - MODxPress

MODX is an advanced and powerful content management system that offers a quick and easy way to users to create, manage, and customize their website and blog even if they have little or no knowledge of programming. If you are looking to create an awesome functional website with comparatively less budget, then MODX themes are the best options for you. Here we are sharing the top that you can try for your business website and give it desired look.

Base is a minimalistic and clean MODX theme that comes with a fully responsive design and is ideal for any creative business or corporate websites. This theme, based on Bootstrap framework 3, comes with features like 3 home variations, retina ready design, 600+ fonts, well documented, smooth scroll, drag and drop shortcodes and more.

MDx Adorn is a clean, minimalist, and modern MODX theme made especially for businesses. It is a 100% responsive design coded with HTML5 and CSS and built with Bootstrap framework. It carries features like very easy customization options, SEO & rich snippets, RTL layout, unlimited colors, 404 error page, unlimited colors and more.

Club Cube is another wonderful responsive MODX theme designed for night clubs and DJs. It comes with an eye-catchy and modern design with features like twitter Bootstrap, media slider, SEO ready, 20 unique pages, responsive design, custom animations, valid HTML5 & CSS3 code and more. Get this MODX theme downloaded today.

MDx Sharp is a smart, clean, modern, stylish, and flexible MODX theme that offers all in one website solution for businesses. This theme is ideal for all types of business niches. Its major features include HTML5 & CSS3, 404 error page, unlimited colors, multiple sliders, responsive design, RTL layout and more.

Give your business, , or portfolio a professional and eye-catchy platform with this stylish and advanced MODX theme named STYZO. The major features of this theme include HTML5 & CSS3 code, fully customizable, custom animations, cube portfolio, blog section, filterable portfolio, Ajax form and more. Get it downloaded online now!

Try Superawesome, a multipurpose MODX theme with a modern and clean lading page designed for app or product showcase. This easy to set up and manage theme carries features such as a responsive design, high-resolution background, 500+mock ups, well documentation, based on Bootstrap 3, custom layout, and a robust admin panel.

MDx Uber is ideal MODX theme for product or service based companies and organizations. It can also be utilized for blogs, portfolios, photography, and . HTML5, CSS3, SEO ready, built with Bootstrap 2.3, unlimited color options, Google fonts, flex slider & BX slider and responsive layout are some of the major features of this theme.

MDx Apostle is one of the best MODX themes with a fully responsive design and Bootstrap 2.3 support. It is ideal for businesses, portfolios, corporates, creative websites, blogs and more. It comes with Google web fonts, flex slider & BX slider, jQuery, easy customization, collapsible sidebar, a gallery with a light box and more features.

Tredd Studio is another option for you if you are looking for a professional, clean, and modern MODX theme for your website. This theme is ideal for portfolios, photography, personal blogs, product or app showcase and more. This fully customizable theme comes with a fully responsive design with features like HTML5 & CSS3 code, filterable portfolio and more.

MDx Cygne is a professional and stylish designed for photographers to showcase their creative photography work, portfolio and more. This theme comes with a fully responsive design, custom color options, collapsible sliders, jQuery, flex slider & BX slider, Google fonts and more exciting features. So give it a try and showcase your photography skills professionally.

Duality is a one-page MODX theme ideal for app or product showcase, portfolio, landing pages, corporate and more. This theme carries features like a responsive design, Bootstrap3 CSS framework, single page modern design, isotope premium plug-in, parallax effects, well documentation and more. Download this one-page theme and start creating a professional landing page for your business.

Neat is a wonderful responsive modular MODX theme designed for photography, travel websites, corporates, businesses and more. It offers you exciting features like a responsive design, advanced theme options, multiple post formats, touch-enabled owl carousel, one-page smooth scrolling layout and more. Try this modular MODX theme and create a professional, clean, and modern website for your business.

Colors is a single page MODX theme made for app or product showcase, corporate, businesses and more. This theme comes with features like a responsive design, 3 templates, multiple color options, scrolling menu, format snippet, two menus, TV for images, CSS/JS/image files and more. Get this wonderful theme downloaded and create a lovely website for your business.

All these templates are tested and trusted by countless people across the world. The best part of using MODX themes is that even an unskilled user can comfortably create and manage his/her website with them. Whether you are using a full and multi-page or a one-page MODX theme, you will be provided with advanced functionalities, features, and an user-friendly environment that make it quite simple for you to create a functional website for your business.

Добро пожаловать на 4 урок MODX Revolution для новичков . На последнем занятии мы сделали некоторые настройки конфигурации сайта и посмотрели как выставлять некоторые глобальные установки. Также мы исследовали как устанавливать дополнения из репозитория MODX с помощью менеджера пакетов. В этой записи мы рассмотрим как работать с шаблонами в MODX Revolution . Мы собираемся начать со статичного HTML/CSS шаблона и через несколько уроков переделаем его в полноценный MODX Revolution шаблон .

Что такое MODX шаблоны?

MODX шаблоны это простые HTML/CSS шаблоны с тегами MODX внутри для динамичной функциональности. Это очень упрощенное определение, но в моей голове сложилось именно такое определения для MODX шаблона . Если вы знаете как программировать HTML/CSS или можете разобраться в таком коде, то остальное для вас не будет проблемой. Вот что делает MODX очень удобным для дизайнера.

Для этого урока я решил использовать тему студии Themeforest для своего сайта. Если вы хотите следовать точно моим шагам, то можете взять этот же шаблон или же взять другой шаблон, вашу собственную разработку либо скачанный с другого ресурса (в Google поищите ‘бесплатные css шаблоны’). Порядок действий для разработки шаблона будет аналогичным.

В этом уроке я буду использовать 7 in 1 Business Success Site шаблон потому что он имеет отличный вид и в то же время достаточно сложный, чтобы его было интересно портировать в сайт MODX . В комплекте 7 различных цветовых стиля, я буду использовать синий, а вы выбирайте какой вам нравится. Ну что ж начнем!

Первое, что я хочу отметить: способ построения шаблона показанный в этом уроке - это не единственный или единственноверный способ, это просто один из способов, которые я использую. MODX не ограничивает ни в том куда положить файлы или как разбивать шаблон… Как вам удобно, так вы и делайте ваш шаблон или как удобно вашему клиенту. Поэтому держите это в уме и можете отступать в порядке построения и изобретать свои более оптимальные способы, как говорится - делай как я, делай лучше меня.

1. Загрузка файлов шаблона

Любой шаблон содержит в себе много файлов – css файлов, яваскрипт, рисунков, флеш файлов… Все это нужно где-то хранить на вашем сервере, чтобы ваш шаблон имел к этим файлам доступ. Я предпочитаю хранить все файлы, которые относятся к шаблону в середине директории assets. Вы можете положить куда угодно и установить соответствующие пути в вашем шаблоне.

Распакованные файлы шаблона имеют приблизительно вот такую файловую структуру:

Таким образом 1 шагом в нашей разработке шаблона является копирование трех папок с файлами шаблона на сервер, это папки sample-data/, scripts/ и styles/. Я создал папку в середине assets и назвал ее templates, а также я создал папку 7in1, в которую поместил вышеназванные папки с файлами шаблона. Если вы запутались, то посмотрите на картинку и все станет понятно:

Теперь эти файлы доступны для любого шаблона, который вы будете делать.

2. Создание шаблона

После загрузки папок с файлами мы можем начать создание нашего MODX шаблона . В админке нажмите на вкладку Elements слева, откроется панель с различными элементами сайта - шаблонами, чанками, переменными шаблона и другими. Нажмем на templates и увидим, что уже есть в наличии один базовый шаблон с названием Base Template . Если вы на него нажмете, то вы можете увидеть код данного шаблона. Видим HTML код с тегами [[++site_name]], [[*pagetitle]].


Эти тэги трансформируют статичный HTML/CSS код в динамичный MODX шаблон и мы собираемся узнать как его сделать и приложить к этому свои руки.

Давайте продолжим и сделаем наш шаблон. Для создания нового MODX Revolution шаблона нажмите правой кнопкой мышки Templates, а далее New Template.


Можете также нажать на иконке New Template:

В следующем окне задайте название для вашего шаблона и описание. Вы можете разместить его в категории для лучшего порядка вашего сайта. Ну и как вы разместите элементы сайта зависит от вас и вашего вкуса. Я обычно создаю категорию для основного шаблона, где я сохраняю все шаблоны и чанки для этого шаблон, далее делаю то же самое для навигации и так далее. Вы можете организовать свой сайт по своему.

Ну вот можно добавить код в наш новый шаблон. Начнем мы с создания шаблона для главной страницы. Сейчас я могу сказать, что дизайн главной страницы будет отличаться от дизайна внутренних страниц, поэтому я назову этот шаблон каким-то своим именем, например «7in1 Home». Код домашней страницы находится в файле index.html в папке с шаблонами, которую мы загрузили с Themeforest, поэтому открываем этот файл в редакторе (я использую Notepad++) и копируем его содержимое в наш новосозданный шаблон в MODX . Можно (и это на мой взгляд даже более удобнее) отредактировать вначале код вне MODX Revolution и только потом перенести отредактированный код исправленного шаблона, но исходя из целей данного урока, все эти действия проведём внутри редактора MODX .


3. Отредактируйте пути

Поменяем в нашем коде пути к папкам шаблона. Мы скопировали наш шаблон в папку assets/templates/7in1. Поэтому нам нужно изменить пути ссылок к css файлам, js файлам, изображениям и др. на корректные пути на нашем сервере. Этот элемент вашей работы для ускорения можно сделать до того как копировать код шаблона в редактор MODX . Сейчас просто посмотрев на код, я могу сказать, что мне нужно искать папку styles/ и заменить ее на assets/templates/7in1/styles/, и так далее. Заменим все необходимые пути и сохраним наш шаблон. Вы можете обнаружить, что что-то упустили и есть ошибка в выводе страницы, поэтому возвращайтесь и снова откорректируйте пути.

4. Назначение шаблона

Итак мы закончили портирование шаблона, давайте назначим шаблон страницы и посмотрим, что же мы наделали. Для определения шаблона для страницы нам необходимо перейти на вкладку Resource и открыть ресурс для которого мы хотим определить шаблон (в нашем случае это страница Home). Если вы нажмете на поле Uses Template, то в выпадающем списке можно будет выбрать новый только что созданный нами шаблон.


После выбора шаблона нажмите Save появится сообщение о том, действительно ли вы хотите изменить шаблон, подтверждаем. Важность этого прояснится после того, как мы сделаем разные шаблоны, у которых будет множество чанков и переменных шаблона и которые мы по-разному разместим, поэтому вам необходимо быть уверенным в правильности выбора шаблона, ресурс для которого вы редактируете в данный момент.

После сохранение, мы можем просмотреть страницу и увидеть как она теперь выглядит. Вот снимок экрана, на котором видна верхняя часть страницы:


Вот нижняя часть:


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

Для того, чтобы сделать шаблон MODX Revolution динамичным, нам необходимо научится работать с тегами MODX . В движке MODX много различных тегов, которые можно использовать для создания и добавления изменяемых элементов контента на вашем сайте. Полный список доступных тегов MODX Revolution можно найти в руководстве. Если вы использовали до этого MODX Evolution, то вы поймете концепцию тегов, но все же вам необходимо посмотреть в документацию и усвоить новый синтаксис.


Если вы до этого никогда не использовали MODX , то не волнуйтесь, мы изучим как использовать эти теги в процессе построения сайта. Для начала посмотрите на таблицу сверху, на ней представлены синаксис тегов для разных версий MODX .

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

6. Изменения заголовка сайта в MODX Revolution

Первое, что мы сделаем - это изменим тег заголовка сайта, чтобы он выводил имя нашего сайта, а не имя шаблона, как сейчас:


Чтобы сделать это, нам нужно просто переместится в область кода, отвечающего за вывод заголовка сайта и заменить его системным тегом. Давайте взглянем на элемент нашего шаблона:

Business Success

Нам нужно просто заменить текст Business Success в заголовке на системный тег, который передаст текущий заголовок сайта с наших системных настроек. Заменим таким образом Business Success на [[++site_name]]. Также сделаем еще одну вещь, тип переменных можно определить в системных настройках нашего сайта, поэтому заменим UTF-8 на [[++modx_charset]]. Таким образом приведенный выше код приобретёт следующий вид:

US.CMS

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


Дополнительно, если вы посмотрите на код, вы увидите, что парсер MODX взял установки нашего сайта для типа данных и вставил динамически правильный тип данных.

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


Еще одна важная деталь: к нашему элементу необходимо добавить тег . Данный тег мы используем для определения адреса по умолчанию для всех ссылок на странице. Поэтому в моём случае мы внесем следующие изменения:

US.CMS

Это сработает отлично, но снова вместо тяжело-набираемого адреса, лучше использовать тег системных настроек. Используем этот тег и код будет выглядеть так:

Ну что ж, на этом мы закончим. Мы сделали значительный прогресс и теперь у нас есть начальные знания в построении шаблона MODX Revolution . Мы увидели пример того как делаются начальные настройки, создали новый шаблон, добавили его в категорию и начали добавлять теги MODX Revolution для начала преобразования нашего статического шаблона в динамический шаблон MODX .

8490

В этой статье рассмотрим такой элемент CMF MODX Revolution как шаблон.

Что такое шаблон?

Шаблон - это элемент MODX, представляющий собой заготовку, на основании которой может осуществляться вывод любого количества ресурсов. Для того чтобы шаблон использовался для вывода некоторого ресурса, он (шаблон) должен быть связан с ним (ресурсом).

Подключение шаблона к ресурсу осуществляется через поле "Шаблон".

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

Понять назначение шаблона и то, как он связан с ресурсами очень просто, если представить шаблон домом, а ресурс человеком, живущим в этом доме. Дом, так же как и шаблон (страница) состоит из множества деталей (крыша - шапка страницы, стены – каркас страницы, основная часть фасада – основное содержимое страницы, подвал – нижняя часть страницы и т.д.).

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

Внимание: Каждый ресурс (страница) в MODX Revolution может использовать в качестве своего вывода только один шаблон. Т.е. MODX не разрешает для вывода ресурса одновременно использовать несколько шаблонов. Но в любое время ресурсу можно назначить другой шаблон. Для этого необходимо на странице редактирования ресурса выбрать нужное значение из раскрывающего списка "Шаблон" и нажать на кнопку "Сохранить". После этого вывод ресурса уже будет осуществляться на основании указанного (другого) шаблона.

Где находятся шаблоны в админке?

В админке (менеджере) шаблоны находятся на левой панели во вкладке "Элементы".

Шаблоны состоят из полей: имя, описание, иконка, код шаблона (html) и др.

Основные поля шаблона - это имя и код шаблона (HTML). Имя - это название шаблона. Код шаблона - это его содержимое, на основании которого и будет осуществляться вывод ресурса. Код шаблона в большинстве случаев представляет собой обычную HTML-страницу с наличием в ней специальных тегов MODX (полей ресурса, TV-переменных, чанков, плейсхолдеров, ссылок, системных переменных, вызовов сниппетов). Эти специальные теги и выполняют всю магию. Они выводят данные (значения любых полей) текущего ресурса, формируют динамическое меню страницы, а также любой другой контент, который может быть связан или нет с этим (текущим) ресурсом.

Создание шаблона

Создание шаблона в админке осуществляется посредством выполнения следующих шагов:

  1. Нажать на значок "+" напротив заголовка "Шаблоны".
  2. В поле имя ввести название шаблона (например, Шаблон1).
  3. В поле код шаблона (HTML) ввести необходимое содержимое.
    Например: [[*pagetitle]]

    [[*longtitle]]

    ID (идентификатор) страницы: [[*id]]
    Аннотация (введение): [[*introtext]]
    Заголовок ресурса в меню: [[*menutitle]]
    [[*content]] Обратите внимание на специальные теги: [[*pagetitle]], [[*description]], [[*longtitle]] и др. Они обрабатываются парсером только тогда, когда браузер пользователя запросит у MODX ресурс, имеющий этот шаблон. Когда это случиться все специальные теги ([[*полеРесурса]]) будут заменены на значения соответствующих полей текущего (запрашиваемого) ресурса.
  4. Сохранить шаблон посредством нажатия на соответствующую кнопку.

Внимание: После создания шаблон автоматически не назначается ресурсам. Указание шаблона определённым ресурсам производится через их редактирование. Т.е. необходимо будет произвести изменения в каждом ресурсе, а именно открыть ресурс, выбрать из раскрывающего списка созданный шаблон и нажать на кнопку "Сохранить".

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

Редактирование шаблона в админке осуществляется следующим образом:

  1. Открыть в левой панели админки вкладку "Элементы".
  2. Раскрыть содержимое раздела "Шаблоны", нажав на значок треугольника.
  3. Нажать левой кнопкой мыши на название необходимого шаблона.
  4. Внести изменения в необходимые поля шаблона.
  5. Нажать на кнопку "Сохранить".

Где хранятся шаблоны?

Шаблоны MODX по умолчанию хранятся в таблице базы данных modx_site_templates (modx - это префикс для таблиц, назначаемый во время установки системы).

Начиная с версии MODX 2.2.x появилась также возможность хранить код шаблона в файле.

Чтобы это сделать необходимо на странице создания/редактирования шаблона выполнить следующее:

  1. Установить галочку в поле "Статичный".
  2. Выбрать из раскрывающего списка "Источник файлов для статичного файла" базовый каталог. Базовый каталог - это каталог относительно которого будет указываться расположение статичного файла.
  3. Указать в поле "Статичный файл" расположение файла относительного базового каталога.
  4. Нажать на кнопку "Сохранить".

После этого содержимое указанного файла будет использоваться в качестве кода шаблона.

Это возможность предназначено для того, чтобы код шаблона можно было изменять путём редактирования файла.

Использование полей ресурса в шаблоне

Получение значений полей ресурса в шаблоне осуществляется посредством следующего синтаксиса:

[[*имяПоля]]

Список доступных полей ресурса можно посмотреть . Например, вывести значение поля pagetitle текущего ресурса в тег title:

[[*pagetitle]]

Например, вывести содержимое текущего ресурса:

[[*content]]

Теги, предназначенные для вывода значений полей ресурса, могут также как и другие теги MODX, иметь фильтры вывода. Например, выведем значение поля "introtext" в блок div с классом intro, используя 2 фильтра. Первый фильтр вывода будем использовать для исключения из содержимого поля introtext любых HTML-тегов. Второй фильтр будем использовать для того чтобы вводить на экран не всё содержимое этого поля, а только первые 200 символов. Если данное поле будет иметь большее количество символов, то в конце строчки отобразить знак многоточия (...).

[[*introtext:stripTags:ellipsis=`200`]]

TV-переменные в шаблонах

Если шаблон сравнивать с домом, то TV-переменные (переменные шаблона) можно представить как комнаты этого дома. Добавление TV-параметра - это получается как добавление новой комнаты в дом.

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

Например, необходимо добавить ко всем ресурсам, имеющим шаблон "city", дополнительное поле photo. Чтобы это осуществить необходимо выполнить следующие действия:

  1. Необходимо создать TV-переменную photo.
  2. Установить этой переменной на соответствующих вкладках в качестве типа ввода и вывода необходимое значение. Например, изображение.
  3. На вкладке "Доступно для шаблонов" установить галочку напротив шаблона "city".

После этого у ресурсов, имеющих шаблон "city" появится дополнительное поле.

Для того чтобы вывести значение поля (TV-параметра) city в шаблоне необходимо использовать следующую конструкцию:

[[*photo]]

TV-переменные должны быть явно назначены шаблону. Только после этого они станут доступными при редактировании соответствующих ресурсов. Если в режиме редактирования ресурса, необходимые TV-параметры не отображаются, значит, они не были назначены шаблону, который этот ресурс использует.

Пару месяцев назад я познакомился с движком modx. Вначале было очень трудно, хотя самоучителей по нему достаточно. Но некоторые из них застарели, некоторые были для других версий. Но в общем с работой и возможностями движка я разобрался, хотелось еще установить красивый шаблон modx , но тут я столкнулся с проблемой — шаблонов на модх как таковых нет. Сначала я расстроился, а потом понял насколько это круто, ведь на модх можно поцепить любой html -шаблон, при этом разбив его на чанки (детали шаблона) как угодно! В этой статье я и расскажу вам как легко установить шаблон modx , разбить его на части и как редактировать шаблоны modx .

Самое главное — это найти просто html-шаблон. Желательно адаптивный — чтобы открывался на разных устройствах с разной шириной экрана. Будем считать что Вы нашли такой (хотя в нашей случае подойдет абсолютно любой html шаблон). Далее нужно или залить файлы на хостинг, или создать там странички и скопировать содержимое. Но давайте все по шагам и как это делаю я.

Пошаговая инструкция по созданию и настройке своего шаблона modx

Итак, мы имеем шаблон — набор html и css файлов, возможно еще и скрипты.

1. Заходим в админ панель modx, вкладка Элементы-Шаблоны и жмем плюсик.


3. Жмем сохранить. Все, наш шаблон готов. Но чтобы проверить его работу, нужно создать тестовую страничку. Для этого Создаем новый ресурс (страницу), выбираем наш новосозданный шаблон и жмем сохранить. Не забываем отметить галочкой Опубликован .


Теперь открываем нашу страницу (введя вручную адрес в браузере или добавьте в меню для удобства). Если Вы все сделали правильно сайт должен открыться с Вашим новым html шаблоном, установленным на modx.


Свой шаблон modx: не показываются картинки и стили css

Хотя, скорее всего, шаблон может не открыться так как надо с первого раза. Будьте внимательны с расположением файлов . Обычно шаблон может «поплыть» и показываться без картинок. Все из-за того, что неверно прописан путь к файлам. Их нужно смотреть в самом файле шаблона и подставить туда, куда вы заливали на хостинг. Например, я заливал файлы в папку assets/template/test_shab /, поэтому в шаблоне прописывал что-то вроде assets/template/test_shab/img/favicon.ico и т.д. Все пути к файлам нужно сменить, поскольку стандартно все файлы находятся в папке с шаблоном, а в modx лучше их куда-то загружать (но это скорее для удобства, дабы не засорять систему).

Как сделать чтобы отображался контент modx на своем шаблоне

Если Ваш шаблон открывается и все картинки показываются — это хорошо. Но это еще не все. Сам контент, прописан через админку modx, не выводится. А почему? Потому что он не упоминается в шаблоне! Мы просто скопировали весь код из html-шаблона. Добавьте вместо контента в шаблоне чанк [[*content]] , который как раз и отвечает за вывод всего контента modx. В редакторе шаблона выглядеть это будет примерно вот так:


На этом пока заканчиваем. Если что-то не получилось — спрашивайте. Это пока не все, еще нужно будет разбить ваш шаблон на чанки , чтобы удобнее выводить контент и работать с сайтом.

Приветствую вас уважаемые читатели! В предыдущих уроках мы произвели первичные настройки MODX, установили основные пакеты дополнений и настроили ЧПУ MODX. Теперь начинается самое интересное. Сегодня мы поговорим о том что такое MODX шаблоны и где их достать (скачать, заказать, купить).

Что такое MODX шаблон

MODx шаблон – это по сути обычный HTML/CSS/JS шаблон с прописанными внутри него тегами синтаксиса MODX для его лучшей динамичной функциональности. Так что если Вы не плохо разбираетесь в HTML/CSS, тогда интеграция обычного HTML/CSS шаблона в MODX не доставит проблем. Благодаря этой фишке MODX очень удобен для веб дизайнеров. Ну а теперь переходим к самому интересному.

Где брать шаблоны для modx

Здесь у нас три пути:

  1. Нарисовать самому с нуля и сверстать, эксклюзив
  2. Заказать у фрилансера или партнера, друга
  3. Сделать самому из имеющихся шаблонов

Первый вариант подходит для веб-дизайнеров или хотя бы тех, кто в совершенстве владеет Adobe Photoshop и хорошо знает HTML и CSS.

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

Ну и 3й вариант, подходит вам если вы хоть немного разбираетесь в HTML и CSS. Требует минимальных затрат и по времени не особо долго занимает (немного стилизировать по своему, внести небольшие правки и т.д. Для заказчиков с маленьким бюджетом, я обычно использовать именно этот вариант.

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

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

Перечень сайтов, на которых вы без труда сможете найти шаблон с отличным дизайном под любую тематику сайта.

Хочу сразу заметить — не нужно думать, что шаблонные сайты – плохо. Нет!

Плохо – это когда на сайт вбухана куча «бабла» (уникальный авторский дизайн, самый дорогой выделенный сервер в Германии или Нидерландах, платный движок, типа «1С-Битрикс: Управление сайтом – Бизнес» за 60 000 р., нанят самый крутой «сеошник» с посекундной тарификацией, запущен Яндекс.Директ на 100 000 р. в лёгком режиме работы и т.д.), а результат нулевой! Вот это, действительно, плохо! Я бы сказал, из рук вон плохо!

Обращаю ваше внимание, что шаблон для будущего сайта необходимо выбирать с максимальным заделом на будущее. Что это значит? Сайт будет работать не год и не два с этим дизайном, а время не стоит на месте – меняются технологии. Поэтому глупо выбирать шаблоны младше 2014 года.

Табличная вёрстка – анахронизм!

Выбранный вами шаблон должен удовлетворять элементарным требованиям:

  1. HTML5;
  2. CSS3;
  3. 100% адаптивный (responsive).

Для достижения последнего пункта обычно применяется самый распространенный, популярный и гибкий CSS фреймворк Twitter Bootstrap. Версии, желательно, выше 3.5. Сейчас уже 4 версия.

На сайтах представлены как чистые HTML шаблоны, так и шаблоны (темы) для различных CMS (WordPress, Joomla, Drupal). Причём, цена последних в разы дороже. Как вы уже догадались, для CMS MODX тематизированные шаблоны не имеют смысла. Если вы надумали купить один из шаблонов, то зачем переплачивать за специальный тематизированный шаблон, если можно купить на простом HTML совсем дёшево (допустим, за $15, т.е. около 550 руб.). К тому же, некоторые полностью одинаковые шаблоны продавец предлагает как CMS ориентированные, так и обычные HTML. Например, как отдельная тема для WordPress шаблон стоит $75, а в обычном HTML виде он же стоит $15.

Тематизированные шаблоны подходят только в том случае, если вы не нашли удовлетворяющего ваши потребности или потребности заказчика обычного HTML шаблона.

С этим думаю разберетесь.