Новые шаблоны Webflow

Сайты на webflow: Типографика и Изображения

После задания базовой струкуры — задаем ему типографику и различные изображения:

Изображение/Видео:

Жмем Choose Image и загружаем нужную вам картинку:

Также есть и множество дугих элементов например litebox, map, кнопки социальных сетей:

Причем litebox — можно сделать и кнопкой просто вставив в этот элемент текст, затем удалив изображение в нем, после выбрав текстовому блоку в разделе Display Setting — форму ABC, затем задать цвет текста и фоновый цвет, обводу:

В разделе Style (S) — можно задавать внутренние и внешние отступы каждому элементу:

Чтобы задавать одинаковые (симметричные отступы) по вертикали — достаточно задать alt и увеличивать/уменьшать отступ по 1 из сторон.
Чтобы задавать одинаковые (симметричные отступы) по всем 4 сторонам достаточно зажать shift и увеличивать/уменьшать отступ по 1 из сторон.

Если же хотите сразу оцифровать элемент по центру — досаточно нажать на иконку Center Element:

В типографии также можно задавать тип и размер шрифта, цвет, выравнить его:

Если хотим вставить ссылку — просто выделяем текст — жмем на иконку скрепки:

Затем в правом блоке прописываем нужный url-адрес, отмечаем открывать ссылку в новом окне:

Также можно настроить межстрочные интервалы:

Междустрочные интервалы — в идеальном варианте получают через деления текущего размера шрифта на 2, затем прибавление к нему этот же размер шрифта.
То есть в идеале он должен быть больше чем сам размер шрифта в 1,5 раза.
Также учитывая адаптивность верстки под разные разрешения экрана междустрочные интервалы можно ставить не в px, а в 1 em.

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

Минусы Webflow Ecommerce

По отзывам пользователей получился такой список:

Некоторые функции находятся в процессе реализации (проверка PayPal, купоны и скидки, учетные записи клиентов).
Нет функции отчетов, слабое управление магазином и доставкой (но достаточно для небольших магазинов).
Тариф за 29 долларов подразумевает рассылку с логотипом Webflow.
Нет настройки уровней доступа.
Не проработали правовые вопросы в некоторых странах (где-то необходимо пройти «согласование» до оформления заказа, а в Германии нужно согласиться со стандартными бизнес-условиями).
Интерфейс только на английском языке.
Нет мультиязычности самих магазинов.
Странные лимиты объема продаж и комиссии за транзакции

Зато сервисом можно пользоваться все по той же цене — от 29 долларов в месяц.

Важное

Обзор ActionDash: статистика использования Android в красках, но без смысла

Как отправлять несжатые изображения через WhatsApp

Интересное из рубрики «Онлайн-сервисы»

NetHealth поможет стать Рунету свободнееChangefeed — создание списка изменений для вашего продуктаОблачная АТС Zadarma сможет работать в связке с ZendeskGoogle Data Studio обновляет интерфейс и функции

Базовые элементы дизайна webflow

Cайты на webflow: Меню

Меню одно из основных элементов на сайте (часто встречающаяся и на лендинге)
В weblow — для меню есть отдельный элемент (Navibar):

Он состоит из секции, контейнера, Menu button(сама площадь меню), в нем место под логотип, блог меню (nav menu) — в котором располагаются текстовые блоки с ссылкой (элементы меню/навигация)

Чтобы создать (дублировать) элемент меню:

Просто находясь на этом элементе — жмем Duplicate:

Также можно находясь на последнем элементе меню перейти в раздел Settings (D) и нажать на + Add Link:

Чтобы добавить логотип — просто выбираем элемент логотип и вставляем его на место

Логотип можно отцентровать (2 способа):

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

В мобильных версиях — меню будет сворачиваться.
Для того чтобы настроить мобильное меню в редакторе webflow — нужно нажать на Open Menu — после чего оно раскроется :

Стоит перейти в эти режимы и настроить их отдельно.

