Полезные шаблоны для Webflow. Часть 1
В дебютной подборке – лендинг для показа фич приложения, сайт с горизонтальным скроллом, сайт с постраничным скроллом на scrollify.js, CMS-слайдер и аккордеон для секции часто задаваемых вопросов.
Привет, VC! Я – Саша, дизайнер и сооснователь агенства разработки на Webflow Buildbites. Раньше я собирал сайты с абсолютного нуля, но потом повзрослел, обленился, и стал активно пользоваться шаблонами. Это позволило не только сократить время разработки, но и применять больше интересных решений не выходя за рамки бюджетов. Поэтому я решил делать периодические подборки с самыми интересными и полезными Webflow шаблонами для тех, кто тоже пользуется или изучает этот инструмент. Меньше слов – больше полезности. Погнали.
Scrolling app features responsive
Просто офигительный шаблон лендинга для показа фишек мобильного приложения. Фишка шаблона – в переключении заголовков и картинок внутри мокапа телефона, когда вы скролите страницу. А еще шаблон адаптивен, что повышает его полезность в разы.
Копировать себе в проекты → https://webflow.com/website/Cloneable-Scrolling-App-Features-Showcase-Responsive
Section Scroll interaction
Шаблон, в котором прокрутка страницы реализована по секциям. Тут использован скрипт Scrollify.js, который и управляет таким поведением. Если умеете в JS, то можно донастроить под себя, а если нет – оставьте все как есть, и так работает круто. Шаблон так же адаптивен.
Копировать себе в проекты → https://webflow.com/website/Some-Section-Scroll-Interactions
Hokaido Free Horizontal Scrolling Template
Фанаты горизонтального скролла – этот шаблон для вас! Примечателен не столько горизонтальным скроллом, сколько работой с CMS и бесшовным переходом на страницу (поста или проекта, к примеру) . Адаптирован под десктопы, но под мобилки придется немного доработать.
Демо → https://hokaido.webflow.io/
Копировать себе в проекты → https://webflow.com/website/Hokaido-Free-Horizontal-Scrolling-Template
CMS Slider
Кастомные слайдеры в Webflow – моя боль. А кастомные слайдеры, которые используют Webflow CMS – боль в квадрате. Ну нельзя без танцев с бубном сделать слайдер, который будет отображать данные из CMS. Но! Есть же прекрасный шаблон, который решает именно эту проблему, да еще и работает как на десктопах, так и на мобильных девайсах. Шик-блеск! Под капотом использовано немного кода. Ничего супер-сложного, только подключение сторонней библиотеки.
Копировать себе в проекты → https://webflow.com/website/CMS-Slider
FAQ Section Template
Секции часто задаваемых вопросов встречаются почти на каждом лендинге и сайте компаний. А это значит, что незачем изобретать велосипед, собирая аккордеоны каждый раз, когда FAQ нужен. Просто скопируете себе этот шаблон и экономьте время. Автор даже анимацию раскрытия сделал. Работает и на десктопах и на мобилках.
Копировать себе в проекты → https://webflow.com/website/Free-FAQ-Section-Template
Если понравился выпуск, то можешь подписаться на меня тут, на VC, чтобы не пропустить следующие выпуски и интересные статьи. Выходят редко, но метко.
Если интересна тема no-code, то можешь заглянуть на канал в телеграм – «Саша не кодит», где я публикую интересные новости из мира no-code, делюсь инструментами, уроками, ссылками, и своим опытом. Туда пишу чаще, т.к. посты требуют меньше временных трудозатрат.
Еще можно вообще нигде не фолловить. Все равно спасибо, что взглянул на статью.
Проспал момент. А что за новое меньшинство нокоде? Это как психическое расстройство лгбт, но только в ит? которые отрицают естественный ход вещей?
На сколько я помню, с бета версии (примерно 2015 год) в вебфлоу можно было свои решения на js интегрировать. Т.к. сервис все же для дизгнеров кодеров.
Ноукод это и есть естественный ход вещей
Ноукод это чья-то фантазия, не более. Как таргет(олог), директор(ка)
Чья-то фантазия — это ваша аватарка, а ноукод это уже реальность. Но вы можете отрицать, просто в вашей реальности этого нет)
Конечно, реальность такова, что это все же конструктор, как его не об обзывай модными словами. Хоть nocode 2022s plus max pro.
Итог, можно как угодно называть условную вещь другими словами, но, сути этой вещи не изменит.
Комментарий недоступен
Скорее эволюция технологий и процессов. Но вам с дремучими взглядами этого не понять.
Эволюция в том, что стали называть конструктор, ноукодом? Вот так эволюция, достойный прогресс.
Пожалуй я останусь дремучим и буду называть вещи своими именами.
Webflow не совсем конструктор, на выходе получается полноценная верстка для любого проекта. Обычный HTML+CSS+js. Которая закрывает 90% потребностей фронтенд разработки.
При этом, это значительно дешевле, проще и быстрее, чем кодить.
Проект можно натянуть на любую цмску или фреймворк. Как говорят создатели вебфлоу — это визуальное программирование )) и это не так далеко от правды.
Справедливости ради скажу, что и сделать нормальный проект не сильно проще, чем написать это ручками, без понимания процесса разработки и каких-то основ HTML js CSS — вряд ли выйдет что-то путнее..
Пожалуй из всего семейства nocode, только wf можно назвать Профессиональным инструментом.. Остальное всё 🤦♀
Но будущее всё-таки за ноукод, потому что 80% кода который пишется это monkey work — который запросто заменят ноукод решения.
Помимо wf, полноценная верстка на выходе получается в любом другом конструкторе. Иначе смысл конструктора, если там что-то не будет работать? Так же определение "полноценная верстка" сомнительно, что тогда не полноценная?
Отличие капитальное с самой беты wf это экспорт верстки и да, потом можно натянуть на туже лаву и прочее. Тут только плюс в сторону wf.
Визуальное программирование это конечно сильно. Если брать констракт (для игр), вот там согласен, можно применить данное словосочетание. Я понимаю, что они так говорят, т.к. маркетинг. Да пусть, что угодно говорят. Продукт у них топовый.
"Справедливости ради скажу, что и сделать нормальный проект не сильно проще, чем написать это ручками" - wf развивает туториалы, да и в трубе полно. Это не wix убогий.
"только wf можно назвать Профессиональным инструментом." - тут я только соглашусь, инструмент за который приятно платить.
"Но будущее всё-таки за ноукод, потому что 80% кода который пишется это monkey work — который запросто заменят ноукод решения." - Поэтому фреймворки уже созданы. А будущее не определено. Ноукод просто новое слово.
Все же 90% фронтенда начинается там, где верстка и вебфлоу заканчивается. Это интеграция с бэкендом, написание сервисов.
Для лендинга и быстрой верстки вебфлоу хороший. Но никак не заменит react/vue
Не заменит, но и стоимость специалистов значительно меньше... это как водитель такси не заменит машиниста метро. Под разные задачи, разные решения.
Написание и отладка js в вебфлоу - это боль.
1. Писать в vs code с подсветкой синтаксиса и линтером удобнее
2. Нет live reload, надо публиковать сайт, чтобы посмотреть изменения.
По итогу легче скачать вёрстку и писать js в среде. Если нужно потом - перенести.
Привет, Я так понимаю Вы, в знак поддержки «психически больных No-Code-меньшинств», установили себе на аватар двух «психически больных» женщин из секс-меньшинств в процессе любовных утех?
Выражаем благодарность за поддержку всем отделом лгбт-ноукод-дизайнеров 🌈
Комментарий недоступен
Так здорово же :) Но я руками уже редко собираю, а клиентам нужно быстро и красиво. Так что у каждой задачи множество решений.
Если бы я для себя собирал, то в целях изучения делал с нуля, а иначе смысла мало.
Вопрос по вебфлоу. Допустим, нужны куски из разных проектов. Как их объединить в один?
ctrl+c ctrl+v - отлично работает.
Ну то есть в панели с объектами выбрать все, скопировать, перейти в другой проект, вставить? Потом так же с js отдельно?
Может есть быстрый способ для этой операции, типа импорта?