1. Слайдер из зеро блок
Пример реализации
История Врама:
английский как родной язык
английский как родной язык
«Главная задача – знать английский, как базовый язык» — Папа Врама.
История Егора:
о целях, о мечтах и достижениях
о целях, о мечтах и достижениях
«Я мечтаю научиться хорошо говорить по-английски, путешествовать с мамой и общаться с другими людьми»
История Полины: онлайн‑обучение в зарубежной школе США из России
«Оценка в американской школе не зависит от того, что ты сразу чего‑то не понял»
Егору 7 лет, вместе с нами он учится онлайн в американской школе Noah's Arc. Параллельно он обучается в первом классе российской школы.
Враму 10 лет, вместе с нами он учится онлайн в американской школе VSOE и британской школе Samiad.
Полине 14 лет, она учится в 8 классе и уже сейчас знает, что получит высшее образование за границей. Поэтому она удалённо учится в американской школе Aquinas International Academy вместе с нами – и через несколько семестров получит диплом, который поможет ей поступить в вуз мечты.
История Тимура:
от небольшого запаса слов к разговорному английскому
от небольшого запаса слов к разговорному английскому
«...теперь если я еду в отпуск, то уже могу на английском разговаривать»
История Станислава:
как улучшить разговорный английский язык?
как улучшить разговорный английский язык?
Станиславу 13 лет, он учится онлайн в американской школе AIA уже почти 6 месяцев. Вместе с нами он изучает английский язык.
Он уже опережает программу российской школы, а в будущем планирует получить диплом международного образца, поступить в американский вуз и стать авиаконструктором ✈️
Тимуру 11 лет, он живёт в Казахстане и совмещает обучение в государственной школе с уроками английского в британской школе Samiad.
Скрипт
<!-- Тильдошная слайдер из Zero блоков -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.theme.default.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js"></script>
<script>
$(document).ready(function(){
// Id блока, в котором будет слайдер
var block = $("#rec384358343");
// Class элемента, в котором будет находиться слайдер
var wrap = $(".tn-elem__3587197911622443719680");
// Id блоков, которые будут слайдами
var slides = $("#rec384358344, #rec384358345");
wrap.addClass("tildoshnaya-slider-owl");
var box = wrap.find(".tn-atom");
box.append('<div class="owl-carousel owl-theme"></div>');
slides.appendTo(block.find('.owl-carousel'));
var owl = wrap.find('.owl-carousel').owlCarousel({
// Зациклить слайдер - true
// Без зацикленности - false
loop:true,
// Точки-контроллы
dots: false,
nav:false,
// Колличество карточек
items: 1,
// Адаптивность
responsive:{
// 0 это минимальная ширина экрана, при которой включается следующая часть кода
// 0:{
// items: 1 это колличество слайдов на экране
// items:1
// },
0:{
items:1
},
640:{
items:1
},
960:{
items:1
},
}
// Адаптивность: конец
})
block.find("[href='#slider_left']").click(function(e){
e.preventDefault();
owl.trigger('prev.owl.carousel');
})
block.find("[href='#slider_right']").click(function(e){
e.preventDefault();
owl.trigger('next.owl.carousel');
})
});
</script>
<style>
/* tildoshnaya_ */
.tildoshnaya-slider-owl .t-rec .t396__artboard {
/* Указываем высоту слайда */
height: 650px !important;
/* Указываем ширину слайда */
width: 1025px !important;
}
.tildoshnaya-slider-owl {
display: flex;
flex-flow: row nowrap;
justify-content: center;
align-items: stretch;
align-content: stretch;
}.tildoshnaya-slider-owl .t-rec,
.tildoshnaya-slider-owl .t396__artboard {
overflow: hidden !important;
}
</style>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.theme.default.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js"></script>
<script>
$(document).ready(function(){
// Id блока, в котором будет слайдер
var block = $("#rec384358343");
// Class элемента, в котором будет находиться слайдер
var wrap = $(".tn-elem__3587197911622443719680");
// Id блоков, которые будут слайдами
var slides = $("#rec384358344, #rec384358345");
wrap.addClass("tildoshnaya-slider-owl");
var box = wrap.find(".tn-atom");
box.append('<div class="owl-carousel owl-theme"></div>');
slides.appendTo(block.find('.owl-carousel'));
var owl = wrap.find('.owl-carousel').owlCarousel({
// Зациклить слайдер - true
// Без зацикленности - false
loop:true,
// Точки-контроллы
dots: false,
nav:false,
// Колличество карточек
items: 1,
// Адаптивность
responsive:{
// 0 это минимальная ширина экрана, при которой включается следующая часть кода
// 0:{
// items: 1 это колличество слайдов на экране
// items:1
// },
0:{
items:1
},
640:{
items:1
},
960:{
items:1
},
}
// Адаптивность: конец
})
block.find("[href='#slider_left']").click(function(e){
e.preventDefault();
owl.trigger('prev.owl.carousel');
})
block.find("[href='#slider_right']").click(function(e){
e.preventDefault();
owl.trigger('next.owl.carousel');
})
});
</script>
<style>
/* tildoshnaya_ */
.tildoshnaya-slider-owl .t-rec .t396__artboard {
/* Указываем высоту слайда */
height: 650px !important;
/* Указываем ширину слайда */
width: 1025px !important;
}
.tildoshnaya-slider-owl {
display: flex;
flex-flow: row nowrap;
justify-content: center;
align-items: stretch;
align-content: stretch;
}.tildoshnaya-slider-owl .t-rec,
.tildoshnaya-slider-owl .t396__artboard {
overflow: hidden !important;
}
</style>
Инструкция по установке
Шаг 1) Создаем основной Zero блок и добавляем в него элемент «SHAPE», в котором будет наш слайдер. У «SHAPE» нужно убрать цвет заднего фона, рамки, тени.
Шаг 2) Добавляем дополнительные несколько блоков, которые будут слайдами. Все элементы в слайдах должны быть выравнены «Container: Window — Left — Top». Положение этих элемента не меняем, всегда в левом верхнем углу, именно эту область будет «видеть» shape в первом блоке. Дополнительные элементы можно перемещать в границах этого элемента.Добавляем контент — изображения (обязательно отключаем lazy load), кнопки, текст, формы.
Шаг 3) Размеры по высоте shape и элементов — слайдов должны быть одинаковы.
Шаг 4) Вставляем код в блок T123 после всех Zero блоков действующих в скрипте
указываем вот эти параметры -
/* Указываем высоту слайда */
height: 300px !important;
/* Указываем ширину слайда */
width: 300px !important;
Шаг 2) Добавляем дополнительные несколько блоков, которые будут слайдами. Все элементы в слайдах должны быть выравнены «Container: Window — Left — Top». Положение этих элемента не меняем, всегда в левом верхнем углу, именно эту область будет «видеть» shape в первом блоке. Дополнительные элементы можно перемещать в границах этого элемента.Добавляем контент — изображения (обязательно отключаем lazy load), кнопки, текст, формы.
Шаг 3) Размеры по высоте shape и элементов — слайдов должны быть одинаковы.
Шаг 4) Вставляем код в блок T123 после всех Zero блоков действующих в скрипте
указываем вот эти параметры -
/* Указываем высоту слайда */
height: 300px !important;
/* Указываем ширину слайда */
width: 300px !important;
Шаг 5) Узнаем id блоков, которые будут слайдами, блока в котором будет слайдер и class shape элемента, в основном блоке.
Шаг 6) Заменяем id и class shape элемента в первых строках нашего кода.
8 строка — Id блока, в котором будет слайдер.
10 строка — class элемента, в котором будет слайдер.
12 строка — id блоков, через запятую, которые должны стать слайдами.
Шаг 7) В блоке со слайдером добавляем два изображения под стрелочки и указываем им ссылки #slider_left для стрелочки влево и #slider_right для стрелочки вправо.
Настройки слайдера:
21 строка — цикличность слайдера.
25 строка — количество слайдов на одном экране (после изменения надо проверить чтобы все правильно отображалось)
28−43 строки — адаптивность. Можно изменить количество слайдов в мобильной или планшетной версии
(Номера строк будут видны когда разместите код в блок T123, в редакторе)
Шаг 6) Заменяем id и class shape элемента в первых строках нашего кода.
8 строка — Id блока, в котором будет слайдер.
10 строка — class элемента, в котором будет слайдер.
12 строка — id блоков, через запятую, которые должны стать слайдами.
Шаг 7) В блоке со слайдером добавляем два изображения под стрелочки и указываем им ссылки #slider_left для стрелочки влево и #slider_right для стрелочки вправо.
Настройки слайдера:
21 строка — цикличность слайдера.
25 строка — количество слайдов на одном экране (после изменения надо проверить чтобы все правильно отображалось)
28−43 строки — адаптивность. Можно изменить количество слайдов в мобильной или планшетной версии
(Номера строк будут видны когда разместите код в блок T123, в редакторе)
2. Эффект для кнопки
Пример реализации
Скрипт
<style>
/*Эффект для кнопки*/
[href='#popup:test'] {
background: radial-gradient(102.08% 203.65% at 48.04% 50%, #FFC700 0%, #FFE67E 100%);
box-shadow: 0px 12px 30px -10px rgba(0, 0, 0, 0.25), inset 0px 4px 4px rgba(255, 255, 255, 0.25);
background-position: 100% 0 !important;
background-size: 200% 200%;
transition: all 0.5s ease-in-out !important;
}
/*Эффект для кнопки*/
[href='#popup:test']:hover {
background: radial-gradient(102.08% 203.65% at 48.04% 50%, #FFC700 0%, #FFE67E 100%);
box-shadow: 0px 12px 30px -10px rgba(0, 0, 0, 0.25), inset 0px 4px 4px rgba(255, 255, 255, 0.25);
background-position: 100% 0 !important;
background-size: 200% 200%;
background-position: 0 0 !important;
}
</style>
/*Эффект для кнопки*/
[href='#popup:test'] {
background: radial-gradient(102.08% 203.65% at 48.04% 50%, #FFC700 0%, #FFE67E 100%);
box-shadow: 0px 12px 30px -10px rgba(0, 0, 0, 0.25), inset 0px 4px 4px rgba(255, 255, 255, 0.25);
background-position: 100% 0 !important;
background-size: 200% 200%;
transition: all 0.5s ease-in-out !important;
}
/*Эффект для кнопки*/
[href='#popup:test']:hover {
background: radial-gradient(102.08% 203.65% at 48.04% 50%, #FFC700 0%, #FFE67E 100%);
box-shadow: 0px 12px 30px -10px rgba(0, 0, 0, 0.25), inset 0px 4px 4px rgba(255, 255, 255, 0.25);
background-position: 100% 0 !important;
background-size: 200% 200%;
background-position: 0 0 !important;
}
</style>
Инструкция по установке
Шаг 1) Задаем ссылку кнопке.
Шаг 2) Вставляем код в блок T123 после всех блоков на сайте.
Шаг 3) Заменяем ссылки в третей и одиннадцатой строках нашего кода.
Шаг 2) Вставляем код в блок T123 после всех блоков на сайте.
Шаг 3) Заменяем ссылки в третей и одиннадцатой строках нашего кода.
3. Эффект для кнопки через код в Zero block
Пример реализации
Скрипт
<style>
/*Эффект для кнопки*/
.more {
background: linear-gradient(89.89deg, #FF9C28 0.03%, #FF9D28 0.04%, #FFCC00 99.84%);
box-shadow: 0px 10px 20px rgba(255, 177, 86, 0.5), inset 0px -1px 0px #FF8A1D;
transition: all 0.5s ease-in-out !important;
border-radius:7px !important;
}
/*Эффект для кнопки*/
.more :hover {
background: radial-gradient(102.08% 203.65% at 48.04% 50%, #FFC700 0%, #FFE67E 100%);
box-shadow: 0px 12px 30px -10px rgba(0, 0, 0, 0.25), inset 0px 4px 4px rgba(255, 255, 255, 0.25);
background-position: 100% 0 !important;
background-size: 200% 200%;
background-position: 0 0 !important;
transition: all 0.5s ease-in-out !important;
}
</style>
/*Эффект для кнопки*/
.more {
background: linear-gradient(89.89deg, #FF9C28 0.03%, #FF9D28 0.04%, #FFCC00 99.84%);
box-shadow: 0px 10px 20px rgba(255, 177, 86, 0.5), inset 0px -1px 0px #FF8A1D;
transition: all 0.5s ease-in-out !important;
border-radius:7px !important;
}
/*Эффект для кнопки*/
.more :hover {
background: radial-gradient(102.08% 203.65% at 48.04% 50%, #FFC700 0%, #FFE67E 100%);
box-shadow: 0px 12px 30px -10px rgba(0, 0, 0, 0.25), inset 0px 4px 4px rgba(255, 255, 255, 0.25);
background-position: 100% 0 !important;
background-size: 200% 200%;
background-position: 0 0 !important;
transition: all 0.5s ease-in-out !important;
}
</style>
Инструкция по установке
Шаг 1) Создаем кнопку в Zero Block
Шаг 2) Задаем ей css класс "more"
Шаг 3) Создаем элемент HTML и добавляем в него наш код.
Шаг 2) Задаем ей css класс "more"
Шаг 3) Создаем элемент HTML и добавляем в него наш код.
4. Залипание меню из zero block
Скрипт
<!-- Тильдошная Прилипающее меню -->
<style>/* Sticky блок - замените на Id блока который должен прилипнуть */#rec135372713 {
position: sticky;
position: -webkit-sticky;
z-index: 999;
top: 0px;
}
.t-records {
overflow-x: unset !important;
}
</style>
<style>/* Sticky блок - замените на Id блока который должен прилипнуть */#rec135372713 {
position: sticky;
position: -webkit-sticky;
z-index: 999;
top: 0px;
}
.t-records {
overflow-x: unset !important;
}
</style>
Инструкция по установке
Шаг 1) Создаем Zero block, который будет меню.
Шаг 2) Вставляем код в блок T123 сразу после нужного Zero block.
Шаг 3) Заменяем id блока в четвертой строке нашего кода.
Шаг 2) Вставляем код в блок T123 сразу после нужного Zero block.
Шаг 3) Заменяем id блока в четвертой строке нашего кода.
5. Залипание меню из zero block с прозрачностью
Скрипт
<style>
/*Выставляем фиксированную позицию на экране и номер слоя выше остальных*/
.fixed {
width: 100%;
position: fixed;
top: 0px;
z-index: 9999;
/*Задаём время и характер анимации для фона меню */
transition:all 0.6s cubic-bezier(0, 0, 0.8, 1.0);
}
.fonmenu{
/*Задаём цвет фона для меню*/
background:rgba(255, 255, 255, 0.3);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
height: 60px;
}
</style>
<script>
$(document).ready(function(){
/* нужно заменить на код блока Zero выполняющего роль меню */
var blockMenuID = '#rec272717667';
//Добавляем класс с фиксацией
$(blockMenuID).addClass('fixed');
//Когда начался скролл экрана
$(window).scroll(function() {
var top = $(document).scrollTop();
//Если перемещение больше 5 px
if (top >= 5) {
//То добавляем к меню наш фон
$(blockMenuID).addClass('fonmenu');
} else {
//Если поднялись наверх, то удаляем фон
$(blockMenuID).removeClass('fonmenu');
}
});
});
</script>
/*Выставляем фиксированную позицию на экране и номер слоя выше остальных*/
.fixed {
width: 100%;
position: fixed;
top: 0px;
z-index: 9999;
/*Задаём время и характер анимации для фона меню */
transition:all 0.6s cubic-bezier(0, 0, 0.8, 1.0);
}
.fonmenu{
/*Задаём цвет фона для меню*/
background:rgba(255, 255, 255, 0.3);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
height: 60px;
}
</style>
<script>
$(document).ready(function(){
/* нужно заменить на код блока Zero выполняющего роль меню */
var blockMenuID = '#rec272717667';
//Добавляем класс с фиксацией
$(blockMenuID).addClass('fixed');
//Когда начался скролл экрана
$(window).scroll(function() {
var top = $(document).scrollTop();
//Если перемещение больше 5 px
if (top >= 5) {
//То добавляем к меню наш фон
$(blockMenuID).addClass('fonmenu');
} else {
//Если поднялись наверх, то удаляем фон
$(blockMenuID).removeClass('fonmenu');
}
});
});
</script>
Инструкция по установке
Шаг 1) Создаем Zero block, который будет меню.
Шаг 2) Вставляем код в блок T123 сразу после нужного Zero block.
Шаг 3) Заменяем id блока в двадцать пятой строке нашего кода.
Шаг 2) Вставляем код в блок T123 сразу после нужного Zero block.
Шаг 3) Заменяем id блока в двадцать пятой строке нашего кода.
6. Таймер в zero block
Пример реализации
10 : 55 : 22 : 33
Our website is almost ready
Create a targeted live campaign.
Scale your infrastructure with our simple service.
Scale your infrastructure with our simple service.
Days
Hours
Minutes
Seconds
Скрипт
<style>/*Скрываем блок с таймером*/
[data-record-type="415"] {
display:none;
}
</style>
<script>
$( document ).ready(function() {
function ZeroTimer(){
var zeroDays = $('.t415__days ').html();
var zeroHours = $('.t415__hours').html();
var zeroMinutes = $('.t415__minutes').html();
var zeroSeconds = $('.t415__seconds').html();
//Описываем строку со таймером var timeTitle = zeroDays+' : '+zeroHours+' : '+zeroMinutes+' : '+zeroSeconds ;
//Выводим таймер в текстовом поле ZeroBlock
$('[field="tn_text_1547302526090"]').text(timeTitle);
};
ZeroTimer();
var timeinterval = setInterval(ZeroTimer,1000);
});
</script>
[data-record-type="415"] {
display:none;
}
</style>
<script>
$( document ).ready(function() {
function ZeroTimer(){
var zeroDays = $('.t415__days ').html();
var zeroHours = $('.t415__hours').html();
var zeroMinutes = $('.t415__minutes').html();
var zeroSeconds = $('.t415__seconds').html();
//Описываем строку со таймером var timeTitle = zeroDays+' : '+zeroHours+' : '+zeroMinutes+' : '+zeroSeconds ;
//Выводим таймер в текстовом поле ZeroBlock
$('[field="tn_text_1547302526090"]').text(timeTitle);
};
ZeroTimer();
var timeinterval = setInterval(ZeroTimer,1000);
});
</script>
Инструкция по установке
Шаг 1) Создать ZeroBlock
Шаг 2) Создаём в ZeroBlock элемент TEXT и примерную надпись нашего таймера:
Например - 73 : 10 : 44 : 16
Шаг 3) Затем оформляем как нужно
Шаг 4) Снизу таймера добавили подписи через 4 элемента Text
Дни , Часы, Минуты, Секунды
Шаг 5) Добавляем таймер блок Обложки►CR35
Шаг 6) Добавляем скрипт на страницу
Скрипт и стили вставляются в блок ДРУГОЕ►Т123
Шаг 7)
7. Тень у текста в Zero block
Пример реализации
12 : 12 : 12 : 12
Скрипт
<style>
.txt{
text-shadow: 1px 1px 2px #ffffff;
</style>
.txt{
text-shadow: 1px 1px 2px #ffffff;
</style>
Инструкция по установке
Шаг 1) Создаем элемент текст
Шаг 2) Задаем ему css класс "txt"
Шаг 3) Создаем элемент HTML и добавляем в него наш код.
Шаг 2) Задаем ему css класс "txt"
Шаг 3) Создаем элемент HTML и добавляем в него наш код.