Дизайн #1814
1. Как изменить шапку сайта?
Верхняя часть шаблона состоит из надписи названия сайта и пунктов меню.
Название вашего сайта — текст, который будет отображаться в переменной $SITE_NAME$. Чтобы изменить его требуется перейти в Панель управления → Настройки → Общие настройки и изменить поле “Название вашего сайта” на необходимое.
Если же вместо текста нужно изображение тогда перейдите в Панель управления → Дизайн → Редактор → Глобальные блоки → Верхняя часть сайта найдите 5 строку кода:
<a class="logo-lnk" href="$HOME_PAGE_LINK$" title="Home">$SITE_NAME$</a>
и вместо $SITE_NAME$ пропишите:
<img src="ссылка на логотип">
где "ссылка на логотип" – пропишите ссылку, которую вы можете получить, осуществляя:
- Логотип загружается в файловый менеджер сайта (Панель управления → Инструменты.)
- После загрузки изображения, просто кликните на название изображение и вы получите заветную ссылку.
Изменить фон шапки сайта можно в Панель управления → Дизайн → Редактор → Таблица стилей (CSS). css-правило:
.header { color: #fff; height: 69px; position: relative; background-color: #202022; }
#202022 – фон шапки сайта. Его можно изменить на любой другой html-цвет.
2. Как изменить промо-блок?
Для редактирования промо-страницы нужно перейдите в Панель управления → Дизайн → Редактор → PROMO.
<?if($PAGE_ID$='sitePage1')?> <section class="promo"> <div class="container"> <div class="promo_content"> <div class="prom_align"> <h2>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</h2> <hr> <p>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</p> </div> </div> </div> </section> <?endif?>
Если удалить условие <?if($PAGE_ID$='sitePage1')?><?endif?> то PROMO будет отображаться на всех страницах сайта.
Чтобы изменить фоновое изображение PROMO перейдите Панель управления → Дизайн → CSS css-правило:
.promo { width: 100%; background: url(/s/t/14659/main.jpg) 65% no-repeat; -moz-background-size: cover; -webkit-background-size: cover; -o-background-size: cover; background-size: cover; overflow: hidden; min-height: calc(100vh - 69px); padding: 59px 0 64px; display: flex; align-items: center; justify-content: center; }
и в свойстве background укажите ссылку на нужную вам картинку в атрибуте url(ссылка на ваше фоновое изображение).
Аналогичным способом вы можете изменить цвет фона #202022 контейнера в котором содержится текстовый контент, css-правило:
.promo_content { display: flex; width: 504px; height: 504px; background-color: #202022; clip-path: polygon(0 50%, 50% 0, 100% 50%, 50% 100%); }
3. Как изменить фон шаблона?
Изменить фон сайта можно в Панель управления → Дизайн → Редактор → Таблица стилей (CSS). css-правило:
body { background: #45464a; color: #000; font-family: Roboto; font-size: .875rem; font-weight: 400; line-height: 1.71; }
#45464a; – фон сайта. Его можно изменить на любой другой html-цвет.
4. Как изменить цвет блоков?
Для изменений перейдите в Панель управления → Дизайн → Редактор → Таблица стилей (CSS), css-правило:
.sidebox { margin-bottom: 25px; overflow: hidden; background-color: #fff; }
#ffffff – это и есть цвет блока. #ffffff можете заменить на любой другой цвет html.
Аналогичным способом вы можете изменить заголовок блока, найдите css-правило:
.side-title { background-color: #202022; color: #ffffff; font-family: "Bebas Neue Regular"; font-size: 1.563rem; font-weight: 400; line-height: 1.64; text-transform: uppercase; letter-spacing: 0.25px; padding: 20px; display: block; text-align: left; }
#202022 – это и есть цвет блока. #202022 можете заменить на любой другой цвет html
5. Как изменить нижнюю часть сайта?
Изменить фон нижней части сайта можно в Панель управления → Дизайн → Редактор → Таблица стилей (CSS). css-правило:
.footer { background-color: #282828; color: #b0a474; padding: 20px; }
#282828 – фон нижней части сайта. Его можно изменить на любой другой html-цвет.
В правом углу расположены иконки социальных сетей, для их изменения перейдите в Панель управления → Дизайн → Редактор → Нижняя часть, где в строках 10-17 укажите свои ссылки на аккаунты в социальных сетях:
<div class="soc-block"> <a href="https://vk.com" target="_blank" class="fa fa-vk"></a> <a href="https://twitter.com" target="_blank" class="fa fa-twitter"></a> <a href="https://facebook.com" target="_blank" class="fa fa-facebook"></a> <a href="https://instagram.com" target="_blank" class="fa fa-instagram"></a> <a href="https://ok.ru/" target="_blank" class="fa fa-odnoklassniki"></a> </div>
6. Какой основной цвет сайта?
Основным цветом элементов сайта является #b0a474
Если требуется сменить цветовую гамму, то воспользуйтесь заменой #b0a474 на любой свой html-цвет, используя замену внутри шаблона Таблица стилей CSS. Аналогичным способом вы можете заменить другие второстепенные цвета сайта.