Webflow 101: A Beginner’s Guide to build stunning websites
And how to track a webflow website with GTM. By Timon Mayer
In the context of our new edition of the company website, I was commissioned to take care of the design and implementation. Since I had already gained experience in web design with some private projects, I felt well-prepared for this task. First, we had to decide whether to code the site completely ourselves or use one of the countless construction kit providers.
After some discussons we decided that we should use Webflow. I thought it will be an interesting challenge for me because my private website runs on WordPress and since I am always open to discovering something new, I was super excited to get started in webflow. If you read my first blog post, you know that I’m also into web tracking, so I was very excited to see how the implementation of GTM works here.
Deep dive into the Designermode
First things first, some important aspects of Webflow Designer
- build any website you can imagine with the full power of HTML, CSS, and JavaScript
- Designing the website with a visual canvas.
- choosing predefined templates, blocks or sections and customize them according to your needs
- Building blocks or sections completely free
First impressions: The Builder systems are relatively similar. There is a main menu (dashboard) where you can save different Websites as your own Project. In the individual projects, you can make various settings depending on the Workspace plan. These settings include general configurations such as location and time zone as well as the integration of Google Analytics or Facebook Pixel and SEO settings. So far so good. In individual projects, you usually find yourself in designer mode.
In this mode, you can easily switch between different viewport sizes to adapt the website optimally to responsive web design needs. The possibilities in the display seem limitless.
Using the settings in the right screen bar, elements can be styled and features such as hiding on smaller screens can be realized with just a few mouse clicks.
Another feature is the ability to create custom interactions and animations. This makes it easy to add visual effects that make your website stand out from the rest.
Adding GTM to the Webflow Website
Those who read my article about my first experience with GTM know that I am now the absolute tracking pro! haha just kidding. Nonetheless, we want to track our website and have also implemented GTM for this purpose. The integration of other services like Google Analytics or GTM is quickly done. As mentioned above, you need to switch to the Dashboard
view and then open the Project settings (Click on the Webflow “w” at the top left and select “Site settings”). In the settings, click on “Custom Code” in the tab at the top. Here you can easily add any code either to the “Head Code” at the end of the <head> tag or the “Footer Code” before </body> tag. After a few clicks and the copy-paste of the GTM code into the website’s header, you are ready to go.
Conclusion
In conclusion, my experience with Webflow has been positive. It is a powerful tool that is more suitable for experienced web designers. Once you get an overview of all the features and possibilities, this tool lets you design the website according to your wishes. Webflow also offers learning courses and videos on its website ( https://university.webflow.com/) also for specific questions there is a community forum that responds within a few hours to a day. There are also some YouTube channels that provide you with further practical examples and explanations.
Further Links
Datadice also releases a new blog post every month about the latest features in BigQuery, Looker Studio, Power BI, Google Analytics, and Google Tag Manager. Check out more blogs here.
Check out our LinkedIn account, to get insights into our daily working life and get important updates about BigQuery, Data Studio, and marketing analytics
We also started with our own YouTube channel. We talk about important DWH, BigQuery, Data Studio, and many more topics. Check out the channel here.
If you want to learn more about how to use Google Data Studio and take it to the next level in combination with BigQuery, check out our Udemy course here.
If you are looking for help setting up a modern and cost-efficient data warehouse or analytical dashboard, send us an email at hello@datadice.io and we will schedule a call
Originally published at https://www.datadice.io.
