Документация

Файлы шаблона

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

• default.css - файл, в который Вы можете спокойно добавлять свои стили. Этот файл всегда пустой во всех обновления, так что его не надо обновлять.
• default.js - тоже самое, только для Ваших скриптов. Если понадобится.
• home.html - здесь находятся все блоки сайта (отзывы, таймеры и тд)
• mainmenu.html - файл для работы с главным меню сайта

Вертикальные слайды

Все слайды главной страницы находятся в файле home.html шаблона. Если Вы хотите добавить какой-либо новый слайд, которого нет на сайте, просто добавьте этот код в нужное место home.html

<div class="section text-center">
  <div class="container">
    <div class="section-heading text-center">
      <h2 class="animate" data-animation="fadeInDown">Заголовок</h1>
      <h5 class="animate" data-animation="fadeInDown">Описание вашего слайда</h5>
    </div>
    <div class="col-md-8 col-md-offset-2 buffer-top even animate" data-animation="fadeInUp">
      контент слайда
    </div>
  </div>
</div>

Горизонтальные слайды

Добавление дополнительных горизонтальных слайдов происходит при помощи обертки каждого слайда в <div class="slide">..контент-слайда...</div>

<div class="section text-center">
  <div class="slide"><!-- первый слайд (основной) -->
    <div class="container">
      <div class="col-md-6 buffer-top even section-heading">
        <h2 class="animate" data-animation="fadeInDown">Горизонтальные слайды</h1>
        <h5 class="animate" data-animation="fadeInDown">Вы можете создавать не только вертикальные слайды, но и горизонтальные! Листайте как Вам удобно: стрелками на клавиатуре, обычными стелками слайдера, точками внизу слайда или просто перетаскивайте!</h5>
        <a href="https://www.webasyst.ru/store/theme/fullpage/" target="blank" class="animate button red reset-right" data-animation="fadeInUp" data-animation-delay="0.4s">Купить шаблон!</a>
      </div>
      <div class="col-md-6">
        <img class="animate" data-animation="fadeInUp" src="{$wa_theme_url}img/ipad.png">
      </div>
    </div>
  </div>
  <div class="slide" style="background-image: url({$wa_theme_url}img/headers/header_01.jpg);"> <!-- второй слайд с фоновым изображением -->
    <div class="container section-heading text-light">
        <h2>Простота</h2>
        <p>Мы уже добавили несколько слайдов на главную страницу. Вам нужно просто отредактировать текст и заменить картинки.</p>    
    </div>
  </div>
  <div class="slide"> <!-- третий простой слайд -->
    <div class="container">
        <p>Еще можно создать слайд только с текстом. Или только с картинкой. Всё на Ваше усмотрение.</p>
    </div>
  </div>
</div><!-- second section -->

Главное меню

Настройка главного меню происходит в файле mainmenu.html шаблона.

<li class="nav-item" data-menuanchor="firstPage" data-tooltip="Подсказка"><a class="nav-link" href="#firstPage">Первый слайд</a></li>

data-menuanchor - атрибут необходимый для формирования меню сайта
data-tooltip - всплывающая подсказка при наведении на навигацию между горизонтальными слайдами

Для изменения названия ссылки в меню необходимо просто поменять текст "Первый слайд" и тд.

Для изменения подсказки просто измените текст Подсказка на любой другой.

Удаление слайда и пункта меню

Если Вы хотите удалить какой-нибудь слайд, то Вам необходимо так же удалить и один пункт в меню.

Например, Вы хотите удалить слайд с отзывами.

После удаления блока кода в home.html отвечающего за слайд отзывов, Вы можете удалить любой пункт меню из файла mainmenu.html. Главное чтобы кол-во пунктов меню соответствовало кол-ву слайдов на сайте. Первый пункт меню всегда будет переводить на первый слайд, второй на второй и тд.

Добавление слайда и пункта меню

После добавление какого-либо слайда в home.html Вам необходимо добавить и новый пункт меню в файл mainmenu.html

