Резиновый сайт Автоматически в Tilda Zero block

[@dmitriivasilev5905]

Единственный канал, который делает НАСТОЛЬКО годный контент. Почти всеми фишками из твоих роликов пользуюсь, это просто огонь)

[@design_scripts]

Спасибо, это приятно слышать. Стараюсь постоянно удивлять)

[@ЕкатеринаСонина-и3и]

ССЫЛКА БИТАЯ

[@mikhaildyachenko1670]

СТАС , ТЕБЕ ОГРОМНОЕ ЧЕЛОВЕЧЕСКОЕ СПАСИБО!!! ЭТО РЕАЛЬНО ОДНО ИЗ ГЛАВНЫХ СОБЫТИЙ ГОДА В ТИЛЬДЕ!!! МИЛЛИОН РАЗ ТЕБЕ ГОВОРЮ СПАСИБО!!! 👍👍👍👍👍👍👍

[@design_scripts]

И тебе спасибо за такой эмоциональный комментарий👋😉

[@mikhaildyachenko1670]

@@design_scripts да я вообще прыгаю от радости, я наверное больше всех здесь этого ждал)))

[@ЕкатеринаСонина-и3и]

ССЫЛКА БИТАЯ

[@alexandrgerasimov910]

Наконец-то, я так долго этого ждал и мучался с этими window контейнирами и дублями блоков. Спасибо тебе большое человечище!!

[@zuzuBoba]

Боялся что за архив надо будет платить или скачивать его в телеграмм подписавшись на миллиард пабликов, но оказалось что ты просто классный чел который делится знаниями! Благодарочка! ❤

[@rfpfljtd777]

Храни тебя бог!!!!!!! Сколько мы этого ждали 🥺🙏❤

[@Phangan-FM]

Не по уведомлению, а по зову сердца)

[@super-preza]

Огромное спасибо и низкий поклон за то, что расширяешь вселенную Тильды! Очень полезные и нужные видео!!

[@moonly9153]

снимаю шляпу, перед этим столь добрым джентельменом, помогло нереально

[@ОльгаИльяшова-ц8г]

Станислав, ты крутой! Даешь так просто и легко материал, что любой может быстро стать спецом! Благодарю

[@ЕвгенийУланов-д9у]

Он, что, сын Илона Маска? Как иначе объяснить это??!?!?!?

[@design_scripts]

Просто наслаждаюсь тем, чем занимаюсь) Спасибо за крмментарий😉

[@ДмитрийИрлык-о4ф]

Спасибо за видео! Все мы потихоньку начинаем любить код)) Расширение annex очень крутое, пользуюсь!

[@design_scripts]

И тебе спасибо за комментарий. Рад, что мои старания не напрасны)

[@elenamonakova7547]

Спасибо за этот полезный контент!!! Одним видео покорил мое ❤

[@ЕленаЛобанова-ы8и]

ну крууутяяяяк, спасибище просто невероятное!! я в восторге.

[@ЕкатеринаВладимировна-о4с]

От души!! пол дня убила на утехи с autoscale, а оказалось, все настолько просто.

[@alexanderchudaev9431]

Автору огромное спасибо! Помню весь день убил чтобы сделать первый экран через проценты, но из-за этого анимации не работали и было не очень, а тут запустил скрипт, скопировал стили с консоли и вставил в код сайта - профит. От души, друг

[@VovaSumrak]

А у меня в консоле пусто, не показывает стили.

[@koshevchuk]

Боже, Станислав, ты чудо! Спасибо 💖

[@gokostrov]

лучший, спасибо огромное, сохранил с помощью этого способа около 2 дней, еще раз, спасибо!

[@iramihh8072]

шок, это просто великолепно!!! Благодарю!

[@averkom]

Стас, огромное спасибо! Крайне полезный контент! Только жаль, что так редко. Наверное у тебя сейчас много заказов! Пожалуйста, не забывай про нас - простых сайтоделов)

[@design_scripts]

Дружище, я готовлю для вас просто вынос мозга. Сайты уровня bruno-simon.com

[@ЕкатеринаСонина-и3и]

ССЫЛКА БИТАЯ

[@perfectsisjsj]

@@design_scripts это разьёб

[@motivation_justdoit]

