Дизайн #2301
Как изменить шапку сайта?
Верхняя часть шаблона состоит из надписи названия сайта, пунктов меню и строки поиска.
Название вашего сайта — текст, который будет отображаться в переменной $SITE_NAME$. Чтобы изменить его требуется перейти в Панель управления → Настройки → Общие настройки и изменить поле “Название вашего сайта” на необходимое.
Если же вместо текста нужно изображение тогда перейдите в Панель управления → Дизайн → Управление дизайном (шаблоны) → Глобальные блоки → Верхняя часть сайта найдите 6 строку кода:
<span class="logo-slogan">$SITE_NAME$</span>
и вместо $SITE_NAME$ пропишите:
<img src="ссылка на логотип">
где "ссылка на логотип" – пропишите ссылку, которую вы можете получить, осуществляя:
1) Логотип загружается в файловый менеджер сайта (Панель управления → Инструменты → Файловый менеджер.)
2) После загрузки изображения, просто кликните на название изображение и вы получите заветную ссылку.
Изменить фон шапки сайта можно в Панель управления → Дизайн → Управление дизайном (шаблоны) → Таблица стилей (CSS). Вам потребуется перейти к 80 строке кода:
.header { background-color: var(--tpl-dark-100); position: sticky; top: 0; width: 100%; z-index: 999; border-bottom: 1px solid var(--tpl-dark-200) }
var(--tpl-dark-100) – фон шапки сайта. Его можно изменить на любой другой html-цвет .
Как поменять логотип в шапке сайта на свой ?
Для изменения логотипа, вам нужно перейти в Панель управления → Дизайн → Управление дизайном (шаблоны) → Глобальные блоки → Верхняя часть сайта найдите 10 строку кода:
<svg class="header-mobile-icon"><use xlink:href="/.s/t/2301/icons.svg#close_icon"></use></svg>
вот здесь поменяйте иконку /.s/t/2301/icons.svg на ваше фото логотипа, важно отметить, что лого должно быть в формате svg.
Если же вы хотите прописать лого в своем формате jpg или png, тогда код стоит поменять на:
<span class="header-mobile-icon"><img src="ссылка на ваше лого"></span>
Как поменять изображения в слайдере в вархней части сайта ?
Для изменения слайдера, вам нужно перейти в Панель управления → Дизайн → Управление дизайном (шаблоны) → Глобальные блоки → SLIDER.
Для изменения стандартных изображений на свои, вам стоит найти такой код:
<div class="swiper-slide promo-card">
<img class="promo-card-img" src="/.s/t/2301/slide1.webp" srcset="/.s/t/2301/slide1@2x.webp 2x"
alt="slide-image 1">
<div class="promo-card-inner">
<div class="promo-card-content">
<h2>Discover Your Go-To Source
Of Exciting Content!</h2>
<p>Get inspiration every day – our website is always there to offer something exciting
and entertaining for you!</p>
<a href="#" class="button-link promo-btn">Read More</a>
</div>
</div>
</div>
<div class="swiper-slide promo-card">
<img class="promo-card-img" src="/.s/t/2301/slide2.webp" srcset="/.s/t/2301/slide2@2x.webp 2x"
alt="slide-image 2" loading="lazy">
<div class="swiper-lazy-preloader"></div>
<div class="promo-card-inner">
<div class="promo-card-content">
<h2>Fresh From the Oven: Your Gateway to Latest Trends!</h2>
<p>Explore a universe of captivating articles, engaging videos, and inspiring stories on
our website.</p>
<a href="#" class="button-link promo-btn">Read More</a>
</div>
</div>
</div>
<div class="swiper-slide promo-card">
<img class="promo-card-img" src="/.s/t/2301/slide3.webp" srcset="/.s/t/2301/slide3@2x.webp 2x"
alt="slide-image 1" loading="lazy">
<div class="swiper-lazy-preloader"></div>
<div class="promo-card-inner">
<div class="promo-card-content">
<h2>Unveiling Wonders: Dive into a Realm of Endless Fascination!</h2>
<p>Join us in exploring the endless possibilities of the world around us and beyond –
the journey begins here!</p>
<a href="#" class="button-link promo-btn">Read More</a>
</div>
</div>
</div>
</div>
Как видите, в слайдере используются изображения формата webp, чтобы все идеально работало именно в таком формате и стоит прописывать ссылки на ваши новые изобоажения.
Как в данном слайдере добавлять новые слайды ?
Выше часть кода выделена красным цветом, это отмечено то как добавить новые слайды в слайдере, если вам понадобится еще добавить, перед последним div серого цвета нужно добавить часть кода выделенную красным цветом в которой прописать свое фото и свой текст.
Как поменять слайдер с фото Our Team ?
Для изменения блока Our Team, вам нужно перейти в Панель управления → Дизайн → Управление дизайном (шаблоны) → Глобальные блоки → TEAM.
В данном блоке стоит найти код:
<div class="swiper-slide team-member">
<div class="team-member-photo">
<img class="team-member-img" width="275" height="278" src="/.s/t/2301/team-member-3.webp"
loading="lazy" alt="Veronica Sadovnikova">
<div class="swiper-lazy-preloader"></div>
</div>
<div class="info-box-user team-member-info">
<p class="user-name">Veronica Sadovnikova</p>
<p class="user-sub">Coordinator</p>
<ul class="user-social">
<li><a href="#">
<svg width="24" height="24">
<use xlink:href="/.s/t/2301/icons.svg#social_ya_icon"></use>
</svg>
</a></li>
<li><a href="#">
<svg width="24" height="24">
<use xlink:href="/.s/t/2301/icons.svg#social_vk_icon"></use>
</svg>
</a></li>
<li><a href="#">
<svg width="24" height="24">
<use xlink:href="/.s/t/2301/icons.svg#social_g_icon"></use>
</svg>
</a></li>
</ul>
</div>
</div>
Выше в примере увидите ссылку: /.s/t/2301/team-member-3.webp вот это фото в данном блоке под номером 3, и так меняется для каждого в формете webp.
Как добавлять свои слайды в слайдере Our Team ?
Для добавления новых слайдов в слайдер Our Team, вам нужно перейти в Панель управления → Дизайн → Управление дизайном (шаблоны) → Глобальные блоки → TEAM.
В данном блоке стоит найти код начиная с строки 29 по строку 124, это все тело слайдера в котором добавляются слайды.
Чтобы добавить новый слайд, вам стоит скопировать код который выше выделен синим цветом и добавить его в 122 строке после </div>, и так можете добавить столько слайдов сколько вам нужно по той же схеме.
После добавления нескольких слайдов по данному алгоритму мы увидим результат и стрелки для переключения между слайдами так как их уже стало больше чем 3, можно добавить хоть 10.
Как поменять слайдер Customer satisfaction reviews ?
Для изменения слайдера "Customer satisfaction reviews", вам нужно перейти в Панель управления → Дизайн → Управление дизайном (шаблоны) → Глобальные блоки → REVIEWS.
Весь код в пример приводить не будем, но покажем как в данном слайдере выглядит один слайд:
<div class="swiper-slide">
<div class="review-card">
<p class="review-message">I recently had an issue with one of the company's
products and reached out to customer support. I was pleasantly surprised by
how quickly and professionally they assisted me. The representative was
courteous and knowledgeable, and they quickly resolved my issue. I was very
satisfied!</p>
<div class="review-author-info">
<div class="review-avatar">
<img class="review-avatar-img" width="48" height="48" src="/.s/t/2301/review_avatar_4.webp" alt="Isabella Evans">
</div>
<div class="info-box-user">
<p class="user-name">Isabella Evans</p>
<p class="user-sub">Employee of uContur Company</p>
</div>
</div>
</div>
</div>
В нем можно поменять иконку на автар в формате webp на свою, поменять тексты на ваши и добавлять новые слайды.
Как добавлять новые слайды в слайдере REVIEWS ?
Для добавления новых слайдов вам нужно перейти в Панель управления → Дизайн → Управление дизайном (шаблоны) → Глобальные блоки → REVIEWS.
Далее скопировать код который выше выделен синим цветом и добавить его в строке номер 77 после закрывающего </div> по этому же алгоритму можно добавить столько слайдов сколько вам нужно.
Как поменять блок Advantages ?
Для изменения вам нужно перейти в Панель управления → Дизайн → Управление дизайном (шаблоны) → Глобальные блоки → ADVANTAGES.
Внутри блока найдете блоки с описанием и ссылками на иконки где сможете поменять описание на ваше как и поменять иконки на свои.
Как поменять блок About Us ?
Для изменения вам нужно перейти в Панель управления → Дизайн → Управление дизайном (шаблоны) → Глобальные блоки → LANDBOX.
Пример одного из изображений с описанием в данном блоке:
<div class="land-box-block"> <div class="land-box-photo"> <img width="380" height="380" loading="lazy" src="/.s/t/2301/land-img-2.webp" alt="template"> </div> <div class="land-box-text"> <h3>Journey to the Depths: Exploring the Mysteries of the Ocean</h3> <p>Following the mysterious depths of the seas, our expedition sets off on an incredible journey to the distant oceanic abyss. The majestic underwater expanses promise to reveal secrets and wonders of the marine world, bringing new discoveries and understanding to our voyage.</p> <div class="land-box-actions"> <a href="#" class="button-link">Read more</a> </div> </div> </div>
Здесь вы сможете поменять описание, ссылки на изображения в формате webp и текст кнопки "Read more". Если нужно чтобы кнопка была кликабельна, вы сможете прописать ссылку для кнопки при необходимости, если должен быть переход на новую страницу при нажатии.
Важно! Блок About Us не слайдер, перелистывание здесь нельзя настроить.
Как поменять блок FAQ ?
Для изменения вам нужно перейти в Панель управления → Дизайн → Управление дизайном (шаблоны) → Глобальные блоки → FAQ.
Перейдя внутрь блока вы увидите код в котором сможете поменять все тексты и описания для каждого из спойлеров полностью поменяв информацию на ту которая необходима вам.
Как изменить цвет блоков?
Изменить цвет фона блоков можно в Панель управления → Дизайн → Управление дизайном (шаблоны) → Таблица стилей (CSS). Вам потребуется перейти к 140 строке кода:
.sidebar-block { background-color: var(--tpl-dark-100); border-radius: 16px }
вот здесь поменять var(--tpl-dark-100) на необходимый вам цвет.
Как изменить фон шаблона?
Изменить цвет фона блоков можно в Панель управления → Дизайн → Управление дизайном (шаблоны) → Таблица стилей (CSS). Вам потребуется перейти к 24 строке кода:
body { background-color: var(--tpl-accent-white); color: var(--tpl-dark-900); font: var(--tpl-font-text-r1) }
вот здесь поменять var(--tpl-accent-white) на необходимый вам цвет.
Как изменить нижнюю часть сайта?
Для изменения вам нужно перейти в Панель управления → Дизайн → Управление дизайном (шаблоны) → Глобальные блоки → Нижняя часть сайта. После вы сможете настроить нижнюю часть так как вам необходимо.