Сейчас узнаем, какой подарок выпадет именно Вам
Крутите колесо
Ура, вы выиграли!
Ваш приз:
Годовой доступ
к видео на mo-ti -20%
по промокоду T19RAY
Промокод действителен 3 дня

Оформить доступ с промокодом
100
Как изменить позицию текстовой надписи в слайдере ZeroBlock в Tilda
SHOW#1
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.
SHOW#2
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.
SHOW#3
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.
Title One
“Sed ut perspiciatis, unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam eaque ipsa, quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt, explicabo.”
Title Two
“At vero eos et accusamus et iusto odio dignissimos ducimus, qui blanditiis praesentium voluptatum deleniti atque corrupti, quos dolores et quas molestias excepturi sint, obcaecati cupiditate non provident, similique sunt in culpa, qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio, cumque nihil impedit.”
Title Three
“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. ”

Как изменить позицию текстовой надписи в слайдере ZeroBlock в Tilda

1
SHOW#1
- Создали ZeroBlock и добавили в нём Gallery
- Задали ей класс text-center-mod
- Добавили 3 слайда с однотипной картинкой и текст вписали в Settings - Image Caption

- Добавили стиль из библиотеки SHOW#1 в блок Т123
2
SHOW#2
- Создали ZeroBlock и добавили в нём Gallery
- Задали ей класс text-img-center-mode
- Добавили 3 слайда с разными картинками и текст вписали в Settings - Image Caption

- Добавили стиль из библиотеки SHOW#2 в блок Т123
3
SHOW#3
- Создали ZeroBlock и добавили в нём Gallery
- Задали ей класс text-img-custom-mode
- Добавили 3 слайда с разными картинками
- Заголовки, Описание, Иконки и ссылки на них проставили в коде

- Добавили код из библиотеки SHOW#3 в блок Т123 (Отображение блока - Скрывать блок)
Библиотека для примера SHOW#1

<style>
.text-center-mode .t-slds__caption {
    margin-top: 0 !important;
    top: 50% !important;
    transform: translateY(-50%);
}
.text-center-mode .tn-atom__slds-img { opacity: 0}
.text-center-mode .t-slds__caption_wrapper {padding: 0}    
.text-center-mode .t-slds__title {
    opacity: 0.7;
    font-style: italic;
}
</style>
Библиотека для примера SHOW#2

<style>
.text-img-center-mode  .t-slds__caption {
    margin-top: 0 !important;
    top: 120px !important;
}
.text-img-center-mode .tn-atom__slds-img {
    background-size: 100px auto !important;
    background-position: 50% 0 !important;
}
.text-img-center-mode  .t-slds__caption_wrapper {padding: 0}    
.text-img-center-mode  .t-slds__title {
    opacity: 0.7;
    font-style: italic;
}
</style>
Библиотека для примера SHOW#3

<style>
.text-img-custom-mode  .t-slds__caption {
    margin-top: 0 !important;
    top: 120px;
}
.text-img-custom-mode .tn-atom__slds-img {
    background-size: 100px auto !important;
    background-position: 50% 0 !important;
}
.text-img-custom-mode  .t-slds__caption_wrapper {padding: 0}    
.text-img-custom-mode  .t-slds__title {font-style: italic}
.text-img-custom-mode .text-slider-title {
    font-size: 20px;
    font-weight: 600;
}
.text-img-custom-mode .text-slider-description {opacity: 0.6}
.text-slider-icon div {
    width: 40px;
    height: 40px;
    background-size: 75%;
    background-position: center;
    background-repeat: no-repeat;
}
.text-slider-icon {
    display: flex;
    justify-content: center;
    margin-top: 12px;
}
.text-img-custom-mode .t-slds__caption-active {z-index: 99}
.icon-fbook { background-image: url(https://static.tildacdn.com/tild3636-6337-4332-b434-646330616666/49354_2.svg)}
.icon-inst { background-image: url(https://static.tildacdn.com/tild3532-3338-4432-b764-613136623238/1384015_1.svg)}
.icon-twitter { background-image: url(https://static.tildacdn.com/tild3833-6138-4366-a230-396363306532/1384017_1.svg)}
</style>

<div class="text-slider-wrap">
    <div class="text-slider-title">Title One</div>
    <div class="text-slider-description">“Sed ut perspiciatis, unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam eaque ipsa, quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt, explicabo.”</div>
    <div class="text-slider-icon">
        <a href="https://www.facebook.com/"><div class="icon-fbook"></div> </a>
        <a href="https://www.instagram.com/"><div class="icon-inst"></div></a>
        <a href="https://twitter.com/"><div class="icon-twitter"></div></a>
    </div>
</div>
<div class="text-slider-wrap">
    <div class="text-slider-title">Title Two</div>
    <div class="text-slider-description">“At vero eos et accusamus et iusto odio dignissimos ducimus, qui blanditiis praesentium voluptatum deleniti atque corrupti, quos dolores et quas molestias excepturi sint, obcaecati cupiditate non provident, similique sunt in culpa, qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio, cumque nihil impedit.”</div>
    <div class="text-slider-icon">
        <a href="https://www.facebook.com/"><div class="icon-fbook"></div> </a>
        <a href="https://www.instagram.com/"><div class="icon-inst"></div></a>
        <a href="https://twitter.com/"><div class="icon-twitter"></div></a>
    </div>
</div>
<div class="text-slider-wrap">
    <div class="text-slider-title">Title Three</div>
    <div class="text-slider-description">“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. ”</div>
    <div class="text-slider-icon">
        <a href="https://www.facebook.com/"><div class="icon-fbook"></div> </a>
        <a href="https://www.instagram.com/"><div class="icon-inst"></div></a>
        <a href="https://twitter.com/"><div class="icon-twitter"></div></a>
    </div>
</div>
<script>
$( document ).ready(function() {
let sldNum;

let galleryLoad = setInterval(function() {
    if (document.querySelector('.tn-atom__slds-img')){
        clearInterval(galleryLoad); 
        sldNum = $('.text-img-custom-mode .t-slds__caption').length;
        for (let i=1; i<=sldNum; i++){
            $('.text-img-custom-mode .t-slds__caption[data-slide-caption="'+i+'"] .t-slds__title').html($('.text-slider-wrap:eq('+(i-1)+')'));
        };   
    };
}, 100);
});
</script>
Made on
Tilda