Для более удобной работы с шаблона мы создали в нем несколько дополнительных файлов.
Все слайды главной страницы находятся в файле 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 - время задержки срабатывания анимации
Названия всех анимаций можно посмотреть
<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>
Более подробно с таймером Вы можете ознакомится
Сначала Вам необходимо создать Блок формы обратной связи в приложении Сайт->Блоки. Там необходимо разместить код представленный ниже. После этого разместите код вывода данного блока на страницу обратной связи в Сайт-Страницы.
Не забудьте изменить параметры вначале блока на те, что заданы в настройках шаблона!
После этого создайте страницу в приложении Сайт->Страницы. Её 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}