Модификации Tilda

Делюсь кодами и модификациями Tilda, которые использовал сам в своих проектах.

Для того чтобы сделать уникальный сайт иногда использования стандартных блоков не достаточно. Даже применение широкого функционала zero block дизайнеру бывает мало. В этом случае я использую различные модификации стандартных и zero block Tilda с помощью кодов, изменения стилей CSS и java script.
Modifications
Modifications
Modifications
Раздел с модификациями Tilda постоянно пополняется. Когда в проекте не обойтись стандартными способами и приходится применять код, я ищу как можно реализовать нужный функционал. По возможности добавляю эти коды на сайт. Пользуйтесь на здоровье. Мне не жалко ¯\_(ツ)_/¯

Модификации Tilda с использованием zero block

В данном разделе собраны модификации zero block или комбинации с использованием стандартных блоков Tilda и zero block

Zero block
Zero block
Zero block
(◕‿◕)
Делаем стандартные блоки по сетке zero block
<style>
/*Максимальная ширина смартфона где будет применяться эффект сетки зеро-блока*/
@media screen and (max-width: 480px) {
/*Отступы слева и справа до контента в Grid-контейнере*/
.t-col { padding: 0 10px !important; }
/*Это максимальная ширина контейнера в зеро-блоке, при отображении мобильного*/
.t-container { max-width: 320px !important; }
}
</style>
Пояснение по использованию кода
Это код, который выстраивает ВСЕ стандартные блоки по сетке ZERO-block с учетом отступов 10рх по краям.

Чтобы код вам не мешал на странице, добавьте его в Настройки сайта — Еще — Редактировать CSS.

Скопируйте код и добавьте туда. Ничего опубликовывать не нужно. Теперь на всех стандартные блоки будут выровняны по ширине сетки zero block.
\( ̄▽ ̄)/
Настраиваем hover эффект наведения для кнопок формы в zero block
<style>
#rec199757244 .t-submit {
    /*длительность анимации*/
    transition: all 0.2s ease-in-out;
}
#rec199757244 .t-submit:hover {
    /*цвет текста кнопки при наведении*/
    color: #FFF528 !important;
    /*цвет бордюра кнопки при наведении*/
    border-color: #FFF528 !important;
    /*цвет фона кнопки при наведении*/
    background-color: #000000 !important;
}
</style>
Пояснение по использованию кода
Поменяйте #rec××××××××× на номер своего zero блок и настройте нужные цвета и скорость анимации. Добавьте код в блок T123.
╰(*´︶*)╯♡
Настраиваем фоновое видео в zero block
1. Видео на 100% ширину и высоту zero block
2. Видео с заданными пропорциями
3. Видео с автоплеем и без звука, зацикленное
<div id="videoBackground">
  <video style="object-fit: cover; background-size: cover; width: 100%; height: 100%;" preload="auto" playsinline autoplay loop muted>
    <source src="https://dl.dropboxusercontent.com/s/5qym13usc9vu20z/ezgif.com-resize.mp4?dl=0" type="video/mp4">
  </video>
</div>

<script>
$(document).ready(() => {
  let width = $(window).width();
  let height = $(window).height();
  $("#videoBackground")
    .width(width)
    .height(height);
});

$(window).resize(() => {
  let width = $(window).width();
  let height = $(window).height();
  $("#videoBackground")
    .width(width)
    .height(height);
});
</script>
<div id="videoCover">
  <video style="object-fit: cover; background-size: cover; width: 56%; height: 59%; border-radius: 8px;" preload="auto" playsinline autoplay loop muted>
    <source src="https://dl.dropboxusercontent.com/s/mflqcf5gxeae6kw/%D0%97%D0%B0%D0%BF%D0%B8%D1%81%D1%8C%20%D1%8D%D0%BA%D1%80%D0%B0%D0%BD%D0%B0%202020-02-11%20%D0%B2%2007.26.43.mov?dl=0" type="video/mp4">
  </video>
</div>

<script>
$(document).ready(() => {
  let width = $(window).width();
  let height = $(window).height();
  $("#videoCover")
    .width(width)
    .height(height);
});

$(window).resize(() => {
  let width = $(window).width();
  let height = $(window).height();
  $("#videoCover")
    .width(width)
    .height(height);
});
</script>

<style>
#videoCover video, div#videoCover {
    width: 100%!important;
    height: auto!important;
}
</style>
<div>
  <video style="object-fit: cover; background-size: cover; width: 100%; height: 100%" preload="auto" playsinline autoplay loop muted controls>
    <source src="https://333616.selcdn.ru/links/Woman%20Jazzo/course1.mp4?dl=0" type="video/mp4">
  </video>
</div>
Пояснение по использованию кода
1. Видео на 100% ширину и высоту блока

Код вставляется в html в zero block. Чтобы видео было по ширине всего экрана, поставьте настройки элементу window container, позиционирование center / center и 100% по ширине и высоте.

2. Видео с заданными пропорциями

