{"id":7016,"title":"\u0423\u0433\u0430\u0434\u0430\u0439\u0442\u0435 \u0433\u043e\u0440\u043e\u0434\u0430 \u043f\u043e \u0437\u0432\u0443\u043a\u0443 \u043e\u0442\u043a\u0440\u044b\u0432\u0430\u044e\u0449\u0435\u0433\u043e\u0441\u044f \u043f\u0438\u0432\u0430 \u0438 \u043f\u0435\u043d\u0438\u044e \u043a\u0438\u0442\u043e\u0432","url":"\/redirect?component=advertising&id=7016&url=https:\/\/vc.ru\/special\/sound&placeBit=1&hash=6ca24c77fedb0a01bd41595a6fbd498b5375a294c2e3b54a129aa318671b77a3","isPaidAndBannersEnabled":false}
Дизайн
Alexander Olssen

Полезные шаблоны для 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 #дизайн #разработка #ноукод

{ "author_name": "Alexander Olssen", "author_type": "self", "tags": ["\u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0430","\u043d\u043e\u0443\u043a\u043e\u0434","\u0434\u0438\u0437\u0430\u0439\u043d","webflow","1"], "comments": 19, "likes": 28, "favorites": 95, "is_advertisement": false, "subsite_label": "design", "id": 293247, "is_wide": true, "is_ugc": true, "date": "Tue, 14 Sep 2021 11:37:28 +0300", "is_special": false }
0
19 комментариев
Популярные
По порядку
Написать комментарий...

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

На сколько я помню, с бета версии (примерно 2015 год) в вебфлоу можно было свои решения на js интегрировать. Т.к. сервис все же для дизгнеров кодеров.

0

Ноукод это и есть естественный ход вещей

4

Ноукод это чья-то фантазия, не более. Как таргет(олог), директор(ка)

0

Чья-то фантазия — это ваша аватарка, а ноукод это уже реальность. Но вы можете отрицать, просто в вашей реальности этого нет)

2

Конечно, реальность такова, что это все же конструктор, как его не об обзывай модными словами. Хоть nocode 2022s plus max pro.

Итог, можно как угодно называть условную вещь другими словами, но, сути этой вещи не изменит.

0

а теперь воткни в свой ноукод синхронизацию товаров с поставщика, у которого кастомный xml, который почти как yml, но отличается, допустим <rrc> вместо цены.

0

Скорее эволюция технологий и процессов. Но вам с дремучими взглядами этого не понять.

2

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

0

Webflow не совсем конструктор, на выходе получается полноценная верстка для любого проекта. Обычный HTML+CSS+js. Которая закрывает 90% потребностей фронтенд разработки.
При этом, это значительно дешевле, проще и быстрее, чем кодить.
Проект можно натянуть на любую цмску или фреймворк. Как говорят создатели вебфлоу — это визуальное программирование )) и это не так далеко от правды. 

Справедливости ради скажу, что и сделать нормальный проект не сильно проще, чем написать это ручками, без понимания процесса разработки и каких-то основ HTML js CSS — вряд ли выйдет что-то путнее.. 
Пожалуй из всего семейства nocode, только wf можно назвать Профессиональным инструментом.. Остальное всё 🤦‍♀

Но будущее всё-таки за ноукод, потому что 80% кода который пишется это monkey work — который запросто заменят ноукод решения.

1

Помимо wf, полноценная верстка на выходе получается в любом другом конструкторе. Иначе смысл конструктора, если там что-то не будет работать? Так же определение "полноценная верстка" сомнительно, что тогда не полноценная?

Отличие капитальное с самой беты wf это экспорт верстки и да, потом можно натянуть на туже лаву и прочее. Тут только плюс в сторону wf. 

Визуальное программирование это конечно сильно. Если брать констракт (для игр), вот там согласен, можно применить данное словосочетание. Я понимаю, что они так говорят, т.к. маркетинг. Да пусть, что угодно говорят. Продукт у них топовый.

"Справедливости ради скажу, что и сделать нормальный проект не сильно проще, чем написать это ручками" - wf развивает туториалы, да и в трубе полно. Это не wix убогий.

"только wf можно назвать Профессиональным инструментом." - тут я только соглашусь, инструмент за который приятно платить.

"Но будущее всё-таки за ноукод, потому что 80% кода который пишется это monkey work — который запросто заменят ноукод решения." - Поэтому фреймворки уже созданы. А будущее не определено. Ноукод просто новое слово.

0

Все же 90% фронтенда начинается там, где верстка и вебфлоу заканчивается. Это интеграция с бэкендом, написание сервисов.

Для лендинга и быстрой верстки вебфлоу хороший. Но никак не заменит react/vue

0

Не заменит, но и стоимость специалистов значительно меньше... это как водитель такси не заменит машиниста метро. Под разные задачи, разные решения. 

0

Написание и отладка js в вебфлоу - это боль.
1. Писать в vs code с подсветкой синтаксиса и линтером удобнее
2. Нет live reload, надо публиковать сайт, чтобы посмотреть изменения.

По итогу легче скачать вёрстку и писать js в среде. Если нужно потом - перенести.

0

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

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

–1

> Раньше я собирал сайты с абсолютного нуля, но потом повзрослел, обленился, и стал активно пользоваться шаблонами.

Привет, Саша!
Меня тоже зовут Саша, лет 20 назад я клепал сайты на Mambo (сейчас оно называется Joomla), активно использовал чужие шаблоны, т.к. я был нуб
Сейчас же я повзрослел и понимаю, что хорошему клиенту нужен кастом, поэтому могу сделать черта лысого на bitrix, webasyst и modx. Или просто с нуля.
Это дорого, интересно и уникально.

1

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

1

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

0

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

0

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

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

0
Читать все 19 комментариев
Объявлены победители Finlanding
Недвижимость в разных странах: что там с арендой, риелторами и ипотекой

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

Ситидрайв выставил штраф в семь тысяч за свой поломанный Smart

Люблю каршеринг всей душой, даже если дорого и даже если смарт. История такая: в пт 15.10.21 вечером арендовала у ситидрайва на сутки smart м267но799 (других авто рядом не было), чтобы съездить в Конаково к бабушке, доехав до места, где ленинградка пересекается с ЦКАДом, авто перестало реагировать на педаль газа (обороты шли,машина рычала, но не…

«Российский рынок акций был и остаётся одним из самых привлекательных в мире»

Виталий Исаков, директор по инвестициям УК «Открытие» («Открытие Инвестиции»).

Netflix оценил выгоду от «Игры в кальмара» почти в $900 млн Статьи редакции

В 40 раз больше суммы, которую онлайн-кинотеатр заплатил за сериал.

Дефицит цифровых кадров в России и их подготовка

Весь мир переходит в цифровую среду. Пока в ежегодном глобальном рейтинге конкурентоспособности Россия занимает 43-е место, но задерживаться на нем не намерена. Для этого правительство запустило программу «Цифровая экономика РФ», которая будет поддерживать цифровую экономику в стране и подготовку необходимых кадров.

«Spotify: История продукта». Как мы разработали алгоритмы музыкальных рекомендаций

Из онлайн-библиотеки — в сервис персонализированных рекомендаций.

Принцип «Всё смотрю». Часть 1

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

Прокрастинация: как перестать откладывать на потом и 4 способа которые мне помогли

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

Как мы запустили MVP, получили первые продажи за 1,5 месяца и сэкономили 1 млн рублей

Рассказываем, как команда Minisol за 1,5 месяца помогла клиенту превратить идею в перспективный стартап и сколько стоил каждый этап.

Будущее наступит во вторник на OneRetailConf
null