Webflow

How to add a search form

Just because something is functional doesn’t mean it shouldn’t sing and bring a smile to your user. If you’ve read any of my blog posts, you’ll know I love to use Webflow’s super-amazing interactions — search form elements are no exception.


So for this tutorial, we’ll be creating an interactive search form like this one:

Check out the real thing in action on the demo site, and/or clone it to make it your own.

Step 1: Add a search button

I’m using Webflow’s navigation component then adding a div — which will act as my interactive search button.

Give the div a class of “Search Form Button” with these settings:

  • Display: inline block
  • Padding: top, left, bottom: 20px / right: 80px
  • Position: relative

I’m using the typeface Montserat, so I’ve made adjustments to the weight and alignment of text. You might not need these.

  • Left border: solid, 1px, #c9c9c9
  • Cursor: pointer

Next, we’ll add a search icon from . Along with the icon, we’ll add two text elements. Change the text in both text elements to Search and Close, respectively.

Give the icon a class of “Search Icon” and a width of 15px.

Next, add a class to the first text element of “Search Button Text” with the following settings:

  • Display: inline-block
  • Margin left: 5px
  • Position: absolute

Now add a class to the second text element of “Search Button Text Close” with the following settings:

  • Display: inline-block
  • Margin left: 5px
  • Position: absolute

Step 2: Add a search form

Add a div to the top of your site’s structure and give it a class of “Search Wrapper.”

Apply the following settings:

Background gradient settings:

  • Type: linear gradient
  • Angle: 45 degrees
  • Color: #1d1d1d
  • Color: #424242

Box shadow settings:

  • Type: inside
  • Color: rgba(0, 0, 0, 0.65)
  • Angle: 0 degrees
  • Distance: 17px
  • Blur: 40px
  • Size: -25px

Next, place the search component in the search wrapper and give it a class of “Search Form Wrapper” with these settings:

  • Display: flex
  • Flex layout: justify center, align center
  • Margin bottom: 0px
  • Overflow: hidden

Select the search input and give it a class of “Search Input” with the following settings:

  • Padding left and right: 25px
  • Margin bottom: 0px
  • Height: 70px
  • Font weight: extra light
  • Font color: #ffffff
  • Font size: 40px
  • Line height: 45px
  • Background color: transparent
  • Border: none

Select the search button and add a class of “Search Button” with these settings:

  • Padding left and right: 35px
  • Height: 70px
  • Font size: 20px
  • Background color: transparent
  • Border: left, solid, 1px, grey
  • Transitions: background color, 200ms, ease
  • Transitions: height, 200ms, ease

Next we’re going to add a hover state to the search button. Select “Hover” from the “States” dropdown above the class selector input.

Adjust the following settings:

  • Background color: rgba(0, 0, 0, 0.43)
  • Height: 95px

Meet the world’s first visual content management system

With Webflow CMS, you can build completely custom websites powered by dynamic content.

And when we say custom, we don’t just mean that you control every aspect of the look and feel.

We mean truly custom. Meaning that you, the designer, define both how content is structured and how it looks on the site. All without messing with HTML, CSS, PHP, or databases.

And when you’re ready, you can invite your clients and/or colleagues to update content right on the live site, using an intuitive WYSIWIG editor similar to Medium’s.

So now you can define, design, and publish powerful, dynamic websites. Without hiring a developer or even looking at code.

Wondering what sorts of sites you can build with Webflow CMS? Well, we just redesigned the Webflow site and our entire Help Center with it.

Okalpha

Animation studio Okalpha set out to create a design that feels, in their own words, «a little like Lego.» With a strong color palette and bold type, every element has its place. And unlike the plastic building blocks they take their inspiration from, there isn’t anything in the design to trip over and cause pain.

Though there’s plenty of straight lines and strong geometry, there’s also movement. Animations and interactions keep the design from being a rigid set of interlocked elements and give it a vibe that’s loose and fun to navigate.

Head over to its Webflow page to see how this Lego-inspired design was put together.

Assemble

Assemble highlights (literally) what they do right from the start with their H1 headline: “Hire an elite production team to create your next video project.”

Then they start building trust with a list of brands they’ve worked with. In between, you get two clear CTAs designed to appeal to different visitors: “Start project” and “Instant  quote.”

The latter leads to one of my favorite aspects of the site: an instant quote calculator that’s absolutely incredible (and really fun to play with):

Website design lessons to learn from Assemble

  • Not to beat a dead horse, but: when writing your homepage headline, focus on clarity, just like Assemble does. Bonus points for starting it with an active verb, which helps it work as a kind of call to action!
  • Offering two different CTAs in your site’s hero section can help engage different types of visitors. Assemble uses two buttons to appeal to both those who are ready to get started, and those who want to see how Assemble might fit into their budget. Smart.
  • Did you notice the downward arrow and “Scroll to discover” in the hero section? Affordances like this can drive people to check out more of your site, which is especially handy when, as here, the site looks fairly complete without scrolling.

Alt tag all the things

Alt tags are probably the great forgotten but incredibly useful HTML element. Forgotten because they’re often hidden away in CMS interfaces, but incredibly useful because:

  1. They make images—a form of content that those with no or poor vision can’t normally enjoy—more accessible (because screen readers can read them)
  2. They give you another place to work in keywords

So be sure to add descriptive alt tags to your images. That is, make sure they describe the content of the image in a way that lets people with poor or no vision “see” them.

Include keywords when relevant. Once upon a time, people took advantage of alt tags to list 50 keywords in a place that most people would never see. Google quickly got wise to that, and will penalize you for keyword-stuffing your images.

But if you can mention a keyword in a contextually relevant and non-spammy way, by all means, do it. This will not only help Google’s standard text-search engine identify your page’s topic, but also help people using image search stumble across your site.

Also, you should give your images relevant, descriptive filenames. Do what I say, not what I do.

Note: Images that are purely decorative — i.e., that don’t add any information to the page — should not be given an alt tag. Thankfully, Webflow defaults to empty alt tags, so if your page includes a decorative image, simply don’t add an alt tag to it.

Ценовая политика Webflow

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

Когда вы начнете работать с Webflow, последнее, вероятно, будет более актуальным, поэтому давайте начнем с вебсайт-планов, которые в основном включают облачный хостинг.


Во-первых, всегда можно разместить созданный вами сайт на субдомене. А когда захотите использовать обычный домен (что рано или поздно всё равно произойдет), доступны несколько платных вариантов:

Базовый план стоит $12 в месяц (при оплате за год) и включает в себя автоматический SSL, CDN, а также привязку пользовательского домена, который легко настроить и еще проще использовать.

План CMS, $16 в месяц (оплата за год), позволит вам развертывать не только статические страницы, но и элементы, созданные CMS (посты в блогах, проекты и т. д.). Бизнес-план, стоимость которого $36 в месяц при оплате за год, в основном является расширенной версией предыдущего плана, подходящей для крупных веб-сайтов со значительным трафиком.

Также имеются планы аккаунтов, в которых установлено максимально допустимое количество активных проектов и другие профессиональные параметры.

План Pro ($35 в месяц, при оплате за год) добавляет доступ к ребрендингу платформы и защиту сайтов паролем. Этот план подходит тем, кто регулярно создает полноценные проекты на заказ.

Для пущей наглядности мы немного попотели и создали общую диаграмму всех тарифных планов, доступных в Webflow:

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

Опция «Мне просто нужен один сайт» фактически предложит вам только хостинг (это план вебсайтов, который мы обсуждали ранее), остальные опции предложат план Lite за $16 и Pro/Team за $35, а также индивидуальный план для больших команд. Это все те же два типа планов, описанных выше, кроме бесплатной и пользовательской версии.

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

Для всех премиальных планов можно выбрать помесячную или годовую подписку, причем годовая идет с 20% скидкой, что при использовании продвинутых планов становится особенно ощутимым.

Дизайнер сайтов Webflow

Webflow предлагает три основных компонента: инструмент для бескодового визуального веб-дизайна, систему управления контентом (CMS) и хостинг. Первый из них бесспорно является флагманом сервиса – а значит прежде всего мы подробно рассмотрим дизайнер сайтов Webflow.

Похожий на окно Photoshop интерфейс на самом деле является инструментом автоматизации HTML/CSS, где пользователь может свободно добавлять, позиционировать и стилизовать элементы по своему усмотрению, в то время как базовая система автоматически генерирует разметку и весь другой необходимый код. Интерфейс довольно сложный и к нему надо привыкнуть, но на сегодняшний день это, несомненно, один из самых мощных и универсальных веб-сайт конструкторов в режиме реального времени.

Давайте сразу проясним: дизайнер сайтов Webflow не предлагает просто взять и нарисовать любую фигуру по центру монитора. Ведь за каждым визуальным элементом веб-страницы стоит актуальный код, и такой код будет экспоненциально усложняться, если не учитывать работу HTML и CSS.

Другими словами, чтобы нарисовать простой квадрат в середине страницы, нужно добавить новый элемент (Webflow называет его «контейнером» или «разделом»), установить его позиционирование на «фиксированное» и его верхнее-правое и нижнее левое положение на 0. Поздравляем с первой лекцией по программированию!

Панель дизайнера Webflow по свойствам похожа на CSS, поэтому для того, чтобы полностью оценить мощь этого инструмента, необходимо знать основы HTML/CSS. Однако, если вы во время процесса регистрации поставите галочку «Я не пишу код», Webflow автоматизирует значительную часть процессов построения вебсайта. Например, обработает медиа-запросы для мультимедиа, чтобы обеспечить «отзывчивое» поведение сайта (т. е. будет на ходу генерировать код для просмотра вашей страницы с планшета и других мобильных устройств).

Разумеется, невозможно втиснуть каждую функцию CSS в один адекватный инструмент, поэтому в Webflow решили упростить большинство менее полезных и редко используемых функций, а их названия сделал более понятными для пользователя. При желании специальным переключателем можно скрыть панель «продвинутого» контроля и работать только с предустановленными параметрами.

Свой сайт можно строить с нуля или использовать любой из готовых шаблонов, некоторые из которых уже имеют готовую структуру сайта. Webflow предлагает более 30 бесплатных и 100 премиум-шаблонов, при этом ключевым отличием между этими двумя группами является уровень детализации, а также включенные ресурсы, такие как стили и изображения.

Платные темы варьируются в цене от 40 до 80 долларов и являются творением профессиональных дизайнеров и разработчиков Webflow.

По вышеизложенным причинам проектировать сайт с чистого листа рекомендуется тем, кто уже имеет опыт работы с HTML/CSS и создания сайтов из блоков. Если вы раньше не программировали (а даже если и программировали, но хотите ознакомиться с инструментарием Webflow), настоятельно рекомендуем в первую очередь поиграться с настройками готовых шаблонов.

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

Во-первых, можно добавлять переходы и преобразования непосредственно в любой элемент, используя ту же правую боковую панель свойств элемента. А это здорово экономит время, напоминая инструменты автоматизации, которыми пользуются разработчики.

Самое интересное начинается с панели «Интерактив», доступ к которой можно получить по вкладке со значком молнии в верхней части правой боковой панели. Там можно добавлять анимацию, которая будет запускаться в зависимости от состояния страницы или взаимодействия пользователя с определенным элементом (например, при наведении курсора или нажатии).

По сути это инструмент автоматизации Javascript, который потенциально может заменить 80-90% вашего обычного файла JS для стандартного веб-сайта: анимации меню, всплывающие подсказки элементов, состояния при наведении курсора и т. д.

Остальные вкладки боковой панели содержат Навигатор (дерево HTML) и Диспетчер стилей (иерархия CSS), которые полезны в качестве инструментов обзора, но не так существенны, как уже рассмотренные нами функции.

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

Disable indexing of your webflow.io subdomain

One of Webflow’s handier features is that you automatically get a staging domain for every website you make: a subdomain version of your site on webflow.io.

It’s an exact copy of your website, on a different URL, that you don’t actually direct people to. And that first clause—”an exact copy of your website”—is the wonderful and awful thing about it.

Wonderful, because it lets you play. You can try new design patterns and approaches, publish that wacky blog post you’re not totally sure about—whatever.

Awful, because as far as Google’s concerned, having the same content on two different URLs is a very. Bad. Thing.

(Granted, with the increasing popularity of republishing of web content on various domains like Medium and LinkedIn, Google’s getting better at finding the source of truth for content.)

Thankfully, you can easily avoid the whole duplicate problem with one click. Just toggle “disable subdomain indexing” and you’ll be good to go.

OnCorps

Even a specialized, highly technical company can have an artistic site. OnCorps does data analysis to help businesses perform better. They look at numbers that affect the bottom line and suggest ways to improve.

JT Helms, founder of design agency Heco Partners, jumps outside the confines of stuffy design work that sometimes plagues companies specializing in something like data analysis. He delights visitors with a layout full of shapes, movement, and textures.

The landing page opens with a scattering of blinking stars floating in space, coming together to form a bell curve. This strong visual animates the way OnCorps analyzes data and finds patterns.

This site bursts with artistic embellishments and bright sparkles of inspired design. It strikes the right balance between creative and technical to communicate who they are.

Want to see how JT did it? Check out the design right inside Webflow.

Rok Bračko’s portfolio

Rok Bračko’s portfolio might be unorthodox, but its weirdness isn’t a flaw — instead, it demonstrates Rok’s inventiveness and commitment to breaking design norms.

Each project expands into full display on hover. Creating a click-free way to see his work makes everything more immediate. There’s no wading through blocks of content or submenus — it’s all right there in front of you.

I had a bit of a problem at first with the top left menu — it requires a click to go further into the content. But it only took a second to figure out, which doesn’t detract from a design where almost everything can be accessed in an instant.

Take a look at the inner workings of Rok Bračko’s near-clickless design.

David McGillivray

A seasoned creative director, David McGillivray creates holistic design solutions, which is reflected strongly in his unique design portfolio. Increasingly popular but still rare enough to be a fun surprise, the circular cursor that expands on hover is a great touch to an already fantastic experience. Delightful and memorable — key qualities for any design portfolio — the cursor brings David’s black-and-white design to life. 


It’s immediately obvious that David is an amazing designer, and scrolling through his projects solidifies this hunch. Each image- and video-heavy project page immerses us in David’s work, showcasing his animations and microinteractions.    

Free templates

A free template is a great way to reverse-engineer particular layouts or interactions in Webflow and to grab pieces from one store for use on another — all without paying a penny. Here’s a set of 100% free templates to use as you please.

Fre

A clean, versatile template to get your store off the ground — in no time.

If you’re looking for a straightforward, multi-purpose ecommerce template to get started, Fre might be the match for you.

Fre’s modern and responsive product pages, cart designs, and checkout pages are simple to customize and easy to use — on any device. Like my mom always says, the best things in life are Fre.

Choose your own adventure time, folks! 

  • Check out the live site
  • Preview Fre in the Designer

Mariela

A customizable and comfy template for selling home goods.

Mariela is a perfect template for all you artisans selling unique home and decor products. What makes this template unique is its focus on product details throughout the site.

“It’s impossible to sell a customer a cushion without letting them touch it.”

—Anonymous cushion salesman, 1960

“Immerse your customers in the comfort of detailed product pages and images … and they’ll buy all of your freakin cushions.”

—Mariela, 2018

Mariela is designed to help you fully customize your site — without starting from a blank canvas. From your cart design to your confirmation page, you can adjust colors, fonts, and icons to match your brand identity.

Get comfortable with Mariela:

  • Check out the live site
  • Preview Mariela in the Designer
  • Start building with Mariela

CoffeeStyle

A minimalist, content-friendly template for a wide range of products.

Does your ecommerce brand have a story to tell? CoffeeStyle is the perfect template to create a buzz with a built-in blog and detailed product pages.

Customize CoffeeStyle’s bold, responsive checkout pages and cart designs with ease to fit your brand and perhaps more importantly, your customers’ screen size.

Now that we’ve spilled the beans on CoffeeStyle, it’s your turn: 

  • Check out the live site
  • Preview CoffeeStyle in the Designer
  • Start building with CoffeeStyle

ToyStore

A colorful, family-friendly template designed for selling children’s products.

Parenting is hard. Luckily, creating a parent-friendly ecommerce site is easy — with ToyStore.

It seems that iPad-friendly is the new family-friendly these days — so this template is built with mobile in mind. From colorful cart designs to clean product pages, ToyStory has everything you need to create a memorable and functional customer experience.

Think we’re kidding? See it for yourself:

  • Check out the live site
  • Preview ToyStore in the Designer
  • Start building with ToyStore

Pompeo

A template for artisans looking to create an ecommerce experience as meticulously crafted as their products.

Designed with an artisan craft store in mind, Pompeo is a flexible template for anyone looking to sell their own creations.

Pompeo’s responsive order confirmation pages feature an elegant header image that you can customize to match your brand and products.

You know the drill:

CREA International

Crea International calls themselves “the Italian physical brand design company.” We’re not 100% sure what that means, but the work those words introduce stands for itself.

Crea’s “about” page provides an excellent example of how to lay out a brand identity and company structure on a single page. This statement sums up what they do in one sentence: “We transfer the brand value through a perfect combination of digital and physical space, pioneering innovative solutions to deliver superior retail service design. “  

I’m not personally a fan of scroll jacking, but Crea International uses the technique just about as well as it can be with the scroll interactions on their homepage.