МИЛЛИОН РАЗ СПАСИБО! ЭТО ОТКРЫТИЕ ДЛЯ МЕНЯ!

[@julisat9772]

Мега полезное видео) обязательно попробую

[@abobus_artem]

Это просто божественно! Большое спасибо!

[@onlymozg6811]

БЛиииииииин! Сегодня весь день мучался с резиновой версткой на работе и тут "БАА БААААХ" ОТ СТАСА! Ты вообще человек? По любому на марсе сидишь делаешь крутые вещи с Илоном Маском) !

[@design_scripts]

Я сижу на сникерсе) Пасиба за комментарий🤙

[@МарияТемнова-ъ1у]

Спасибо вам большое, я так давно об этом мечтала!!!!

[@design_scripts]

Что ж, я рад, что ещё одна мечта исполнилась)

[@pavelpechenkov5862]

Вы делаете невероятно крутое дело. Спасибо!

[@design_scripts]

Спасибо, стараюсь каждый раз удивлять)

[@NetskyA]

Господи, а я там скриптами выкручивался с отображением блоков в зависимости от разрешения, 4 одинаковых блока под разные разрешения.... Мужик ты просто такой нереальный красавчик, ашалеть просто, ты вообще понимаешь, что ты помогаешь людям деньги зарабатывать? Когда разбогатею закину тебе денег от души)

[@shamasp]

Ранок став просто ПРЕКРАСНИМ !!!! дуже дякую !!!!

[@innaavanesova7848]

У меня тоже все получилось! Дай бог тебе здоровья, милок!)))

[@ihorviktorsson8967]

Это просто что-то феноменальное, для меня это просто как революция на Тильде) Ты спас много крутых проектов этим видео!) Кстати, важное замечание для тех, кто будет пользоваться вторым вариантом. При использовании Page scale почему-то не работает Overflow, даже если в настройках стоит Visible. Будьте аккуратнее, а то я чуть не завтыкал с этим. Лучше использовать первый вариант

[@Е.Н-и4р]

Спасибище тебе! Так давно такое искала!!!

[@ВладЛитвинов-е4с]

Спасибо, как минимум стоит попробовать )

[@nikei7717]

Конечно лайк, спасибо за годноту.

[@design_scripts]

Спасибо😉

[@dksstudiosdemid1607]

Спасибо огромное, это просто невообразимо

[@Justplayden]

А вот резиновый сайт как раз в тему, спасибо за информацию

[@igorn1870]

Это ТОП контент! Это ТОП автор! Это ТОП канал! Просто всё и без "воды". Спасибо.

[@oleksandr_bezuhlyi]

Благодарность, благодарность и ещё раз благодарность!💯👏👍

[@design_scripts]

Спасибо, рад, что вам понравилось)

[@АлександрАбызов-т6к]

Это гениально! Как раз сейчас голову ломал, у заказчика экран мак бук огромный! Тильдовский сайт выглядит убого, и тут твоё видео! Бегу пробовать)

[@YanaDelux]

Огонь!!! Спасибо большое!

[@spv7-rudnyk]

спасибо за видео очень помогло

[@mukh4nn]

Добавь в описание реквизиты, грех тебя не поддержать. Гений 😅

[@ВадимКирик-у2ф]

Спасибо за видео , колокольчик сегодня обрадовал :)

[@delanrus]

Спасибо. Очень классный контент у тебя

[@design_scripts]

Спасибо, стараюсь удивлять)

[@АлексейПухов-ы8ю]

Спасибо огромное, вещь очень нужная. Ток закончил резиновый сайт, насчитался вручную процентов)

[@design_scripts]

В следующем проекте можете уже попробовать один из этих способов. Буду рад, если это, действительно, облегчит вам процесс разработки)

[@elizabethde5268]

Дякую дякую дякую!!!! Це дуже корисне відео

[@2010vlad]

Круто. Благодарю

[@НиколайСкородумов-л7з]

Ребят, для мобильной верстки тоже все работает, для этого: var myWidth = 1920 (1920 заменить на разрешение под которое вы верстаете, у меня это 360) var style = '@media screen and (min-width: 1920px) { '; (min-width: 1920px заменить на max-width: 980px, то есть на то разрешение, до которого хотите показывать мобильную версию. После отработки скрипта из консоли копируем стили, вставляем к себе и все супер быстро и гладко работает;) Как вставлять стили на видео объяснено

