Полезные шаблоны для 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://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, делюсь инструментами, уроками, ссылками, и своим опытом. Туда пишу чаще, т.к. посты требуют меньше временных трудозатрат.

Еще можно вообще нигде не фолловить. Все равно спасибо, что взглянул на статью.

#webflow #дизайн #разработка #ноукод

0
19 комментариев
Написать комментарий...
Привет

Проспал момент. А что за новое меньшинство нокоде? Это как психическое расстройство лгбт, но только в ит? которые отрицают естественный ход вещей?

На сколько я помню, с бета версии (примерно 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 в среде. Если нужно потом - перенести.

Ответить
Развернуть ветку
ian

Привет, Я так понимаю Вы, в знак поддержки «психически больных No-Code-меньшинств», установили себе на аватар двух «психически больных» женщин из секс-меньшинств в процессе любовных утех?

Выражаем благодарность за поддержку всем отделом лгбт-ноукод-дизайнеров 🌈

Ответить
Развернуть ветку
Аккаунт удален

Комментарий недоступен

Ответить
Развернуть ветку
Alexander Olssen
Автор

Так здорово же :) Но я руками уже редко собираю, а клиентам нужно быстро и красиво. Так что у каждой задачи множество решений.
Если бы я для себя собирал, то в целях изучения делал с нуля, а иначе смысла мало.

Ответить
Развернуть ветку
Арсений

Вопрос по вебфлоу. Допустим, нужны куски из разных проектов. Как их объединить в один?

Ответить
Развернуть ветку
Слава Коженевский

ctrl+c ctrl+v - отлично работает. 

Ответить
Развернуть ветку
Арсений

Ну то есть в панели с объектами выбрать все, скопировать, перейти в другой проект, вставить? Потом так же с js отдельно?

Может есть быстрый способ для этой операции, типа импорта?

Ответить
Развернуть ветку
16 комментариев
Раскрывать всегда