Создание сайта на Modx Revolution. Урок 1. HTML шаблон сайта

Создание сайта на 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. Удаление миникорзины и иконки корзины

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

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

<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. Что у нас получилось в результате можно посмотреть в "Демо"

Помогла статья? Угости чашечкой кофе =)

Если вы не видите кнопку "Скачать"
отключите блокировщик рекламы

Комментарии ()

    Похожие статьи