Дизайн #1805
1. Как изменить шапку сайта?
Верхняя часть шаблона состоит из социальных иконок, ссылок на страницы авторизации/регистрации, названия сайта, пунктов меню и формы поиска.
Чтобы изменить верхнюю часть сайта перейдите в в Панель управления → Дизайн → Редактор → Глобальные блоки → Верхняя часть сайта
Укажите свои контактные данные и ссылки на социальные сети в строках 4-15:
<span class="phone"><span>+1 (234) 234-2345</span></span> <span class="email"><span>company.name@mail.com</span></span>
<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>
Название вашего сайта — текст, который будет отображаться в переменной $SITE_NAME$. Чтобы изменить его требуется перейти в Панель управления → Настройки → Общие настройки и изменить поле “Название вашего сайта” на необходимое.
Если же вместо текста нужно изображение тогда перейдите в Панель управления → Дизайн → Редактор → Глобальные блоки → Верхняя часть сайта найдите 24 строку кода:
<a href="$HOME_PAGE_LINK$"><!-- <logo> -->$SITE_NAME$<!-- </logo> --></a>
и вместо $SITE_NAME$ пропишите:
<img src="ссылка на логотип">
где "ссылка на логотип" – пропишите ссылку, которую вы можете получить, осуществляя:
1) Логотип загружается в файловый менеджер сайта (Панель управления → Инструменты.)
2) После загрузки изображения, просто кликните на название изображение и вы получите заветную ссылку.
Чтобы изменить фон шапки сайта, перейдите в Панель управления → Дизайн → Редактор → Таблица стилей (CSS), после чего найдите там 188 строку:
.header{color:#fff;margin:0 auto;position:relative;background-color:#ff3d00}
#ff3d00 – является цветом верхней части сайта. Его можно изменить на любой другой html-цвет.
Также при смене фона шапки рекомендуется сменить цвет скосов меню, чтобы сохранить эффект скоса блока, где находиться меню. Вам потребуется перейти к 229 и 231 строке кода:
#catmenu ul.uMenuRoot > li:nth-child(1) a:before { z-index: 1; position: absolute; top: 0; left: 0px; content: ''; width: 0; height: 0; display: block; border-right: 15px solid #fff0; border-top: 61px solid #ff3d00; }
#uNMenuDiv1:after { z-index: 1; position: absolute; top: 0px; left: 100%; content: ''; width: 0; height: 0; display: block; border-right: 15px solid #ff3d00; border-top: 62px solid #fff; }
где ff3d00 цвет внешнего скоса, а #fff внутреннего.
2. Как изменить промо-блок?
Промо-блок сайта состоит из слайдера и 3 информативных блоков, для их изменения перейдите в Панель управления → Дизайн → Редактор → Глобальные блоки → PROMO.
Для изменения слайдера перейдите к строкам 3-54.
Чтобы изменить вид кнопок перелистывания слайдера перейдите в строку 3-4:
<button id="btn-l"><i class="material-icons">arrow_back</i></button> <button id="btn-r"><i class="material-icons">arrow_forward</i></button>
где вместо arrow_forward и arrow_back укажите нужный Вам текст или символ.
Для изменения слайдов в слайдере найдите следующие участки кода 6-52. Для каждого можно изменить, если необходимо, вид отображения, изображение, текст и кнопку для перехода к материалу:
вид отображения изображения слева от описания:
<div class="uItemSlidePart uItemSlidePart-left">
вид отображения изображения справа от описания:
<div class="uItemSlidePart uItemSlidePart-right">
<div class="uSlideItemContent ImageSlide" data-image="/.s/t/1805/s1.jpg"></div>
где /.s/t/1805/s1.jpg – является ссылкой на изображение. Вместо него можно указать свою ссылку на свое изображение, предварительно загрузив его в Файловый менеджер сайта.
<h2 class="uItemSlide__heading">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</h2>
<a class="btn-promo1" href="/"><span>More</span></a>
где More – вы можете изменить на любой свой текст, а вместо / укажите ссылку для перехода.
Для изменения информативных блоков перейдите к строкам 57-69. Для каждого блока можно изменить ссылку для перехода к материалу, изображение и текст:
<div class="tile" data-url="/" data-scale="1.1" data-image="/.s/t/1805/bs1.jpg">Lorem ipsum dolor sit amet, consectetur adipiscing elit. </div>
где:
data-url="/" - ссылка для перехода к материалу. Вместо "/" вы нужно указать нужную Вам ссылку.
data-scale="1.1" - значение на сколько будет увеличиваться изображение фона блока при наведении курсора, стандартно “1.1”.
data-image="/.s/t/14659/bs1.jpg" - ссылка на фоновое изображение блока, вместо "/.s/t/14659/bs1.jpg" Вы можете указать ссылку на свое изображение.
3. Как сделать, чтобы слайдер отображался не только на главной странице?
По желанию, вы можете изменять условие для вывода слайдера на различных страницах вашего сайта.
Для этого необходимо перейти в Панель управления → Дизайн → Редактор → PROMO в 1 строке указать ID необходимых страниц модулей в условии
<?if($PAGE_ID$='sitePage1')?> <?endif?>
или добавить условие для вывода в нужных модулях:
<?if($MODULE_ID$='forum')?> <?endif?>
Также вы можете удалить данные условные операторы для отображения во всех модулях и страницах.
4. Как изменить фон шаблона?
Изменить фон сайта можно в Панель управления → Дизайн → Редактор → Таблица стилей (CSS). Вам потребуется перейти к 53 строке кода:
body{color:#717171;font-family:"Roboto Condensed";font-size:.938rem;font-weight:400;line-height:1.71;background-color:#fff}
#fff – фон сайта. Его можно изменить на любой другой html-цвет.
5. Как изменить цвет блоков?
Блоки не имеют изображений или каких-то других особенностей. Цвет блоков зависит от фона сайта.
6. Как изменить контент нижней часть сайта?
Для изменения нижней части перейдите в Панель управления → Дизайн → Редактор → Глобальные блоки → Нижняя часть сайта.
Она состоит из дополнительной информации о сайте и контактов. Для того чтобы изменить информацию о сайте перейдите к строкам 4-22 и замените информацию и ссылки на свои:
<div class="about"> <h3>About</h3> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> </div> <div class="quick"> <h3>Quick links</h3> <ul class="quick-links"> <li><a href="#">Link1</a></li> <li><a href="#">Link2</a></li> <li><a href="#">Link3</a></li> <li><a href="#">Link4</a></li> <li><a href="#">Link5</a></li> <li><a href="#">Link6</a></li> </ul> </div>
Для изменения второй части - контактной информации перейдите к строкам строки 28-47 и аналогичным образом измените контактную информацию:
<div class="adress"> <h3>Adress</h3> <p>Donec imperdiet urna sem, ac interdum lorem tristique convallis.</p> </div> <div class="contacts"> <h3>Phones</h3> <span class="phone"><span>+1 (234) 234-2345</span></span> <span class="phone"><span>+1 (234) 234-2345</span></span> </div> <div class="soc-block"> <h3>Follow us</h3> <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>
7. Как изменить фон нижней части сайта?
Изменить фон нижней части сайта можно в Панель управления → Дизайн → Редактор → Таблица стилей (CSS). Вам потребуется перейти к 378 строке кода:
.footer{width:100%;background:#000;margin-top:150px;color:#fff}
#000 – фон нижней части сайта. Его можно изменить на любой другой html-цвет.
8. Какой цвет основных элементов сайта?
Основным цветом сайта является #ff3d00.
Если требуется сменить цветовую гамму, то воспользуйтесь заменой #ff3d00 на любой свой html-цвет, используя замену внутри шаблона Таблица стилей CSS.