Дизайн #1722

Дизайн #1722

1. Как изменить шапку сайта?

Верхняя часть шаблона состоит из надписи названия сайта, бокового всплывающего меню, формы поиска и иконок социальных сетей.

Название вашего сайта — текст, который будет отображаться в переменной $SITE_NAME$. Чтобы изменить его требуется перейти в Панель управления → Настройки → Общие настройки и изменить поле “Название вашего сайта” на необходимое.

Если же вместо текста нужно изображение тогда перейдите в Панель управления → Дизайн → Редактор → Глобальные блоки → Верхняя часть сайта найдите 9 строку кода:

<a href="$HOME_PAGE_LINK$"><!-- <logo> -->$SITE_NAME$<!-- </logo> --></a>

и вместо $SITE_NAME$ пропишите:

<img src="ссылка на логотип">

где "ссылка на логотип" – пропишите ссылку, которую вы можете получить, осуществляя:

1) Логотип загружается в файловый менеджер сайта (Панель управления → Инструменты.)

2) После загрузки изображения, просто кликните на название изображение и вы получите заветную ссылку.

Для того, чтобы изменить ссылки социальных сетей в блоке меню, необходимо перейти в Панель управления → Дизайн → Редактор → Глобальные блоки → Верхняя часть сайта, где в строках 57-64 укажите свои ссылки на аккаунты в социальных сетях:

<div class="soc-block">
<span><a href="https://vk.com" target="_blank" class="fa fa-vk"></a></span>
<span><a href="https://twitter.com" target="_blank" class="fa fa-twitter"></a></span>
<span><a href="https://facebook.com" target="_blank" class="fa fa-facebook"></a></span>
<span><a href="https://instagram.com" target="_blank" class="fa fa-instagram"></a></span>
<span><a href="https://plus.google.com" target="_blank" class="fa fa-google-plus"></a></span>
<span><a href="https://ok.ru/" target="_blank" class="fa fa-odnoklassniki"></a></span>
</div>

3. Как изменить промо-блок?

Для того, чтобы изменить фон промо-блока, необходимо перейти в Панель управления → Дизайн → Редактор → Таблица стилей (CSS), после чего необходимо найти 97 строку:

.promo-wrap{ position:relative; max-height:100vh; height:100vh; background-image: linear-gradient(-266deg, #fccb38 0, #fccb38 1%, #ff4d75 100%); overflow:hidden}

где #fccb38 и #ff4d75 можно изменить на нужные html-цвета.

Для того, чтобы изменить контент промо-блока, необходимо перейти в Панель управления → Дизайн → Редактор → Глобальные блоки → PROMO, где найти строки 6-7 и заменить их на свои:

<div class="cap-ds description">Vestibulum iaculis lacin</div>
<div class="cap-ttl">Lorem ipsum</div>

В строке 8 измените кнопку “More”:

<div class="cap-ds"><a role="button" href="#">More</a></div>

где More – вы можете изменить на любой свой текст, а вместо # укажите ссылку для перехода.

4. Как сделать, чтобы промо-блок отображался не только на главной странице?

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

Для этого необходимо перейти в Панель управления → Дизайн → Редактор → PROMO в 1 строке указать ID необходимых страниц  модулей в условии

<?if($PAGE_ID$='sitePage1')?> <?endif?>

или добавить условие для вывода в нужных модулях:

<?if($MODULE_ID$='forum')?> <?endif?> 

Также вы можете удалить данные условные операторы для отображения во всех модулях и страницах.

5. Как изменить фон шаблона?

Изменить фон сайта можно в Панель управления → Дизайн → Редактор → Таблица стилей (CSS). Вам потребуется перейти к 8 строке кода:

body.tmpl_body {background-color: #f2f2f7}

#f2f2f7 – фон сайта. Его можно изменить на любой другой html-цвет.

6. Как изменить цвет блоков?

Для изменения цвета вам требуется перейти в Панель управления → Дизайн → Редактор → Таблица стилей (CSS). Здесь перейдите к 108 строке кода:

.sidebox {margin: 30px 0;position: relative;-webkit-box-shadow: 0 10px 20px rgba(217,213,230,0.5);box-shadow: 0 10px 20px rgba(217,213,230,0.5);border-radius: 7px;background-color: #fafaff;}

#fafaff; – это и есть цвет блока. #fafaff можете заменить на любой другой цвет html.

7. Как изменить контент нижней часть сайта?

Для изменения нижней части перейдите в Панель управления → Дизайн → Редактор → Глобальные блоки → Нижняя часть сайта.  

Она состоит из дополнительной информации о сайте и контактов . Для того чтобы изменить информацию о сайте перейдите к строкам 4-17 и замените информацию и ссылки на свои:

<div class="foot-l">
<div class="about-wrap">
<h6>About</h6>
<p>Integer euismod lobortis lectus sed suscipit. Donec commodo et velit at tristique. Cras vitae nunc porttitor nibh varius pellentesque nec in urna. Proin a neque non purus tincidunt hendrerit. Sed magna mi, dapibus ultrices ultricies ut, accumsan in ante. Suspendisse a dui vel felis fringilla porta. Mauris vulputate auctor enim vitae accumsan. Duis congue neque magna, ut auctor sem semper ac. Proin aliquet dui id dolor gravida consequat. Aliquam et vestibulum libero, et lobortis sem. Duis ut elit libero. Ut commodo bibendum hendrerit.</p>
</div>
<div class="links-wrap">
<h6>Quick links</h6>
<a href="#">Link 1</a>
<a href="#">Link 2</a>
<a href="#">Link 3</a>
<a href="#">Link 4</a>
<a href="#">Link 5</a>
</div>
</div>

Для изменения второй части - контактной информации перейдите к строкам строки 18 - 38 и аналогичным образом измените адрес:

<div class="address-wrap">
<h6>Adress</h6>
<p>Donec imperdiet urna sem, ac interdum lorem tristique convallis.</p>
</div>

телефоны:

<div class="phones-wrap">
<h6>Phones</h6>
<a href="#">+1 (234) 567-8901</a>
<a href="#">+1 (234) 567-8901</a>
</div>

и ссылки на социальные сети:

<div class="soc-wrap">
<h6>Follow us</h6>
<div class="soc-block">
<span><a href="https://vk.com" target="_blank" class="fa fa-vk"></a></span>
<span><a href="https://twitter.com" target="_blank" class="fa fa-twitter"></a></span>
<span><a href="https://facebook.com" target="_blank" class="fa fa-facebook"></a></span>
<span><a href="https://instagram.com" target="_blank" class="fa fa-instagram"></a></span>
<span><a href="https://plus.google.com" target="_blank" class="fa fa-google-plus"></a></span>
<span><a href="https://ok.ru/" target="_blank" class="fa fa-odnoklassniki"></a></span>
</div>
</div>

8. Как изменить фон нижней части сайта?

Изменить фон нижней части сайта можно в Панель управления → Дизайн → Редактор → Таблица стилей (CSS). Вам потребуется перейти к 344 строке кода:

#footer {padding: 20px 0 90px;-webkit-box-shadow: 0 10px 20px rgba(217,213,230,0.5); box-shadow: 0 10px 20px rgba(217,213,230,0.5); background-color: #fff}

#fff – фон нижней части сайта. Его можно изменить на любой другой html-цвет.

9. Какой цвет основных элементов сайта?

Цветом цветом основных элементов сайта является #fda649

Если требуется сменить цветовую гамму, то воспользуйтесь заменой #fda649 на любой свой html-цвет, используя замену внутри шаблона Таблица стилей CSS.

Дизайн #1722