[@psewdon1m-j7e]

првиет, а как подружить версии для пк и мобилок?

[@АлександрХлиманков]

Это очень круто ))) Есть пару вопросов 1)Можно это применить к стандартным блокам, если да то как ? 2)В зеро блоке если использовать перевод пиксели в проценты не переводиться форма, как это можно исправить ?

[@edayrobotics6285]

Было бы здорово адаптировать стандартные

[@АлександрХлиманков]

@@edayrobotics6285 вот вот это бы сильно упростило работу

[@АртёмКолос-п8у]

Согласен если такая возможность есть это бы ускорило работу, а так контент 🔥🔥🔥, спасибо

[@design_scripts]

У всех блоков и всех элементов совершенно разные классы, id, они находятся в разных местах, и все это нужно учитывать и указывать. Нужно вручную указать скрипту, где искать позицию, ширину и высоту, фонтзайзы, скругления и т.п. КАЖДОМУ элементу в КАЖДОМ блоке. Сами понимаете, это долго) И именно поэтому этот способ, как я сказал, исключительно для тех, кто шарит в css и сможет дописать, в случае чего)

[@vladsamylin6050]

Спасибо, отличный контент. Вопрос: а как это отображается на мобильной версии?

[@ПавелДемченко-ы5ц]

Спасибо! Отличная работа!

[@ЭльвираЮсупова-э2п]

Здравствуйте! А почему некоторые элементы на сайте могут менять своё положение? То есть в самом редакторе зеро всё ок, а при публикации сайта элемент может находиться в другом месте? Как исправить? Что делать?

[@HanelPlay]

ХЗ, создал зеро блок, вставил шейп с размерами 1920 на 1080, далее ниже как на видео добавил Т123, ввел код. И ничего не поменялось. Объекты как были ЗА границами экрана так и остались. Сделал все абсолютно как в видео, ничего не получилось. Наверно автор бредит

[@yuriy_shelemba]

jquery нужно подключить! Как только его подключил - всё заработало. Тоже не работал скрипт

[@Kolesnichevsky]

А это еще актуально? Сейчас есть функция Scale Grid Container (beta) в Zero block. Это я так понял то же самое, если совместить с отключением мобильной версии для страниц?

[@C7AYPROD]

Мне вот интересно стало насколько подобные скрипты увеличивают длительность загрузки, по видео, как будто никак не влияет, но тут и объектов никаких, что будет с полноценным сайтом, на котором не 3 объекта, спасибо за ответ

[@ЮлияКиселёва-э8х]

Донат, однозначно! золотце просто

[@ЮлияКиселёва-э8х]

погорячилась ссыль на донат не работает, но я добро помню

[@ПавелНосов-л5о]

Не смотрел на автоматом тебе лайкос и комментарий) Скажи, когда виидос будет по адаптивам бота?

[@design_scripts]

Следующий) Во вторник-среду

[@ПавелНосов-л5о]

@@design_scripts спасибо, буду жёстко ждать))

[@neverforever1357]

Это круто, реально, а что у нас с мобильными устройствами, как там это работает? В свое время дизайнил в Muse (как по мне там было более круче, чем в тилдьде, хоть он и с ошибками делал много) так вот там тоже можно было делать лбо дизайн отдельно под каждую страницу, либо что бы все было резиновым на любом устройстве, но чаще всего лучше блоки все-таки править в ручную под каждую версию, поскольку становится все мелким и десктопная версия сайта слишком мелкая на мобильном экране.

[@alice2505]

Плачу от счастья

[@VovaSumrak]

А как быть с формами обратной связи? код их сужает сильно, и друг на друга накладывает.

[@ФКДавекс]

Подскажите, пожалуйста, следующий момент - при вставке второго кода (который меньше) перестает работать оверхед функция, то есть элементы дизайна (фото, шейпы и т.д) больше не переходят на второй блок. Как это исправить? Код начисто отключает эту функцию. Заранее благодарю!

[@artem0924]

СПАСИБО СПАСИБО И ЕЩЕ РАЗ СПАСИБО!!!!

[@dimadiuh]

