Здравствуйте. Это первый урок по созданию сайта на Modx Revolution для начинающих. Мы не будем здесь разбирать, как нарисовать и отверстать в HTML свой собственный сайт. Мы будем учиться на базе уже готого шаблона, который можно скачать бесплатно или купить на специальных сервисах. Здесь я опубликую HTML шаблон из нескольких основных страниц: Главная, О компании, Новости, Галерея, Контакты. Также здесь будет Блог, небольшой личный кабинет и...интернет-магазин. Мы будем идти от простого к сложному. Но я специально подобрал шаблон со всеми всевозможными страницами и даже такими как страница 404-ой ошибки или страницы входа в аккаунт, чтобы в конце мы научились делать как простой сайт так и интернет-магазин с личным кабинетом. Поверьте, в этом нет ничего сложного.

Мы будем использовать вот этот шаблон. Здесь 28 страниц, включая 5 разновидностей Главной, каталог с товарами, страницу товара, ленту блога, страницу поста с комментариями, страниц о компании, сервисе, 404 ошибки, личного кабинета и прочих. В общем это максимально расширенная версия шаблона, который позволит нам сделать крупный интернет-магазин. Но начнем мы с простого: сайт с главной страницей, о компании, услуги, контакты. И первое что нам надо будет сделать - это вычленить эти страницы из данного шаблона. 

Итак. Шаблон мы нашли, со страницами нужными определились. Следующим шагом будет работа над дизайном на локальном компьютере. Нам нужно поменять логотип на наш и в шапке вместо иконок личного кабинета и корзины поставить иконки социальных сетей. С этим справится практически любой, даже тот, что не знает ни 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. Удаление миникорзины и иконки корзины

Также я удалю иконку корзины и весь всплыващий блок с миникорзиной

Мы обязательно еще вернемся к этому, когда будем делать на основе этого сайта интернет-магазин, но на данном этапе нам этот блок будет только мешать. Находим код:

<div class="header_account-list mini_cart_wrapper">
<a href="javascript:void(0)"><i class="icon-shopping-bag"></i><span
class="item_count">2</span></a>
</div>

и удаляем его. Находим блок mini cart

И также удаляем целый блок. Если обновим шаблон в браузере, то увидим такую картину:

3. Заменяем иконку юзера и сердечка на номер телефона

Предлагаю заменить иконку человечка и сердечка на номер телефона. Блок:

<div class="header_account_area">
 <div class="header_account-list top_links">
 <a href="#"><i class="icon-users"></i></a>
 <ul class="dropdown_links">
 <li><a href="checkout.html">Checkout </a></li>
 <li><a href="my-account.html">My Account </a></li>
 <li><a href="cart.html">Shopping Cart</a></li>
 <li><a href="wishlist.html">Wishlist</a></li>
 </ul>
 </div>
 <div class="header_account-list header_wishlist">
 <a href="wishlist.html"><i class="icon-heart"></i></a>
 </div>

</div>

удаляем и вставляем на его место

<p><i class="icon-phone"></i> 8999 <span class="tel_big">999999</span></p>

И здесь начинается самое интересное. Особенно для тех, кто впервые видит HTML код. Мы сейчас попробуем поработать над стилями. Создайте в папке assets/css файл custom.css

И подключите его в блоке head после

<link rel="stylesheet" href="assets/css/style.css">

добавив строчку

<link rel="stylesheet" href="assets/css/custom.css">

и добавьте в этот файл строчку

.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: <header>. У меня это 210 строчка

В этом блоке у нас содержится главное меню. Меняем весь блок <ul>

<ul>
 <li><a class="active" href="index.html">home<i class="fa fa-angle-down"></i></a>
  ...
 <li><a href="contact.html"> Contact Us</a></li>
</ul>

На следующий код

