Как правильно сделать сайт на Тильде с внедрением своего кода

Очень часто начинающие разработчики сайтов на Тильде говорят: “Зачем мне знать код. В Тильде можно же все сделать просто перетащив элементы и выбрав блоки. А если мне не хватит стандартного блока, то для переноса дизайна я используют ZeroBlock или нулевой блок.”

Так то оно так, но что делать когда вам не хватит этого функционала? Правильно, новички лезут искать решение в интернете и натыкаются на готовые коды.

Однако, почти 80% таких решений не помогает в вашем случае. Знакомая ситуация? Конечно знакомая, я тоже ранее проходил через это. Так как по молодости считал, что проще и быстрее найти готовый код. Но со временем я понял, что сильно ошибался.

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

И только потом я понял, что лучше потратить столько же времени и написать свой код для Тильда под задачу и уже далее делать его доработку от проекта к проекту. Это намного удобнее, чем столкнуться с переработкой чьего-то решения, которое не факт в итоге у вас заработает.

Сложно же! Скажете вы. И будете правы. Нужно знать CSS, HTML, JavaScript да и изучать стандартный код тильды иногда тоже придется.

Но я опишу вам далее несколько ситуаций, с которыми столкнулся в своей работе. Чтобы вы поняли, что писать свой код это не так сложно

Ситуация: Нужен свой слайдер

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

И что вы думаете, сел и начал искать открытую стабильную библиотеку слайдера. Решил взять ту же, которую применяю для создания сайтов на WordPress (swiper.js). Продумал систему перехода от старого слайдера к моему решению, прописал свой код переноса каждого ZeroBlock в свой слайд. И вуаля. Ультимативное решение готово. И вы не поверите на сколько оно удобное. И самое главное адаптируемое ко всем экранам и браузерам.

Свой код для Тильда

Подробно и пошагово расскажу о том, как создать слайдер, который будет расположен внутри ZeroBlock. Что позволит вам лучше его кастомизировать

Слайдер внутри нулевого блока в Тильде

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

Если хотите хорошее и качественное решение под ваш проект и ТЗ, то остается два выхода: либо адаптировать самостоятельно, либо обратиться ко мне за доработкой за отдельную стоимость. Я не фанат подписок поэтому считаю что база должна быть доступна всем.

Пишите https://t.me/vbalakin буду рад помочь с доработкой.

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

Ситуация: Табы в zeroblock на html + JS

Следующая ситуация, которая у меня возникла. Нужно было решение по скрытию блоков в виде табов. В Тильде есть стандартный блок, но мне нужно было решение которое позволяло делать табы внутри ZeroBlock, так как в нем был свой дизайн + анимация.

Первоначально было найдено решение в сети. Я успешно его применил, но после согласования, заказчику понадобилось чтобы табы можно было переключать не только кнопками, но и другими картинками внизу и в самом первом блоке. А так же чтобы при переключении табов та кнопка была активной, чей таб сейчас переключен. В итоге, решение которое нашел в сети пришлось откинуть. Так как оно не подразумевало новый функционал. Что же, сел писать свое решение.

В этот раз никаких сторонних библиотек не подключал. Все работало на встроенном на страницу блоке HTML через CSS, JS

Ключевая идея моего решения состояла в том, что для каждого элемента “ТАБА 1” присваивался класс “tab1”. Текст, картинка, видео всему можно присвоить класс. Далее для “ТАБА2” — класс “tab2” и так далее. А кнопке показа “ТАБА1” присвоил класс “bt_tab1”. В общем принцип понятен.

Кодом я просто присваивал элементам класс скрытия “Hidden”. Получалось так, при нажатии на кнопку “ТАБА2” всем элементам с классом “tab2” присваивался класс “Visible” и они показывались, а все остальные элементы скрывались. Кнопка становилась активной.

Данное решение позволяет в качестве кнопок переключения табов использовать любой элемент на странице, а не только в одном зероблоке. Довольно удобно для реализации и клиент остался доволен

А теперь представьте сколько бы я времени потратил на поиск готового решения. При том что написание своего заняло всего 1 час. Да, оно было черновым, но работало отлично. А уже на других проектах его можно улучшить и отполировать

Ситуация: Кастомные фильтры и вариации

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

На вооружение взял JS, CSS. В каталоге товаров кодом добавил свой фильтр где в реальном времени можно выбирать цвет рамок.

Далее аналогичное решение применил в карточках товаров. Кодом добавляются выбор цвета рамок, но в этот раз повесил их на кнопки вариаций товаров. Довольно удобно, так как не пришлось кодом создавать свои вариации:-)

Кодом добавил выбор размера картины и его реальное отображение, плюс состыковал с добавлением рамки и цветофильтра

Общими словами принцип работы можно описать так: рамка добавляется при нажатии кнопки, в то же самое время кодом к картинке добавляется класс рамки через псевдоэлементы before и after. Для черной он свой, для деревянной свой и т. д. А на данный класс вешается оформление в CSS. Так же дополнительно были изучены стандартные функции тильды, чтобы к ним подцепиться своим кодом. Так как в каталоге есть другие фильтры и при их активации нужно не потерять выбранное оформление. То есть если выбрана деревянная рамка, то при нажатии фильтра “Ориентация: Книжная”, после обновлении каталога, выбранная рамка должна сохраниться

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

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

Как упростить свою работу

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

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

1) Нужно совершенствовать свои технические навыки. Изучайте JS, CSS, HTML.

2) Самое главное не закапывайтесь глубоко. Горы теории ради теории это здорово, но не для вас. Вам нужна только выжимка и практическая применимость методов, которые будут реально полезны для работы в Тильде

Вы можете освоить все это самостоятельно, но я настоятельно рекомендую обратиться к наставнику.

Я предлагаю мою практическую программу, которая поможет освоить все необходимые навыки в JS, CSS, HTML для работы в Тильде.

Здесь будет только реальное применение, без шаблонов и скучных лекций.

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

И, наконец, вы сможете установить новую стоимость за свои услуги.

Все подробности вы можете узнать через личные сообщения https://t.me/vbalakin без форм и анкет:-)

Еще материалы

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *