Дизайн #1814

Дизайн #1814

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

Верхняя часть шаблона состоит из надписи названия сайта и пунктов меню.

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

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

<a class="logo-lnk" href="$HOME_PAGE_LINK$" title="Home">$SITE_NAME$</a>

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

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

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

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

Изменить фон шапки сайта можно в Панель управления → Дизайн → Редактор → Таблица стилей (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. Аналогичным способом вы можете заменить другие второстепенные цвета сайта.

Дизайн #1814