{"id":4590,"date":"2024-04-14T23:39:59","date_gmt":"2024-04-14T15:39:59","guid":{"rendered":"https:\/\/webflow.tenten.co\/?p=4590"},"modified":"2024-04-14T23:39:59","modified_gmt":"2024-04-14T15:39:59","slug":"introduction-to-the-webflow-designer","status":"publish","type":"post","link":"https:\/\/webflow.tenten.co\/en\/introduction-to-the-webflow-designer\/","title":{"rendered":"Introduction to the Webflow Designer"},"content":{"rendered":"\n<div class=\"docs_rich-text w-richtext\">\n<p>The Webflow Designer enables you to construct your site framework, conceptualize the appearance and ambiance of your site, and include content, interactions, animations, and customized code to fabricate fully operational websites, landing pages, prototypes, presentations, and more. <\/p>\n<p>Within the Designer, you have the ability to handle HTML elements, define CSS styles, and establish interactions without requiring to write any code. While constructing your website, the Designer generates pristine, semantic, web-optimized code that web browsers will make use of to showcase your site. Furthermore, the code from the Designer can be exported to other applications.<\/p>\n<p>This tutorial will cover: <\/p>\n<ol start=\"1\" role=\"list\">\n<li>Guidance on accessing the Designer<\/li>\n<li>Overview of the Designer structure<\/li>\n<li>Collaboration among multiple users<\/li>\n<li>Reasons for the Designer being an online application<\/li>\n<\/ol>\n<figure class=\"w-richtext-align-fullwidth w-richtext-figure-type-image\">\n<div><img decoding=\"async\" src=\"https:\/\/webflow.tenten.co\/wp-content\/uploads\/2024\/04\/65f848701bd3aac2d888eabc_intro20to20the20designer20-20no20highlight.webp\" loading=\"lazy\" title=\"65f848701bd3aac2d888eabc_intro20to20the20designer20-20no20highlight\"><\/div>\n<\/figure>\n<h2>Getting to the Designer<\/h2>\n<p>To reach the Designer:<\/p>\n<ul role=\"list\">\n<li>by accessing the <strong>Dashboard<\/strong> and clicking on your site thumbnail<\/li>\n<li>via<strong> Site settings<\/strong> by selecting <strong>Designer<\/strong> from the top toolbar <\/li>\n<li>through the<strong> Editor<\/strong> by choosing the <strong>Designer<\/strong> after clicking the <strong>Menu button<\/strong> in the lower left corner<\/li>\n<\/ul>\n<h3>Designer prerequisites: compatible web browsers<\/h3>\n<p>Webflow officially supports the Designer on the latest three major versions of all contemporary browsers, including Chrome, Edge, Firefox, and Safari.<\/p>\n<p>The extent of browser compatibility varies based on the features utilized (e.g., filter has partial support in Edge). For features with restricted support in specific browsers, more information can be found in their respective articles:<\/p>\n<ul role=\"list\">\n<li><a href=\"https:\/\/caniuse.com\/#feat=transforms3d\">CSS transforms 3d<\/a> &#8211; Used in Interactions<\/li>\n<li><a href=\"https:\/\/caniuse.com\/#search=transitions\">CSS transitions<\/a> &#8211; Utilized in Interactions<\/li>\n<li><a href=\"https:\/\/caniuse.com\/#search=flex\">CSS flexbox<\/a> &#8211; Employed in <strong>Style panel<\/strong> &gt; <strong>Layout<\/strong><\/li>\n<li><a href=\"https:\/\/caniuse.com\/#feat=css-filters\">CSS filters<\/a> &#8211; Applied in Interactions<\/li>\n<li><a href=\"https:\/\/caniuse.com\/#search=grid\">CSS grid<\/a> &#8211; Utilized in <strong>Style panel<\/strong> &gt; <strong>Layout<\/strong><\/li>\n<\/ul>\n<p>Webflow does not provide support for Internet Explorer. Although Webflow-created sites continue to back all standard features upheld in contemporary web browsers, compatibility with Internet Explorer is not guaranteed. <a href=\"https:\/\/webflow.com\/feature\/sunsetting-microsoft-internet-explorer-11-ie11-support\">Find out more about the abandonment of Internet Explorer support.<\/a><\/p>\n<h6><strong>Insider tip: <\/strong>You can identify your browser and OS version by visiting <a href=\"https:\/\/www.whatsmybrowser.org\/\">What\u2019s My Browser<\/a>.<\/h6>\n<h3>Designer prerequisites: compatible display resolutions<\/h3>\n<p>The Designer necessitates a device with a mouse and keyboard (e.g., desktop or laptop) possessing a screen width of <strong>at least 1268px<\/strong>. This width accounts for the left sidebar, the Designer canvas, and the right sidebar combined.<\/p>\n<h2>Structure of the Designer<\/h2>\n<p>The Designer includes the primary <strong>canvas<\/strong> and a collection of toolbars and panels. Keep reading for a summary of: <\/p>\n<ul role=\"list\">\n<li>The left toolbar and panels<\/li>\n<li>The canvas<\/li>\n<li>The top bar<\/li>\n<li>The bottom navigation breadcrumb bar<\/li>\n<li>The right panels<\/li>\n<\/ul>\n<h3>The left toolbar and panels<\/h3>\n<p>The left toolbar presents various links and tools allowing you to organize your website. The icons positioned at the top of the left toolbar can hide the majority of the Designer panels, which expand once clicked upon:<\/p>\n<ul role=\"list\">\n<li>Main menu<\/li>\n<li>Add panel<\/li>\n<li>Pages panel<\/li>\n<li>Navigator panel<\/li>\n<li>Components panel<\/li>\n<li>Variables panel<\/li>\n<li>Style selectors panel<\/li>\n<li>Assets panel<\/li>\n<li>CMS panel<\/li>\n<li>Logic panel<\/li>\n<li>Users panel<\/li>\n<li>Ecommerce panel<\/li>\n<li>Apps panel<\/li>\n<li>Site activity log <\/li>\n<li>Settings panel<\/li>\n<li>Help settings<\/li>\n<li>Audit panel<\/li>\n<li>Quick find <\/li>\n<li>Video tutorials panel<\/li>\n<\/ul>\n<h4>Main menu \u2014 Webflow logo<\/h4>\n<p>By selecting the Webflow icon, a dropdown menu emerges, allowing navigation to the Dashboard, Site settings for the currently viewed site, or the Editor. Additionally, the main menu offers: <\/p>\n<ul role=\"list\">\n<li>access to <strong>Quick find<\/strong><\/li>\n<li>undoing your last action<\/li>\n<li>redoing your last action<\/li>\n<li>exporting code<\/li>\n<li>viewing keyboard shortcuts <\/li>\n<li>activating <strong>CSS preview<\/strong><\/li>\n<li>getting assistance or providing feedback<\/li>\n<\/ul>\n<h4>Add panel \u2014 shortcut: A<\/h4>\n<p>The <strong>Add panel <\/strong>enables the incorporation of elements from the <strong>Elements<\/strong> tab or prebuilt layouts from the <strong>Layouts<\/strong> tab.<\/p>\n<\/div>\n<figure><img decoding=\"async\" src=\"https:\/\/webflow.tenten.co\/wp-content\/uploads\/2024\/04\/65f848929134160766ed5aab_intro20to20the20designer20-20220-20left20toolbar.webp\" loading=\"lazy\" title=\"65f848929134160766ed5aab_intro20to20the20designer20-20220-20left20toolbar\"><\/div>\n<\/figure>\n<h4>Configuration panel<\/h4>\n<p>The <strong>Configuration panel<\/strong> allows you to handle various configurations, such as <strong>Search settings<\/strong> and <strong>Backup settings<\/strong>, as well as <strong>Localization settings<\/strong>. In this section, you will also discover the <strong>User interface<\/strong> tab, where you can select your desired brightness setting for the Designer interface.<\/p>\n<h4>Assistance settings<\/h4>\n<p>Assistance settings give you tools to simplify your usage of the Designer.<\/p>\n<ul role=\"list\">\n<li><strong>Support and suggestions<\/strong> \u2014 enables you to explore Webflow help guides directly within the Designer. From here, you can also access the Webflow University guides, video courses, or the <a href=\"https:\/\/forum.webflow.com\/\">Webflow Forum<\/a>. You can also submit feedback or a support request.<strong>\u200d<\/strong><\/li>\n<li><strong>Keyboard shortcuts<\/strong> \u2014 displays keyboard shortcuts to enhance your design workflow in the Designer. You can also view these shortcuts by pressing <strong>Shift <\/strong>+<strong> \/<\/strong>.<strong>\u200d<\/strong><\/li>\n<li><strong>CSS preview <\/strong>\u2014 demonstrates the CSS created for the selected element on the canvas. This preview also enables you to copy the generated CSS for usage wherever you prefer.<\/li>\n<\/ul>\n<h4>Check panel \u2014 shortcut: U<\/h4>\n<p>The <strong>Check panel<\/strong> exhibits any prevalent accessibility-related issues on your site and gives recommendations for addressing them. Learn more about the Check panel.<\/p>\n<h4>Efficient search \u2014 shortcut: Command + E (on Mac) or Control + E (on Windows)<\/h4>\n<p><strong>Efficient search<\/strong> is a search tool that accelerates your workflow and enhances your effectiveness as you construct your site in Webflow. Learn more about Efficient search.<\/p>\n<h4>Educational videos panel<\/h4>\n<p>The <strong>Educational videos panel<\/strong> provides a practical way to view all of Webflow\u2019s complimentary video courses.<\/p>\n<figure><img decoding=\"async\" src=\"https:\/\/webflow.tenten.co\/wp-content\/uploads\/2024\/04\/65f848a0f5b9b229575ad057_intro20to20the20designer20-20320-20lower20left20toolbar.webp\" loading=\"lazy\" title=\"65f848a0f5b9b229575ad057_intro20to20the20designer20-20320-20lower20left20toolbar\"><\/div>\n<\/figure>\n<h3>The workspace <\/h3>\n<p>The most extensive area in the Designer is called the <strong>workspace<\/strong>. This is the place where you can interact with the page and design in real-time. You are able to choose elements, reposition them, and adjust content directly on the page. Learn more about the workspace.<\/p>\n<figure><img decoding=\"async\" src=\"https:\/\/webflow.tenten.co\/wp-content\/uploads\/2024\/04\/65f848ae48fe6dacbd8e324c_intro20to20the20designer20-20420-20canvas.webp\" loading=\"lazy\" title=\"65f848ae48fe6dacbd8e324c_intro20to20the20designer20-20420-20canvas\"><\/div>\n<\/figure>\n<h3>The upper section<\/h3>\n<p>The upper section offers another collection of display settings along with some beneficial tools for saving, publishing, and even exporting your site. Commencing from the left side, next to the menu button, and traversing across the screen to the right, you have the following set of tools:<\/p>\n<ul role=\"list\">\n<li>Locale overview<\/li>\n<li>Page indicator<\/li>\n<li>Adaptive breakpoints<\/li>\n<li>Team profile pictures<\/li>\n<li>Status mode<\/li>\n<li>Save status<\/li>\n<li>Code export<\/li>\n<li>Connotation<\/li>\n<li>Preview<\/li>\n<li>Sharing<\/li>\n<li>Publishing<\/li>\n<\/ul>\n<h4>Locale overview<\/h4>\n<p>The <strong>Locale overview<\/strong> demonstrates which location you are currently viewing and\/or editing. By clicking, the <strong>Locale overview<\/strong> dropdown permits you to choose and navigate to any secondary location(s) you have configured on your site. Learn more about Localization in Webflow.<\/p>\n<h4>Page indicator<\/h4>\n<p>The <strong>Page indicator<\/strong> reveals the page you are presently on. When clicked, the <strong>Page indicator<\/strong> unveils the <strong>Pages panel<\/strong>. <\/p>\n<figure><img decoding=\"async\" src=\"https:\/\/webflow.tenten.co\/wp-content\/uploads\/2024\/04\/65f84905e4b64056a2ffef25_intro20to20the20designer20-20520-20top20left.webp\" loading=\"lazy\" title=\"65f84905e4b64056a2ffef25_intro20to20the20designer20-20520-20top20left\"><\/div>\n<\/figure>\n<h4>Adaptive breakpoints<\/h4>\n<p>The <strong>Adaptive breakpoint icons<\/strong> permit you to switch between different breakpoint views to preview and modify the appearance of your site on various device screen sizes. Learn more about adaptive breakpoints.<\/p>\n<figure><img decoding=\"async\" src=\"https:\/\/webflow.tenten.co\/wp-content\/uploads\/2024\/04\/65f84910556036c3dc32208c_intro20to20the20designer20-20620-20top20mid.webp\" loading=\"lazy\" title=\"65f84910556036c3dc32208c_intro20to20the20designer20-20620-20top20mid\"><\/div>\n<\/figure>\n<h4>Team profile pictures<\/h4>\n<p>The <strong>Team profile pictures<\/strong> exhibit any colleagues collaborating on the site with you in real-time. This may be displayed as a team quantity (e.g., \u201c2\u201d) if you and your colleagues are working on different pages of the site. You can tap the profile pictures or the quantity to view more specifics about which pages your colleagues are designing or editing. <\/p>\n<h4>Status mode <\/h4>\n<p>The <strong>Status mode<\/strong> dropdown suggests whether you are currently designing or editing. Clicking enables you to switch between design mode and edit mode, or generate a page branch for designing without affecting the main site.<\/p>\n<h4>Save status<\/h4>\n<p>The <strong>Save status<\/strong> demonstrates when your work is being saved \u2013 indicated with a gray \u201c<strong>rotating arrows<\/strong>\u201d icon- and when your work has been successfully saved \u2013 indicated with a green \u201c<strong>encircled checkmark<\/strong>\u201d icon.<\/p>\n<p>Your work in the Designer is automatically saved. You can also manually save your site by pressing <strong>Command <\/strong>+<strong> S<\/strong> in iOS or <strong>Control <\/strong>+<strong> S<\/strong> in Windows. Clicking the <strong>Save status<\/strong> will not save your site.<\/p>\n<h4>Code export <\/h4>\n<p>The <strong>Code export<\/strong> button enables you to export the code of the present site, prepared for download in a zip file. Learn more about code export. <\/p>\n<h4>Connotation<\/h4>\n<p>The \u201c<strong>connotation<\/strong>\u201d icon lets you enter comment mode to view and add comments on your design. Learn more about comment mode.<\/p>\n<h4>Preview <\/h4>\n<p>The Preview \u201c<strong>play<\/strong>\u201d icon allows you to switch between the preview and design modes of the Designer and enables you to preview how your site will appear and function when published. <\/p>\n<h6><strong>Note:<\/strong> Preview mode does not display custom code embeds or apply custom code functionality to your site preview. Any custom code scripts or embeds will take effect when the site is published or exported. Learn more about previewing custom code.<\/h6>\n<h4>Sharing<\/h4>\n<p>The <strong>Sharing<\/strong> button enables you to activate and share a preview link to the current page of the Designer with your acquaintances or the Webflow community when you require advice or design assistance. It also enables you to invite content editors to collaborate on your site. <\/p>\n<p>With a read-only link, anyone with the link can open and manipulate the layout and design of your site in the Designer. Changes cannot be made to your site when it&#8217;s opened in read-only mode \u2013 this mode is solely used for troubleshooting and exploration purposes. Learn more about sharing read-only links.<\/p>\n<p>Any content editors you invite can view your site and edit site content (e.g., text, links, images, products, and CMS content) or alter page settings in the Webflow Editor. Learn more about inviting content editors.<\/p>\n<h4>Publishing<\/h4>\n<p>The <strong>Publishing<\/strong> button enables you to select your publishing destination (i.e., which domains you want to publish to) and publish your modifications. Learn more about publishing.<\/p>\n<figure class=\"w-richtext-align-fullwidth w-richtext-figure-type-image\">\n<div><img decoding=\"async\" src=\"https:\/\/webflow.tenten.co\/wp-content\/uploads\/2024\/04\/65f848df51eeb4bf420b3fee_intro20to20the20designer20-20720-20top-right.webp\" loading=\"lazy\" title=\"65f848df51eeb4bf420b3fee_intro20to20the20designer20-20720-20top-right\"><\/div>\n<\/figure>\n<h3>The path indicator bar<\/h3>\n<p>The path indicator bar displays the hierarchical structure of the chosen element. It visualizes the element&#8217;s position among its parent elements (e.g., in the example below, the Body is the parent of the Section element) and allows for selecting any parent element by clicking its label in the bar.<\/p>\n<figure class=\"w-richtext-align-fullwidth w-richtext-figure-type-image\">\n<div><img decoding=\"async\" src=\"https:\/\/webflow.tenten.co\/wp-content\/uploads\/2024\/04\/65f848eab184b54765038bca_intro20to20the20designer20-20820-20navigation20breadcrumb20bar.webp\" loading=\"lazy\" title=\"65f848eab184b54765038bca_intro20to20the20designer20-20820-20navigation20breadcrumb20bar\"><\/div>\n<\/figure>\n<h3>The panels on the right-hand side<\/h3>\n<p>The trio of remaining panels located on the right side of the Designer interface offer intricate control over element styles, configurations, and actions: <\/p>\n<ul role=\"list\">\n<li>Styling panel<\/li>\n<li>Element configuration panel<\/li>\n<li>Action panel<\/li>\n<\/ul>\n<h4>Styling panel \u2014 abbreviation: S<\/h4>\n<p>The <strong>Styling panel<\/strong> is the area where all available CSS properties for the selected element are manageable. Input or select values in the appropriate fields to instantly apply styles to elements on the canvas. Find out more about the Styling panel.<\/p>\n<h4>Element configuration panel \u2014 abbreviation: D<\/h4>\n<p>The <strong>Element configuration panel<\/strong> provides access to various settings pertaining to the presently selected element.<\/p>\n<h4>Action panel \u2014 abbreviation: H<\/h4>\n<p>The <strong>Action panel<\/strong> enables the creation and application of interactions to the selected element. Discover more about Actions.<\/p>\n<figure class=\"w-richtext-align-fullwidth w-richtext-figure-type-image\">\n<div><img decoding=\"async\" src=\"https:\/\/webflow.tenten.co\/wp-content\/uploads\/2024\/04\/65f84920754def74796c6fef_intro20to20the20designer20-20920-20css20tabs.webp\" loading=\"lazy\" title=\"65f84920754def74796c6fef_intro20to20the20designer20-20920-20css20tabs\"><\/div>\n<\/figure>\n<h2>Collaboration for multiple users<\/h2>\n<p>Several teammates can simultaneously edit content within the Webflow Designer while one team member focuses on designing and structuring the website. Transitioning design control among team members and tracking their locations within the site in real-time facilitates a smooth design process. Learn more about collaboration in the Webflow Designer.<\/p>\n<h2>Advantages of the online nature of the Designer<\/h2>\n<p>Webflow opts for an online application approach because we believe that web design tools should allow for designing directly in the browser with instant results. Here are a few more reasons supporting Webflow as a hosted program rather than a downloadable one:<\/p>\n<ul role=\"list\">\n<li><strong>Real-time visualization (WYSIWYG)<\/strong> \u2014 every action in Webflow reflects directly on the website&#8217;s HTML and CSS. What you see in Webflow mirrors what will be seen upon site publication.<\/li>\n<li><strong>Rapid updates and enhancements<\/strong> \u2014 being a hosted application enables swift development, testing, and deployment of new features and fixes, ensuring users always access the latest version of Webflow without manual updates.<\/li>\n<li><strong>Enhanced collaboration<\/strong> \u2014 given the trend towards collaborative web design workflows, an online platform simplifies team-wide access and website editing.<\/li>\n<\/ul>\n<p>\u200d<\/p>\n","protected":false},"excerpt":{"rendered":"Learn your way around the Webflow Designer.","protected":false},"author":2,"featured_media":4591,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"om_disable_all_campaigns":false,"inline_featured_image":false,"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"csco_display_header_overlay":false,"csco_singular_sidebar":"","csco_page_header_type":"","footnotes":""},"categories":[287],"tags":[],"class_list":{"0":"post-4590","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"has-post-thumbnail","7":"category-getting-started","8":"cs-entry"},"acf":[],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/posts\/4590","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/comments?post=4590"}],"version-history":[{"count":0,"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/posts\/4590\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/media\/4591"}],"wp:attachment":[{"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/media?parent=4590"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/categories?post=4590"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/tags?post=4590"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}