Создание сайта с нуля. Урок #28. Приступаем к посадке HTML верстки на MODx. Шаблоны и чанки
В данном уроке мы перенесем верстку главной страницы в шаблон MODx, сделаем базовую настройку шаблона и разобьем секции на чанки.
Поделиться Отправить Класснуть Запинить
Дополнительные материалы:
- Настройка MODX (базовый урок)
- Настройка прав доступа MODX Revolution
- Посадка типовой секции Landing Page на MODX
Премиум уроки от WebDesign Master
Создание сайта от А до Я. Комплексный курс
Создание современного интернет-магазина от А до Я
Я — фрилансер! Базовый курс для начинающих
Другие уроки по теме «CMS»
- Ajax фильтр на MODx Revolution
- Посадка типовой секции Landing Page на MODx с использованием MIGX (добавляемые поля)
- Настройка прав доступа для контент-менеджера в MODX Revolution
- MODX Revolution — Базовый урок
- Как создать шаблон для WordPress. Грамотная посадка верстки на WordPress (Right Way)
- Быстрое создание красивых сайтов на WordPress. Layers Style Kit на реальном примере
бесплатные шаблоны (темы/скины) для блога.
все не покидает меня идея поднятия своего отдельностоящего блога. сегодня погуглил на сабж. остался в смятении. в основном шаблоны для блогов привязываются к какой-нить блогоплощадке. в принципе расковырять их можно, но чего-то лениво. обращаюсь к сообществу, а не подкинет ли кто-нить урлу на свалку шаблонов или шаблон из своих запасников. конечно желательно бесплатный поиметь, потому как за деньги я и заказать сам у себя могу
если кто сговнякает или отдаст свой макет, копирайты с урлами на вас — не проблема, только ценности в них никакой. сомневаюсь, что у меня толпа в блоге тусить будет.
«Und wenn du lange in einen Abgrund blickst, blickt der Abgrund auch in dich hinein.»
Не используйте Revo для «просто сайтов». Используйте Evo
- 1,103 Posts
Как разрабатывают сложные информационные порталы на MODX?
Всем привет!
Наткнулся на сайт kronvest.net, он на modx, обратил внимание на большое количество страниц и у каждой страницы своя структура. Задался вопросом как все эти страницы могут быть представлены в админке? Если на WordPress есть elementor, wp page builder и др, то на modx такого же нет. Неужели это реализовано огромной кучей tv параметров, или вообще просто на каждую страницу свой html шаблон?
18 июля 2022, 18:39
Вячеслав Варов /users/vyacheslav modx.pro https://modx.pro
Комментарии: 4
18 июля 2022, 18:55
Есть PageBlocks
Есть ContentBlocks
Или можно на MIGX сделать через Multiple Formtabs
18 июля 2022, 23:41
Инновационный, сверхтехнологичный, абсолютно бесплатный мой велосипед)))
19 июля 2022, 12:23
19 июля 2022, 13:00
Как тот портал сделан — не известно, но функционал для создания повторяющихся блоков и самих тем уже есть.
Посмотрите MagicThemes и его демо-шаблон mtDemo. Можно посмотреть видео что может и как.
Для разработчиков уже пишу инструкцию как работать с этим пакетом.
Остальные допы тоже не плохи. Можно выбрать по «вкусу и цвету»
modstore.pro/packages/sites-themes/magicthemes
Вскоре будет выход платного шаблона для маленького блога.
Авторизуйтесь или зарегистрируйтесь, чтобы оставлять комментарии.
Здесь упомянуты:
| Компонент | Текущая версия | Закачки |
| PageBlocks | 1.3.4-beta от 05.02.2023 | 257 |
| MagicThemes | 1.0.0-pl3 от 07.02.2023 | 52 |
| mtDemo | 1.0.0-alpha3 от 24.05.2022 | 45 |
38 минут назад
поигрался еще с debugParser вот параметр фильтра &filters=` ms|price:number, tv|ms_type, tv|ms_type-lamp, tv|ms_style, .
Низкая скорость сайта с большим количеством товаров 13
1 час назад
Дело в том, что сайт заполняют девочки — научные сотрудницы, они такое не смогут. Вот и думаю как им упростить работу. Можно ли как-то их предупрежда.
Создание сайта на Modx Revolution. Урок 1. HTML шаблон сайта
Здравствуйте. Это первый урок по созданию сайта на Modx Revolution для начинающих. Мы не будем здесь разбирать, как нарисовать и отверстать в HTML свой собственный сайт. Мы будем учиться на базе уже готого шаблона, который можно скачать бесплатно или купить на специальных сервисах. Здесь я опубликую HTML шаблон из нескольких основных страниц: Главная, О компании, Новости, Галерея, Контакты. Также здесь будет Блог, небольшой личный кабинет и. интернет-магазин. Мы будем идти от простого к сложному. Но я специально подобрал шаблон со всеми всевозможными страницами и даже такими как страница 404-ой ошибки или страницы входа в аккаунт, чтобы в конце мы научились делать как простой сайт так и интернет-магазин с личным кабинетом. Поверьте, в этом нет ничего сложного.
Мы будем использовать вот этот шаблон. Здесь 28 страниц, включая 5 разновидностей Главной, каталог с товарами, страницу товара, ленту блога, страницу поста с комментариями, страниц о компании, сервисе, 404 ошибки, личного кабинета и прочих. В общем это максимально расширенная версия шаблона, который позволит нам сделать крупный интернет-магазин. Но начнем мы с простого: сайт с главной страницей, о компании, услуги, контакты. И первое что нам надо будет сделать — это вычленить эти страницы из данного шаблона.
Главная страница
Я решил использовать 3-ий вариант главной страницы. Там, как мне кажется, красивее слайдер и уместный приветственный блок после слайдера.
Страница «О компании»
На этой странице мы дадим полную информацию о нашей компании. Описание, отзывы, парнеры, отличительные качества. И всё это будет редактируемым через админку.
Страница «Услуги»
Здесь будут представлены какие-то наши услуги и обязательно сделаем так, чтобы их можно было добавлять и редактировать
Страница «Часто задаваемые вопросы»
Раздел, на котором мы будем размещать часто задаваемые клиентами вопросы и отвечать на них. Соответственно, этот раздел тоже будет полностью администрируемым
Страница Контактов
На этой странице мы поработаем над картой, контактной информацией и формой обратной связи.
Страница 404 ошибки
Эта страница, как пример технической страницы. 404 ошибка нужна для информирования посетителя о несуществующей странице. Также мы создадим sitemap.xml и страницу результатов поиска
Итак. Шаблон мы нашли, со страницами нужными определились. Следующим шагом будет работа над дизайном на локальном компьютере. Нам нужно поменять логотип на наш и в шапке вместо иконок личного кабинета и корзины поставить иконки социальных сетей. С этим справится практически любой, даже тот, что не знает ни HTML ни CSS.
Редактирование шаблона у себя на компьютере
Для начала вам нужно скачать редактор HTML и CSS кода. Для Mac OS я рекомендую Coda2 или Sublime Text. Для Windows — программу Notepad++. Установите любую из программ себе на компьютер. Теперь скачайте архив www (ссылка на скачивание также будет внизу по кнопке «Скачать») и откройте файл index.html с помощью установленого редактора кода.
Вы увидите вот такую картину (я пользуюсь Coda2)
Здесь я предлагаю поменять следующее:
1. Убрать блок с товарами
Так как мы на данном этапе не делаем интернет-магазин я предалагаю убрать лишний блок с товарами. Находим вот этот код (product area start)
и полностью удаляем этот блок (с product area start по product area end)
2. Удаление миникорзины и иконки корзины
Также я удалю иконку корзины и весь всплыващий блок с миникорзиной
Мы обязательно еще вернемся к этому, когда будем делать на основе этого сайта интернет-магазин, но на данном этапе нам этот блок будет только мешать. Находим код:
и удаляем его. Находим блок mini cart
И также удаляем целый блок. Если обновим шаблон в браузере, то увидим такую картину:
3. Заменяем иконку юзера и сердечка на номер телефона
Предлагаю заменить иконку человечка и сердечка на номер телефона. Блок:
удаляем и вставляем на его место
8999 999999
И здесь начинается самое интересное. Особенно для тех, кто впервые видит HTML код. Мы сейчас попробуем поработать над стилями. Создайте в папке assets/css файл custom.css
И подключите его в блоке head после
и добавьте в этот файл строчку
.tel_big {font-size: 28px}
чтобы получилось вот так
теперь обновляем наш шаблон в браузере и вуаля
4. Поменяем логотип на наш собственный
Для этого нам понадобится пробграмма Photoshop СС или другой редактор изображений. Открываем в Photoshop изображение из папки img/logo logo.png
выбираем инструмент выделение
выделяем весь логотип
и нажимаем backspace. Теперь у нас пустое поле. Здесь вы можете разместить свой логотип. я же просто напишу Лого и вставлю какой-нибудь значок
Сохраняем изображение в папку img/logo поверх старого logo.png
и обновляем сайт. У нас обновилось лого в шапке,
в фиксированной шапке
и в футере сайта
5. Редактируем меню сайта
Предлагаю сразу поработать над меню. Русифицировать его и оставить только нужные страницы. Находим в файле index.html с помощью сочетаний клавиш Ctrl+F (Windows) или Cmd+F: . У меня это 210 строчка
В этом блоке у нас содержится главное меню. Меняем весь блок
На следующий код
Тут же в блоке сразу заменю Search product. на Поиск по сайту. Смотрим результат:
Взглянем, что там у нас в мобильнйо версии — Правой кнопкой мыши в любом месте сайта / Просмотреть код. Откроется инспектор
Нажмем на кнопку отображения адаптивной версии
Чтобы удобнее было просматривать мобильную версию нажмем сюда
Выберем Iphone 6/7/8 Plus и выставим удобное увеличение. У меня это 82%
Теперь можно работать с мобильной версией. Откроем меню и посмотрим что там
Меню очень удобное, но мы видим, что десктопная изменения, которыен мы сделали для десктопной версии не затронули мобильную. Исправляем. Находим offcanvas menu area start, у меня это 46 строчка
Выделяем до . Удаляем. Вместо этого блока вставляем
Мы убрали лишние элементы (можете их не убирать, их можно использовать), оставили только страницы, которые определили для этого сайта (Главная, О компании, Услуги, Вопрос-ответ, 404 ошибка, Контакты), убрали лишние соц. сети, добавил VK и Instagram и вот что у нас получилось
Тоже самое можно проделать с остальными страницами, но я этого делать не буду, так как составлять чанки я буду из главное страницы. Что такое чанки — мы узнаем в следующих уроках. А на сегодня, наверное, хватит. На этом работу с шаблоном закончим. В следующих уроках разберем как установить систему Modx Revolution, настроить её и вставить наш HTML шаблон в сайт.