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

Дизайн #1719

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

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

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

Вам требуется 31 (для мобильной версии) и 40 строчка кода для изменения названия:

<a href="$HOME_PAGE_LINK$"><!-- <logo> --><!-- <logo> -->Мой сайт<!-- </logo> --><!-- </logo> --></a>

где "Мой сайт" – вы можете изменить на любой свой текст.

Если же вместо текста Вы хотите разместить изображение, тогда в этой же строке вместо "Мой сайт" пропишите код:

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

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

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

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

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

<ul class="social naked">
<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>

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

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

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

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

  • Блок 1

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

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

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

Текст измените в строках 6-7:   

      <div class="cap-ttl item-1">Lorem ipsum dolor</div>
<div class="cap-ds description item-2">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.</div>

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

<div class="cap-ds"><a href="#">More</a></div>  
  • Блок 2

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

<img src="/.s/t/1719/about_01.jpg" alt="img"> (строка 18)
<img src="/.s/t/1719/about_02.jpg" alt="img"> (строка 32)

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

Текст изменяется в строках 21-22 и 27-28:

<h3>About our restaurant</h3> (строка 21)
<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> (строка 22)
<h3>Book the table</h3> (строка 27)
<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> (строка 28)        

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

<div class="text-center"> <a href="#" class="btn">More</a></div>

где More – вы можете изменить на любой свой текст, а вместо # укажите ссылку для перехода.

  • Блок 3

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

Название измените в строке 39

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

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

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

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

Тогда в коде шаблона удаляем строки 41-52 и вместо них пропишите код необходимого созданного информера $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

В данном информационном блоке пропишите свои данные в строках 61-74.

  • Блок 5

Название и текст четвертого блока можно изменить в строке 82-83:

 <h2>New Menu</h2>
<p>Integer feugiat lectus est, ut fermentum eros auctor at. Ut dictum et nisl sit amet aliquam. Donec porta libero sit amet elit aliquet fringilla. Suspendisse elit turpis, dapibus ac imperdiet nec, eleifend lobortis metus.</p>

Для изменения изображения вам требуется перейти в Панель управления → Дизайн → Редактор → Таблица стилей (CSS) и в строке 111 вместо /.s/t/1719/new.jpg укажите свою ссылку на свое изображение.

.new-dish{background:url(/.s/t/1719/new.jpg) center;position:relative;text-align:center;padding:120px 0}
  • Блок 6.1

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

<h3 class="block-title">Popular dishes</h3>

Далее загрузите свою галерею изображений в строках 93-168, указав ссылку на свои изображения:    

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

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

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

<div class="hidden-text">
<p class="title">Lorem ipsum</p>
<p class="description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus ut euismod sem. Proin ultricies, justo in scelerisque.</p>
</div>

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

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

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

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

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

<li class="item">
         <figure>
            <img src="$PHOTO_DIRECT_URL$" alt="img">
            <div class="hidden-text">
               <p class="title">$PHOTO_TITLE$</p>
               <p class="description"$PHOTO_DESCR$</p>
             </div>
         </figure>
       </li>

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

В 175 строке укажите ссылку для перехода на полный просмотр галереи:

<div class="text-center"><a href="#" class="btn">See Menu</a></div>

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

  • Блок 6.2

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

<h3 class="block-title">Features of our restaurant</h3>

Далее к каждому пункту можно изменить иконку и описание:      

<i><img src="/.s/t/1719/svg/cooker.svg" alt="img"></i>
<h4>Best cooks</h4>
<p>Nulla vitae libero, a pharetra augue. Integer posuere a ante venenatis condimentum. Donec id elit non mi porta gravida metus.</p>
  • Блок 7

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

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

Далее в блоке для каждого отзыва, строки  224-236 можно изменить:

Фотографию, имя и текст:

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

В данном блоке используется фоновое изображение, чтобы изменить его вам необходимо перейти в Панель управления → Дизайн → Редактор → Таблица стилей (CSS) и в строке 103 вместо /.s/t/1719/new.jpg укажите свою ссылку на свое изображение.

.parallax{background-image:url(/.s/t/1719/parallax.jpg);overflow:hidden;background-attachment:fixed;background-position:center center;background-repeat:no-repeat;background-size:cover;text-align:center;color:#d9d9d9}
  • Блок 8

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

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

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

    Для каждого информационного блока, строки 246-256, 258-268, можно изменить:

    Изображение:

    <img src="/.s/t/1719/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/04/2014</span></div>

    Текст:

    <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.</p>

    Кнопку:

    <div class="footer-meta"> <a href="#" class="more">Read More</a></div>

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

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

    Тогда в коде шаблона удаляем строки 246-268 и вместо них пропишите код необходимого созданного информера $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"> More</a></div>
    </div>
    </figure>
    </div>

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

    • Блок 9

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

    <h3 class="block-title">Latest Instagram Shots</h3>

    Далее укажите ссылки на свои изображения в строках 279-332:  

    <img src="/.s/t/1719/instagram_01.jpg" alt="img">

    Кнопку измените в 339 строке:

    <div class="text-center"> <a href="#" class="btn">Instagram Page</a></div>

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

    • Блок 10

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

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

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

    Для изменения адреса,номера телефона и указания ссылок к социальным сетям  перейдите к строкам 359-369:

    <p>Address</p>
        <address>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus ut euismod sem.</address>     <p>Address</p>
         <address>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus ut euismod sem.</address>    <p>Book your table</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>
        </div>

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

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

    aside{width:270px;font-size:14px;background-color:#f7f4f0}

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

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

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

    #footer,.uTable td.uTopTd{color:#bfa891;background-color:#28282b}

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

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

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

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