Сайт или магазин под ключ от 3900 рублей или помощь по сайту от 500 рублей.
Подробнее

Дизайн #1802

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

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

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

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

<a href="$HOME_PAGE_LINK$"><!-- <logo> -->$SITE_NAME$<!-- </logo> --></a>

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

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

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

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

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

Для указания своих ссылок к социальным сетям  перейдите к строкам 34-41:

<a href="https://vk.com" target="_blank" class="fa fa-vk"></a></span>
<a href="https://twitter.com" target="_blank" class="fa fa-twitter"></a></span>
<a href="https://facebook.com" target="_blank" class="fa fa-facebook"></a></span>
<a href="https://instagram.com" target="_blank" class="fa fa-instagram"></a></span>
<a href="https://plus.google.com" target="_blank" class="fa fa-google-plus"></a></span>
<a href="https://ok.ru/" target="_blank" class="fa fa-odnoklassniki"></a></span>
</div>

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

header { background-color: #fff; }

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

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

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

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

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

1)

В первом блоке можно изменить изображение, текст и кнопку для перехода к материалу в строках 3-14:

<img src="/.s/t/1802/promo.jpg" alt="img">

вместо /.s/t/1802/promo.jpg - укажите свою ссылку на свое изображение.

<div class="cap-ttl">Lorem Ipsum</div>
<div class="cap-ds description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus ut
euismod sem. Proin ultricies, justo in scelerisque vehicula, nisl lorem euismod quam, nulla lectus sed felis.
</div>

2)

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

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

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

<div class="text">
<i><img src="/.s/t/1802/svg/sign-1.svg" alt="img"></i>
<h4><a href="#">Lorem ipsum</a></h4>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus ut euismod sem. Proin ultricies,
nisl lorem euismod quam, lectus sed felis.</p>
</div>

3)

В данном блоке изображение изменяется в строке 47:

<img src="/.s/t/1802/about.jpg" alt="img">

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

Заголовок и текст изменяется в строках 50-54:

<h3>About us</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus ut euismod sem. Proin ultricies, justo
n scelerisque vehicula, nisl lorem euismod quam, eu varius nulla lectus sed felis. Integer feugiat
lectus est, ut fermentum eros auctor at. Ut dictum et nisl sit amet aliquam. Donec porta libero sit amet
elit aliquet fringilla.</p>
</div>

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

.about-me { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; justify-content: space-around; background-color: #f1f1f1; }

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

4)

Данный блок содержит слайдер с 6-тью информационными карточками.  

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

<h3 class="block-title">Our doctors</h3>

Для каждого информационного блока строки 59-102, можно изменить изображение и заголовок с описанием:

<img src="/.s/t/1802/services_01.jpg" alt="example">
<div class="info">
<p class="name">Lorem ipsum</p>
<p>Lorem ipsum dolor</p>

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

5)

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

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

Данный блок содержит информационный слайдер.

По аналогии с предыдущими слайдерами Вы можете изменить изображение слайдера и его текст:

<li class="devices-example">
<div class="devices-img"><img src="/.s/t/1802/devices_01.jpg" alt="example"></div>
<div class="devices-text">
<h5>Lorem ipsum dolor</h5>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed mattis vel sem posuere imperdiet.
Fusce varius nunc lectus, eget auctor metus maximus ac. Nullam lobortis enim eget quam iaculis,
in malesuada diam convallis. Interdum et malesuada fames ac ante ipsum primis in faucibus. </p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed mattis vel sem posuere imperdiet.
Fusce varius nunc lectus, eget auctor metus maximus ac. Nullam lobortis enim eget quam iaculis,
in malesuada diam convallis. Interdum et malesuada fames ac ante ipsum primis in faucibus. </p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed mattis vel sem posuere imperdiet.
Fusce varius nunc lectus, eget auctor metus maximus ac. Nullam lobortis enim eget quam iaculis,
in malesuada diam convallis. Interdum et malesuada fames ac ante ipsum primis in faucibus. </p>
</div>
</li>

Превью к слайдам измените в строках 183-186 указав свои ссылки на изображения.

<a data-slide-index="0" href="" class="active"><img src="/.s/t/1802/previews.jpg"></a>
<a data-slide-index="1" href=""><img src="/.s/t/1802/previews.jpg"></a>
<a data-slide-index="2" href=""><img src="/.s/t/1802/previews.jpg"></a>
<a data-slide-index="3" href=""><img src="/.s/t/1802/previews.jpg"></a>

6)

Данных два блока является информерами модуля “Новости” и последних комментариев на сайте соответственно. Для их корректной работы вам необходимо в Панели Управления подключить модуль “Новости” и разрешить оставлять комментарии, после чего здесь будут транслироваться последние добавленные материалы и комментарии.

Если вы желаете изменить "Вид информера" перейдите в раздел "Инструменты" - "Информеры", где выберите необходимый информер и измените его.

Также вы можете удалить данный блок если не желаете использовать этот модуль. Найдите строки 199-221, 222-239 и удалите их.

3. Как изменить фон шаблона?

Чтобы цвет фона, перейдите в Панель управления → Дизайн → Редактор → Таблица стилей (CSS), после чего необходимо найдите там 31 строку:

body { background: #f4ffe9; margin: 0; font-size: 15px; color: #444; line-height: 1.5; font-family: "Roboto Condensed", sans-serif; }

#f4ffe9 – является цветом фона. Вместо него можно указать свой цвет или ссылку на свое изображение, предварительно загрузив его в Файловый менеджер сайта.

4. Как изменить цвет блоков?

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

aside {  width: 370px;  font-size: 14px;  border-left: 1px solid #e5ebf0;}

и добавить  в список сss cвойство:

background-color: #000;

где #000 - цвет фона. Его можно изменить на любой другой html-цвет.

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

Нижняя часть сайта не имеет каких либо особенностей. В правом углу расположены иконки социальных сетей, для их изменения перейдите в Панель управления → Дизайн → Редактор → Нижняя часть, где в строках 9-16 укажите свои ссылки на аккаунты в социальных сетях:

<div class="soc-box">
<span><a href="https://twitter.com/" class="soc-tw" target="_blank"></a></span>
<span><a href="https://www.facebook.com/" class="soc-fc" target="_blank"></a></span>
<span><a href="https://vimeo.com/" class="soc-vi" target="_blank"></a></span>
<span><a href="http://instagram.com/" class="soc-ig" target="_blank"></a></span>
  <span><a href="http://vk.com/" class="soc-vk" target="_blank"></a></span>
</div>

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

Основным цветом элементов сайта является #26bf66

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