Я ещё не посмотрел видос но уже злой, что он не вышел раньше))) мы с 2мя многостраничными сайтами Е💋ЕМСЯ УЖЕ почти месяц и все равно костяки вылазят(((

[@onlymozg6811]

Как тебя понимаю:D

[@alesyauxui]

Привет! Спасибо за такой крутой ролик! Попробовала у себя Scale-метод. Почему-то условие не выполняется, и он пилит уменьшение даже на экранах меньше 1200px. И адаптивы, которые я настроила, не подгружаются. Не знаешь, в чем может быть проблема?

[@MaxBrusnikin]

А резиниться будет на всех разрешениях одинаково или можно для мобильных отдельно настроить?

[@design_scripts]

Резинить код может на всех разрешениях, но я очень не советую использовать его для мобильных устройств. С уменьшением разрешения интерфейс будет становится все меньше и меньше, а пользователь не будет даже попадать пальцами по кнопкам

[@ЮрийКомаров-т1м]

Спасибо тебе огромное.

[@ivushenka2]

Подскажите, пожалуйста, как и где можно сделать такую же штуку? 0:23

[@ВаняМалиш]

Гениально! Стоит ли делать каждый проект таким образом, или есть какие-то недочёты, баги и прочее? И ещё вопрос: Как быть с первым вариантом, если у тебя многостраничный сайт? Или код проходит все страницы и стили тоже от всех страниц копируются?

[@design_scripts]

Мой нейрокритик (прошлое видео) и annexx.wtf используют второй способ. Проблем не было. Даже степ бай степ анимация по скроллу должна работать нормально. Касаемо первого способа, он для тех, кто, в случае чего, сможет дописать css. Косяков не замечено, кроме перескоков строки, если контейнер слишком мал. Об этом я упомянул в видео. Я не адаптировал формы, потому что их там дохрена, галерею зеро блоковскую - тоже. Также скрипт не работает на стандартных блоках. Скрипт проходится только по той странице, на которой он находится. То есть для многостраничного сайта алгоритм таков: 1. Вставить код на нужную страницу, опубликовать. 2. Взять из консоли стили. 3. Добавить стили в настройки сайта в CSS, либо же в T123 блок на эту же страницу. 4. Удалить скрипт со страницы, чтобы он больше не мешал. 5. Вернуться к пункту 1 и повторить для следующей страницы

[@ВаняМалиш]

@@design_scripts спасибо огромное!!

[@hydroburner]

Классный способ, спасибо! Хотел спросить про Figma-2-Tilda, туда уже прикручен адаптив? Где можно посмотреть инструкцию, как готовить макеты для того чтобы автоматически в зеро-блоке создавалась мобильная версия?

[@design_scripts]

Следующее видео на эту тему. Вторник-среда в 9:00 по мск

[@design_scripts]

Пока имеется только текстовая инструкция, которую я скидываю по вашему запросу

[@VadimPasternak]

Класс)) попробую обязатель6👍👍

[@SergejMarchenko]

А под мобильные устройства будет сам адаптироваться?

[@VovaSumrak]

У меня во вкладке Console нет ничего. Всё пусто.

[@Shchepotka]

Скрипт пушка! Я правильно понимаю что элементы нужно позиционировать на "top" если использовать 2й вариант?

[@design_scripts]

Блин, по-моему, без разницы, вообще😅

[@dmitrykand5142]

Как всегда огонь!

[@design_scripts]

Как всегда, спасибо за комментарий и приятные слова)

[@АмилТанирвердиев]

Первый вариант хорош, но с анимацией начинаются большие проблемы особенно при скролле.

[@daniel.molochkov]

Очень полезное видео, спасибо!! 🔥 Подскажи, пожалуйста, как можно сделать так чтобы в мобильной версии был такой же адаптив? ( Просто когда работаешь с текстом, если выставлять его по гриду, то он нормально смотрится на iPhone SE, но при этом на более больших разрешениях будет большое расстояние по краям. А если выставлять ширину текста в процентах, то по краям будет нормальное расстояние, в то время как расстояние между текстом и нижними элементами будет все время меняться)

[@design_scripts]

Тут остаётся только css’ом подгонять, управлять шириной контейнера и размером текста. Верстку, которая сама подстраивается под размеры элементов, я ещё не пробовал)

[@daniel.molochkov]

@@design_scripts ладно, спасибо ))✨

[@CwalkAleks]