Website design lessons to learn from Crea International

  • If evocative but difficult-to-grasp statements like “We are empathy concept designers” are a good fit for your brand, be sure to back up those bold statements with concrete examples of what you actually do. Inspiration is powerful, but most potential clients are more interested in results.
  • Remember that your homepage’s H1 headline is a goldmine for SEO, so terms that no one searches for are typically best left to pages you’re less focused on driving traffic to.
  • Be careful with scroll-jacking. While it can be used to great effect, as here on Crea’s site, it can also irk some people as it takes control of the site out of their hands.

Why we built this integration

We created this After Effects/Lottie integration with Webflow for 2 core reasons: 

1. Improved animation performance

Webflow’s existing interactions and animations toolset is pretty powerful, and we’ve seen some truly wild sites built with it. But it has its limits.

Ultimately, if you’re trying to create sophisticated animations with lots of moving parts, animating traditional HTML and CSS elements in Webflow can get complicated fast. Plus, large and complex animations in Webflow can seriously weigh a page down, creating slow page loads or incomplete experiences for users on slower connections.

After Effects, on the other hand, is a tool designed explicitly for creating sophisticated, complex animations, so it can be a lot more efficient than trying to do it all in Webflow. Additionally, After Effects animations, when served on websites as Lottie JSON files, are exponentially lighter and more performant than animations created with standard HTML and CSS elements. 

2. Empowering more without code

Beyond these practical, performance-driven reasons, we also wanted to take the work of Airbnb’s design team a step further and empower even more people to add After Effects animations to their sites via Lottie — but without requiring them to write a line of JavaScript.

The release of Lottie in 2017 did a lot to give designers and animators more precise control over animations on the web, iOS, and Android, making it as simple as handing their developers a JSON file to “drop in” to the right place in the app or website. But still, this implementation process remains developer-driven, requiring detailed knowledge of JavaScript to achieve anything beyond basic playback.


Today’s integration with Webflow interactions brings this implementation process into a completely visual, code-free tool, and lets designers, animators (and, yes, developers!) go from concept to published web animation using only visual tools.

Steven Hanley

Steven Hanley is a designer for digital products and experiences. He’s constantly experimenting with unique layouts and new styles and interactions. The inspiration he draws from print design is strongly reflected in his unique design portfolio. 

His homepage uses bold typography that packs a punch, draws us into the site, and creates consistency. The effort Steven put into the small details of his portfolio help make it so memorable, like the way he swapped out the typical mouse pointer for a large circular cursor to match the portfolio’s favicon. These kinds of small touches make for a delightful website experience and keep us coming back for more. 

Collection pages

Whenever you create a new item (e.g., blog post, help article, etc.) in a Webflow CMS Collection, a page is automatically created for it. Collection Pages work like templates — the layout and design of the Collection Page will apply to every Collection item’s page.

That means Collection Pages are essentially templates for recurring pieces of content, such as blog posts, help articles, or even landing pages.

In this video, we’ll show you how to:

  1. Create a Collection Page
  2. Add and connect content
  3. Preview Collection Pages
  4. Link to a Collection Page

Plus, we’ll show you the settings you can adjust for Collection Pages.

What the launch of Ecommerce means

Today’s launch marks the end of beta, and includes some price cuts and adjustments — but “launch” certainly doesn’t mean the end of development. We still have a lot more coming, which we’ll detail below in our roadmap section. For now, let’s take a look at the updates to ecommerce site plans that come with today’s launch.

Price cuts and changes to Ecommerce site plans

As we noted in our beta release post, pricing during the beta was subject to change. Today’s launch introduces a few updates to pricing for Ecommerce site plans:

  • Lower annual cost for the Standard plan: We’ve lowered the monthly price for our entry level Standard ecommerce site plan to $29/month, when paid annually.
  • Removing the sales limit on Advanced: We’re removing the sales volume limit on the Advanced site plan, which should make pitching Webflow Ecommerce to larger clients easier.
  • Monthly price increase for Standard and Pro: With the introduction of variants and these other new features, we’re raising the monthly price on Standard from $39 to $42, and from $79 to $84 on Plus. On Plus, the annually paid monthly price changes from $72 to $74. (Note: As promised, all existing site plans will be grandfathered.)

Функции магазина (eCommerce)

Одним из самых последних (и самых ожидаемых) дополнений к Webflow является функционал онлайн-магазина.

Webflow eCommerce предлагается по отдельным и включает в себя все необходимое для организации продаж через Интернет: управление товаром и запасами, пользовательские корзины, оформление заказа, переписка с клиентами, а также самостоятельное оформление заказа.

Для сравнения, в Shopify, Wix или даже в пакете WooCommerce + WordPress для достижения такого же детализированного уровня контроля придётся приложить немалые усилия (и к тому же иметь навыки программирования).

