Содержание
Очень часто начинающие разработчики сайтов на Тильде говорят: «Зачем мне знать код. В Тильде можно же все сделать просто перетащив элементы и выбрав блоки. А если мне не хватит стандартного блока, то для переноса дизайна я используют 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 без форм и анкет:-)
Еще материалы
-
Как попасть в IT, путь от технаря до специалиста по созданию сайтов
История о том как попасть в ИТ (IT) через создание сайтов. На моем реальном примере. От простого инженера до разработчика сайтов
-
Платформа для сайта или где лучше делать сайт
При переходе в онлайн часто всплывает вопрос. На чем делать сайт? Я покажу что сервис Тильда ваша лучшая платформа для сайта
-
Платформы для проведения вебинаров
Дам полное описание каждой платформы для проведения вебинаров, распишу что нужно для вебинара, и распишу сколько стоит провести вебинар
-
Сервисы для создания онлайн-школы все нюансы от технического эксперта
Ответы на «как создать онлайн — школу» и «сервисы для создания онлайн-школы» с нуля считаю не раскрытыми. Поэтому в статье есть все что вам нужно для старта своего проекта