Дизайн #1804
1. Как изменить шапку сайта?
Верхняя часть шаблона состоит из социальных иконок, ссылок на страницы авторизации/регистрации, названия сайта, пунктов меню и формы поиска.
Чтобы изменить верхнюю часть сайта перейдите в в Панель управления → Дизайн → Редактор → Глобальные блоки → Верхняя часть сайта
Укажите ссылки на свои социальные сети в строках 4-11:
<a href="https://www.facebook.com/" class="soc-fc" target="_blank"></a> <a href="https://twitter.com/" class="soc-tw" target="_blank"></a> <a href="http://www.flickr.com/" class="soc-fl" target="_blank"></a> <a href="https://vimeo.com/" class="soc-vi" target="_blank"></a>
Название вашего сайта — текст, который будет отображаться в переменной $SITE_NAME$. Чтобы изменить его требуется перейти в Панель управления → Настройки → Общие настройки и изменить поле “Название вашего сайта” на необходимое.
Если же вместо текста нужно изображение тогда перейдите в Панель управления → Дизайн → Редактор → Глобальные блоки → Верхняя часть сайта найдите 22 строку кода:
<a href="$HOME_PAGE_LINK$"><!-- <logo> -->$SITE_NAME$<!-- </logo> --></a>
и вместо $SITE_NAME$ пропишите:
<img src="ссылка на логотип">
где "ссылка на логотип" – пропишите ссылку, которую вы можете получить, осуществляя:
1) Логотип загружается в файловый менеджер сайта (Панель управления → Инструменты.)
2) После загрузки изображения, просто кликните на название изображение и вы получите заветную ссылку.
Чтобы изменить фон шапки сайта, перейдите в Панель управления → Дизайн → Редактор → Таблица стилей (CSS), после чего найдите там 125 строку:
.bottom-head-container{background-color:#958959;padding:0 20px;width:100%;display:flex;align-items:center}
#958959 – является цветом верхней части сайта. Его можно изменить на любой другой html-цвет.
2. Как изменить промо-блок?
Промоблок состоит из слайдера, для того, чтобы изменить его, необходимо перейти в Панель управления → Дизайн → Редактор → Глобальные блоки → PROMO.
Слайдер состоит из 3 слайдов. Вам необходимо найти строки 4-44, где для каждого слайда можно изменить:
Заголовок, описание и кнопку для перехода к материалу и изображение:
<h1>Lorem ipsum dolor</h1> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus aliquam aspernatur consequatur corporis doloribus eligendi eos facilis, id impedit in molestias odio odit porro quae rem sequi sit, soluta vero.</p> <a href="#" class="info-btn">More</a>
где More – вы можете изменить на любой свой текст, а вместо # укажите ссылку для перехода.
<img src="/.s/t/1804/main.png" alt="promo">
где /.s/t/1804/main.png – является ссылкой на изображение. Вместо него можно указать свою ссылку на свое изображение, предварительно загрузив его в Файловый менеджер сайта.
Для изменения превью следующего слайда перейдите к строкам 42-44 и укажите свои ссылки на изображения:
<a data-slide-index="0" href=""><img src="/.s/t/1804/main.png" /></a> <a data-slide-index="1" href=""><img src="/.s/t/1804/2.jpg" /></a> <a data-slide-index="2" href=""><img src="/.s/t/1804/3.jpg" /></a>
Изменить фон промо блока можно в Панель управления → Дизайн → Редактор → Таблица стилей (CSS). Вам потребуется перейти к 115 строке кода:
.top-part.sitePage1{background:#161616 url("/.s/t/1804/slider-background.png") no-repeat 100% 0}
где /.s/t/1804/slider-background.png – является ссылкой на изображение. Вместо него можно указать свою ссылку на свое изображение, предварительно загрузив его в Файловый менеджер сайта.
3. Как сделать, чтобы слайдер отображался не только на главной странице?
По желанию, вы можете изменять условие для вывода слайдера на различных страницах вашего сайта.
Для этого необходимо перейти в Панель управления → Дизайн → Редактор → PROMO в 1 строке указать ID необходимых страниц модулей в условии
<?if($PAGE_ID$='sitePage1')?> <?endif?>
или добавить условие для вывода в нужных модулях:
<?if($MODULE_ID$='forum')?> <?endif?>
Также вы можете удалить данные условные операторы для отображения во всех модулях и страницах.
4. Как изменить фон шаблона?
Изменить фон сайта можно в Панель управления → Дизайн → Редактор → Таблица стилей (CSS). Вам потребуется перейти к 30 строке кода:
body.base{background-color:#4a4a4a}
#4a4a4a – фон сайта. Его можно изменить на любой другой html-цвет.
5. Как изменить цвет блоков?
Для изменений перейдите в Панель управления → Дизайн → Редактор → Таблица стилей (CSS), найдите там 245 строку:
.sidebox,.profile{margin-bottom:20px;padding:5px;background-color:#f8f7f0}
#f8f7f0 – это и есть цвет бордера. #f8f7f0 можете заменить на любой другой цвет html.
6. Как изменить контент нижней часть сайта?
Для изменения нижней части перейдите в Панель управления → Дизайн → Редактор → Глобальные блоки → Нижняя часть сайта.
Она состоит из дополнительной информации о сайте и контактов. Для того чтобы изменить информацию о сайте перейдите к строкам 4-20 и замените информацию и ссылки на свои:
<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>
Для изменения второй части - контактной информации перейдите к строкам строки 24-46 и аналогичным образом измените контактную информацию:
<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>
7. Как изменить фон нижней части сайта?
Изменить фон нижней части сайта можно в Панель управления → Дизайн → Редактор → Таблица стилей (CSS). Вам потребуется перейти к 285 строке кода:
footer{background-color:#161616;color:#f8f7f0}
#161616 – фон нижней части сайта. Его можно изменить на любой другой html-цвет.
8. Какой цвет основных элементов сайта?
Основным цветом сайта является #958959.
Если требуется сменить цветовую гамму, то воспользуйтесь заменой #958959 на любой свой html-цвет, используя замену внутри шаблона Таблица стилей CSS.