У меня проблема возникла, после того как код вставляю то на меньших размерах появляется пустое пространство на готовом сайте, а в редакторе все нормально, у кого так же было, как решили вопрос? если ни у кого не было, подскажите как фиксить, пожалуйста

[@mikhaildyachenko1670]

Почему перестала работать эта штука 6:52 , раньше все было норм, теперь если удаляешь параметр конкретного элемента он все равно резинится? Что могло случиться?)

[@design_scripts]

А вы удалили скрипт, который генерирует css? Он встраивает сгенерированный css в head страницы

[@mikhaildyachenko1670]

@@design_scripts ой блин точно. Спасибо Стас! Побежал делать!!!)

[@АнтонПронін]

В Тильде теперь Апскейл завезли)

[@design_scripts]

Красавцы💪

[@ОльгаЛизунова-э9я]

Использовала ваш скрипт, спасибо! очень круто! Но есть маленькая проблема, почему скрипт не действует на шрифт в форме и размер кнопки?

[@ОльгаЛизунова-э9я]

Прошу прощения, со scale все работает)

[@МатвейЗинкин-д7с]

Это магия вне Хогвартса!!

[@design_scripts]

За это в азкабан не отправят)

[@БогданЛошак-д7б]

Гений! Только есть вопрос, элементы нужно привязывать к грид контейнеру или виндовс? И игратся ли с выравниванием Left, Right?

[@design_scripts]

Онли грид. Скрипт и сделан для того, чтобы не долбаться с виндоу и процентами. Выравнивание не важно

[@aleks6607]

Очень классно, спасибо)) а подскажите пожалуйста, что за расширение у вас, чтобы менять разрешение окна?

[@design_scripts]

window resizer chrome.google.com/webstore/detail/window-resizer/kkelicaakdanhinjdeammmilcgefonfh?hl=en

[@Itsnotdanik]

Добрый день Скажите пожалуйста, на данный момент это еще актуально или автоскейл делает по сути тоже самое?

[@lhadesigner3479]

Аналогичный вопрос

[@lhadesigner3479]

А ну автоскейл появился в октябре, а видос вышел в марте

[@Markys_Apache]

Привет! Отличный код, нет слов! подскажи как быть с элементами форм или галлереи, они не растягиваются под разрешения

[@MegaDestrok]

0:19 какой ты веб дизайнер? Ты просто Бог!

[@qweragency5529]

А как шаблонные блоки подогнать под резину? 😅

[@agnia-ray]

Станислав, или ребята в комментариях, подскажите пожалуйста в чем проблема 🙏Сделала вариант "Page scale" и зумирование не работает на фон в зероблоке, в итоге на определенной ширине экрана выходит, что контент уменьшился, а фон нет, он получается длинной колбасой... Как можно это исправить?

[@danielroach4010]

приколюха, конечно, классная, но во втором способе минусуется сразу ряд других скриптов (первый способ вообще не работает на экране 2560px, при уменьшении элементы просто улетают в жёпу): про паттерн на всю страницу пришлось забыть, также не работает код для карусели из зеро блока. в общем, вкусно, но грустно. может, кто сталкивался и подскажет, как можно это пофиксить?

[@pasaphrazo]

Первый способ - Идеалити. Я сама обычно всё высчитываю в vw, vh (работа в Webflow), а тут это делают за тебя. А вы случаем сервис автоматического переноса в Webflow не планируете? Что думаете об Anima app? Пользуетесь?

[@design_scripts]

Вебфлоу пока не смотрел. Но в планах. Тильде удобна в том плане, что она принимает параметры в том же формате, что выдаёт фигма. Насчёт вебфлоу - не знаю. Анима - лучшее из того, что я тестировал. Но код все равно не сравнится с тем, как если бы его писал человек. Аниму я бы использовал для презентаций проектов, возможно, когда сделать нужно было «ещё вчера». Аниму я использовал для создания интерфейса для расширения figma2tilda, которое сейчас в разработке. Применение найти можно, в общем

[@pasaphrazo]

@@design_scripts Спасибо за ответ и за контент. Удачи в работе

[@alan_mun]

А как сделать чтобы под каждую мобилку так работало

[@pavelsemenov8433]

Круто! Спасибо!!!

[@igormartsenyuk8240]