Код вставляется в html в zero block. Задайте нужные размеры html элемента. Поставьте свою ссылку на видео.

3. Видео с автоплеем и mute, зацикленное

Код вставляется в html в zero block. Задайте нужные размеры html элемента. Поставьте свою ссылку на видео. Если в нидео не нужны элементы контроля, удалите пункт «controls» из кода.

Как получить ссылку на видео:
1. Загрузите видео в dropbox. Нажмите кнопку «Поделиться» и скопируйте ссылку.
2. Вставьте полученную ссылку в код ниже.
3. Замените в ссылке www.dropbox.com на dl.dropboxusercontent.com

Понравился эта модификация встраивания блоков в раскрывающийся список, лови код.

Модификации и изменение стандартных блоков Tilda

В данном разделе собраны модификации стандартных блоков Tilda. Все скрипты были использованы в реальных проектах.

Standart
Standart
Standart
(´。• ω •。)
Встраиваем любые блоки в раскрывающийся блок TX16N
<script>
  // назначаем id раскрывающегося блока
  var wrapper1 = $("#rec282709665 .t585__content .t585__textwrapper").eq(0);
  var wrapper2 = $("#rec282709665 .t585__content .t585__textwrapper").eq(1);
  var wrapper3 = $("#rec282709665 .t585__content .t585__textwrapper").eq(2);
  // назначаем блоки, которые будут ы раскрывающемся списке
  var block1 = $("#rec281151481")
  var block2 = $("#rec281152993")
  var block3 = $("#rec281156056")
  wrapper1.empty();
  wrapper2.empty();
  wrapper3.empty();
  block1.appendTo(wrapper1)
  block2.appendTo(wrapper2)
  block3.appendTo(wrapper3)
</script> 
Пояснение по использованию кода
1. Создаём блок TX16N. Удаляем описание и пишем заголовки.
2. Создаём блоки, которые будем встраивать внутрь раскрывающихся вкладок. Чтобы контент в раскрытых блоках был ровно, выставляем одинаковую ширину блока TX16N и тех блоков, которые будем помещать внутрь.
3. Вставляем скрипт в блок Т123. В коде меняем #rec блоков на свои. Пример кода для 3-х вкладок. Если блоков больше, то нужно скопировать дополнительные строки по аналогии с примером.
ヽ(°□° )ノ
Делаем блок TX16n в две колонки
<style>
@media screen  and (min-width: 960px){
  .twoColAcc  .t585 .t-col {
    float: none;
    display: block;
}
.twoColAcc .Column {
    width: 50%;
    float: left;
}
/*настраиваем цвет и толщину разделителя*/
.twoColAcc .leftaccord:last-child {
    border-bottom: 1px solid #c4c4c4;
}
}
</style>
<script>
$( document ).ready(function() {
    $('#rec161484771').addClass('twoColAcc'); //меняем #rec блока 
     // указываем блоки, которые будут в первой колонке
     $('.twoColAcc .t-col').slice(0,5).addClass('leftaccord');
     $('.leftaccord').wrapAll('<div class="leftColumn Column"></div>');
     // указываем блоки, которые будут во второй колонке
     $('.twoColAcc .t-col').slice(5,10).addClass('rightaccord');
     $('.rightaccord').wrapAll('<div class="rightColumn Column"></div>');   
    });
</script>
Пояснение по использованию кода
1. Создали блок TX16N, задали в настройках ширину блока 6 колонок.
2. Скопировали код в блок T123.
3. В коде меняем настройки толщины и цвета разделителя. Меняем #rec нашего блока.
4. Учитывая количество пунктов раскрывающегося списка прописываем пункты, которые будут в левой и правой колонке. Например, если у вас 10 пунктов, то для первой колонки прописываем значения (0,5), а для второй колонки (5,10).
ʕ ᵔᴥᵔ ʔ
Делаем, чтобы в аккордеоне TX16n открывалась только одна вкладка
<script>
//Делает так ,чтобы в аккардеоне открывался только один пункт
$( document ).ready(function() {
     $(".t585__header").addClass('itsclose');
     $(".t585__header").click(function() { 
        $(this).removeClass("itsclose");
        $(".t585__header.t585__opened.itsclose").click();
        $(this).addClass("itsclose");
     }); 
});
</script>
Пояснение по использованию кода
1. Скопируйте и вставьте код в блок T123.

Да! Так просто!

Разные варианты слайдеров и каруселей в Tilda

Тут вы найдёте модификации стандартных блоков со слайдерами Tilda, а также карусели и слайдеры, сделанные с использованием zero block.

Slider
Slider
Slider
(つ≧▽≦)つ
Карусель из zero block с использованием блока СR30N
<style>
.t734 { 
height: auto !important; 
}
.t734 .t-slds__bullet_wrapper {
    position: absolute;
    bottom: 40px;
}
</style>


