Модификации 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. Наслаждайтесь большим бэйджиком.
(*^ω^)
(´∀`*)
☆*:.。.o(≧▽≦)o.。.:*☆
(o^▽^o)
(⌒▽⌒)☆ <( ̄︶ ̄)> 。.:☆*:・'(*⌒―⌒*)))
ヽ(・∀・)ノ
(´。• ω •。`)
( ̄ω ̄) `;:゛;`;・(゜ε゜ )
(o・ω・o)
(@^-^)
ヽ(*・ω・)ノ
(o_ _)ノ彡☆
(^人^)
(o´▽`o)
(*´▽`*) 。゚( ゚^∀^゚)゚。
(´ω`)
(☆▽☆)
(≧◡≦)
(o´∀`o)
(´• ω •`)
(^▽^)
(⌒ω⌒)
∑d(゚∀゚d)
╰(▔∀▔)╯
(─‿‿─)
(*^‿^*)
ヽ(o^―^o)ノ
(◕‿◕)
(*≧ω≦*)
(((o(*゚▽゚*)o)))
(⌒‿⌒)
⌒(o^▽^o)ノ
☆ ~('▽^人)
(*゚▽゚*)
(✧∀✧)
(✧ω✧)
ヽ(*⌒▽⌒*)ノ
(´。• ᵕ •。`)
( ´ ▽ ` )
( ̄▽ ̄)
╰(*´︶`*)╯
ヽ(>∀<☆)ノ
o(≧▽≦)o
(☆ω☆)
(っ˘ω˘ς )
\( ̄▽ ̄)/
(*¯︶¯*)
\(^▽^)/
٩(◕‿◕)۶
(o˘◡˘o)


(* ^ ω ^) (´ ∀ *) (o^▽^o) (⌒▽⌒)☆ ヽ(・∀・)ノ (´。• ω •。) (o・ω・o) (@^◡^) (^人^) (o´▽o) ( ´ ω ) (((o(*°▽°*)o))) (´• ω •) (^▽^) ╰(▔∀▔)╯ (─‿‿─) (✯◡✯) (◕‿◕) (⌒‿⌒) \(≧▽≦)/ (*°▽°*) ٩(。•́‿•̀。)۶ (´。• ᵕ •。) ( ´ ▽ ) ヽ(>∀<☆)ノ o(≧▽≦)o \( ̄▽ ̄)/ (*¯︶¯*) (o˘◡˘o) \(★ω★)/ (╯✧▽✧)╯ o(>ω<)o ( ‾́ ◡ ‾́ ) (ノ´ヮ)ノ*: ・゚ (๑˘︶˘๑) ( ˙꒳​˙ ) (´・ᴗ・ ) (ノ◕ヮ◕)ノ*:・゚✧
Visual communication takes place through pictures, graphs and charts, as well as through signs, signals and symbols. It may be used either independently or as an adjunct to the other methods.
Symbolization is an important definition for this perspective. Cultural perspective involves identity of symbols. The uses of words that are related with the image, the use of heroes in the image, etc. are the symbolization of the image.
The view of images in the critical perspective is when the viewers criticise the images, but the critics have been made in interests of the society, although an individual makes the critics.
Made on
Tilda