Дизайн #1724

Дизайн #1724

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

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

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

Найдите 9-10 строку кода для изменения номеров телефона:

<a href="tel:+1234567890">+1(234)5678900</a>
<a href="tel:+1234567890">+1(234)5678900</a>

и вместо +1234567890 - напишите свои номера.

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

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

<a href="$HOME_PAGE_LINK$">$SITE_NAME$</a>

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

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

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

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

2) После загрузки изображения, просто кликните на название изображение и вы получите заветную ссылку.

Изменить фон шапки сайта можно в Панель управления → Дизайн → Редактор → Таблица стилей (CSS). Вам потребуется перейти к 248 строке кода:

.top-header{line-height:26px;background:#fff;border-bottom:1px solid #ebebf7;padding:10px 0}

#fff – фон шапки сайта. Его можно изменить на любой другой html-цвет.

Также в строках 48-55 укажите свои ссылки на аккаунты в социальных сетях :

<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>

2. Как отредактировать промо-страницу?

Для редактирования промо-страницы нужно перейдите  в Панель управления → Дизайн → Редактор → PROMO.

Данная страница состоит из 8 так называемых блоков, изменение которых рассмотрим далее.

Обратите внимание, на то, что каждое изменяемое изображение вам необходимо предварительно загрузить в Файловый менеджер сайта.

Блок 1

В первом блоке можно изменить изображение в строке 2:

<img src="/.s/t/1724/1.png" alt="img">

вместо “/.s/t/1724/1.png” укажите свою ссылку на свое изображение.

Текст измените в строке 5:

 <div class="cap-ttl">Weddings</div>

В строке 6 необходимо указать ссылку на кнопку вместо # и изменить ее текст вместо “Read more”:

<div class="cap-ds cap-btn"><a role="button" href="#">Read more</a></div> 

Блок 2

Второй блок имеет четыре информационных блока,в каждом из которых можно изменить: изображение текст и кнопку, аналогично первому блоку в строках с 11 по 55.

Также вы можете использовать информер для этого блока, который будет выводить, например, последние материалы определенных модулей. Обязательным условием является наличие изображения у материала.

Тогда в коде шаблона удаляем строки 12-54 и вместо них пропишите код необходимого созданного информера $MYINF_1$  

При создании или редактировании информера необходимыми параметрами являются:  

Тип данных:

  • Материалы Количество материалов: 4
  • Количество колонок: 1

А шаблон информера будет иметь вид:  

<div class="info-block">

<img src="$IMG_URL1$" alt="img">

<div class="info-center-block">

<div class="information-ttl">$TITLE$</div>

<div class="information-ds">$MESSAGE$</div>

<div class="cap-ds cap-btn"><a role="button" href="$ENTRY_URL$">Read more</a></div>

</div>

</div>

Более детально с тем, как создать и настроить информер вы можете ознакомится здесь: https://www.ucoz.ru/help/tools/informery

Блок 3

Третий блок содержит текстовую информацию о сайте. Изменить заголовок вы можете в строке 59, текст - в строках 60-67.

Блок 4

Для изменений данного блока необходимы строки с 70  по 99. Для каждого элемента можно изменить изображение

<img src="/.s/t/1724/baloon.svg" alt="img">

Вместо /.s/t/1724/baloon.svg укажите свою ссылку на свое изображение.

Текст и ссылку для перехода к материалу:

<a href="#">About us</a>

где вместо # укажите ссылку и вместо “About us” пропишите свой текст.

Блок 5

Изменить название блока команды можно в строке 104:

<h3 class="block-title">Team</h3>

Далее в блоке для каждого сотрудника, строки 105-122 можно изменить:

Фотографию:

<img src="/.s/t/1724/team_1.jpg" alt="img">

Имя

<p class="name">Lorem ipsum</p>

Блок 6

Шестой блок содержит заголовок и два информационных блока.

Заголовок измените в строке 128:

<h3 class="block-title">Services</h3>

Для каждого информационного блока, строки 130-133, 134-137, можно изменить:

Изображение и ссылку для перехода:

<img src="/.s/t/1724/services_01.jpg" alt="example">
<a href="#" class="work-title">Lorem ipsum dolor</a>

Также вы можете использовать информер для этого блока, который будет выводить, например, последние материалы определенных модулей. Обязательным условием является наличие изображения у материала.

Тогда в коде шаблона удаляем строки 130-137 и вместо них пропишите код необходимого созданного информера $MYINF_1$  

При создании или редактировании информера необходимыми параметрами являются:  

  • Тип данных: Материалы
  • Количество колонок: 1

А шаблон информера будет иметь вид:  

<div class="work-example">

<img src="$IMG_URL1$" alt="example">

<a href="$ENTRY_URL$" class="work-title">$TITLE$</a>

</div>

Более детально с тем, как создать и настроить информер вы можете ознакомится здесь: https://www.ucoz.ru/help/tools/informery

Блок 7

Данный блок содержит слайдер с изображениями и текстом отзыва. Ссылки на свои изображения и текст измените в строках 142-181:  

<div class="photo">

 <img src="/.s/t/1724/user.jpg" alt="photo">

</div>

<div class="text-block">

 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, 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 consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>

</div>

Блок 8

Название блока можно изменить в строке 184:

<h3 class="block-title">Portfolio</h3>

Далее загрузите свою галерею изображений в строках 186-243, указав ссылку на изображение дважды, для превью и изображения в полном размере:    

<a href="/.s/t/1724/gallery_01.jpg" target="_blank" class="ulightbox">

 <img src="/.s/t/1724/gallery_01.jpg" alt="img">

</a>

Вместо /.s/t/1724/gallery_01.jpg укажите свою ссылку на свое изображение.

Также вы можете использовать информер для этого блока, который будет выводить, материалы модуля “Фотоальбом””.

Тогда в коде шаблона удаляем строки 187-242 и вместо них пропишите код необходимого созданного информера $MYINF_1$  

При создании или редактировании информера необходимыми параметрами являются:  

  • Тип данных: Материалы
  • Количество материалов: 8
  • Количество колонок: 1

А шаблон информера будет иметь вид:  

<li class="item">

<figure>

<a href="$FULL_PHOTO_DIRECT_URL$" target="_blank" class="ulightbox">

<img src="$PHOTO_DIRECT_URL$" alt="img"></a>

</figure>

</li>

Более детально с тем, как создать и настроить информер вы можете ознакомится здесь: https://www.ucoz.ru/help/tools/informery

3. Как изменить цвет правого блока?

Для изменения цвета фона вам требуется перейти в Панель управления → Дизайн → Редактор → Таблица стилей (CSS). Здесь перейдите к 216 строке кода:

.sidebox {margin: 0 0 40px;background-color: #f2f2fa;padding: 15px}

#f2f2fa – это и есть цвет блока. #f2f2fa можете заменить на любой другой цвет html.

4. Как изменить нижнюю часть сайта?

Нижняя часть сайта содержит контактную информацию.

Заголовки измените в строках 4, 9, 11:

<div class="text-ttl">Call to us</div> (строка 4)
<div class="text-ttl">Adress</div> (строка 9)
<div class="text-ttl">More about us</div> (строка 11)

Для изменения номеров телефона к строкам 5-8:

<div class="phones-wrap">

 <a href="#">+1 (234) 567-8901</a>

 <a href="#">+1 (234) 567-8901</a>

</div>

Для изменения адреса перейдите к строке 10:

<div class="text-ds">Donec imperdiet urna sem, ac interdum lorem tristique convallis.</div>

Для указания ссылок к социальным сетям  перейдите к строкам 12-19:

<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>

Также ві можете изменить цвет нижней части сайта вам требуется перейти в Панель управления → Дизайн → Редактор → Таблица стилей (CSS). Здесь перейдите к 89 строке кода:

.text-wrapper{padding:70px 0;background-color:#f2f2fa;text-align:center}

#f2f2fa – это и есть цвет блока. #f2f2fa можете заменить на любой другой цвет html.

5. Какой цвет основных элементов сайта?

Цветом цветом основных элементов сайта является #aeacdb.

Если требуется сменить цветовую гамму, то воспользуйтесь заменой #aeacdb на любой свой html-цвет, используя замену внутри шаблона Таблица стилей CSS.

Дизайн #1724