Для этого Вы можете просто скопировать любой другой пункт меню и заменить в нем аттрибут href и data-menuanchor. Данные аттрибуты должны быть уникальными.

Анимации

Для создания анимации при перелестывании слайда элементу необходимо добавить класс "animate" и параметры "data-animation" и "data-animation-delay".

<h2 class="animate" data-animation="fadeInDown" data-animation-delay="0.1s">Возможности шаблона</h2>

data-animation - название анимации
data-animation-delay - время задержки срабатывания анимации

Названия всех анимаций можно посмотреть здесь

Кнопки

button button transparent
button red button red transparent
button orange button orange transparent
button yellow button yellow transparent
button green button green transparent
button mint button mint transparent
button aqua button aqua transparent
button blue button blue transparent
button purple button purple transparent
button pink button pink transparent
button white button white transparent
button grey button grey transparent
button button transparent

<a class="button" href="#">button</a>
<a class="button transparent" href="#">button transparent</a>
<a class="button red" href="#">button red</a>
<a class="button red transparent" href="#">button red transparent</a>
<a class="button orange" href="#">button orange</a>
<a class="button orange transparent" href="#">button orange transparent</a>
<a class="button yellow" href="#">button yellow</a>
<a class="button yellow transparent" href="#">button yellow transparent</a>
<a class="button green" href="#">button green</a>
<a class="button green transparent" href="#">button green transparent</a>
<a class="button mint" href="#">button mint</a>
<a class="button mint transparent" href="#">button mint transparent</a>
<a class="button aqua" href="#">button aqua</a>
<a class="button aqua transparent" href="#">button aqua transparent</a>
<a class="button blue" href="#">button blue</a>
<a class="button blue transparent" href="#">button blue transparent</a>
<a class="button purple" href="#">button purple</a>
<a class="button purple transparent" href="#">button purple transparent</a>
<a class="button pink" href="#">button pink</a>
<a class="button pink transparent" href="#">button pink transparent</a>
<a class="button white" href="#">button white</a>
<a class="button white transparent" href="#">button white transparent</a>
<a class="button grey" href="#">button grey</a>
<a class="button grey transparent" href="#">button grey transparent</a>
<a class="button" href="#"><i class="fa fa-diamond"></i>button</a>
<a class="button transparent" href="#"><i class="fa fa-diamond"></i>button transparent</a>

Таймеры обратного отсчета

    
Доступные параметры:
data-date - время окончания таймера
data-animation - анимация. Доступно два параметра - smooth и ticks
data-bgwidth - ширина фона
data-fgwidth - ширина круга

<div class="datecountdown" data-date="2017-01-01 00:00:00" data-animation="smooth" data-bgwidth="1.2" data-fgwidth="0.1"></div>

Более подробно с таймером Вы можете ознакомится здесь

Полезные ссылки

• Bootstrap 4 alpha 2 - Здесь можно найти разметку таблиц, дополнительные кнопки, формы и многое другое.
• Анимации
• Таймер
• Бесплатные стоковые изображения
• Иконки FontAwesome
• Иконки Simple Line Icons

Форма обратной связи

Сначала Вам необходимо создать Блок формы обратной связи в приложении Сайт->Блоки. Там необходимо разместить код представленный ниже. После этого разместите код вывода данного блока на страницу обратной связи в Сайт-Страницы.

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

После этого создайте страницу в приложении Сайт->Страницы. Её URL должен совпадать с тем, что Вы задали в настройках шаблона и Блоке.

Теперь при отправке формы покупателя будет переадресовывать на эту страницу и показывать ошибки в заполнении формы или сообщение об успешной отправке.

{$theme_settings.feedback_link = '/feedback/'} {* Ссылка на страницу обратной связи *}
{$theme_settings.feedback_captcha = '0'} {* 1 - Капча включена, 0 - выключена *}
{$theme_settings.feedback_email = '1'} {* 1 - Показывать поле ввода почты *} 
{$theme_settings.feedback_phone = '1'} {* 1 - Заменить сообщение на телефон *}
{$theme_settings.feedback_agreement = 'all'} {* all - показывать флажок, link - показывать только ссылку, none - не показывать ничего *}
{$theme_settings.feedback_agreement_link = 'укажите здесь ссылку на страницу с политикой обработки персональных данных'}