В ближайшем будущем ожидаются и другие функции магазина, такие как купоны/скидки, подписка и цифровые/загружаемые продукты.

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

Если же все обещанные функции будут реализованы, Webflow eCommerce станет полноправным конкурентом таким специализированных решений, как Shopify и Instacart, да ещё и со всеми вышеописанными преимуществами , , !

Для кого предназначен

Как было сказано выше, конструктор в большей степени предназначен для профессиональных дизайнеров. Идеальная целевая аудитория — веб-дизайнеры, которые сами немного верстают на чистом HTML/CSS.

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

Обычные пользователи тоже могут использовать Webflow — по крайней мере, для старта не требуются специальные навыки. Однако освоить конструктор сложнее, чем uKit или Wix. Всё дело в том подходе, который используется в визуальном редакторе.

Если вы умеете верстать, то быстро поймёте, что такое div и как изменится расположение элементов внутри контейнера, если сделать его Flexbox и задать значение justify-content. Если вы этого не знаете, то придётся запоминать, как работает вся эта система. Проблема в том, что используемый в Webflow подход к вёрстке не универсальный. Разобравшись с его классами, вы не научитесь верстать на чистом HTML.

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

Designing your store

When it comes to designing your store, you’ve got the same design freedom and flexibility as the CMS — so the shopping experience can integrate seamlessly with the rest of your site. You can create filtered, limited, and paginated lists of products and feature them on your homepage.

Ecommerce elements and pages

You can also create collection template pages for your products and categories, and even customize the checkout experience by styling two Ecommerce utility pages: the checkout page and the order confirmation page.

Learn more
  • Designing with Ecommerce collections: Designing pages and lists
  • Creating an add to cart button
  • Adding a shopping cart onto every page of your Ecommerce site
  • Customizing the view cart button
  • Customizing the shopping cart
  • Customizing the checkout experience

A recap: why we built Webflow Ecommerce

As we wrote last year when we announced our plans to launch Webflow Ecommerce, we’re aiming high. We want to change the way ecommerce stores — and online brands, for that matter — are built.

The last 10 years have seen a new form of online store emerge. In the wake of one-stop behemoths like eBay and Amazon, we’re seeing what we call “brand-first” ecommerce stores rise up — stores and products that stand out from the crowd by creating a compelling brand story and unique online shopping experience. But the ability to build these unique, non-templated stores remains out of reach for anyone without the means to hire developers or learn code themselves.

With today’s launch, we’re taking steps to change that.

Блиц: часто задаваемые вопросы

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

— Что такое Webflow?

По своей сути, Webflow – это онлайн-инструментарий для создания и запуска веб-сайтов. Он представляет из себя эдакий гибрид традиционных конструкторов сайтов, таких как Wix, классических систем управления контентом, таких как WordPress, и собственно написания кода сайта вручную.

Еще не запутались? Это руководство как раз и написано с целью всё прояснить! Сначала лучше разобраться с основными компонентами Webflow, а именно его , и .

— Сколько стоит Webflow?

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

Упрощая, в Webflow существует два ценовых уровня – планы аккаунта и планы сайтов. Планы аккаунта определяют, сколько человек из вашей команды могут использовать Webflow и для скольких проектов. А планы сайтов, в свою очередь, отличаются между собой параметрами хостинга и возможностями для электронной коммерции.

— Насколько Webflow прост в использовании?

Тут, как и во всём: тяжело в учении – легко в бою . Иными словами, когда вы привыкните к Webflow, пользоваться им будет достаточно легко. Да, в некоторых моментах он может показаться сложнее, чем, скажем, Wix или Squarespace, но наградой за труд будет владение гораздо более гибким и мощным инструментом.

Мы коснемся этой темы подробнее в следующих трех разделах, которые непосредственно касаются основной функциональности Webflow:

Eggcitables

For those who don’t eat eggs, it can be hard to find a decent substitute. Eggcitables makes a gluten-free, chickpea-based powder alternative.

The landing page features a package of their egg substitute and a revolving display of dishes it can be added to. They also include recipes and photos that make eating egg-free look like a delicious endeavor. It’s a smart content strategy for a company selling a product not everyone will be able to imagine putting to use.

Further down the landing page is Hannah Chisholm’s story of why she started the company. Reading about her struggles with food allergies and her desire to help others with food restrictions personalizes the product.

This design does a great job with both the content and imagery — enough to make even this egg-eating writer want to try Eggcitables.


С этим читают