<ul>
 <li><a class="active" href="index.html">главная</a></li>
 <li><a href="#">Услуги <i class="fa fa-angle-down"></i></a>
  <ul class="sub_menu pages">
   <li><a href="service.html">Услуга 1</a></li>
   <li><a href="service.html">Услуга 2</a></li>
  </ul>
 </li>
 <li><a href="#">О компании <i class="fa fa-angle-down"></i></a>
  <ul class="sub_menu pages">
   <li><a href="faq.html">Вопрос-ответ</a></li>
   <li><a href="404.html">404 ошибка</a></li>
  </ul>
 </li>
 <li><a href="contact.html"> Контакты</a></li>
</ul>

Тут же в блоке <header> сразу заменю Search product... на Поиск по сайту... Смотрим результат:

Взглянем, что там у нас в мобильнйо версии - Правой кнопкой мыши в любом месте сайта / Просмотреть код. Откроется инспектор

Нажмем на кнопку отображения адаптивной версии

Чтобы удобнее было просматривать мобильную версию нажмем сюда

Выберем Iphone 6/7/8 Plus и выставим удобное увеличение. У меня это 82%

Теперь можно работать с мобильной версией. Откроем меню и посмотрим что там

Меню очень удобное, но мы видим, что десктопная изменения, которыен мы сделали для десктопной версии не затронули мобильную. Исправляем. Находим offcanvas menu area start, у меня это 46 строчка

Выделяем до <!--offcanvas menu area end-->. Удаляем. Вместо этого блока вставляем

<!--offcanvas menu area start-->
<div class="off_canvars_overlay">

</div>
<div class="offcanvas_menu">
 <div class="container-fluid">
  <div class="row">
   <div class="col-12">
    <div class="canvas_open">
     <a href="javascript:void(0)"><i class="icon-menu"></i></a>
    </div>
    <div class="offcanvas_menu_wrapper">
     <div class="canvas_close">
      <a href="javascript:void(0)"><i class="icon-x"></i></a>
    </div>

    <div class="call-support">
     <p>Телефон для справок: <a href="tel:89999999999">89999999999</a></p>
    </div>
    <div id="menu" class="text-left ">
     <ul class="offcanvas_main_menu">
      <li class="menu-item-has-children">
       <a href="index.html"> Главная</a>
      </li>
      <li class="menu-item-has-children active">
       <a href="services.html">Услуги</a>
        <ul class="sub-menu">
         <li><a href="service.html">Услуга 1</a></li>
         <li><a href="service.html">Услуга 2</a></li>
        </ul>
      </li>
      <li class="menu-item-has-children active">
       <a href="about.html">О компании</a>
        <ul class="sub-menu">
         <li><a href="faq.html">Вопрос-ответ</a></li>
         <li><a href="404.html">404 ошибка</a></li>
        </ul>
      </li>
      <li class="menu-item-has-children">
       <a href="contact.html"> Контакты</a>
      </li>
     </ul>
    </div>

    <div class="offcanvas_footer">
     <span><a href="#"><i class="fa fa-envelope-o"></i> demo@example.com</a></span>
      <ul>
       <li class="facebook"><a href="#"><i class="fa fa-facebook"></i></a></li>
       <li class="twitter"><a href="#"><i class="fa fa-vk"></i></a></li>
       <li class="pinterest"><a href="#"><i class="fa fa-instagram"></i></a></li>
      </ul>
     </div>
   </div>
  </div>
 </div>
 </div>
</div>
<!--offcanvas menu area end-->

Мы убрали лишние элементы (можете их не убирать, их можно использовать), оставили только страницы, которые определили для этого сайта (Главная, О компании, Услуги, Вопрос-ответ, 404 ошибка, Контакты), убрали лишние соц. сети, добавил VK и Instagram и вот что у нас получилось

Тоже самое можно проделать с остальными страницами, но я этого делать не буду, так как составлять чанки я буду из главное страницы. Что такое чанки - мы узнаем в следующих уроках. А на сегодня, наверное, хватит. На этом работу с шаблоном закончим. В следующих уроках разберем как установить систему Modx Revolution, настроить её и вставить наш HTML шаблон в сайт.

P.S. Что у нас получилось в результате можно посмотреть в "Демо"