{$errors = array()}
{if !$theme_settings.feedback_captcha}
  {$wa->storage(['captcha', $wa->app()], '')}
{/if}
{if $wa->post("send") and $wa->sendEmail("", $errors)}
<h1>Спасибо!</h1>
<p>Ваше сообщение было отправлено.
</p>
{else}
<form id="contact-form" class="contact-section" method="post" action="{if !empty($theme_settings.feedback_link)}{$theme_settings.feedback_link}{else}/feedback/{/if}">
  <div class="form-content">
    <div class="input-group push-bottom">
      <span class="input-group-addon"><i class="fa fa-user"></i></span>
      <input class="form-control" type="text" name="name" placeholder="Имя" value="{$wa->post('name')|escape}">
    </div>
    <div class="input-group push-bottom{if !$theme_settings.feedback_email} hidden{/if}">
      <span class="input-group-addon"><i class="fa fa-envelope-o"></i></span>
      <input class="form-control" type="email" name="email" placeholder="Email" value="{if !$theme_settings.feedback_email}noreply@{$wa->domainUrl()|replace:'http://':''}{else}{$wa->post('email')|escape}{/if}">
      {if !empty($errors.email)}<em class="wa-error-msg">{$errors.email}</em>{/if}
    </div>
    {if $theme_settings.feedback_phone}
    <div class="input-group push-bottom">
      <span class="input-group-addon"><i class="fa fa-phone"></i></span>
      <input class="form-control" type="text" name="body" placeholder="Телефон" value="{$wa->post('body')|escape}">
      {if !empty($errors.body)}<em class="wa-error-msg">{$errors.body}</em>{/if}
    </div>
    {else}
    <div class="push-bottom">
      <textarea class="form-control{if !empty($errors.body)} wa-error{/if}" name="body" placeholder="Сообщение">{$wa->post("body")|escape}</textarea>
      {if !empty($errors.body)}<em class="wa-error-msg">{$errors.body}</em>{/if}
    </div>
    {/if}
    {if $theme_settings.feedback_agreement != 'none' && !empty($theme_settings.feedback_agreement_link)}
      <div class="input-group push-bottom">
        {if $theme_settings.feedback_agreement == 'all'}
          <input type="hidden" name="agree_to_terms" value="">
          <label class="c-input c-checkbox">
            <input type="checkbox" name="agree_to_terms" value="1"{if $wa->post("agree_to_terms")} checked{/if}>
            <span class="c-indicator"></span>
            Я согласен с <a href="{$theme_settings.feedback_agreement_link|escape}" target="_blank">политикой обработки персональных данных</a>
            {if !empty($errors.agree_to_terms)}<br/><em class="small red">{$errors.agree_to_terms}</em>{/if}
          </label>
        {elseif $theme_settings.feedback_agreement == 'link'}
          Нажимая кнопку подтверждения, я соглашаюсь с <a href="{$theme_settings.feedback_agreement_link|escape}" target="_blank">политикой обработки персональных данных</a>.
        {/if}
      </div>
    {/if}
    <input type="hidden" name="subject" value="Запрос с сайта {$wa->domainUrl()}">
    {if $theme_settings.feedback_captcha}
    <div class="wa-captcha-section">
      {$wa->captcha(!empty($errors.captcha))}
      {if !empty($errors.captcha)}
      <em class="wa-error-msg">{$errors.captcha}</em>{/if}
    </div>
    {/if}
    {if !empty($errors.all)}<em class="wa-error-msg">{$errors.all}</em><br>{/if}
    <div class="keep-left text-left">
      <input type="hidden" name="send" value="feedback">
      <input type="submit" class="button red" type="submit" value="Отправить">
    </div>
  </div>
</form>
{/if}