Спасибо, побежал тестировать) Скажи пожалуйста, ты не проверял, как добавление этих скриптов влияет на скорость загрузки сайта? А то заказчики часто требуют выжать максимум из pagespeed, думаю насколько применим этот подход к клиентским проектам. Ещё раз спасибо - во всяком случае фича достойна внимания 🙏

[@design_scripts]

Честно говоря, не тестировал на скорость загрузки

[@AlexeyPodolsky]

У меня 99% на гугловском пейджспиде. При этом на странице около 60 картинок

[@Ivan_Zhukau]

Скажи пожалуйста, а как перехитрить тильду, чтобы она планшет считала просто монитором поменьше и скейлила? Мне нужно сейчас быстро кое-что выкатить, а потом уже девайсы допиливать потихоньку (на мобилке заглушку поставлю)

[@perfectsisjsj]

подскажи пожалуйста, если у меня дизайн в 1200px (в коде ставлю тоже 1200) делаю эту штуку и у меня очень сильно уезжает на сайте всё, анимации, картинки, вообще все

[@evgenyvlasof]

Все круто, но я сделал ИМ и там есть стандартные блоки. Они не адаптируются и съезжают в бок

[@СергейКондулуков-з9ч]

Всё это хорошо. Скрипт подойдёт для страниц с разрешением больше 1200 рх А меньше. Тогда нужно блоки подгонять для каждого разрешения.

[@ЮрийТычков-л5к]

А можно как-то исключить часть блоков из этого скрипта? Чтобы он не применялся например на некоторые блоки на странице?

[@Sheniara]

Очень интересно, спасибо за такой контент! А что происходит на мобилках с этими кодами?

[@design_scripts]

Цифра 1200 означает, что код будет действовать только на десктопах. Если его убрать, то сайт будет резиниться и на мобилках. Чаще всего, выглядит это убого из-за того, что элементы становятся чересчур крохотными

[@Sheniara]

@@design_scripts ага, то есть, мобилки и планшеты сами рисуем. Это хорошо, спасибо!) как раз дорисовала сайт, скоро буду воплощать с вашим кодом 👻

[@pasaphrazo]

А можно вопрос? Профессиональное мнение, насколько плох код Тильды, если ты надизайнил там сайт с анимацией и прочим, а клиент хочет перенести с Тильды на другую систему управления. В тильде есть экспорт кода, насколько это будет ок работать на wordpress или еще где? (я с Тильдой мало работаю, в основном с webflow, по этому не разбираюсь, а сами Тильдошние говорят что код хороший, но вы его пожайлуста не переносите :)))

[@mikhaildyachenko1670]

Глупые люди хотят переносить на wp если функционал остается тот же, в чем смысл тогда переноса сайта? Микро экономия на хостинге , глупо , т.к. Тильда дает больше вместе со своим хостингом. Я понимаю когда интернет магазин, сам с этим сталкивался , когда функционал Тильды не справляется и приходилось переносить на опен карт. Если код экспортировать то никаких проблем его прикрутить нет на другой движок , ты скачиваешь отличный код со скриптами внутри и тд, весь контент также разложен по папочкам. Мне вообще больше не попадаются такие заказчики, наоборот, плюются на остальные движки и кроме Тильды ничего не хотят. Уверен если все плюсы объяснить вашему заказчику , его можно за 2 минуты переубедить не делать этих глупостей))

[@neins]

Ну в целом WP лучше конечно будет, если говорить про оптимизацию кода) Он не так сильно засирает код по сравнению с тильдой (можно сказать вообще никак), намного более чистый код в итоге выходит, больше возможностей чем у тильды (куча плагинов плюс огромное коммьюнити). Просто на WP по сравнению с тильдой уходит больше усилий для создания темы и для дальнейшей настройки сайта, но зато выходит более качественнее и мне кажется что даже легче оптимизировать, чем ту же тильду) что вп что тильда это инструменты, тут каждому свое, если быстро нужно создать и заанимировать лендос-одностраничник то тильда тут вне конкуренции)) а так для чего-то посложнее и помногостраничнее я бы конечно смотрел в сторону CMSок, к WP и прочим)

[@neins]

PS. На вп тоже есть визуальный редактор если что) сам ими не пользуюсь но гуглится за секунду

[@packrus5744]

Лучший :) спасибо

[@Explastizin]

В шоке я. Реально мастер.