Тот, кто занимается созданием веб сайтов, знаком со таким термином, как «сайт — визитка». Какими же характеристиками должен обладать данный интернет ресурс? В первую очередь — это привлекательный вид, удобное для восприятия размещения информации. Мы представляем вам шаблон под систему управления контентом Joomla (версия 2.5) под названием «ATLight», который позволяет без особых усилий создать сайт с вышеописанными характеристиками.
Тот, кто занимается созданием веб сайтов, знаком со таким термином, как «сайт — визитка». Какими же характеристиками должен обладать данный интернет ресурс? В первую очередь — это привлекательный вид, удобное для восприятия размещения информации. Мы представляем вам шаблон под систему управления контентом Joomla (версия 2.5) под названием «ATLight», который позволяет без особых усилий создать сайт с вышеописанными характеристиками.
Шаблон «ATLight» распространяется на коммерческой основе.
Купить шаблон «ATLight» - совместимость Joomla 2.5
После приобретения шаблона, вам необходимо будет скачать архив (ATlight.zip), который следует распаковать на жестком диске своего компьютера.
Рассмотрим подробно содержимое распакованного архива:
atlight.zip — непосредственно дистрибутив шаблона
design.zip — в данном архиве расположены файлы с графикой в формате PSD и JPG.
mod_nivoslider_j25.zip — бесплатный модуль слайд-шоу Nivo Slider. Именно он применяется в «шапке» шаблона
quickstart.zip — так называемый «быстрый старт» - дистрибутив Joomla 2.5, после установки которого на вашем сайте появится шаблон «ATLight», заполненный демо данными
manual.pdf — собственно, это копия данной статьи
Демонстрационную версию шаблона мы разместили на тестовом сайте, который доступен по следующей ссылке:
http://test-sitogon.ru/si_visit/
Установка и настройка шаблона ATLight для построения сайта - визитки
Рассмотрим подробно случай, когда требуется установить шаблон на уже созданный сайт. То есть, размещение модулей в нашем случае будет производиться вручную, без помощи «быстрого старта»
Итак, наша задача — установить и настроить шаблон таким образом, чтобы он по завершении нашей работы был максимально похож на свою демонстрационную версию.
Для этого последовательно, через менеджер расширений (Extension Manager) устанавливаем дистрибутив шаблона (atlight.zip), далее производим инсталяцию модуля Nivo Slider, который мы прилагаем в дистрибутиве
Настройка шаблона для сайта визитки ATLight
Работу с шаблоном начнем с изучения его настроек. Для этого открываем административную панель «Расширения» (Extensions) - «Менеджер шаблонов» (Template Manager)
Далее выделяем наш шаблон флажком и нажимаем кнопку «Изменить»
Обратим внимание на правый блок «Дополнительные параметры»
На данный момент все поля пустые. Предлагаю, более детально рассмотреть значение элемента, представленного в данном блоке
Логотип — нажатие на кнопку «Выбрать» позволит установить в качестве логотипа собственное изображение. Если же нажать кнопку «Очистить», то будет либо установлено значение «по умолчанию», либо будет отображаться текст, которым заполнены поля «Название сайта» и «Описание сайта»
Фоновая картинка — здесь определяется фоновое изображение сайта. Если данный параметр не назначен вручную администратором сайта, то будет отображаться изображение, которое идет с шаблоном «по умолчанию»
Если вы планируете назначить собственное фоновое изображение, то рекомендуем загружать изображение разрешением 1600 Х 1200 пикселей. Идеальным будет фон без мелких деталей.
Название сайта — шаблон позволяет использовать в качестве логотипа не только графический файл, но обычный текст. Для этого в поле «Логотип» необходимо нажать кнопку «Очистить», а поле «Название сайта» может быть заполнено названием вашей компании
Описание сайта — данный текст будет расположен под «Названием сайта», чтобы прояснить ситуацию ниже прилагаю два рисунка, где показаны настройки шаблона, а также итоговый результат на фронтальной части сайта:
Настройки в админ панели:
Результат на фронтальной части:
Цвет — данный выпадающий список позволяет выбрать одну из цветовых схем, что будет использоваться в шаблоне
Показывать переключение цветов сайта — если вы желаете, чтобы посетители вашего сайта могли собственноручно устанавливать цветовую схему сайта на свой вкус, то данный параметр устанавливаем в положение «ДА». В таком случае в нижней части сайта появятся три ссылки: «Blue Red Silver», нажатие на любую из них заставит сайт выглядеть в соответствующей цветовой схеме. Чтобы запретить пользователю менять цвет сайта, достаточно параметр «Показывать переключение цветов сайта» установить в положение «НЕТ»
Позиции модулей и их настройка
Доступные позиции модулей схематично представлены на следующем рисунке:
Особенностью данного шаблона является то, что в случае вертикального скроллинга, когда пользователь прокручивает страницу, верхнее меню начинает отображаться в «шапке» сайта, а контактная информация (телефон и электронный адрес компании) трансформируется в одну строчку.
Вывод контактной информации в «шапке сайта
Чтобы все вышеописанное происходило и на вашем сайте-визитке, необходимо проделать ряд несложных действий.
В административной панели заходим «Расширения» - «Менеджер Модулей» и нажимаем кнопку «Создать»
Тип модуля выбираем, как HTML-код
Далее в настройках модуля переключатель «Показывать заголовок» выставляем в положение «НЕТ», устанавливаем позицию «Position-1», затем в визуальном редакторе нажимаем кнопку редактирования HTML кода
И в текстовое поле редактора вводим код, указанный на рисунке:
Соответственно, вместо указанных нами телефона и электронной почты, должны стоять ваши данные
Далее нажимаем кнопку «Обновить»
Нажимаем кнопку «Сохранить и закрыть» в правом верхнем углу экрана
Настройка верхнего меню
Предположим, что у нас уже создано меню (main menu) и необходимо опубликовать его на сайте, так чтобы оно стало верхним горизонтальным меню
Для этого в менеджере модулей нажимаем кнопку «Создать», как мы это делали ранее, с той разницей, что тип модуля на этот раз будет «Меню»
Далее дадим модулю название, скроем заголовок модуля и выставим позицию «Position 7». Обратите внимание на рисунке я назвал данный модуль, как «Главное верхнее меню». Сделано это неслучайно.
Как мы помним наше меню должно появляться в «шапке» сайта при прокручивании. Чтобы это происходило, впоследствии нам потребуется создать дубликат этого меню.
Вернемся к настройкам модуля.
Далее нам необходимо обратить внимание на правую часть экрана, а именно на блок «Основные параметры»
Здесь мы указываем — какое именно меню должен выводить модуль. В нашем случае это «main menu», а также включаем переключатель «Показывать подпункты меню» в положение «ДА»
Затем переходим на вкладку «Дополнительные параметры», где нас интересует лишь одно текстовое поле под названием «Суффикс класса меню»
Здесь мы должны прописать значение «hor» (без кавычек)
Нажимаем кнопку «Сохранить и создать» в правом верхнем углу экрана.
И приступаем к созданию дубликата нашего меню.
В разделе «Основные параметры» также указываем «main menu». Теперь хочу обратить ваше внимание на выпадающие списки «Начальный уровень» и «Последний уровень». Их значение должно равняться «1»
На вкладке «Дополнительные параметры» мы должны заполнить поля «ID Меню» и «Суффикс класса меню», значение которых будет «topmenu» (без кавычек)
Данный модуль должен быть опубликован в позицию «Position-2»
Нажимаем кнопку «Сохранить и закрыть»
Теперь при скроллинге сайта верхнее меню сайта оказывается в его «шапке»
Включение модуля слайдера Nivo Slider
Для того, чтобы наш сайт — визитка стал более «живым», необходимо включить модуль слайдера, который мы устанавливали в самом начале нашей работы.
В менеджере модулей находим модуль «Nivo-Szaki Slider», открываем его на редактирование, публикуем его в позицию «Position-15»
Слайды должны быть заранее загружены посредством FTP менеджера в определенный каталог. Изображения рекомендуется создавать с разрешением 921 × 252 пикселей
Далее в настройках модуля в текстовом поле «Slideshow directory» указываем каталог, где будут храниться наши изображения
Остальные модули не требуют каких-либо специальных параметров и размещение их на сайте производится согласно указанным выше позициям
Как видим, сайт-визитка под Joomla достаточно просто создается на основе шаблона Atlight. Если у вас есть пожелания к усовершенствованию шаблона или вам необходимо модернизировать его под свои запросы, оставляйте заявку через раздел «Контакты»
С уважением, Владимир Егоров
