Дизайн #1817
1. Как изменить шапку сайта?
Верхняя часть шаблона состоит из надписи названия сайта с видео фоном, и блока с пунктами меню и строки поиска и иконками социальных сетей.
Название вашего сайта — текст, который будет отображаться в переменной $SITE_NAME$. Чтобы изменить его требуется перейти в Панель управления → Настройки → Общие настройки и изменить поле “Название вашего сайта” на необходимое.
Если же вместо текста нужно изображение тогда перейдите в “Панель управления → Дизайн → Редактор → Глобальные блоки → Верхняя часть сайта” найдите строку:
<a class="logo-lnk" href="$HOME_PAGE_LINK$" title="Home">$SITE_NAME$</a>
и вместо $SITE_NAME$ пропишите:
<img src="ссылка на логотип">
где "ссылка на логотип" – пропишите ссылку, которую вы можете получить, осуществляя:
- Логотип загружается в файловый менеджер сайта (Панель управления → Инструменты.)
- После загрузки изображения, просто кликните на название изображение и вы получите заветную ссылку.
Чтобы изменить видео под фоном, найдите строку:
<video id="video" loop="loop" autoplay="" muted="" poster="/.s/t/1817/mainbg.png"> <source src="/.s/t/1817/mainbg.mp4"> </video>
где вместо “/.s/t/1817/mainbg.mp4” - укажите ссылку на свое видео, также вы можете заменить картинку которая будет отображаться когда видео недоступно, для этого замените ссылку на свое изображение вместо "/.s/t/1817/mainbg.png".
2. Как изменить промо-блок?
Для редактирования промо-страницы нужно перейдите в Панель управления → Дизайн → Редактор → Глобальные блоки → PROMO.
Блок Promo состоит из 6 так называемых блоков, изменение которых рассмотрим далее.
1)
Данный блок состоит из 2 изображений заголовка и обычного текста, редактировать которые вы можете на строках 3-23:
<div class="promo-section1"> <div class="wrapper"> <div class="grid-cont"> <div class="image-block"> <img src="/.s/t/1817/promo-image1.png" alt="food"> </div> <div class="mid-content"> <span class="promo-enter">Welcome to food world</span> <h2 class="promo-section1-title">Lorem ipsum dolor sit amet,sed diam voluptua</h2> <p>Lorem ipsum dolor sit amet,consetetur sadipscing elitr, Stet clita kasd gubergren, Stet clita </p> </div> <div class="image-block"> <img src="/.s/t/1817/promo-image2.png" alt="food"> </div> </div> </div> </div>
вместо "/.s/t/1817/promo-image1.png" и "/.s/t/1817/promo-image2.png" укажите ссылки на свои изображения, по аналогии вы можете заменить текст заголовков и параграфа.
2)
Данный блок, содержит параграф текста, редактировать который вы можете на строках 24-31.
Вы можете задать свое изображение для фона данного блока, для этого перейдите в Панель управления → Дизайн → Редактор → Таблица стилей (CSS), после чего найдите там css-правило:
.promo-section2 { background: url(/.s/t/1817/promo-sect2bg.png) center center no-repeat fixed; position: relative; }
где вместо “/.s/t/1817/promo-sect2bg.png” укажите ссылку на свое изображение.
3)
Данный блок содержит 3 карточки с изображениями и кнопками на них, для редактирования блока перейдите на строки 32-50.
4)
Блок содержит в себе стандартную структуру из изображений и текстовых элементов, редактировать данный блок вы можете, по аналогии с первый блоком промо, перейдя на строки 51-90.
5)
Данный блок содержит в себе заголовок с подзаголовком и слайдер изображений, редактировать содержимое блока вы можете на строках 91-136. Все слайды слайдера имеют одинаковую структуру, в качестве примера рассмотрим один из них:
<li class="item"> <img src="/.s/t/1817/food-slider-img1.png" alt="food-work"> </li>
где вместо "/.s/t/1817/food-slider-img1.png" вы можете указать ссылку на свое изображения.
также вы можете добавить нужное количество слайдов используя структуру указанную выше.
Вы можете задать свое изображение для фона данного блока, для этого перейдите в Панель управления → Дизайн → Редактор → Таблица стилей (CSS), после чего найдите там css-правило:
.promo-section5 { background: url(/.s/t/1817/promo-sk5-bg.png) center center no-repeat; background-size: cover; position: relative; }
где вместо "/.s/t/1817/promo-sk5-bg.png" вы можете указать ссылку на свое изображения для фона. Изменить цветовую маску:
которая накладывается на фон данного блока вы можете изменив css-правило:
.promo-section5:before { content: ""; position: absolute; top: 0; right: 0; left: 0; bottom: 0; background-color: #279853; z-index: 1; opacity: 0.7; }
вместо #279853 укажите нужный Вам цвет тени для фонового изображения, вы также можете удалить указанное выше css правило тогда для фона не будет накладываться маска с цветом.
6)
Данный блок содержит в себе карточки с изображениями и описанием в виде даты, заголовка, и кратким содержимым статьи/поста. Редактировать данный блок вы можете на строках 137-173. Карточка имеет такую html структуру:
<li> <div class="image-block"> <img src="/.s/t/1817/news-image1.png" alt="food-news"> </div> <div class="news-text"> <span class="date-news">12 december 2033</span> <h3>Lorem ipsum dolor sit amet, consectetur</h3> <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab accusamus alias amet animi architecto debitis, dolorum eum id laudantium minima minus neque pariatur possimus quia ratione, repellendus temporibus unde vitae. </p> <a href="#" class="promo-button"><span>More</span></a> </div> </li>
Вы можете использовать данную структуру в качестве шаблона информера для вывода в данном блока материалов с нужного Вам модуля.Более подробно об информерах описано в данной статье https://www.ucoz.ru/help/tools/informery
3. Как изменить фон шаблона?
Изменить фон сайта можно в Панель управления → Дизайн → Редактор → Таблица стилей (CSS). css-правило:
body { margin: 0; font-family: 'Open Sans', sans-serif; font-size: 14px; font-weight: 400; color: #444444; background-color: #f0f0f0; }
#f0f0f0; – фон сайта. Его можно изменить на любой другой html-цвет.
4. Как изменить цвет блоков?
Правый блок не имеет каких либо особенностей блоки имеют рамку в качестве оформления. Чтобы изменить цвет/стиль рамки нужно перейти в Панель управления → Дизайн → Редактор → Таблица стилей (CSS). Вам нужно найти css-правило:
.sidebox { border: 1px solid #9cab50; padding: 20px; margin-bottom: 44px; }
#9cab50– цвет рамок блоков сайта. Его можно изменить на любой другой html-цвет.
5. Как изменить нижнюю часть сайта?
Изменить фон нижней части сайта можно в Панель управления → Дизайн → Редактор → Таблица стилей (CSS). Вам потребуется css - правило:
footer { background: #212731; }
#212731 – фон нижней части сайта. Его можно изменить на любой другой html-цвет.
Для редактирования Заголовка футера перейдите в Панель управления → Дизайн → Редактор → Нижняя часть сайта:
<footer> <div class="wrapper"> <h4 class="footer-title">Lorem ipsum dolor sit amet</h4> <div class="soc-block"> <span class="inst-soc"><a href="#" target="_blank" class="fa fa-instagram"></a></span> <span class="fb-soc"><a href="#" target="_blank" class="fa fa-facebook"></a></span> <span class="tw-soc"><a href="#" target="_blank" class="fa fa-twitter"></a></span> <span class="yt-soc"><a href="#" target="_blank" class="fa fa-youtube"></a></span> </div> <p class="copy"><span><!-- <copy> -->Copyright MyCorp © $YEAR$<!-- </copy> --> </span>$POWERED_BY$</p> </div> </footer>
где в ссылках, укажите ссылки на свои соц. аккаунты, а в:
<h4 class="footer-title">Lorem ipsum dolor sit amet</h4>
вместо стандартного текста заголовка укажите нужный вам.
6. Какой основной цвет сайта?
Основным цветом элементов сайта является #9cab50 и #cad60a
Если требуется сменить цветовую гамму, воспользуйтесь заменой #9cab50 и #cad60a на любой свой html-цвет, используя замену внутри шаблона “Таблица стилей CSS”. Аналогичным способом вы можете заменить другие второстепенные цвета сайта.