<script>
$(document).ready(function(){
let sldID = ['#rec277287008'];
for (let i=0; i<sldID.length; i++){
    let sliderEl = sldID[i]+' .t-slds__item'; 
    let slidercount = $(sliderEl).length; $(sliderEl).empty(); let start=0;
    if(!$(sliderEl+'[data-slide-index="0"]').length){start=1};
    for (let j=0; j<slidercount; j++){
        let sInd = j+start;
        if(start){ slideId = '#'+$(sldID[i]).next().next('div[data-record-type="396"]').attr('id');
        }else{ slideId = '#'+$(sldID[i]).next('div[data-record-type="396"]').attr('id') 
        if(j==0){sInd=slidercount-1};if(j==slidercount-1){sInd=0};
        }; $(slideId).appendTo(sliderEl+'[data-slide-index='+(sInd)+']');
    };  if(start){ $(sldID[i]).next().hide(); $(sldID[i]).next().next().hide()};
};
 
});    
</script>
Пояснение по использованию кода
1. Создаём блок CR30N. Очищаем карточки. Оставляем нужное количество слайдов
2. Создаём нужное количество zero block, которые будут выполнять роль слайдов.
3. Первый и последний слайд дублируем. То есть у вас должно получиться два первых блока и два полследних.
4. Добавляем скрипт в блок T123
5. Меняем #rec нашего слайдера в коде

Стилизация стандартных блоков, форм и всего сайта

В этом разделе скрипты, которые помогут придать стиля вашему сайту и дополнить дизайн.

Style
Style
Style
(-‿‿-)
Большой бейджик сайта в facebook и telegram
<meta name="twitter:card" content="summary_large_image"/>
Пояснение по использованию кода
1. Откройте нужную страницу. Зайдите в настройки — Дополнительно — HTML-код для вставки внутрь head и нажмите «Редактировать код».
2. Вставьте указанный код.
3. Наслаждайтесь большим бэйджиком.
(✯◡✯)
Меняем цвет ссылки при наведении
a, a:visited {
-webkit-transition: 0.5s ease;
transition: 0.5s ease; 
}

a:hover, a:visited:hover {
color: #ba0095 !important;
-webkit-transition: 0s ease;
transition: 0s ease; 
}
Пояснение по использованию кода
1. Как задать цвет текста ссылки. Создаём блок T193. В нём задаём нужный цвет текста и цвет подчёркивания. Чтобы цвет добавился ко всем ссылкам на сайте, добавьте его в header сайта.
2. Чтобы задать цвет при наведении, указанный выше скрипт добавьте в CSS стили сайта. Для этого откройте Настройки сайта — Ещё — Редактировать CSS. Вставьте код и сохраните. 
\(≧▽≦)/
Плавный скролл сайта
<script src="https://cdnjs.cloudflare.com/ajax/libs/smoothscroll/1.4.10/SmoothScroll.min.js" integrity="sha256-huW7yWl7tNfP7lGk46XE+Sp0nCotjzYodhVKlwaNeco=" crossorigin="anonymous"></script>
<script>
SmoothScroll({
    // Время скролла 400 = 0.4 секунды
    animationTime    : 800,
    // Размер шага в пикселях 
    stepSize         : 75,

    // Дополнительные настройки:
    
    // Ускорение 
    accelerationDelta : 30,  
    // Максимальное ускорение
    accelerationMax   : 2,   

    // Поддержка клавиатуры
    keyboardSupport   : true,  
    // Шаг скролла стрелками на клавиатуре в пикселях
    arrowScroll       : 50,

    // Pulse (less tweakable)
    // ratio of "tail" to "acceleration"
    pulseAlgorithm   : true,
    pulseScale       : 4,
    pulseNormalize   : 1,

    // Поддержка тачпада
    touchpadSupport   : true,
})
</script>
Пояснение по использованию кода
1. Вставьте указанный код в блок T123 в шапку или подвал сайта
\(≧▽≦)/
Контурный текст
1. Обводка текста. Добавляем контур.
2. Добавляем тексту тень со смещениемw
3. Делаем текст прозрачным. Добавляем обводку
<style>
  /*Контур*/
 .t001__title{
      
    text-shadow: #ff0000 3px 3px 0, #ff0000 -3px -3px 0, #ff0000 -3px 3px 0, #ff0000 3px -3px 0;
}
   
</style>
<style>

  /*Тень со смещением*/
   .t001__title{
      
    text-shadow: #ff0000 5px 5px 5px;
}
   
</style>
<style>

  /*Контур и прозрачность*/
    #rec42068368 .t001__title{
        
    -webkit-text-stroke-width: 5px;
    -webkit-text-stroke-color: #ff0000;
    color: transparent !important;
      
  
}
   
</style>
Пояснение по использованию кода
1. Откройте нужную страницу. Зайдите в настройки — Дополнительно — HTML-код для вставки внутрь head и нажмите «Редактировать код».
2. Вставьте указанный код.
3. Наслаждайтесь большим бэйджиком.
Made on
Tilda