Здесь можно отдельно настроить цвет блока меню, его элементов (в разделе Style (S) — при функции открытого меню.
Указать с какой стороны будет выезжающее меню (слева|справа), выбрать тип эффекта для раскрытия и закрытия и время раскрытия/закрытия.

Здесь внимание — есть отдельно изображение логотипа (вместо изображение может быть и обычный текст) и отдельно контейнер-ссылка (Link-Blok) в которую вставляется логотип. В настройках Link-setting — можно указать конечный url-адрес после нажатия:. Логотип-текст можно сделать 2 цветами:

Логотип-текст можно сделать 2 цветами:

1 цвет задается основным.
2 цвет — задается через создания стилизации части текста (задаем отдельный класс и задаем ему отдельный цвет — можно через иконку кисточки — Wrap whith Span).

Чтобы сделать ссылки в разделах меню — выбрав конкретное меню — переходим в раздел Settings (D) — после чего в разделе Link Settings указываем нужную ссылку:

Текст в меню — можно сделать анимационным или меняющим цвет при наведении (Style (S) — States):

Время анимационного эффекта — настраивается в разделе Transitions & Transforms:

Чтобы меню было зафиксировано на фоне (не исчезало) элементу Navbar в разделе Styles (S) — в настройках Position выбрать — Fixed:

Чтобы растянуть меню во всю ширину экрана сверху — в настройках ниже выбираем значение Top:

Сайты на webflow: Шрифты

Чтобы добавить особый шрифт переходим в в Project settings:

Далее раздел Fonts:

Выбираем нужный шрифт:

Далее Add Font:

Не всегда добавленный шрифт смотрится четко на изображениях. Чтобы улучшить его видимость можно задать тексту тень (Shadow):

Сайты на webflow: Задний фон

Фону находящемуся в секции, контейнере, колонке (любому классу в целом) можно задать задний фон.
Достаточно его выбрать затем задать нужный цвет (градиент/изображение) | % непрозрачности:

Также можно задать фон изображением. Для этого стоит зайти в раздел Assets (J) и загрузить нужную графику (Upload):

Фон (экран) c изображением лучше задавать не через элемент Section, а через элемент Div Block:

Фоновое изображение можно зафиксировать (чтоб оно не скролилось) — нажав на значение Fixed:

Фоновое изображение через прозрачность можно затемнить/осветлить в разделе Style (S) — Background — Add Solid Color:

Сайты на webflow: Элементы в элементах

Чтобы на фоновом изображении добавить другие элементы нужно:

Находясь на фоновом изображении (Div Block которому задан класс)
Просто добавить (перетащить на него) другие элементы Div Block

Как правило это какие то надписи/изображение — которые обычно центрируют: В данном варианте выбрано значение Flex, Vertical, Justify: Center:

Сайты на webflow имеют в себе варианты позиционирования элементов

Здесь при вставке элементов в элементы также важно понимать значения позиционирования элементов относительно базового макета:

Fixed (фиксированный)- элемент зафиксирован, а остальное скролится (прокручивается все кроме него).
Absolute (абсолютный) — элемент зафиксирован внутри другого блока (прикручен и прокручивается вместе)
Relative (относительный)- элементы взаимосвязаны с родительским элементом.

При абсолютном позиционирования вставленного элемента также выбираем конкретную позицию где он будет прикручен:

После добавляем в Div Block — нужные элементы (например Text Block)

Что такое блочная верстка?

Блочная верстка- это управление положением блоков сайта относительно друг друга. Например: у нас есть корневой блог body, в который мы добавляем блок «меню сайта», далее первый экран. Разделы «О нас», «Портфолио» и другие.

Что такое Webflow?

Этот сервис собирает сайт как конструктор, но на конструктор он абсолютно не похож. Он делает именно верстку, особенно это круто для веб- дизайнеров, которые умеют рисовать шаблоны в Photochop или Скетче. Раньше дизайн нужно было отдавать верстальщику, который и собирал дизайн с помощью HTML и CSS. С помощью сервиса Webflow, весь цикл: дизайн- верстка и т.д. может совместить один человек.

Вы нарисовали, вы сверстали, вы поставили на хостинг и отдали заказчику уже готовый продукт.

Основные преимущества Webflow:

Блочная верстка ( секции, контейнеры, div- блоки, лайт- боксы, меню и т.д.)
Быстрое создание адаптивных сайтов и страниц.
Просмотр в браузере результатов работы.
Чистый код.
Возможность править CSS и HTML.
Сокращение затрат, как временных так и материальных, на создание сайта.

На сегодняшний день на просторах буржуйнета сервисы подобные Webflow, открываются каждый день и конечная чистота кода верстки приближается к ручной. Даже если вы решили стать в будущем front- end и back- end разработчиком, работа в сервисе Webflow поможет вам понять суть и основы верстки.

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

А как же Muse?

В принципе программы Webflow и Muse нельзя сравнивать, потому что в Webflow присутствует блочная верстка, которая принята при ручной верстке, в Muse используется система drag-and-drop, когда объекты перетягиваются, выставляются и собираются.

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

Как освоить Webflow?

Хочу посоветовать тренинг Максима Соколова «Веб-мастер Lite». Я сам проходил этот тренинг и поэтому могу с уверенностью его рекомендовать.

Тренинг действительно хорош, на нем вы поймете как это работает и научитесь работать с сервисом. Кроме всего прочего после тренинга вы получите доступ в чат Telegram. Выпускники, кураторы проекта и Максим ежедневно общаются в чате, делятся знаниями, обсуждают проекты и многое другое, другими словами- это кладезь знаний, который останется у вас в завершении тренинга.

Если вы работали в Muse, то вам вдвойне будет интересно опробовать новый, для себя инструмент разработки сайтов.

Как поможет Webflow в России

Рассказывает Максим Соколов, основатель Emdesell

Есть две основные проблемы со всеми сервисами, на которые мы, российские пользователи, облизываемся и которыми не можем пользоваться:

2. Под магазин у Webflow из доступных платёжных систем только PayPal. Мало у кого из русскоязычных пользователей он есть. И они используют западную систему Stripe. Она открыта для всего Запада и ЕС, но в Россию приходить не собирается. Принимать деньги — большая проблема. В будущем Webflow планируют выйти на Россию, но, как они объясняют, сейчас наш рынок им не интересен. Сервис совсем не распространён на русскоязычном рынке.

Shopify или Webflow

Это разные вещи. Shopify — всё-таки банальный конструктор, а Webflow — сервис визуальной вёрстки. Человек, который впервые его открывает, моментально закрывает. Потому что без подготовки Webflow сложен. Тот Webflow, который был в 2016 году, и сегодняшний Webflow — абсолютно разные сервисы. На сегодня это гигант. Сейчас его главная цель — не дружеский интерфейс для конечного пользователя в отличие от Tilda, Wix, которые ориентированы на самостоятельное создание сайта.

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

Замечаю и такой тренд: на Webflow переходят многие веб-студии. Специалисты в ручном коде переходят на Webflow потому, что всё можно сделать в разы быстрее, качественнее и интереснее. Достаточно понять, что здесь создаётся потрясающая 3D-анимация, которую мало кто сделает.

Webflow Ecommerce предлагает настроить виджет корзины, страницы товаров, транзакционные рассылки, добавить больше взаимодействий и анимаций, а для маркетинга настроить интеграции с социальными сетями, Google Analytics и улучшить генерирование SEO-тегов. Что в перспективе получит российский пользователь — вопрос.

Понимание классов и подклассов в webflow

Cайты на webflow создаются с учетом понимания классов которые позволяет нам оперативно применять и изменять свойства всех элементов относящиеся к этим классам.

Допустим вы:

Верстаете политику конфиденциальности на сайте, а в ней есть множество главных пунктов — подпунктов: В этом варианте нужно сделать так чтобы отступы у пунктов и подпунктов (через элемент paragraph) — были различны.
Создаете меню — настроив 1 элемент меню — затем просто проходитесь по другим элементам и задаете им 1 созданный ранее класс.

Изначально любые стандартные элементы в webflow (например paragraph стоят без классов)
Но как только вы редактируете элемент (например тот же элемент paragraph через отступы) — автоматически создается новый класс (ему можно задать название например paragraph2:

В идеале после вставки на body любого элемента ему лучше сразу задавать (или выбирать из уже имеющихся) класс.

Таким образом элементы каждых классов — можно редактировать все вместе (одновременно), что очень сильно упрощает работу.

Изменить название классов — можно в разделе Style Manager (G) — значок гаечного ключа (после чего нажать на галочку для сохранения:

Изменить элементу сам класс (свойства) — можно в разделе Style (S) — нажав на иконку треугольника — после выбрать нужный класс для замены:

Можно также задать дополнительный подкласс (форматирование 1 классов поверх других):

Они создаются в том случае если нужно сделать (например заголовки 1 класса) различными по положению.
Подкласс создается просто дописывая к основному классу — дополнительного названия.
Такой подкласс — при изменении настроек основного класса также будет меняться, но если его редактировать отдельно — будет изменятся лишь этот подкласс.

Cайты на webflow: Блочная структура

В Webflow есть 6 основных элементов создающих управление блоков относительно друг друга:

Тело (чистый лист) — на который можно накладывать другие блочные элементы
Секция (идет на всю ширину браузера (от края до края и часто это бывает фон), но может быть любой высоты — и разделяет body — на своеобразные экраны)
Контейнер (вставляется в секцию, как бы поверх нее, размер по умолчанию в 960 px)
Колонки — в свою очередь вставляются в секцию или контейнер и делят его на нужные части (колонки). Колонкам после вставки можно задать нужное число.

Внутри базовых блоков соответственно можно задавать множество других элементов.
Просмотреть структуру сайта в целом (что в чем) можно в правом блоке Webflow — Navigator (F):

Чтобы скопировать блок (например секция — контейнер — в нем какой то элемент) — просто жмем ПКМ — Copy

Затем в нужном месте — Paste Inside:

Чтобы расширить макет вниз — нужно выбрать секцию и перетащить в низ в поле body:

Отмечу что в webflow — доступно 4 варианта верстки (с компьютера, планшета, широкого экрана смартфона, с узкого экрана смартфона).
При переключении — верстка автоматически подстраивается под разрешени экрана.
Также доступна функция изменить верстку/дизайн при отображении на конкретном экране.

Чтобы удалить все стили (начать все с чистого листа — на body) в разделе Style Manager (G) просто стоит нажать на Clean UP: