In today's episode, we continue the series in which we bring you closer to no-code and low-code tools, to show you more from the inside about how they function, what they look like, what they allow, and how to navigate them. These are not trainings on these tools, they are merely walkthrough videos with which we talk a bit more about them so that you get to know them more closely. In today's episode, we will talk about Webflow, a very popular tool, mainly intended for creating highly interactive, fast websites.
Webflow as a Tool for Creating Websites
Of course, if someone has JavaScript skills, and can program, then you can also program applications here. It simply requires using a bit more code, although recently Webflow has also added logic. Still not very complicated, not allowing for too much, but they are moving towards enabling us also to create applications. So today, we will get acquainted with this tool. I will show you what it allows, how it looks, how it functions.
First Steps in Webflow
Well, as you see, we are already in the middle of our Webflow tool. We are already in our dashboard, where we want to create our first page. I will not show the screens before, as they have a bit less significance, and there we also have projects of our clients, so I will not go through it, as most of it would be blurred anyway. However, when we click "create a new page", just as you see, here we have the opportunity to create new pages, whether it will be an empty page or it will be created from some template. As you see, there can really be a lot of these templates, such as e-commerce, agency, restaurant, landing page, and so on, and so on. We can search here for these various templates, and edit and create based on them.
Today we will create an empty page, we select "Select", and "Kamil Super Cool Site" - exactly, this is my super site, and as you see, we start by simply entering the editor itself. We have to wait until everything loads here. And we are already in our editor. Similar to Bubble, we start with a white blank sheet of paper, on which we will be adding more elements, modifying them, applying, and so on, and so on.
Advanced Features of Webflow
The whole editor looks a bit different, whether it is more clear or it hits someone's taste better, of course, depends directly on our tastes, or preferences of how we like to work, but it is definitely easy to find oneself in it. At the very top, you see we have the Webflow icon, where we can go to our dashboard, to the settings of the site editor, or find some information, and export our code. Webflow is that editor hat allows us to export code to the outside of the platform. We also have a whole CSS preview. Of course, ere we need to select some elements to see this CSS here.
Managing Pages and SEO
Next, we have pages. If we click on this, it opens up a list of all created pages, where of course we can create static pages, so-called static pages, and utility pages, on which we have, for example, user login, so. So we have a protected page, that is a password page, we have a 404 page, we can edit them. And of course, we have user pages, if we have the possibility to manage users and we have this option enabled. E-commerce pages, if we have Webflow enabled as e-ommerce, or CMS pages, that is CMS pages, for example, blog post pages, or something else, which is just repeatable content created on some template. Here, if we hover over a given page, we can also enter its settings, here we can add new pages, or add subfolders to make our URL have the right structure. For example, "have no code .io/en/some page", means that we are in the English folder, or "/pl", we will be in the Polish folder.
f we click here on these settings, you see, here we can change the name of our page, we can copy this page, duplicate it, we can block access to it, say that only Specific Users Only, Anyone with the Password, or use, everyone outside. We have settings related to SEO, and settings related to Open Graph, which can take the same properties, or the same settings as SEO settings, Sage Search Settings, or Custom Code. Of course, here is access to Custom Code in the basic version we do not have, because we have to buy some hosting plan to add this custom code to a given page, but adding custom code allows us to add just custom code, custom functions, interactions, or any things that we dream of to our individual page. Of course, we can also add to the whole project, but we will talk about it in a moment.
Collaboration and Publishing in Webflow
As you see, going further up, I want to discard changes. We have various comments related to our page, which we can add in a given place. It allows us simply to collaborate with others on our page. We have a preview of our page, how it will look. And we have how our page looks in different breakpoints, that is, how at different resolutions it will be presented, how the elements related to that particular breakpoint will behave. Here we can manage our actions if we do something. Here we just have information about whether our project has been saved, our changes. We also have a code preview, which we can look at here to see exactly how it looks in the case of HTML, CSS, or JS, we will have all these informations, we will be able, if we upgrade our plan, you see, we will be able to export all this one by one. Our project of course we can share with others, we can invite content editors. Content editors are people who are responsible only and exclusively for editing content, meaning that they can add elements to the CMS, can manage them, edit them, as well as they can change content elements on our page. And last but not least, from the top panel, we can of course publish our pages. If we have purchased some hosting plan, we will be able to add a custom domain. Here, of course, in the basic plan, we will be able to publish it on the Webflow domain.
Advanced Optimization Techniques in Webflow
For more advanced users, various options like miniFi HTML, miniFi CSS, and so on are also available. These options simply allow our pages to load faster, but at the expense of code being less readable. These are already more advanced options, raising the question of whether we will need them.
Editing Assistance Tools
Well, this is what the top panel looks like, but for us, the main part, I might say maybe for entertainment or the part that interests us the most, is the ability to reduce resolution so you can see exactly how it looks. Here, incidentally, as you see, we can enable X-Ray mode, show edge elements, we can also turn on guides of interest to us, which will make it easier to simply create training sometimes. From these, I know that graphic designers often benefit greatly. I personally do not use it because I just go straight to projects.
Creating and Editing Pages in Webflow
Well, but what tigers like the most: creating, editing pages, applying elements. Please see that here we have different structures, different basic elements, different typographic elements, CMS elements, media elements, form-related elements, or advanced elements. And all these elements, if any of you have HTML, CSS skills, have created pages to this point, these elements will be very clear to you. You will know which element is what, what it is used for, what a section is, what a container is, how these objects differ from each other.
Styling and Class Management in Webflow
As I mentioned, today's video is not a training, so I will not explain what is for what and what is which. I just want to show you how it looks. Similar to Bubble, you see, we just drag and drop these elements onto this blank sheet of paper to see how our page will behave. Here, of course, we have a CSS approach, so we can create our classes, manage style selectors, which obviously move in the appropriate hierarchy.
As you see, we add our first heading element. Our pages rely on creating the whole structure of our page, we create some HTML, CSS, JS structure so that our page looks the way we want it to. Here we have body styles, where we create the style of a given element. We can manage all these CSS elements, whether it is just a regular block element, whether it should be a flex element or a grid element. Depending on what we choose, we will be able to also add appropriate options about how our elements should be styled, how they will behave.
Reusable Components and Class Management
Of course, we have components, which are reusable elements known to you from Bubble, where we can create an element once and then reuse it in different pages or sections of our pages, just so we don't have to do the same thing again. Managing these classes allows for easy addition of styling, such as the "black" class for elements with a black background, demonstrating Webflow's flexibility in creating advanced and stylized websites.
Hierarchy and Structure of Elements in Webflow
Here, as you see, we have exactly this tree, the whole hierarchy of our elements, it is of course created based on HTML. So if now we were to inspect this code, how our HTML looks, well, it looks exactly like this: we have a body, in which we have a heading, we have that button, we have later this div, in which we have some paragraph, later we have a div. As you see, these classes are then connected to these elements, they are not described inline, so it is as if for people, who use daily, created pages, whether it is in WordPress, or in a traditional way, it will be very clear.
Content Management: CMS in Webflow
We already talked about pages, next we have the CMS, our Content Management System, that is, a system for managing content, where we can just create various databases, whether it concerns blog posts, or some other listings, where we can just name this collection, this set of our elements. Here you see we have various templates, from which we can use, of course, we don't have to, but let's use a blog post. Then you see we have various fields, which we will have to fill in, that is, we have a title, we have some slug, slug is what we see in the URL, we have post body, post summary, main image, thumbnail image, featured color, we can add more fields.
Logic and Automation in Webflow
The next thing, is logic. A very interesting feature, which was added recently, which still does not offer us very many things, but Webflow added this function because of the fact that thanks to it we have a choice of various triggers, at the moment it is form submission, AB, and some incoming webhook. We can issue endpoints to webhooks, in which we will be receiving something on our page. Thanks to this, for example, when our form is filled out, of course, we still have some form, please, well, we can do something. We can, for example, send an email notification, we can create some element in the CMS, we can delete it, we can search for it, we can make some HTTP request.
E-commerce and Asset Management in Webflow
We have the e-commerce tab, where we will then add two new collections to the page, that is, products and product categories, thanks to which we will be able to create a simple e-commerce in Webflow. Webflow is not yet, I mean without using code in Webflow we will not be able to create a very complicated, very advanced e-commerce, but for many use cases, it will be completely sufficient. Then, through some code, some use of code or plugins, we will be able to extend these e-commerce capabilities in some way. Next, we have assets, we can create, and upload assets that will simply be used on our page.
Settings, Backups, and Site Audits
We also have site settings, search, general, such as whether we want to make layout buttons, onboarding checklist, and prompt, and backups, we can create backups of our site. Regarding elements, I have not yet mentioned the next three tabs, which are element settings, where we can add, for example, an id, create a component from a given element, we can set its visibility based on certain conditions, so or some custom attributes.
We also have the Style Manager, where we see the entire hierarchy of our styles, as well as we have Interactions, meaning we can enter into certain interactions with these elements based on certain triggers. For example, when the page loads, animate that element; when the element enters the Scrollview, what the user sees, then animate it. If someone clicks something, then perform such an animation or such an interaction with that element. We have here several different triggers, such as on mouse click, mouse hover, mouse move over element, scroll into view, while scrolling into view, and a few others. We also have page triggers, such as mouse move in viewport, while page is scrolling, page load or page scrolled, then we will be able to perform certain interaction actions.
Here, of course, we have a small support help, where we can just inspect the CSS of a given element, you see exactly how it looks. We will be able to go to help and feedback on the Webflow forum. We have audits, thanks to which Webflow automatically advises us on things like our image not having added alt texts or such things, things that have an impact on SEO or on the performance of our site, here you will see information about it, that "hey, maybe it would be worth correcting this to improve thing x on your site".
Searching for Elements and Video Tutorials
We have a search function to find some element on our site, as well as we have available video tutorials on all these elements, from which we can learn a lot, or learn a lot about how exactly Webflow functions. So, this is how the editor presents itself from the visual side, the one with which we can create our entire site, the concept of our site, or such things.
Site Settings and Advanced Settings
The other side is also site settings, where we also have to take care of these things, because as you will see shortly we have quite a lot of these settings here. These are settings such as obviously the name of our site, which is visible only to us, favicons, web clips, we would certainly want them to look the way we are interested in, not to be replaced by the Webflow icon. Locations, language code, all these things have an impact on SEO. Do we want our site to be website password protected for now? Do we want to place it in the showcase? Do we want to make it, for example, a template that others can use or do we want to have Webflow branding – most of us probably don't.
Managing Members and Publishing the Site
We have members, so we will be able to manage the members of our site, add collaborators, and such things. We have staging of our site, how we will want to publish our site, 301 redirects, if some page disappears we should make a redirect to a new page that replaces it or elsewhere. We can purchase plans. Here, of course, we will manage this for the website or for e-commerce.
Webflow SEO, Forms, and Integrations
All settings related to SEO, such as how indexing should work, how the robot TXT will be configured, site maps, integrations with Google site verification, canonical URLs so that Google knows where to really look for those primary contents. Settings related to forms, whether we want to do reCAPTCHA or validation, integrations with other forms. We also saw all submissions through our forms, we have spam filtering, and such things.
Library, Fonts, Backups, and Custom Code
Library, so we can add some library to our Webflow, thanks to which we will be able to use them. Fonts, if there is some font in Webflow that we do not have, we can add it from the outside. Backups, something we already talked about. Integrations, Google Analytics, Google Optimize, Google Maps, Facebook Pixel. API, Access, Webhooks or Authorized Apps allow us to greatly expand the capabilities of sites built in Webflow. Last but not least, adding custom code for the entire site and not just for a single page.
Summary - Webflow no code low code platform
As you see, Webflow is a very advanced tool that allows for the creation of really interactive, mega fast, super functioning sites, which really will not differ from those sites created in custom code. Incidentally, for example, our site havenodecode.io is created in this tool, so you can judge for yourselves what kind of things we can build in it, whether they are cool, work well, and so on. I hope this video was helpful to you. See you in the next ones. Goodbye!
