Дизайн #1817

Дизайн #1817

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

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

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

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

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

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

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

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

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

Чтобы изменить видео под фоном, найдите строку:

<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 &copy; $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”. Аналогичным способом вы можете заменить другие второстепенные цвета сайта.

Дизайн #1817