Дизайн #1711
1. Как изменить шапку сайта?
Верхняя часть шаблона состоит из контактной информации, надписи названия сайта и пунктов меню.
Чтобы изменить контактную информацию перейдите в Панель управления → Дизайн → Редактор → Глобальные блоки → Верхняя часть сайта.
Найдите 4 строку кода для изменения адреса:
<address>498 Virginia St E</address>
и вместо 498 Virginia St E - напишите свой адрес.
В строках 6 и 7 строка измените номера телефонов:
<a href="tel:+1234567890">+1(234)5678900</a> <a href="tel:+1234567890">+1(234)5678900</a>
и вместо +1234567890 - напишите свои номера.
Также укажите свои ссылки на аккаунты в социальных сетях в строках 9-15 <div class="soc-box">
<span><a href="https://twitter.com/" class="soc-tw" target="_blank"></a></span> <span><a href="https://www.facebook.com/" class="soc-fc" target="_blank"></a></span> <span><a href="https://vimeo.com/" class="soc-vi" target="_blank"></a></span> <span><a href="http://instagram.com/" class="soc-ig" target="_blank"></a></span> <span><a href="http://vk.com/" class="soc-vk" target="_blank"></a></span> </div>
Название вашего сайта — текст, который будет отображаться в переменной $SITE_NAME$. Чтобы изменить его требуется перейти в Панель управления → Настройки → Общие настройки и изменить поле “Название вашего сайта” на необходимое.
Если же вместо текста нужно изображение тогда перейдите в Панель управления → Дизайн → Редактор → Глобальные блоки → Верхняя часть сайта найдите 21 и 27 строку кода:
<a href="$HOME_PAGE_LINK$"><!-- <logo> -->$SITE_NAME$<!-- </logo> --></a>
и вместо $SITE_NAME$ пропишите:
<img src="ссылка на логотип">
где "ссылка на логотип" – пропишите ссылку, которую вы можете получить, осуществляя:
1) Логотип загружается в файловый менеджер сайта (Панель управления → Инструменты.)
2) После загрузки изображения, просто кликните на название изображение и вы получите заветную ссылку.
2. Как изменить изображение в верхней части сайта и цвет фона за ней?
Для того, чтобы изменить изображение в верхней части сайта, необходимо перейти в Панель управления → Дизайн → Редактор → Таблица стилей (CSS), после чего необходимо найти 65 строку:
.promo-i{height:450px;line-height:450px;background:url(/.s/t/1711/promo.png) 0 0 no-repeat;background-size:cover}
где /.s/t/1711/promo.png – является ссылкой на данное изображение. Вместо него можно указать свою ссылку на свое изображение, предварительно загрузив его в Файловый менеджер сайта.
Для изменения фона найдите 50 строку:
#promo{background-color:#f2f2f2}
где #f2f2f2 заменяем на другой html-цвет.
3. Как изменить текст и кнопку в верхней части сайта?
Для того, чтобы изменить текст в верхней части сайта, необходимо перейти в Панель управления → Дизайн → Редактор → Глобальные блоки → PROMO, где найти строки 6-8 и заменить их на свои:
<div class="promo-ttl">Lorem ipsum dolor sit amet</div> <div class="promo-ds">Aliquam cursus tellus at nunc</div> <div class="promo-sds">Mauris commodo ante massa, eget feugiat mi dignissim nec</div>
В строке 8 измените кнопку “More”: <div class="information-btn"><a href="#">Read more</a></div>
где More – вы можете изменить на любой свой текст, а вместо # укажите ссылку для перехода.
4. Как изменить блоки под верхней частью сайта?
В каждом блоке можно изменить текст, кнопку и цвет фона.
Для изменения текста и кнопки блоков необходимо перейти в Панель управления → Дизайн → Редактор → Глобальные блоки → PROMO, найти строки 14-17, 23-26, 32-35 и заменить их на свои:
<div class="information-ttl">Mauris commodo</div> (строка 14) <div class="information-ds">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab consequatur dolor est fugiat impedit libero maxime necessitatibus ratione vitae.</div> (строка 15) <div class="information-btn"><a href="#">Read more</a></div> (строка 17)
где Read more – вы можете изменить на любой свой текст, а вместо # укажите ссылку для перехода.
Для изменения фона перейдите в Панель управления → Дизайн → Редактор → Таблица стилей (CSS). Вам потребуется перейти к 53 - 55 строке кода:
.info-block:nth-child(1){background-color:#359fdc}
#359fdc – фон первого блока. Его можно изменить на любой другой html-цвет.
.info-block:nth-child(1){background-color:#2fa8e0}
#2fa8e0 – фон второго блока. Его можно изменить на любой другой html-цвет.
.info-block:nth-child(1){background-color:#42b3ce}
#42b3ce – фон третьего блока. Его можно изменить на любой другой html-цвет.
5. Как сделать, чтобы промо-блок отображался не только на главной странице?
По желанию, вы можете изменять условие для вывода промо-блок на различных страницах вашего сайта.
Для этого необходимо перейти в Панель управления → Дизайн → Редактор → PROMO в 1 строке указать ID необходимых страниц модулей в условии
<?if($PAGE_ID$='sitePage1')?> <?endif?>
или добавить условие для вывода в нужных модулях: <?if($MODULE_ID$='forum')?> <?endif?>
Также вы можете удалить данные условные операторы для отображения во всех модулях и страницах.
6. Как изменить фон шаблона?
Изменить фон сайта можно в Панель управления → Дизайн → Редактор → Таблица стилей (CSS). Вам потребуется перейти к 2 строке кода:
#header,body{background:#fff}
#fff – фон сайта. Его можно изменить на любой другой html-цвет.
7. Как изменить цвет блоков?
Блоки не имеют изображений или каких-то других особенностей.
Под названием блока есть линия, чтобы ее изменить, перейдите в Панель управления → Дизайн → Редактор → Таблица стилей (CSS), найдите там 148 строку:
.sidetitle{font-size:22px;margin:0 0 25px;padding:0 0 10px;border-bottom:3px solid #42b3ce}
#42b3ce – является цветом данной линии. Вместо него можно указать свой html-цвет.
8. Как изменить фон нижней часть сайта?
Изменить фон нижней части сайта можно в Панель управления → Дизайн → Редактор → Таблица стилей (CSS). Вам потребуется перейти к 192 строке кода:
#footer{padding:25px 0;background:#5d6066;color:#999}
#999 – фон нижней части сайта. Его можно изменить на любой другой html-цвет.
Также в нижней части расположены иконки социальных сетей, для их изменения перейдите в Панель управления → Дизайн → Редактор → Нижняя часть, г де в строках 8-14 укажите свои ссылки на аккаунты в социальных сетях:
<div class="soc-box"> <span><a href="https://twitter.com/" class="soc-tw" target="_blank"></a></span> <span><a href="https://www.facebook.com/" class="soc-fc" target="_blank"></a></span> <span><a href="https://vimeo.com/" class="soc-vi" target="_blank"></a></span> <span><a href="http://instagram.com/" class="soc-ig" target="_blank"></a></span> <span><a href="http://vk.com/" class="soc-vk" target="_blank"></a></span> </div>
9. Какой основной цвет сайта?
Основным цветом сайта является #42b3ce.
Если требуется сменить цветовую гамму, то воспользуйтесь заменой #42b3ce на любой свой html-цвет, используя замену внутри шаблона Таблица стилей CSS.