Дизайн #1717
1. Как изменить шапку сайта?
Верхняя часть шаблона состоит надписи названия сайта, пунктов меню и иконок социальных сетей.
Для изменения их требуется перейти в Панель управления → Дизайн → Редактор → Глобальные блоки → Верхняя часть сайта.
Вам требуется 31 (для мобильной версии) и 40 строчка кода для изменения названия:
<a href="$HOME_PAGE_LINK$"><!-- <logo> --><!-- <logo> -->Мой сайт<!-- </logo> --><!-- </logo> --></a>
где "Мой сайт" – вы можете изменить на любой свой текст.
Если же вместо текста Вы хотите разместить изображение, тогда в этой же строке вместо "Мой сайт" пропишите код:
<img src="ссылка на логотип">
где "ссылка на логотип" – пропишите ссылку, которую вы можете получить, осуществляя:
1) Логотип загружается в файловый менеджер сайта (Панель управления → Инструменты.)
2) После загрузки изображения, просто кликните на название изображение и вы получите заветную ссылку.
Также в строках 58-60 укажите свои ссылки на аккаунты в социальных сетях :
<li><a href="https://www.facebook.com/" class="icon-facebook"></a></li> <li><a href="https://www.vk.com" class="icon-vk"></a></li> <li><a href="https://www.instagram.com/" class="icon-instagram"></a></li>
2. Как отредактировать промо-страницу?
Для редактирования промо-страницы состоит перейдите в Панель управления → Дизайн → Редактор → PROMO.
Данная страница состоит из 10 так называемых блоков, изменение которых рассмотрим далее.
Обратите внимание, на то что каждое изменяемое изображение вам необходимо предварительно загрузить его в Файловый менеджер сайта.
-
Блок 1
В первом блоке можно изменить изображение в строке 3:
<img src="/.s/t/1717/promo.jpg" alt="img">
вместо /.s/t/1717/promo.jpg укажите свою ссылку на свое изображение.
Текст измените в строках 6-7:
<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>
В строке 8 необходимо указать ссылку на кнопку вместо # и изменить ее текст вместо “More”
<div class="cap-ds"><a href="#">More</a></div>
-
Блок 2
Во втором блоке изображение изменяется в строке 16:
<img src="/.s/t/1717/about.jpg" alt="img">
Вместо /.s/t/1717/about.jpg укажите свою ссылку на свое изображение.
Текст изменяется в строках 19-20:
<h3>About me</h3> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus ut euismod sem. Proin ultricies, justo in 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>
Для изменения фона за текстом вам требуется перейти в Панель управления → Дизайн → Редактор → Таблица стилей (CSS). Здесь перейдите к 81 строке кода:
.about-me{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-ms-flex-pack:distribute;justify-content:space-around;background-color:#1a1a1a;color:#fff}
#1a1a1a – это и есть цвет блока. #1a1a1a можете заменить на любой другой цвет html.
-
Блок 3
Третий блок содержит заголовок и три информационных блока.
Заголовок измените в строке 26:
<h3 class="block-title">Services</h3>
Для каждого информационного блока можно изменить изображение, текст и указать ссылку для перехода:
<img src="/.s/t/1717/services_01.jpg" alt="example"> <a href="#" class="work-title">Lorem ipsum dolor</a>
где вместо # укажите ссылку для перехода. Также вы можете использовать информер для этого блока, который будет выводить, например, последние материалы определенных модулей. Обязательным условием является наличие изображения у материала.
Тогда в коде шаблона удаляем строки 28-39 и вместо них пропишите код необходимого созданного информера $MYINF_1$
При создании или редактировании информера необходимыми параметрами являются:
- Тип данных: Материалы
- Количество колонок: 1
А шаблон информера будет иметь вид:
<div class="work-example"> <img src="$IMG_URL1$" alt="example"> <a href="$ENTRY_URL$" class="work-title">$TITLE$</a> </div>
Более детально с тем, как создать и настроить информер вы можете ознакомится здесь: /tools/informery
-
Блок 4
Название четвертого блока можно изменить в строке 45:
<h3 class="block-title">Portfolio</h3>
Далее загрузите свою галерею изображений перейдя к строкм 49-109, указав ссылку на изображение дважды, для превью и изображения в полном размере:
<a href="/.s/t/1717/gallery_01.jpg" target="_blank" class="ulightbox"> <img src="/.s/t/1717/gallery_01.jpg" alt="img"> </a>
Вместо/.s/t/1717/gallery_01.jpg укажите свою ссылку на свое изображение.
Также вы можете использовать информер для этого блока, который будет выводить, материалы модуля “Фотоальбом”.
Тогда в коде шаблона удаляем строки 48-110 и вместо них пропишите код необходимого созданного информера $MYINF_1$
При создании или редактировании информера необходимыми параметрами являются:
- Тип данных: Материалы
- Количество материалов: 9
- Количество колонок: 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>
Более детально с тем, как создать и настроить информер вы можете ознакомится здесь: /tools/informery
В 113 строке укажите ссылку для кнопки перехода на полный просмотр галереи:
<div class="text-center"> <a href="#" class="btn">See Portfolio</a></div>
где вместо # укажите ссылку и вместо “See Portfolio” пропишите свой текст.
-
Блок 5
В данном информационном блоке пропишите свои данные в строках 119-134.
-
Блок 6
Изменить название данного блока можно в строке 141:
<h3 class="block-title">My Services</h3>
Далее к каждому пункту можно изменить иконку, заголовок и описание
<i><img src="/.s/t/1717/svg/ring.svg" alt="img"></i> <h4>Wedding Photography</h4> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus ut euismod sem. Proin ultricies, nisl lorem euismod quam, lectus sed felis.</p>
-
Блок 7
Изменить название блока отзывов можно в строке 181:
<h3 class="block-title">Reviews</h3>
Далее в блоке для каждого отзыва, строки 184-196 можно изменить:
Фотографию:
<img src=".s/t/1717/user_1.jpg" alt="img">
Имя
<p class="name">Cras Justo</p>
Текст:
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus ut euismod sem. Proin ultricies, nisl lorem euismod quam, lectus sed felis. Integer feugiat lectus est, ut fermentum eros auctor at.</p>
-
Блок 8
Восьмой блок содержит заголовок и два информационных блока.
Заголовок измените в строке 204:
<h3 class="block-title">News</h3>
Для каждого информационного блока, строки 207-215, 218-226, можно изменить:
Изображение:
<img src="/.s/t/1717/news_01.jpg" alt="img">
Заголовок и ссылку для перехода:
<h4 class="post-title"><a href="#">Lorem ipsum dolor sit amet</a></h4>
Дату:
<div class="meta"><span class="date">18/08/2017</span></div>
Текст:
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus ut euismod sem. Proin ultricies, justo in scelerisque vehicula.</p>
Кнопку:
<div class="footer-meta"> <a href="#" class="more">Read More</a></div>
где вместо # укажите ссылку для перехода. Также вы можете использовать информер для этого блока, который будет выводить, например, последние материалы определенных модулей. Обязательным условием является наличие изображения у материала.
Тогда в коде шаблона удаляем строки 206-228 и вместо них пропишите код необходимого созданного информера $MYINF_1$
При создании или редактировании информера необходимыми параметрами являются:
- Тип данных: Материалы
- Количество колонок: 1
А шаблон информера будет иметь вид:
<div class="post"> <figure class="full"> <img src="$IMG_URL1$" alt="img"> <div class="post-content"> <h4 class="post-title"><a href="$ENTRY_URL$">$TITLE$</a></h4> <div class="meta"><span class="date">$DATE$</span></div> <p>$MESSAGE$</p> <div class="footer-meta"> <a href="$ENTRY_URL$" class="more">Read More</a></div> </div> </figure> </div>
Более детально с тем, как создать и настроить информер вы можете ознакомится здесь: /tools/informery
-
Блок 9
Данный блок содержит слайдер с изображениями и кнопку перехода. Заголовок измените в строке 236:
<h3 class="block-title">Last Instagram Shots</h3>
Далее укажите ссылки на свои изображения в строках 240-293:
<img src="/.s/t/1717/instagram_01.jpg" alt="img">
Кнопку измените в 300 строке:
<div class="text-center"> <a href="#" class="btn">Instagram Page</a></div>
где вместо # укажите ссылку и вместо “Instagram Page” пропишите свой текст.
-
Блок 10
Десятый блок содержит контактную информацию.
Заголовок измените в строке 319:
<h3 class="block-title">Contacts</h3>
Для изменения адреса,номера телефона и указания ссылок к социальным сетям перейдите к строкам 320-329
<p>Address</p> <address>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus ut euismod sem.</address> <p>Order a photo</p> <a href="#" class="phone-number">+1 (234) 567-8901</a> <div class="soc-contacts"> <ul class="social"> <li><a href="https://www.facebook.com/" class="icon-facebook"></a></li> <li><a href="https://www.vk.com" class="icon-vk"></a></li> <li><a href="https://www.instagram.com/" class="icon-instagram"></a></li> </ul>
3. Как изменить цвет правого блока?
Под названием блока есть линия, чтобы ее изменить, перейдите в Панель управления → Дизайн → Редактор → Таблица стилей (CSS), найдите там 219 строку:
.sidetitle::after{content:'';width:45px;height:2px;background-color:#e8314a;display:block;margin:5px auto}
#e8314a – является цветом данной линии. Вместо него можно указать свой html-цвет.
Для изменения цвета фона вам требуется перейти в Панель управления → Дизайн → Редактор → Таблица стилей (CSS). Здесь перейдите к 7 строке кода:
aside{width:270px;font-size:14px;background-color:#f2f2f2}
#f2f2f2 – это и есть цвет блока. #f2f2f2 можете заменить на любой другой цвет html.
4. Как изменить цвет нижней части сайта?
Для изменения цвета нижней части сайта вам требуется перейти в Панель управления → Дизайн → Редактор → Таблица стилей (CSS). Здесь перейдите к 394 строке кода:
#footer{padding:19px 0;color:#b4b4b4;background-color:#1a1a1a}
#1a1a1a – это и есть цвет блока. #1a1a1a можете заменить на любой другой цвет html.
5. Какой цвет основных элементов сайта?
Цветом цветом основных элементов сайта является #e3364d.
Если требуется сменить цветовую гамму, то воспользуйтесь заменой #e3364d на любой свой html-цвет, используя замену внутри шаблона Таблица стилей CSS.