
lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostr navigation et dolore magna aliqua.


George Apostolov

John Doe

Mark Dinn

<LiveDemoIframe src={"https://story-api.livedemo.ai/workspaces/62255d3d3304f17b8f5e2d03/stories/692a00bd243f01ed60a4e4db/preview?step=1&embed"}/>

 
<h2>Guide</h2>

<ol>
 <li>From the Webflow dashboard, click on the three dotted menu to view options.</li>
 <li>Select the Editor option.</li>
 <li>Alternatively, click on the gear icon that appears on hover to open settings.</li>
 <li>Select the Editor option from the top right.</li>
 <li>Or, from inside the Webflow editor, on the top right. You can toggle between Designing and Editing mode.</li>
 <li>Once you are inside the editing mode or the editor you can start making edits.</li>
 <li>Being in the editing mode allows you to make simple content changes to quickly update your website. Hover over elements and click on the pencil icon to edit.</li>
 <li>Your changes will save.</li>
 <li>And you can view a list of unpublished changes.</li>
 <li>Publish your website using the Publish button to make your changes go live!</li>
</ol>

How To Access Webflow Editor

<LiveDemoIframe src={"https://story-api.livedemo.ai/workspaces/62255d3d3304f17b8f5e2d03/stories/692a014d243f01ed60a4f0e5/preview?step=1&embed"}/>

 
<h2>Guide</h2>

<ol>
 <li>Locate the image you wish to add a link to.</li>
 <li>Go to the Add Elements panel from the left sidebar menu.</li>
 <li>Under Basic blocks, locate the Link Block.</li>
 <li>You can either drag and drop this block on top of your image.</li>
 <li>Or use the Navigator panel from the left sidebar menu to make the image a child of the link (image should come under link).</li>
 <li>Verify that the Image is under the Link Block.</li>
 <li>Your image is now contained inside a link block. To edit link settings go to the Settings tab from the right sidebar menu.</li>
 <li>Customize your link URL and behavior.</li>
 <li>To test your link use the Preview button from the top.</li>
 <li>Your image will now contain a link you can click to open.</li>
</ol>

How To Add A Link To An Image In Webflow

<LiveDemoIframe src={"https://story-api.livedemo.ai/workspaces/62255d3d3304f17b8f5e2d03/stories/692a01dc243f01ed60a4fbb2/preview?step=1&embed"}/>

 
<h2>Guide</h2>

<ol>
 <li>Go to the Add elements section in the right sidebar menu.</li>
 <li>Search or locate Video under Media. Drag and drop on the desired location.</li>
 <li>Once you add the Video block, a small menu will pop-up allowing you to set the URL and title of the video. These settings can also be found in the right sidebar menu.</li>
 <li>Enter the URL of the video you wish to add. Press enter to fetch video.</li>
 <li>The Title is automatically fetched from the video but you can edit it to your liking.</li>
 <li>Consider using the various settings and options to further customize and position your video such as adding padding.</li>
 <li>You have successfully added a video in Webflow!</li>
</ol>

How To Add A Video To Webflow

<LiveDemoIframe src={"https://story-api.livedemo.ai/workspaces/62255d3d3304f17b8f5e2d03/stories/692a01f2243f01ed60a4fd57/preview?step=1&embed"}/>

 
<h2>Guide</h2>

<ol>
 <li>Open the Adobe Fonts website and click on your profile in the top right.</li>
 <li>Go to API Tokens.</li>
 <li>If you do not already have an API Token you can create one by clicking on the Make me a new API token button.</li>
 <li>Copy your API Token.</li>
 <li>Now head to your Webflow Dashboard and go to Apps &amp; Integration from the left sidebar menu.</li>
 <li>On the top is the Adobe Fonts section, enter the copied API Token here.</li>
 <li>Click Save.</li>
 <li>A notification will confirm the status.</li>
 <li><ul><li>Go back to the Adobe Fonts website and browse for the fonts you like. Click on the &lt;/&gt; icon to add them to a Web Project.</li><li>A Web Project is a collection of Adobe Fonts you can use to organize and use your fonts.</li></ul></li>
 <li>If you do not have a Web Project already created, you will be prompted on setting it up.</li>
 <li>Simply give your Web Project a name.</li>
 <li>Click on Create.</li>
 <li>Click on Done.</li>
 <li>You can now continue adding more fonts to this collection.</li>
 <li>Head back into the Webflow Dashboard and click on the three dotted icon to view options. Select Settings.</li>
 <li>Under these Site Settings, go to the Fonts tab from the left sidebar menu.</li>
 <li>Scroll down to the Adobe Fonts section, your newly created Web Projects should be visible below to select.</li>
 <li>Select your Web Project and click Save.</li>
 <li>Inside the Designer, to use these fonts, simply select the element to apply to and locate the Typography section in the right sidebar menu. Click on Font to view list.</li>
 <li>Your newly added adobe fonts should be available for use.</li>
</ol>

How To Add Adobe Fonts To Webflow

<LiveDemoIframe src={"https://story-api.livedemo.ai/workspaces/62255d3d3304f17b8f5e2d03/stories/692a022a243f01ed60a5016f/preview?step=1&embed"}/>

 
<h2>Guide</h2>

<ol>
 <li>Begin by selecting an element you wish to add animation to.</li>
 <li>Go to the Interactions tab on the right sidebar menu.</li>
 <li>Select a type of trigger for your animation.</li>
 <li>In this example we'll trigger an animation using a simple click. To do so, select Element trigger using the (+) icon next to it.</li>
 <li>Select Mouse click.</li>
 <li>Mouse click typically contains two options, what happens on first click and then the second click (usually used to reverse it). Click on Action.</li>
 <li>Select from any premade animations or create your own.</li>
 <li>Adjust your animation and click on Preview to see it in action.</li>
 <li>You can use the Preview mode on the top right to interact with it.</li>
 <li>You now have an animation on your button that will make it appear on click.</li>
</ol>

How To Add Animation In Webflow

<LiveDemoIframe src={"https://story-api.livedemo.ai/workspaces/62255d3d3304f17b8f5e2d03/stories/692a21ad0cf426949e6cd6fd/preview?step=1&embed"}/>

 
<h2>Guide</h2>

<ol>
 <li>Select the element or section you wish to apply a background image to.</li>
 <li>Go to the Style tab in the right sidebar menu.</li>
 <li>Scroll down to find Backgrounds and click to expand.</li>
 <li>Next to Image &amp; Gradient, click on the (+) icon to add an image.</li>
 <li>By default, a placeholder image will be applied. Click on Choose image to set your own image as the background.</li>
 <li>You can select the image from Assets as well. Simply click to apply.</li>
 <li>Explore more settings and options to set your background and you're done!</li>
</ol>

How To Add Background Image In Webflow

<LiveDemoIframe src={"https://story-api.livedemo.ai/workspaces/62255d3d3304f17b8f5e2d03/stories/692a2c95a98365d08656feaa/preview?step=1&embed"}/>

 
<h2>Guide</h2>

<ol>
 <li>Go to the Add Elements section in the left sidebar menu.</li>
 <li>Use the search bar or look under the Advanced section for Background Video.</li>
 <li>Once you add this to your section. A pop-up menu will open allowing you to upload a video, configure a few settings, all of which can also be found on the right sidebar menu.</li>
 <li>Configure options and upload a video to use as background for this section.</li>
 <li>You will notice the video in a small player once uploaded. Close this menu.</li>
 <li>You will now notice that this background element is taking up space in your section. To fix this, we will position it out of plane.</li>
 <li>On the right sidebar, under Position, locate the Position option.</li>
 <li>Change this to Absolute. This will fix the background element to its parent.</li>
 <li>Now that our background video is in the background, it still has no width.</li>
 <li>Go to the Size section in the right sidebar menu.</li>
 <li>Set Width to 100% for full width. Also consider modifying the height as required.</li>
 <li>Now that we have our background video, it is still not visible due to the section's own backgrounds. To change this, select the section.</li>
 <li>Locate the Background section at the bottom on the right sidebar menu and delete any existing backgrounds, gradients or images.</li>
 <li>You will notice your background video is now fully visible.</li>
 <li>Use the Webflow Preview to see your video play in the background on the live website.</li>
</ol>

How To Add Background Video In Webflow

<LiveDemoIframe src={"https://story-api.livedemo.ai/workspaces/62255d3d3304f17b8f5e2d03/stories/692a2cbaa98365d0865700b6/preview?step=1&embed"}/>

 
<h2>Guide</h2>

<ol>
 <li>Go to the Add Elements button on the left sidebar menu.</li>
 <li>Under the Elements tab and within the Basic section, look for List.</li>
 <li>Or simply search for it.</li>
 <li>Drag the list to where you wish to place it.</li>
 <li>Under the new pop up, select Bullets under Style.</li>
 <li>You now have bullet points in a list that you can edit and customize.</li>
</ol>

How To Add Bullet Points In Webflow

<LiveDemoIframe src={"https://story-api.livedemo.ai/workspaces/62255d3d3304f17b8f5e2d03/stories/692a2ccda98365d086570205/preview?step=1&embed"}/>

 
<h2>Guide</h2>

<ol>
 <li>Inside Calendly, create a new event or select the one you wish to insert or embed in your Webflow project.</li>
 <li>Click on the Share button.</li>
 <li>Go to Add to Website tab.</li>
 <li>Choose the best suited method for your use case. For our example, we will be using a simple Inline Embed.</li>
 <li>Select your choice and press Continue.</li>
 <li>Customize your embed settings.</li>
 <li>Copy the Embed Code.</li>
 <li>Now inside Webflow, drag the Embed block or Code Embed into the desired location.</li>
 <li>This will open an input field for the embed code. Paste the code copied from Calendly here.</li>
 <li>Click on Save or Save &amp; Close.</li>
 <li>Publish your project to see live changes.</li>
 <li>And you now have Calendly in your Webflow project.</li>
</ol>

How To Add Calendly To Webflow

<LiveDemoIframe src={"https://story-api.livedemo.ai/workspaces/62255d3d3304f17b8f5e2d03/stories/692a2cd1a98365d08657024d/preview?step=1&embed"}/>

 
<h2>Guide</h2>

<ol>
 <li>From your Webflow Dashboard, locate your project and click on the three dotted icon to view options.</li>
 <li>Click on Settings.</li>
 <li>Go to the SEO section from the left sidebar menu.</li>
 <li>Scroll down to find the Global canonical tag section.</li>
 <li>Enter your global canonical URL in the input field. This should match your domain name in a complete URL format.</li>
 <li>Click Save. You've now set a Global canonical tag URL for your site.</li>
</ol>

How To Add Canonical Tag In Webflow

<LiveDemoIframe src={"https://story-api.livedemo.ai/workspaces/62255d3d3304f17b8f5e2d03/stories/692a2d2e57f8f6cdddddd383/preview?step=1&embed"}/>

 
<h2>Guide</h2>

<ol>
 <li>From the Webflow dashboard locate your project thumbnail and click on the three dotted icon to view options.</li>
 <li>Click on Settings.</li>
 <li>From the left sidebar, navigate to the Custom code section.</li>
 <li>This page will contain different sections for head, body and footer.</li>
 <li><ul><li>CSS should be applied inside the head section using the &lt;style&gt; and &lt;/style&gt; tags.</li><li>Remember to not include the &lt;head&gt; and &lt;/head&gt; tags, the code inside the Head section is automatically included in the head.</li></ul></li>
 <li>Validate and save your changes. Note that all code applied here will be applied to all pages of your project.</li>
 <li>To apply CSS to a specific page, from inside the editor, go to the Pages tab in the left sidebar menu.</li>
 <li>Hover over the page name to reveal a small gear icon for settings. Click to open.</li>
 <li>Scroll to the bottom to find the Custom Code section. Click to expand.</li>
 <li><ul><li>Recall the same tips as before, CSS should be applied inside the head section using the &lt;style&gt; and &lt;/style&gt; tags.</li><li>Remember to not include the &lt;head&gt; and &lt;/head&gt; tags, the code inside the Head section is automatically included in the header.</li></ul></li>
 <li>Save your changes and publish your project to push them live.</li>
</ol>

How To Add CSS In Webflow

<LiveDemoIframe src={"https://story-api.livedemo.ai/workspaces/62255d3d3304f17b8f5e2d03/stories/692a2d3057f8f6cdddddd3b2/preview?step=1&embed"}/>

 
<h2>Guide</h2>

<ol>
 <li>From the Webflow dashboard locate your project thumbnail and click on the three dotted icon to view options.</li>
 <li>Click on Settings.</li>
 <li>From the left sidebar, navigate to the Custom code section.</li>
 <li>This page will contain different sections for head, body and footer. Enter your code depending on where it should be applied.</li>
 <li>Validate and save your changes. Note that all code applied here will be applied to all pages of your project.</li>
 <li>To apply code to a specific page, from inside the editor, go to the Pages tab in the left sidebar menu.</li>
 <li>Hover over the page name to reveal a small gear icon for settings. Click to open.</li>
 <li>Scroll to the bottom to find the Custom Code section.</li>
 <li><ul><li>This section will contain separate sections for head, body and footer. Enter and save your code in the appropriate location.</li><li>Most commonly, CSS is entered within the head tag and JS is entered before the &lt;/body&gt; tag.</li></ul></li>
 <li>Save your changes and publish your project to push them live.</li>
</ol>

How To Add Custom Code In Webflow

<LiveDemoIframe src={"https://story-api.livedemo.ai/workspaces/62255d3d3304f17b8f5e2d03/stories/692a2db7d673bd5aa8e5f6c5/preview?step=1&embed"}/>

 
<h2>Guide</h2>

<ol>
 <li>From your Webflow Dashboard, click on the three dotted icon to view options.</li>
 <li>Click on Settings.</li>
 <li>Go to the Apps &amp; Integrations section.</li>
 <li>Scroll down to the Meta (previously Facebook) Pixel section.</li>
 <li>Enter your Meta Pixel ID.</li>
 <li>Consider enabling Delay for cookie consent and adding a cookie consent in your project to be GDPR compliant</li>
 <li>Click on Save on the top right.</li>
 <li>A pop-up will confirm your changes are saved.</li>
 <li>Publish your project to push changes.</li>
</ol>

How To Add Facebook Pixel To Webflow

<LiveDemoIframe src={"https://story-api.livedemo.ai/workspaces/62255d3d3304f17b8f5e2d03/stories/692a2e04d673bd5aa8e5fdc5/preview?step=1&embed"}/>

 
<h2>Guide</h2>

<ol>
 <li>Visit the Google Fonts website and go to the Icons section.</li>
 <li>Locate the fonts download link.</li>
 <li>Go to the fonts folder.</li>
 <li>Click on the file variant you wish to download.</li>
 <li>Click on the Download raw file button.</li>
 <li>Now, inside the Webflow dashboard, click on the three dotted icon on your project thumbnail for options.</li>
 <li>Click on Settings.</li>
 <li>Go to the Fonts section from the left sidebar menu.</li>
 <li>Scroll to Custom fonts and upload your icon font file.</li>
 <li>Enter a name for the file and click Upload.</li>
 <li>Once uploaded, your new font should appear under Installed fonts.</li>
 <li>Inside the designer, go to the button you wish to add an icon to.</li>
 <li>From the right sidebar menu, change its font from under the Typography section.</li>
 <li>Select our new Google Icons Font.</li>
 <li>Back inside Google Fonts, find or search for the icon you wish to use.</li>
 <li>Copy the icon name within the span tags.</li>
 <li>Select the text area in the button and enter the text for the icon.</li>
 <li>You now have a button with an icon in Webflow. Since this icon is technically a text you can also edit it as such using colors, sizes, etc.</li>
</ol>

How To Add Icon To Button Webflow

<LiveDemoIframe src={"https://story-api.livedemo.ai/workspaces/62255d3d3304f17b8f5e2d03/stories/692a2e07d673bd5aa8e5fe33/preview?step=1&embed"}/>

 
<h2>Guide</h2>

<ol>
 <li>From your Webflow dashboard, click on the three dotted icon to view options.</li>
 <li>Click on Settings.</li>
 <li>Scroll to the Icons section. You can upload and save your Favicon and Webclip icons here.</li>
 <li>Click on the Upload button to select an image.</li>
 <li>Upon uploading, your new icon will be immediately saved.</li>
 <li>Use the Publish button to make your changes go live.</li>
</ol>

How To Add Icons In Webflow

<LiveDemoIframe src={"https://story-api.livedemo.ai/workspaces/62255d3d3304f17b8f5e2d03/stories/692a2e0cd673bd5aa8e5feb1/preview?step=1&embed"}/>

 
<h2>Guide</h2>

<ol>
 <li>Go to the Add Elements tab from the side menu.</li>
 <li>Scroll to the Media section or simply search for the Image element.</li>
 <li>Drag the image element to where you wish to place it.</li>
 <li>This will place an image element with a placeholder and open a pop-up menu for Image Settings. These settings can also be found on the right sidebar menu.</li>
 <li>You can select an image to replace the default placeholder by clicking on Choose image.</li>
 <li>This will open the Assets menu to allow you to make a selection. Note that you can also directly drag images from the Assets menu or your system to upload.</li>
 <li>You have successfully added an image in Webflow.</li>
</ol>

How To Add Image In Webflow

<LiveDemoIframe src={"https://story-api.livedemo.ai/workspaces/62255d3d3304f17b8f5e2d03/stories/692a2e29d673bd5aa8e6012c/preview?step=1&embed"}/>

 
<h2>Guide</h2>

<ol>
 <li>From the Webflow dashboard locate your project thumbnail and click on the three dotted icon to view options.</li>
 <li>Click on Settings.</li>
 <li>From the left sidebar, navigate to the Custom code section.</li>
 <li>This page will contain different sections for head, body and footer. Although you may add JavaScript code inside the head, it can slow your page load times. Instead it is recommended to add it in the body section.</li>
 <li><ul><li>Scroll down to find the section that says Add code before &lt;/body&gt; tag and enter your code.</li><li>Make sure you wrap your code inside the &lt;script&gt; and &lt;/script&gt; tags.</li><li>Do not include the &lt;body&gt; and &lt;/body&gt; tags, your code is automatically placed inside them.</li></ul></li>
 <li>Validate and save your changes. Note that all code applied here will be applied to all pages of your project.</li>
 <li>To apply JavaScript to a specific page, from inside the editor, go to the Pages tab in the left sidebar menu.</li>
 <li>Hover over the page name to reveal a small gear icon for settings. Click to open.</li>
 <li>Scroll to the bottom to find the Custom Code section. Click to expand.</li>
 <li><ul><li>Note that although you can add JavaScript to the head section of your page, it can increase the load time for your page.</li><li>Instead, it is recommended to add scripts before the &lt;/body&gt; tag, for which you may scroll down to the Before the &lt;/body&gt; tag section.</li></ul></li>
 <li><ul><li>Embed your JavaScript code inside this section for best performance.</li><li>Make sure you wrap your code inside the &lt;script&gt; and &lt;/script&gt; tags.</li><li>Do not include the &lt;body&gt; and &lt;/body&gt; tags, your code is automatically placed inside them.</li></ul></li>
 <li>Save your changes and publish your project to see them live.</li>
</ol>

How To Add JavaScript To Webflow

<LiveDemoIframe src={"https://story-api.livedemo.ai/workspaces/62255d3d3304f17b8f5e2d03/stories/692a2e92d673bd5aa8e60841/preview?step=1&embed"}/>

 
<h2>Guide</h2>

<ol>
 <li>From your editor, go to the Pages section on your left sidebar menu.</li>
 <li>On the top of the Pages tab, click on the Create New Page icon.</li>
 <li>This will open up your new page settings. Configure and click on Create.</li>
 <li>You just created a blank new page in Webflow.</li>
</ol>

How To Add Pages In Webflow

<LiveDemoIframe src={"https://story-api.livedemo.ai/workspaces/62255d3d3304f17b8f5e2d03/stories/692a2ed0d673bd5aa8e60df8/preview?step=1&embed"}/>

 
<h2>Guide</h2>

<ol>
 <li>To begin, go to the Add Elements section on the left sidebar menu.</li>
 <li>Locate or search for the Slider element.</li>
 <li>Drag the slider out and drop where you wish to place it.</li>
 <li>When your slider is inserted, it will open a pop-up menu for settings.</li>
 <li>Some important settings include the Auto-play feature, duration and animations.</li>
 <li>You can click on the Show All Settings button at the bottom to view more options.</li>
 <li>This will simply take you to the Settings tab on the right sidebar menu.</li>
 <li>Under the Slider settings section you can add more slides.</li>
 <li>You can use the arrows to slide between your slides or use the list option to select a specific slide.</li>
 <li>To insert any content inside a slide, simply navigate to the content such as Assets for Images.</li>
 <li>Find a picture you like and drag it to the current slide.</li>
 <li>This will insert the image onto the slide. You can also add images as a background for more control over its appearance.</li>
 <li>Just like any other element, the image in the slider can be adjusted in size and dimensions via the Style tab on the right sidebar menu.</li>
 <li>You can also use the numbered buttons to switch between slides from the designer.</li>
 <li>Slides support all forms of content including text, videos, images, etc.</li>
 <li>All elements are inserted in the same way, simply locate, drag and drop.</li>
 <li>We now have a text heading on another slide. Continue exploring and customizing your slider to shape it however you wish!</li>
</ol>

How To Add Slider In Webflow

<LiveDemoIframe src={"https://story-api.livedemo.ai/workspaces/62255d3d3304f17b8f5e2d03/stories/692a2f02d673bd5aa8e612f1/preview?step=1&embed"}/>

 
<h2>Guide</h2>

<ol>
 <li>Go to the Add Element button on the left sidebar.</li>
 <li>You can either search for specific text blocks such as headings, text areas, text blocks etc. or find most of them under the Typography section.</li>
 <li>The simplest way to add text is a Text Block. Simply drag the block on to the site where you wish to place it.</li>
 <li>You can now edit your block and add some text as you wish.</li>
 <li>You've now added and modified text to your project.</li>
</ol>

How To Add Text In Webflow

<LiveDemoIframe src={"https://story-api.livedemo.ai/workspaces/62255d3d3304f17b8f5e2d03/stories/692a2f6dd673bd5aa8e61a92/preview?step=1&embed"}/>

 
<h2>Guide</h2>

<ol>
 <li>Select the element you wish to add an animation to.</li>
 <li>Go to the Interactions tab from the right sidebar menu.</li>
 <li>Choose a trigger method for your animation using the (+) icon next to it.</li>
 <li>Select the type such as on Page load.</li>
 <li>Choose an Action based on when you want it to trigger.</li>
 <li>To create your own animation, select Start an animation.</li>
 <li>To create a new one not already in the list, click on the Add an animation (+) icon next to Timed Animations.</li>
 <li>Enter a name for your animation.</li>
 <li>Now, select the specific element you wish to add an animation to.</li>
 <li>With your element selected, click on the (+) icon next to Actions.</li>
 <li>Select the Type of action such as Rotate.</li>
 <li>Ensure you have the correct element or class selected.</li>
 <li>For our rotate example, control the axis on which you wish to rotate such as Z to rotate in-plane.</li>
 <li>You can view a preview on your animation on your canvas.</li>
 <li>Since we want our element to rotate and then also return to the original position, we can continue adding multiple animations together. To start, we simply duplicate the first animation using the right click menu.</li>
 <li>We set all axes back to default position at 0 deg.</li>
 <li>Now we have a custom animation with two steps on page load. It first will rotate to 90 deg and then return back to 0 deg. Save to continue.</li>
 <li>Use the Preview button to see your animation in action!</li>
</ol>

How To Animate In Webflow

<LiveDemoIframe src={"https://story-api.livedemo.ai/workspaces/62255d3d3304f17b8f5e2d03/stories/692a2fb4d673bd5aa8e623f5/preview?step=1&embed"}/>

 
<h2>Guide</h2>

<ol>
 <li>From your 'Zapier' dashboard, select 'Zap'.</li>
 <li>Click on the 'Trigger' field to select the event.</li>
 <li>Search and select 'Webflow' as your trigger app.</li>
 <li>Select 'Updated Order' as your trigger event.</li>
 <li>Connect your Webflow account.</li>
 <li>Select the site that you would like to receive notifications from and click 'Continue'.</li>
 <li>Click 'Test trigger'.</li>
 <li>Search and select 'Notion' as the action app.</li>
 <li>Select an action event.</li>
 <li>Connect your Dropbox account.</li>
 <li>Configure the action details and click 'Continue'.</li>
 <li>Click 'Test step'.</li>
 <li>Once the test is successful, click 'Publish'.</li>
</ol>

How to Automate Webflow Backups to Dropbox Through Zapier

<LiveDemoIframe src={"https://story-api.livedemo.ai/workspaces/62255d3d3304f17b8f5e2d03/stories/692a2fb5d673bd5aa8e6242a/preview?step=1&embed"}/>

 
<h2>Guide</h2>

<ol>
 <li>From your 'Zapier' dashboard, select 'Zap'.</li>
 <li>Click on the 'Trigger' field to select the event.</li>
 <li>Search and select 'Airtable' as your trigger app.</li>
 <li>Select a trigger event.</li>
 <li>Connect your Airtable account.</li>
 <li>Configure the event details and click 'Continue'.</li>
 <li>Click 'Test trigger'.</li>
 <li>Search and select 'Webflow' as the action app.</li>
 <li>Click 'Create Item'.</li>
 <li>Connect your Webflow account.</li>
 <li>Configure the action details and click 'Continue'.</li>
 <li>Click 'Test step'.</li>
 <li>Once the test is successful, click 'Publish'.</li>
</ol>

How to Automate Webflow Collections from Airtable with Zapier

<LiveDemoIframe src={"https://story-api.livedemo.ai/workspaces/62255d3d3304f17b8f5e2d03/stories/692a3098d673bd5aa8e634e7/preview?step=1&embed"}/>

 
<h2>Guide</h2>

<ol>
 <li>Go to the Add Elements section in the left sidebar menu.</li>
 <li>Search or locate Button from elements and drag onto the place you wish to place it.</li>
 <li>Note that buttons are simply another element in your body. To center a button is the same as most other elements.</li>
 <li>To center children inside a parent div. Select the div or section.</li>
 <li>Locate the Layout section under the Style tab from the right sidebar menu. Using Flexbox is one of the simpler ways to center items inside a section. To select, click on Flex.</li>
 <li>Next to Align, select the center position from the selection box or manually from the axes.</li>
 <li>Notice that all the elements inside the div are now centered.</li>
 <li>Use the right sidebar menu to further fine-tune its position and settings such as padding.</li>
 <li>You now have a centered button.</li>
</ol>

How To Center A Button In Webflow

<LiveDemoIframe src={"https://story-api.livedemo.ai/workspaces/62255d3d3304f17b8f5e2d03/stories/692a309bd673bd5aa8e63522/preview?step=1&embed"}/>

 
<h2>Guide</h2>

<ol>
 <li>First, add a container element such as Div Block to hold your image. This allows you to apply properties to a parent element instead of the image directly.</li>
 <li>Drop the Div Block at your desired location.</li>
 <li>Add your image inside of the Div.</li>
 <li>You'll notice that the image added simply takes up the space of the Div as it has no customization yet. Also that some display properties do not work on Images directly, which is why we use a Div Block.</li>
 <li>Use the Navigator from the left sidebar to select your Div containing the image.</li>
 <li>On the right sidebar menu, expand the Size section.</li>
 <li>Make the width of the Div Block to be 100% for full width or pick your own value.</li>
 <li>Notice the Div size has increased which will now allow us to position the image inside this space.</li>
 <li><ul><li>One of the easiest ways to center your image is to use Flex. </li><li>Under the Layout tab on the right sidebar menu, select Flex.</li></ul></li>
 <li><ul><li>You will notice a position control box you can modify or use the XY axes options to manually set the child (image) position.</li><li>Click in the center to position your image in the center of the parent Div Block.</li></ul></li>
 <li>Note that for our example, only the X axis must be centered but for more images both axes will come into effect.</li>
 <li>And you have successfully centered an image in Webflow!</li>
</ol>

How To Center An Image In Webflow

<LiveDemoIframe src={"https://story-api.livedemo.ai/workspaces/62255d3d3304f17b8f5e2d03/stories/692a30f4d673bd5aa8e63c43/preview?step=1&embed"}/>

 
<h2>Guide</h2>

<ol>
 <li>Go to your account Dashboard in Webflow.</li>
 <li>Click on the three dotted menu on your project thumbnail for options.</li>
 <li>Click on Settings.</li>
 <li>Under Icons, locate the Favicon section and click on Upload.</li>
 <li>Your Favicon will be uploaded and saved.</li>
 <li>From the top right corner, click on Publish.</li>
 <li>Click on Publish to selected domains to make your changes go live.</li>
 <li>Your favicon has been applied to your project.</li>
</ol>

How To Change Favicon In Webflow

<LiveDemoIframe src={"https://story-api.livedemo.ai/workspaces/62255d3d3304f17b8f5e2d03/stories/692a3111d673bd5aa8e63ebd/preview?step=1&embed"}/>

 
<h2>Guide</h2>

<ol>
 <li>Select the element you wish to change color on hover.</li>
 <li>Go to the Style tab on the right sidebar menu.</li>
 <li>Click on the dropdown menu for the Style selector.</li>
 <li>Under States, select Hover.</li>
 <li>Verify you are editing the Hover state.</li>
 <li>Scroll down to the Color settings under Typography for text elements.</li>
 <li>Pick a color for hover state.</li>
 <li>You can test these changes from the Preview option on the top.</li>
 <li>Your element will have its regular color by default.</li>
 <li>And will change into the new color upon hover.</li>
</ol>

How To Change Hover Color In Webflow

<LiveDemoIframe src={"https://story-api.livedemo.ai/workspaces/62255d3d3304f17b8f5e2d03/stories/692a3130d673bd5aa8e64131/preview?step=1&embed"}/>

 
<h2>Guide</h2>

<ol>
 <li>Inside your Webflow editor, use the Navigator to select the section you wish to edit properties for.</li>
 <li>Or simply click on the element to select.</li>
 <li>On the right side, go to the Style tab.</li>
 <li>Scroll down to the Typography section and click to expand.</li>
 <li><ul><li>Next to Size, the Height property is what we wish to edit for Line height.</li><li>Click on the unit (PX) to view options.</li></ul></li>
 <li>For this example, we will use the (-) or unitless. This functions as a basic multiplier which is great for responsive design.</li>
 <li>Enter a value directly or use your arrow keys to increment slowly and you're done! You have set a custom line height for your selection in Webflow.</li>
</ol>

How To Change Line Spacing In Webflow

<LiveDemoIframe src={"https://story-api.livedemo.ai/workspaces/62255d3d3304f17b8f5e2d03/stories/692a3210ab56e05a00fd5930/preview?step=1&embed"}/>

 
<h2>Guide</h2>

<ol>
 <li>Go to the Pages section from the left sidebar menu.</li>
 <li>Hover on the page you wish to change the open graph for and click on the small gear icon for settings.</li>
 <li>Scroll down until you find the Open Graph Settings.</li>
 <li>You can view the changes to your Open Graph inside the preview as you make changes below.</li>
 <li>To set or change the open Graph Image, you need a URL / link to an image file.</li>
 <li>You can find your own image and its link or use the assets in your Webflow project. To use them, go to the Assets section in the right sidebar menu.</li>
 <li>Hover on the image of your choice and then click on the small gear icon that appears.</li>
 <li>A pop-up window will open, click on the small chain icon to copy the link to the image file.</li>
 <li>Paste that link inside the Open Graph Image URL field.</li>
 <li>Verify the preview of your Open Graph settings.</li>
 <li>Click on Save and you've changed the Open Graph Image for your page!</li>
</ol>

How To Change Open Graph Image Webflow

<LiveDemoIframe src={"https://story-api.livedemo.ai/workspaces/62255d3d3304f17b8f5e2d03/stories/692a3224ab56e05a00fd5af0/preview?step=1&embed"}/>

 
<h2>Guide</h2>

<ol>
 <li>Select the element, section or div you wish to change the property for.</li>
 <li>In the right sidebar menu, locate Position.</li>
 <li>At the bottom of this section you will find the Relative to value, typically showing a marker icon in the center with the word itself. Hover on it to see the exact element highlighted.</li>
 <li>This crosshair icon shows the center of the highlighted parent element which what the selected element is Relative to.</li>
 <li>In order to change this, we need to note that the Position: Relative property takes its Relative to: position from the first parent element with a Relative position. So, to change this property we must change which parent element has the relative property.</li>
 <li>Select the parent element you wish to set as relative to.</li>
 <li>In the right sidebar menu, notice the Position is not set to relative.</li>
 <li>Change it to Relative.</li>
 <li>Your original element should now use its much closer parent element as its reference. To confirm this, select the original element again.</li>
 <li>In the right sidebar menu, under Position, hover on the same Relative to property.</li>
 <li>You will now notice that the highlighted element has now changed to the closer parent element.</li>
</ol>

How To Change Relative To In Webflow

<LiveDemoIframe src={"https://story-api.livedemo.ai/workspaces/62255d3d3304f17b8f5e2d03/stories/692a328eab56e05a00fd633a/preview?step=1&embed"}/>

 
<h2>Guide</h2>

<ol>
 <li>Begin by navigating to your Webflow Dashboard.</li>
 <li>Locate the thumbnail of your project and click on the three dotted icon to view options.</li>
 <li>Select Settings.</li>
 <li>Go to the Publishing tab from the left sidebar menu.</li>
 <li>Scroll down to find the Production section for your live project and locate the domain names listed below.To add more domains to this list please refer to how to add a custom domain to Webflow.</li>
 <li>Locate the Make default button next to any domain name that is not currently the default. Simply click and verify to change your domain name.</li>
 <li>Your now default domain name will now display the Default tag next to its name.</li>
</ol>

How To Change Webflow Domain Name

<LiveDemoIframe src={"https://story-api.livedemo.ai/workspaces/62255d3d3304f17b8f5e2d03/stories/692a32ebab56e05a00fd6adb/preview?step=1&embed"}/>

 
<h2>Guide</h2>

<ol>
 <li>Go to the Dashboard section in your Webflow account.</li>
 <li>Locate your project thumbnail and click on the three dotted icon for options.</li>
 <li>Click on Duplicate.</li>
 <li>Select the settings you wish to copy over to the new clone and click Duplicate Site.</li>
 <li>You will receive a notification about your project being duplicated. You will be notified by email when it is ready. </li>
 <li>And your project will be cloned.</li>
</ol>

How To Clone A Webflow Website

<LiveDemoIframe src={"https://story-api.livedemo.ai/workspaces/62255d3d3304f17b8f5e2d03/stories/692a3385ab56e05a00fd7b77/preview?step=1&embed"}/>

 
<h2>Guide</h2>

<ol>
 <li>From your Webflow Dashboard, locate the project for which you wish to add the domain. Click on the three dotted icon for options.</li>
 <li>Select Settings.</li>
 <li>From your left sidebar menu (or in some cases at the top), go to the Publishing section.</li>
 <li>Under Custom Domains, click on Add a Custom Domain.</li>
 <li>Enter your domain name and click on Add Domain.</li>
 <li>Webflow may automatically detect your DNS provider and offer an easier method to connect your domain. But, we will be choosing to Connect manually for better clarity.</li>
 <li>Once you proceed manually, you will see a list of A Records, TXT Records and below a section for CNAME Records. Note these down or keep them available for the following steps.</li>
 <li>For this demo we will be using the Godaddy platform but the steps may be similar for your DNS provider. It is recommended to visit the Webflow documentation for detailed steps on integrating with each DNS provider.</li>
 <li>Inside the GoDaddy dashboard, go to My Products.</li>
 <li>Find the domain you wish to add and click on DNS.</li>
 <li>You should now be inside DNS Management with a list of records.</li>
 <li>Make sure you do not have any existing A records with the name "@" or CNAME records with the name "www". If you do, delete those records.</li>
 <li>Now, click on the Add New Record button to create new records.</li>
 <li>Under Type, select "A".</li>
 <li>Under Type, select "@".</li>
 <li><ul><li>Under Value, enter the first IP visible on your Webflow domain page.</li><li>Generally: 75.2.70.75</li></ul></li>
 <li>Click on Add another value.</li>
 <li><ul><li>Enter the second IP given on the Webflow domain setup page.</li><li>Generally: 99.83.190.102</li></ul></li>
 <li>Click Save.</li>
 <li>Now, for adding a CNAME record, add a new record.</li>
 <li><ul><li>Select Type: CNAME, Name: www and the Value given on your Webflow domain setup page.</li><li>Generally: proxy-ssl.webflow.com</li></ul></li>
 <li>Click Save.</li>
 <li>You should now have:<ul><li>A record with name "@" and first IP.</li><li>A record with name "@" and second IP.</li><li>CNAME record with name "www" and the value.</li><li>Optionally if required, a TXT record with your verification code as the value.</li></ul>And your domain should now be configured.</li>
 <li>Back to Webflow, ensure you select the www.domainname.com form as the default using the Make Default option. This is to ensure your domainname.com translates into www.domainname.com.</li>
 <li>You can now click on Check Status or Verify Domain to see if your domain has been configured correctly.</li>
 <li>If everything has been done correctly, you will see a status symbol as Connected. If so, your website is ready to use.</li>
 <li>Your new domain should now be visible under Publish. Select it to push changes to the live website.</li>
</ol>

How To Connect Domain To Webflow

<LiveDemoIframe src={"https://story-api.livedemo.ai/workspaces/62255d3d3304f17b8f5e2d03/stories/692a33a2ab56e05a00fd7e5f/preview?step=1&embed"}/>

 
<h2>Guide</h2>

<ol>
 <li>From your Webflow Dashboard, locate the project for which you wish to add the domain. Click on the three dotted icon for options.</li>
 <li>Select Settings.</li>
 <li>From your left sidebar menu (or in some cases at the top), go to the Publishing section.</li>
 <li>Under Custom Domains, click on Add a Custom Domain.</li>
 <li>Enter your domain name and click on Add Domain.</li>
 <li>Webflow may detect that your domain is from GoDaddy and offer an easier option. But, we will be choosing to Connect manually for better clarity.</li>
 <li>Once you proceed manually, you will see a list of A Records and below a section for CNAME Records. Note these down or keep them available for the following steps.</li>
 <li>Now, go to My Products in your GoDaddy account.</li>
 <li>Find the domain you wish to add and click on DNS.</li>
 <li>You should now be inside DNS Management with a list of records.</li>
 <li>Make sure you do not have any existing A records with the name "@" or CNAME records with the name "www". If you do, delete those records.</li>
 <li>Now, click on the Add New Record button to create new records.</li>
 <li>Under Type, select "A".</li>
 <li>Under Type, select "@".</li>
 <li><ul><li>Under Value, enter the first IP visible on your Webflow domain page.</li><li>Generally: 75.2.70.75</li></ul></li>
 <li>Click on Add another value.</li>
 <li><ul><li>Enter the second IP given on the Webflow domain setup page.</li><li>Generally: 99.83.190.102</li></ul></li>
 <li>Click Save.</li>
 <li>Now, for adding a CNAME record, add a new record.</li>
 <li><ul><li>Select Type: CNAME, Name: www and the Value given on your Webflow domain setup page.</li><li>Generally: proxy-ssl.webflow.com</li></ul></li>
 <li>Click Save.</li>
 <li>You should now have:<ul><li>A record with name "@" and first IP.</li><li>A record with name "@" and second IP.</li><li>CNAME record with name "www" and the value.</li></ul>Your GoDaddy domain is now configured.</li>
 <li>Back to Webflow, ensure you select the www.domainname.com form as the default using the Make Default option. This is to ensure your domainname.com translates into www.domainname.com.</li>
 <li>You can now click on check status to see if your domain has been configured correctly.</li>
 <li>If everything has been done correctly, you will see a status symbol as Connected. If so, your website is ready to use.</li>
 <li>Your new domain should now be visible under Publish. Select it to push changes to the live website.</li>
</ol>

How To Connect Godaddy Domain To Webflow

<LiveDemoIframe src={"https://story-api.livedemo.ai/workspaces/62255d3d3304f17b8f5e2d03/stories/692a33afab56e05a00fd7f69/preview?step=1&embed"}/>

 
<h2>Guide</h2>

<ol>
 <li>Begin by navigating to the Google Analytics page, if not already set up you will be met with a Start measuring button to get started.</li>
 <li>Enter a name for your account.</li>
 <li>Scroll down and click on Next.</li>
 <li>Enter a name and other details for your Google Analytics 4 property and click Next.</li>
 <li>Describe your business and click Next.</li>
 <li>Pick the best options for your use case and click on Create.</li>
 <li>Accept the terms by clicking on I Accept to begin using your GA Account.</li>
 <li>For our Webflow project, select Web as a platform.</li>
 <li>Enter the URL for your project and a name for your analytics stream and then click on Create &amp; continue on the top right.</li>
 <li>You will now have the option to set up your Google tags, although you can still use the manual option to add it to your Webflow project using the custom code feature, we will be using the G-ID. To find your ID, close this window.</li>
 <li>Click on your stream listing.</li>
 <li>Under Stream details, copy the Measurement ID.</li>
 <li>Close the menu and click on Next.</li>
 <li>Now your setup is complete, click on Continue to go to Home.</li>
 <li>You will now gather data which will be visible here.</li>
 <li>Now back into Webflow, go to your Dashboard.</li>
 <li>Locate your project and click on the three dotted icon for more options.</li>
 <li>Select Settings.</li>
 <li>Go to the Apps &amp; Integrations section from the left sidebar menu.</li>
 <li>Locate the Google Analytics section and the Measurement ID field under it.</li>
 <li>Paste your Measurement ID that you previously copied here and click on Save.</li>
 <li>A pop-up will verify your changes have been saved.</li>
 <li>You can now publish your project to push all changes to live to begin collecting data and analytics which will reflect in your Google Analytics Dashboard.</li>
</ol>

How To Connect Google Analytics To Webflow

<LiveDemoIframe src={"https://story-api.livedemo.ai/workspaces/62255d3d3304f17b8f5e2d03/stories/692a3553ab56e05a00fd9c12/preview?step=1&embed"}/>

 
<h2>Guide</h2>

<ol>
 <li>Click on the 'Trigger' field to select the event.</li>
 <li>Search and select 'Webflow' as your trigger app.</li>
 <li>Select a trigger event.</li>
 <li>Connect your Webflow account.</li>
 <li>Map your trigger details and click 'Continue'.</li>
 <li>Click 'Test trigger'.</li>
 <li>Search and select 'HubSpot' as the action app.</li>
 <li>Select an action event.</li>
 <li>Connect your HubSpot account.</li>
 <li>Configure the action details and click 'Continue'.</li>
 <li>Click 'Test step'.</li>
 <li>Once the test is successful, click 'Publish'.</li>
</ol>

How to Connect Webflow Forms to HubSpot CRM using Zapier

<LiveDemoIframe src={"https://story-api.livedemo.ai/workspaces/62255d3d3304f17b8f5e2d03/stories/692a3554ab56e05a00fd9c47/preview?step=1&embed"}/>

 
<h2>Guide</h2>

<ol>
 <li>From your 'Zapier' dashboard, select 'Zap'.</li>
 <li>Click on the 'Trigger' field to select the event.</li>
 <li>Search and select 'Webflow' as your trigger app.</li>
 <li>Select 'Updated Order' as your trigger event.</li>
 <li>Connect your Webflow account.</li>
 <li>Select the site that you would like to receive notifications from and click 'Continue'.</li>
 <li>Click 'Test trigger'.</li>
 <li>Search and select 'Stripe' as the action app.</li>
 <li>Select an action event.</li>
 <li>Connect your Stripe account.</li>
 <li>Configure the action details and click 'Continue'.</li>
 <li>Click 'Test step'.</li>
 <li>Once the test is successful, click 'Publish'.</li>
</ol>

How to Connect Webflow to Stripe for Payments with Zapier

<LiveDemoIframe src={"https://story-api.livedemo.ai/workspaces/62255d3d3304f17b8f5e2d03/stories/692a35eeab56e05a00fda733/preview?step=1&embed"}/>

 
<h2>Guide</h2>

<ol>
 <li>You can insert images directly in Webflow from the Assets tab or by adding an Image block. Both are identical. To use an asset image directly go to the Assets tab from the left sidebar menu.</li>
 <li>Drag any image you wish to where you want to place it and drop.</li>
 <li>You now have an image, or a populated image block. You can begin to resize this image in various ways. The simplest of which is by dragging its corner edge to resize it.</li>
 <li>Simply hold and shrink or expand the image.</li>
 <li>You have resized your image to your desired size.</li>
 <li>Another way to correctly and more accurately size your image is by using the Style tab on the right sidebar menu. Locate the Size section and adjust values and units.</li>
 <li>Enter the exact value for the units and press enter.</li>
 <li>Or click on the unit to change units to PX, %, etc. and that's it.</li>
</ol>

How To Correctly Size An Image Box On Webflow

<LiveDemoIframe src={"https://story-api.livedemo.ai/workspaces/62255d3d3304f17b8f5e2d03/stories/692a3616ab56e05a00fda950/preview?step=1&embed"}/>

 
<h2>Guide</h2>

<ol>
 <li>To begin creating a blog in Webflow, we'll use a powerful feature which is CMS. Open it via the right sidebar menu.</li>
 <li>Click on the small icon to Create New Collection.</li>
 <li>At this stage, you will define the type and structure for all your blogs. Which will then be used to create and fill blogs in the future. You can manually create fields you want your blog to have or use a preset.</li>
 <li>Using the Blog Posts preset, notice how Webflow automatically created fields for us. You can accept these as they are or customize further.</li>
 <li>Once ready, click on Create Collection.</li>
 <li>Once your collection is created, you will have the option to populate it using sample data. Click on Add 5 Items to auto-create 5 blogs.</li>
 <li>Note that even though we have sample data now, you can always create your own blogs using the button on the top right.</li>
 <li>Now that we have some blogs ready in our collections. Lets create a page to show them. To do so, go to the Pages tab on the left sidebar menu.</li>
 <li>Notice that you have a new category for pages in a different color under CMS Collection pages. These are dynamic pages for your collection items. To design our page for blogs, go to the Blog Posts Template.</li>
 <li>To begin, lets add a Heading for our blog. Locate the element and drag and drop.</li>
 <li>Once added, open settings and click on the small colored (+) icon next to the Text field.This symbol is used to connect the element to dynamic data which in our case is the Blog Posts data.</li>
 <li>Link this Heading element to the Blog Name.</li>
 <li>Notice how the heading has changed from the generic text to a Blog Posts heading. We'll repeat this process to connect all elements on the page with our blog.</li>
 <li>Lets also add an image.</li>
 <li>Repeat the same process using the (+) icon.</li>
 <li>Select Blog Image to fill.</li>
 <li>You can adjust the size of these images and all elements as normal via the Settings and Style tab on the right sidebar menu..</li>
 <li>Again, repeat the same process for all elements you wish to be dynamic.</li>
 <li>Now that we have our blogs, and the blog pages ready. Lets add a way to actually browse them. Go to the main page where you wish to add links to these pages.</li>
 <li>In our demo, we'll add them on the Home page.</li>
 <li>Go to the Add Elements tab on the left sidebar menu.</li>
 <li>Locate or search for the Collection List element.</li>
 <li>Drag and drop to insert.</li>
 <li>A collection list contains all items from a collection. Since we want our list to show our blogs, select Blogs as source.</li>
 <li>Your list will then show all items in Blog Posts, use the Settings tab to limit the list, adjust layout and other settings.</li>
 <li>You can also select if you want to cut-off your list with a different Start at value.</li>
 <li>You can now add elements in your Collection List. Designing one, affects all.</li>
 <li>Use the same steps as before to create dynamic content.</li>
 <li>Select the Blog Name for our Heading.</li>
 <li>And notice how all items now display different blog headings.</li>
 <li>Lets add a button next. Go to the second tab in your button settings to link it to a Collection Page which is the dynamic page that we designed previously.</li>
 <li>We now have a list of our blogs, pages for each of them and the content for each blog in a collection. All of this comes together to create a smooth experience.</li>
 <li>Use the Preview button on the top right to interact.</li>
 <li>Click on the button for any blog.</li>
 <li>And the corresponding blog will open up!</li>
</ol>

How To Create A Blog In Webflow

<LiveDemoIframe src={"https://story-api.livedemo.ai/workspaces/62255d3d3304f17b8f5e2d03/stories/692a3654ab56e05a00fdae1a/preview?step=1&embed"}/>

 
<h2>Guide</h2>

<ol>
 <li>From inside your Webflow designer, go to the Add Elements tab on the left sidebar menu.</li>
 <li>Drag and drop to insert a Div block that will act as a wrapper for our carousel.</li>
 <li>Proceed to add one more Div inside the previous Div to contain our Logos.</li>
 <li>We should now have two Divs inside each other.</li>
 <li>While selecting your Div, go to the Style tab on the right sidebar menu.</li>
 <li>Use the Style selector field to rename your Div if you haven't already.</li>
 <li>Now, to begin inserting Logos, (or any other element for our carousel) add these elements inside the inner Div.</li>
 <li>Add an image of your choice.</li>
 <li>We'll be using a image that resembles a Logo.</li>
 <li>Customize the size of your images so they do not overflow using the right sidebar menu, under the Size section.</li>
 <li>Copy and paste these to duplicate or add new items and elements you want on your carousel.</li>
 <li>Use the Navigator tab from the left sidebar menu to verify the hierarchy of elements. The Carousel Div contains the Logo Div which contains all the Logos.</li>
 <li>Now, use the Navigator again to select the Logos Container.</li>
 <li>Go to the Layout section on the right sidebar menu and select Display: Flex.</li>
 <li>Click on the X: setting.</li>
 <li>Select Space around. This will evenly space the logos on our carousel.</li>
 <li>Now, select the Logos Container and duplicate it (Copy &amp; Paste).</li>
 <li>Select the parent Div Carousel now.</li>
 <li>And set its Layout to Display: Flex.</li>
 <li>Notice that will collapse all the Logos together. To fix this, select the Logos Container.</li>
 <li>And set its minimum Width to be a 100%.</li>
 <li>This will cause both the duplicates to take up a 100% of the width, causing the total width to be 200% and overflow.</li>
 <li>To fix this, select the Carousel Div.</li>
 <li>And set the Overflow to Hidden from the Size section.</li>
 <li>To begin animating our carousel, select the parent Div.</li>
 <li>Go to the Interactions tab from the right sidebar menu.</li>
 <li>For our case since we want the carousel to immediately start moving on page load, select the Page trigger method.</li>
 <li>Select Page load.</li>
 <li>Under When page finishes loading, select Action.</li>
 <li>Choose Start an animation.</li>
 <li>Click on the (+) next to Timed Animations.</li>
 <li>Give your animation a name.</li>
 <li>Select the Logos Container.</li>
 <li>And click on (+) next to Actions.</li>
 <li>Select the type Transform: Move.</li>
 <li>Ensure you select Affect: Class instead of element to affect both duplicate containers at the same time.</li>
 <li>Ensure the Class is correctly selected.</li>
 <li>Select a duration for the animation, the higher the slower they will slide.</li>
 <li>Set the X axis position to "-100%".</li>
 <li>Duplicate the animation to create a second one.</li>
 <li>Set the duration of this second animation to "0s" i.e. instant.</li>
 <li>And set the X axis position to "0%".</li>
 <li>Click on Save.</li>
 <li>Enable Loop for this animation.</li>
 <li>You can check how this will now look using Preview.</li>
 <li>The Logos will start moving slowly to the left in an infinite loop like a carousel.</li>
 <li>And you now have a working carousel in Webflow! Go ahead and check it out using the Preview mode.</li>
</ol>

How To Create A Carousel In Webflow

<LiveDemoIframe src={"https://story-api.livedemo.ai/workspaces/62255d3d3304f17b8f5e2d03/stories/692a36f0ab56e05a00fdc0d1/preview?step=1&embed"}/>

 
<h2>Guide</h2>

<ol>
 <li>Go to the Add Elements menu from the sidebar.</li>
 <li>Either search for form elements or scroll under the Forms section. To create a form in Webflow, you need the Form Block. Locate it under Forms.</li>
 <li><ul><li>Simply drag this block to where you wish to place it.</li><li>Note that all form elements in Webflow can only be placed inside this Form Block.</li></ul></li>
 <li>Once you place the form block, you will have some default fields and buttons which you may edit or remove. Also, a pop-up window will appear allowing you to choose the same settings as the sidebar. This includes the form name, URLs, Method, etc.</li>
 <li>The Form States are an important feature to note. You can customize each state individually in Webflow.</li>
 <li>You can add more buttons and other form elements inside this form block.</li>
 <li>Each element of the form can be customized individually from the right sidebar.</li>
 <li>And you have a simple and functional form in Webflow. Add more elements or fields and customize it as you like!</li>
</ol>

How To Create A Form In Webflow

<LiveDemoIframe src={"https://story-api.livedemo.ai/workspaces/62255d3d3304f17b8f5e2d03/stories/692a37b6ab56e05a00fdd24d/preview?step=1&embed"}/>

 
<h2>Guide</h2>

<ol>
 <li>To begin, go to the Add Elements tab on the left sidebar menu.</li>
 <li>Insert a Div Block element to act as a wrapper for our popup.</li>
 <li>Select the new Div and go to the Style tab on the right sidebar menu.</li>
 <li>Locate the Size options.</li>
 <li>Set the desired size for your popup.</li>
 <li>Consider changing the background.</li>
 <li>We'll add a few more elements to populate it.</li>
 <li>Such as a heading text element.</li>
 <li>You can continue creating a perfect pop-up for your needs but for now we have a simple one ready.</li>
 <li>Select the popup Div and locate the Position option on the right sidebar menu.</li>
 <li>Set its position to Absolute.</li>
 <li>Consider settings the z-index property to a very high value to ensure it stays on top of all other elements.</li>
 <li>Adjust the position of your window as you would like it to appear.</li>
 <li>Once ready, locate the Layout section and set the Display to None. This will hide the popup until it must be shown using a trigger.</li>
 <li>Now, you can use any element or icons for this but a button works as well. Select the element you wish to add a trigger to show the pop-up to.</li>
 <li>Go to the Interactions tab from the right sidebar menu.</li>
 <li>Click on the (+) icon next to Element trigger.</li>
 <li>Select Mouse click (tap).</li>
 <li>Select the 1st click Action option to set.</li>
 <li>Select Start an animation.</li>
 <li>Click on the (+) icon next to Timed Animations.</li>
 <li>Enter a name for this animation such as "Show popup".</li>
 <li>Use the navigator to select the hidden window.</li>
 <li>While selected, click on the (+) icon next to Actions to create an animation for your pop-up.</li>
 <li>Select Hide/Show at the bottom.</li>
 <li>Optional: Consider changing the Affect settings to only affect the specific element.</li>
 <li>Select Display: Block.</li>
 <li>Click on Save.</li>
 <li>Repeat the same steps for the 2nd click Action until the end.</li>
 <li>At the last step, select Display: None to hide the pop-up when clicking on the button again.</li>
 <li>Save your second animation.</li>
 <li>Use the Preview mode from the top right button.</li>
 <li>Click on the button.</li>
 <li>Voila! You now have a pop-up. Click on the button again to close.</li>
</ol>

How To Create A Popup In Webflow

<LiveDemoIframe src={"https://story-api.livedemo.ai/workspaces/62255d3d3304f17b8f5e2d03/stories/692a386dab56e05a00fde6e0/preview?step=1&embed"}/>

 
<h2>Guide</h2>

<ol>
 <li>Webflow does not inherently have tables. Instead, we can use Grid to create a table format structure for our content. To add a grid, go to Add Elements in the left sidebar menu.</li>
 <li>Scroll to the Other section or simply search for Grid.</li>
 <li>Once you click or drag the Grid where you want it. The right sidebar menu will offer many options to customize and control it.</li>
 <li>You can also enter a Grid Editing mode by clicking on the small grid icon for Edit Grid.</li>
 <li>When inside this mode, you can add rows and columns using the (+) icon.</li>
 <li>You can also customize the width of columns by dragging the edges or clicking on the heading to view options.</li>
 <li>Also, you can also customize and adjust the spacing between rows and columns by dragging the orders or adjust both at the same time by Shift + Drag.</li>
 <li>Click on Done at the bottom to exit mode.</li>
 <li>Although not necessary, it is a good practice to add a Div block to each cell as a wrapper, this also allows you to nest content inside a single cell.</li>
 <li>You can also directly add elements and assets to each cell.</li>
 <li>To add an image for example, simply drag and drop it inside a cell.</li>
 <li>Do the same for text blocks and other elements.</li>
 <li>Note that you can edit each cell's content separately without affecting other cells</li>
 <li>Also note that although the content is different, each row shares the same dimensions by default using the FR units.</li>
 <li>Besides editing each cell, row or column individually, you can also apply settings to the entire grid.</li>
 <li>You now have a Grid layout that resembles a tabular format in Webflow. You can continue exploring this to customize it exactly like a conventional table.</li>
</ol>

How To Create A Table In Webflow

<LiveDemoIframe src={"https://story-api.livedemo.ai/workspaces/62255d3d3304f17b8f5e2d03/stories/692a3af0ab56e05a00fe2149/preview?step=1&embed"}/>

 
<h2>Guide</h2>

<ol>
 <li>Open your project to head inside the editor.</li>
 <li>Select your component.</li>
 <li><ul><li>Right click on the instance to open a menu and select Unlink Instance from the bottom.</li><li>Repeat this step for all instances of the component as an active component cannot be deleted.</li></ul></li>
 <li>Or optionally use the shortcut Shift + Ctrl + A as it could be a repetitive task.</li>
 <li>Go to the left sidebar menu and open Components.</li>
 <li>If all instances of the component are unlinked, you will notice a count of "0 instances" below it.</li>
 <li>Click on the small pencil icon.</li>
 <li>And click on Delete.</li>
 <li>Confirm your decision by clicking on Delete again.</li>
 <li>Your component has been deleted.</li>
</ol>

How To Delete A Component In Webflow

<LiveDemoIframe src={"https://story-api.livedemo.ai/workspaces/62255d3d3304f17b8f5e2d03/stories/692a3b59ab56e05a00fe28e8/preview?step=1&embed"}/>

 
<h2>Guide</h2>

<ol>
 <li>From your editor, go to the Style Selectors section in the left sidebar menu.</li>
 <li>Search for the class you wish to delete or find it in the list below.</li>
 <li><ul><li>You will notice that classes that are being used in your project will have a list icon on hover. This shows you where they are being used.</li><li>Please note that only unused classes can be deleted.</li></ul></li>
 <li>Some will not have a list icon, which means they are not being used anywhere. Click on the small wrench icon to view options.</li>
 <li>You can use this menu to rename a class or delete it. Simply click once on the bin icon to delete.</li>
 <li>The class has been deleted.</li>
</ol>

How To Delete Classes In Webflow

<LiveDemoIframe src={"https://story-api.livedemo.ai/workspaces/62255d3d3304f17b8f5e2d03/stories/692a3b5cab56e05a00fe2965/preview?step=1&embed"}/>

 
<h2>Guide</h2>

<ol>
 <li>Open the CMS section.</li>
 <li>Hover on the collection you wish to delete. Click on the small gear icon that appears for settings.</li>
 <li>Scroll down to the bottom of the settings page to view the Delete Collection button. If the option is enabled, simply click and confirm to delete.</li>
 <li>To View Connections and unlink or go to them, click on the button.</li>
 <li>You can view these connections in a list and unlink them directly from this modal.</li>
 <li>If you have no connections and the Delete Collection button is still not active, let's check Fields and Instances.</li>
 <li>Instead of clicking on the gear icon, simply click on the Collection name.</li>
 <li>This will open a list of the instances of the Collection.</li>
 <li>Click on the Select option.</li>
 <li>And tick the box next to Name to select all.</li>
 <li>Click on Delete.</li>
 <li>Confirm to proceed.</li>
 <li>You now have no Instances or Connections to your CMS Collection. Attempt deleting now or proceed to check one last option.</li>
 <li>Click on the Delete Collection button.</li>
 <li>The last possibility to verify is active References. This pop-up will inform you of where you have existing references to the current Collection.</li>
 <li>Press OK and go to the reference.</li>
 <li>In our case, we open the Authors tab.</li>
 <li>Scroll down to custom fields and notice Blogs that references our Blog Posts. Click on the gear icon to view options.</li>
 <li>Click on the garbage bin icon to delete or change the Collection value to something different from below.</li>
 <li>Confirm your choice.</li>
 <li>Go back to the Collection you wish to delete and scroll down to find the Delete Collection button and click. </li>
 <li>You should now have a confirmation pop-up. Click Delete to delete.</li>
 <li>Your CMS Collection has been successfully deleted.</li>
</ol>

How To Delete CMS Collection Webflow

<LiveDemoIframe src={"https://story-api.livedemo.ai/workspaces/62255d3d3304f17b8f5e2d03/stories/692a3b97ab56e05a00fe2ffa/preview?step=1&embed"}/>

 
<h2>Guide</h2>

<ol>
 <li>Use the Navigator menu to select or directly click on the component instance you wish to detach or unlink.</li>
 <li>Right click on the component instance to open a menu or use the shortcut of Shift + Ctrl + A.</li>
 <li>Select Unlink Instance from the bottom.</li>
 <li>You will notice the name and menu options change to a normal element.</li>
 <li>Your instance is now detached / unlinked from the component and can be modified individually.</li>
</ol>

How To Detach Component Webflow

<LiveDemoIframe src={"https://story-api.livedemo.ai/workspaces/62255d3d3304f17b8f5e2d03/stories/692a3c1dab56e05a00fe39c2/preview?step=1&embed"}/>

 
<h2>Guide</h2>

<ol>
 <li>Locate the place you wish to insert a copy of your component.</li>
 <li>Open the Components menu from the left sidebar menu.</li>
 <li>Hover over the component you wish to duplicate and drag it out to where you wish to place it.</li>
 <li><ul><li>This will insert an instance of your component at the location.</li><li>This instance will still be linked to your component, any changes made to this will also reflect on all other instances.</li></ul></li>
 <li>If you wish to only duplicate and use as a copy separately, right click on the instance to open a menu and select Unlink Instance from the bottom.</li>
 <li><ul><li>Your element is no longer connected or linked to the component as an instance.</li><li>Any changes made to this will not reflect on any other instances.</li></ul></li>
 <li>You've now made a linked and an unlinked copy of a component in Webflow.</li>
</ol>

How To Duplicate A Component In Webflow

<LiveDemoIframe src={"https://story-api.livedemo.ai/workspaces/62255d3d3304f17b8f5e2d03/stories/692a3c28ab56e05a00fe3a66/preview?step=1&embed"}/>

 
<h2>Guide</h2>

<ol>
 <li>Go to the Pages section from the left sidebar menu.</li>
 <li>Hover on the page you wish to duplicate to see a small gear icon, click on it to view settings.</li>
 <li>Click on the small duplicate page icon next to the page name.</li>
 <li>Your new page settings will open up. Configure and click on Create.</li>
 <li>You've created a duplicate of your page in Webflow!</li>
</ol>

How To Duplicate A Page In Webflow

<LiveDemoIframe src={"https://story-api.livedemo.ai/workspaces/62255d3d3304f17b8f5e2d03/stories/692a3c72ab56e05a00fe3e7e/preview?step=1&embed"}/>

 
<h2>Guide</h2>

<ol>
 <li>Open the Add Elements menu from the left sidebar menu.</li>
 <li>Search for the Code Block element or scroll down to find it.</li>
 <li>Drag and drop this element to where you wish to add it in your project.</li>
 <li>Upon dropping, a Code Block Editor window will open.</li>
 <li>Enter the code you wish to display.</li>
 <li>When done, click on Save &amp; Close.</li>
 <li>You now have a code block inserted in your project.</li>
 <li>When selected, click on the small gear icon next to its name to view additional settings.</li>
 <li>This menu allows you to modify code, select language for styling, pick a theme etc.</li>
 <li>The language options from the menu allows you to pick from a very comprehensive list of languages for styling and readability.</li>
 <li>To control other settings of this element such as alignment, classes, properties, click on Show All Settings which will simply take you to the right sidebar menu.</li>
 <li>Make any changes you wish and you're done!</li>
</ol>

How To Edit Code In Webflow

<LiveDemoIframe src={"https://story-api.livedemo.ai/workspaces/62255d3d3304f17b8f5e2d03/stories/692a3c73ab56e05a00fe3eba/preview?step=1&embed"}/>

 
<h2>Guide</h2>

<ol>
 <li>Locate an instance of your component.</li>
 <li>Or select it by simply clicking on it.</li>
 <li>Once selected, double click to enter editing mode. The component will be highlighted and the background dulled.</li>
 <li>Make your changes.</li>
 <li>When done editing, click outside of the component or use the back button from the top left.</li>
 <li>And you have edited your component!</li>
</ol>

How To Edit Components In Webflow

<LiveDemoIframe src={"https://story-api.livedemo.ai/workspaces/62255d3d3304f17b8f5e2d03/stories/692a3c83ab56e05a00fe3fa9/preview?step=1&embed"}/>

 
<h2>Guide</h2>

<ol>
 <li>Select the drop down menu element in your editor.</li>
 <li>Go to the Settings tab in the right sidebar menu.</li>
 <li>Locate the Dropdown settings section and click to expand.</li>
 <li>Next to Menu, click on Show to make your dropdown menu visible.</li>
 <li>Your menu will now be visible and you can edit its content and properties.</li>
 <li>You can also change settings such as to display menu on hover or click and add links for each item.</li>
</ol>

How To Edit Drop Down Menu In Webflow

<LiveDemoIframe src={"https://story-api.livedemo.ai/workspaces/62255d3d3304f17b8f5e2d03/stories/692a3c86ab56e05a00fe3fed/preview?step=1&embed"}/>

 
<h2>Guide</h2>

<ol>
 <li>From your Webflow editor, go to the mobile portrait view.</li>
 <li>This will collapse your navbar menu into a hamburger (3 horizontal lines icon) menu.</li>
 <li>While selecting an element of your Navbar or the collapsible hamburger menu, go to the Settings tab in the right sidebar menu.</li>
 <li>Under Settings, locate the Navbar settings section and click to expand.</li>
 <li>Navigate to the Menu state option with the Show and Hide states. Simply click on Show to view your expanded menu.</li>
 <li>You can now edit the visible contents of your hamburger menu.</li>
 <li>Simply toggle the state back to Hide and you're done!</li>
</ol>

How To Edit Hamburger Menu Webflow

<LiveDemoIframe src={"https://story-api.livedemo.ai/workspaces/62255d3d3304f17b8f5e2d03/stories/692a3c9bab56e05a00fe41d6/preview?step=1&embed"}/>

 
<h2>Guide</h2>

<ol>
 <li>Go to the Add Elements section from the left sidebar menu.</li>
 <li>You can either search for it or look under the Typography section to find the Rich Text block. Simply drag and drop.</li>
 <li>You now have the Rich Text element on your site. This element gives you an ideal space for long form content such as blogs with its extensive editing, formatting and insertion options.</li>
 <li>It supports a variety of formats such as headings, texts, quotes, images, embeds, lists, etc.</li>
 <li>You can select the entire block at once or select each individual element inside it for custom configuration and settings.</li>
 <li>If you select any text you will have a pop-up menu of useful formatting options such as bold, headings, italics and so on.</li>
 <li>You can use the right sidebar menu again for editing either each individual element or the whole block. Such as for setting specific text to a different color.</li>
 <li>Creating a new line inside the Rich Text block will show you a (+) sign for insert options.</li>
 <li>This lets you add images, videos, embeds and so on.</li>
 <li>Each element inside the Rich Text block has its own customization and features, from the pop-up selection menus to the right sidebar Settings tab. Customize your space as you will.</li>
</ol>

How To Edit Rich Text Webflow

<LiveDemoIframe src={"https://story-api.livedemo.ai/workspaces/62255d3d3304f17b8f5e2d03/stories/692a3d9eab56e05a00fe5377/preview?step=1&embed"}/>

 
<h2>Guide</h2>

<ol>
 <li>From the top menu on the right side, click on the Export Code icon to export.</li>
 <li>Or go to the top left Webflow hamburger menu.</li>
 <li>and select Export Code.</li>
 <li>This will open an Export code menu allowing you to preview your code and assets.</li>
 <li>Use the shortcut Ctrl + O to enable an option to download a minified HTML file.</li>
 <li>Click on Prepare ZIP to create a downloadable ZIP file.</li>
 <li>Finally, click on Download ZIP to download your code.</li>
</ol>

How To Export Code From Webflow

<LiveDemoIframe src={"https://story-api.livedemo.ai/workspaces/62255d3d3304f17b8f5e2d03/stories/692a3f4dab56e05a00fe7328/preview?step=1&embed"}/>

 
<h2>Guide</h2>

<ol>
 <li>From inside your editor, go to the Pages tab from the left sidebar menu.</li>
 <li><ul><li>Click on the Static pages heading to expand.</li><li>Note that static pages are the only pages you can hide as drafts in Webflow.</li></ul></li>
 <li>Hover on the page you wish to hide and open the page settings menu from the small gear icon located next to its name.</li>
 <li>On the top right corner of the new page settings menu. Click on the small down arrow icon to view options.</li>
 <li>Click on Save as draft. </li>
 <li>Your page name will turn a highlighted color and be saved as a draft. Draft pages are hidden from being published.</li>
</ol>

How To Hide A Page In Webflow

<LiveDemoIframe src={"https://story-api.livedemo.ai/workspaces/62255d3d3304f17b8f5e2d03/stories/692a3f50ab56e05a00fe7374/preview?step=1&embed"}/>

 
<h2>Guide</h2>

<ol>
 <li>Select your section from the editor by either clicking on it. </li>
 <li>Or, open the Navigator menu from the left sidebar.</li>
 <li>And select the section you wish to hide.</li>
 <li>Open the Settings tab in the right sidebar menu. </li>
 <li>Locate the Visibility and user access section and click to expand.</li>
 <li>Simply click on Hidden to hide your section.</li>
 <li>Your section has been hidden.</li>
</ol>

How To Hide A Section In Webflow

<LiveDemoIframe src={"https://story-api.livedemo.ai/workspaces/62255d3d3304f17b8f5e2d03/stories/692a3f51ab56e05a00fe7390/preview?step=1&embed"}/>

 
<h2>Guide</h2>

<ol>
 <li>Select the element you wish to hide by either clicking on it or through the navigator.</li>
 <li>This will open a element specific sidebar menu on the right.</li>
 <li>Go to the Settings tab.</li>
 <li>Click on Visibility and user access to expand.</li>
 <li>Under Visibility, select Hidden.</li>
 <li>Your element will be hidden.</li>
</ol>

How To Hide An Element In Webflow

<LiveDemoIframe src={"https://story-api.livedemo.ai/workspaces/62255d3d3304f17b8f5e2d03/stories/692a3fbbab56e05a00fe7c52/preview?step=1&embed"}/>

 
<h2>Guide</h2>

<ol>
 <li>Search for and visit the Figma to Webflow plug-in page. You can do this both from the inside the editor using the Apps menu or by searching for the dedicated plug-in showcase page. Once ready, click on Install plugin.</li>
 <li>This will take you to the Figma page, click on Open in Figma.</li>
 <li>Log-in to your Figma account.</li>
 <li>Once inside Figma, you can find the added plug-in inside the Resources tab. Click Run to continue.</li>
 <li>You will be greeted with some introductory guides, click on Next to continue.</li>
 <li>When done, you will be prompted to connect your account between Figma and Webflow. Click on Connect account.</li>
 <li>Make your selection for which Workspaces or Projects you wish to add the plug-in to. When done, click on Authorize App.</li>
 <li>Your Webflow account is now linked to Figma. Go back to your Figma page.</li>
 <li>After the linking is done, click on Start.</li>
 <li>Under the new selection window, you can select the Project to add items to. Click on the dropdown menu.</li>
 <li>Select your Project.</li>
 <li>You can now click on pre-made items to add them to your canvas.</li>
 <li>You can also use the settings icon to copy certain settings such as colors and styles.</li>
 <li>They will then be copied to your clipboard for use.</li>
 <li>You can also sync your designs into Webflow using the Design System Sync tab.</li>
 <li>If your plug-in window is not open in webflow, you will be prompted to enable connection by doing so.</li>
 <li>To do so, open the Apps section from the left sidebar menu.</li>
 <li>Locate the Figma to Webflow app and click to open.</li>
 <li>Click on Launch App.</li>
 <li>Once open, it is ready to sync.</li>
 <li>Back inside Figma, you will notice that the Project is now green and ready.</li>
 <li>You can now make selections inside Figma.</li>
 <li>And/or elements.</li>
 <li>And click on Continue once elements are selected.</li>
 <li>You will be prompted with a review of your selection. Click on Sync to Webflow to continue.</li>
 <li>Back inside Webflow, the plug-in window will now contain the Figma elements to be imported. Click to expand.</li>
 <li>Verify and then click on Import.</li>
 <li>A pop-up will confirm your imports were successful!</li>
 <li>These components are now available to use inside Webflow, you can browse them through the Components menu.</li>
</ol>

How To Import Figma To Webflow

<LiveDemoIframe src={"https://story-api.livedemo.ai/workspaces/62255d3d3304f17b8f5e2d03/stories/692a4143ab56e05a00fe9979/preview?step=1&embed"}/>

 
<h2>Guide</h2>

<ol>
 <li>Log in to Zapier, click on "Create," and then select "Zaps" to get started.</li>
 <li>Click "Trigger" to proceed.</li>
 <li>Search for "Calendly" to set it as Trigger App.</li>
 <li>Choose a trigger event.</li>
 <li>Sign in to your Calendly account and click "Continue."</li>
 <li>Select a "Webhook subscription scope" then “Continue.”</li>
 <li>Click “Test trigger.”</li>
 <li>Select "Continue."</li>
 <li>Search and select “WebFlow" as the action app.</li>
 <li>Choose an action event.</li>
 <li>Sign in to your WebFlow account to proceed.</li>
 <li>Complete and customize the required fields to continue.</li>
 <li>Click “Test step.”</li>
 <li>Select "Publish" to complete the integration.</li>
 <li>Completing these steps will integrate Calendly with WebFlow, boosting your content management and productivity.</li>
</ol>

How to Integrate Calendly with WebFlow

<LiveDemoIframe src={"https://story-api.livedemo.ai/workspaces/62255d3d3304f17b8f5e2d03/stories/692a4343ab56e05a00febf5b/preview?step=1&embed"}/>

 
<h2>Guide</h2>

<ol>
 <li>Head over to App Marketplace on the top right. (store icon)</li>
 <li>Search for "Webflow" in the search bar and select it.</li>
 <li>Hit the Install app button to start the installation.</li>
 <li>You will be redirected to the Webflow marketplace.</li>
 <li>Hit the Authorize app button on the bottom right.</li>
 <li>Choose your HubSpot account.</li>
 <li>On the next page, click on the Connect app button.</li>
 <li>You will receive a success message upon completion.</li>
</ol>

Webflow hubspot integration

<LiveDemoIframe src={"https://story-api.livedemo.ai/workspaces/62255d3d3304f17b8f5e2d03/stories/692a43baab56e05a00fec8ac/preview?step=1&embed"}/>

 
<h2>Guide</h2>

<ol>
 <li>Go to the left-side panel and click 'Create'.</li>
 <li>Select 'Zaps' from the list of options.</li>
 <li>After that, click the 'Trigger' tab to start the integration process.</li>
 <li>Search for 'Intercom' and select it from the recommended matches.</li>
 <li>Next, specify your preferred 'Trigger Event'.</li>
 <li>Tap 'Sign In' afterwards, then log in to your Intercom account.</li>
 <li>Subsequently, click 'Authorize Access' to accept the terms and grant the necessary permissions.</li>
 <li>Tap 'Test Trigger' to run your input.</li>
 <li>Select the record you prefer to use, then click 'Continue With Selected Record'.</li>
 <li>Following that, search for 'Webflow' and pick it as the Action app.</li>
 <li>Next, click the drop-down menu and choose the specific 'Action Event' you wish to execute.</li>
 <li>Click 'Sign In' afterwards and log in to your Webflow account.</li>
 <li>Subsequently, select the Webflow workspace you want to use and click 'Authorize App'.</li>
 <li>One by one, fill out the input fields with the required information.</li>
 <li>Once done, click 'Continue' to publish and enable the integration.</li>
 <li>After completing these steps, your Intercom account will be integrated with Webflow.</li>
</ol>

How to Integrate Intercom with Webflow

<LiveDemoIframe src={"https://story-api.livedemo.ai/workspaces/62255d3d3304f17b8f5e2d03/stories/692a445eab56e05a00fed5e5/preview?step=1&embed"}/>

 
<h2>Guide</h2>

<ol>
 <li>Navigate to the left-side panel and then click 'Create'.</li>
 <li>Choose 'Zaps' from the list of options.</li>
 <li>After that, tap 'Trigger' to start the integration process.</li>
 <li>Search for 'Excel' and select it from the suggested results.</li>
 <li>Next, pick your preferred 'Trigger Event'.</li>
 <li>Tap 'Sign In' and then log into the Microsoft account you wish to use.</li>
 <li>Subsequently, click 'Continue'.</li>
 <li>One by one, fill out the input fields with the required information.</li>
 <li>Once done, tap 'Continue' to run your input and test the Trigger.</li>
 <li>Click 'Continue With Selected Record' afterwards to proceed further.</li>
 <li>Following that, search for 'Webflow' and select it as the Action app.</li>
 <li>Click the drop-down menu and choose your preferred 'Action Event'.</li>
 <li>Next, tap 'Sign In' and then log into your Webflow account.</li>
 <li>Pick the Webflow workspace you prefer to use and then tap 'Authorize App'.</li>
 <li>Provide all the information needed to set up the Action.</li>
 <li>Once done, tap 'Continue' to publish and enable the integration.</li>
 <li>After completing these steps, your Webflow account will be integrated instantly with Microsoft Excel.</li>
</ol>

How to Integrate Microsoft Excel with Webflow

<LiveDemoIframe src={"https://story-api.livedemo.ai/workspaces/62255d3d3304f17b8f5e2d03/stories/692a44d5ab56e05a00fee518/preview?step=1&embed"}/>

 
<h2>Guide</h2>

<ol>
 <li>Click 'Create' then select 'Zap' to create a new Zap in Zapier. </li>
 <li>Click 'Trigger' to set up the automation.</li>
 <li>Search for and select 'Notion' as the trigger app.</li>
 <li>Select a trigger event, such as 'New Database Item' or 'Updated Database Item.'</li>
 <li>Sign in to your Notion account and grant Zapier access.</li>
 <li>Set up trigger options for the Zap.</li>
 <li>Ensure Zapier can retrieve data from Notion and click 'Continue with selected record'.</li>
 <li>Search for and select 'Webflow' as the action app.</li>
 <li>Select an action event, such as 'Create Item' or 'Update Item'.</li>
 <li>Select sites or Workspaces to authorize and click 'Authorize App'.</li>
 <li>Specify the Webflow site and collection, and map the fields based on the data from Notion.</li>
 <li>Ensure the action is successfully carried out in Webflow based on the Notion trigger.</li>
 <li>Click 'Publish' to start the automation.</li>
 <li>By following these steps, you can integrate Notion with Webflow efficiently, allowing for seamless content management and website updates.</li>
</ol>

How to Integrate Notion with Webflow

<LiveDemoIframe src={"https://story-api.livedemo.ai/workspaces/62255d3d3304f17b8f5e2d03/stories/692a4525ab56e05a00feec59/preview?step=1&embed"}/>

 
<h2>Guide</h2>

<ol>
 <li>Log in to Zapier, click on "Create," and then select "Zaps" to get started.</li>
 <li>Click "Trigger" to proceed.</li>
 <li>Search for "Pipedrive" to set it as Trigger App.</li>
 <li>Choose a trigger event.</li>
 <li>Sign in to your Pipedrive account and click "Continue."</li>
 <li>Click “Test trigger.”</li>
 <li>Click "Continue with selected record."</li>
 <li>Search and select "WebFlow" as the action app.</li>
 <li>Choose an event under WebFlow.</li>
 <li>Select "Authorize App" to grant access to WebFlow.</li>
 <li>After signing in to WebFlow, click “Continue.”</li>
 <li>Complete and customize the required fields, then select "Continue."</li>
 <li>Click “Test step.”</li>
 <li>Select "Publish" to complete the integration.</li>
 <li>Completing these steps will integrate Pipedrive with WebFlow, boosting your content management and productivity.</li>
</ol>

How to Integrate Pipedrive with WebFlow

<LiveDemoIframe src={"https://story-api.livedemo.ai/workspaces/62255d3d3304f17b8f5e2d03/stories/692a45ddab56e05a00ff02c0/preview?step=1&embed"}/>

 
<h2>Guide</h2>

<ol>
 <li>Click 'Create' and select 'Zap' to start automation.</li>
 <li><article>Click 'Trigger'.</article></li>
 <li>Search and select 'Slack' as the trigger app.</li>
 <li>Choose a trigger event based on your requirements.</li>
 <li>Log in and authorize Zapier to access your Slack account.</li>
 <li>Click 'Test trigger' and Zapier will pull sample data from Slack to ensure everything is set up correctly.</li>
 <li>Search and select 'Webflow' as the action app.</li>
 <li>Choose an action event such as 'Create Item' or 'Create Live Item'.</li>
 <li>Choose your Webflow site and specific forms or collections to monitor.</li>
 <li>Click on Sign in to Webflow and authorize Zapier to access your Webflow account.</li>
 <li>You can filter by form name, collection ID, etc., depending on the action event you selected. Click 'Continue' once satisfied.</li>
 <li>Click 'Test step' to verify the setup.</li>
 <li>Once satisfied with the configuration, turn on your Zap to enable the integration by clicking 'Publish'.</li>
</ol>

How to Integrate Slack with Webflow

<LiveDemoIframe src={"https://story-api.livedemo.ai/workspaces/62255d3d3304f17b8f5e2d03/stories/692a4722ab56e05a00ff192c/preview?step=1&embed"}/>

 
<h2>Guide</h2>

<ol>
 <li>From your 'Zapier' dashboard, select 'Zap'.</li>
 <li>Click on the 'Trigger' field to select the event.</li>
 <li>Search and select 'Webflow' as your trigger app.</li>
 <li>Select 'New Order' as your trigger event.</li>
 <li>Connect your Webflow account.</li>
 <li>Select the site that you would like to receive notifications from and click 'Continue'.</li>
 <li>Click 'Test trigger'.</li>
 <li>Search and select 'Mailchimp' as the action app.</li>
 <li>Select an action event.</li>
 <li>Connect your Mailchimp account.</li>
 <li>Configure the action details and click 'Continue'.</li>
 <li>Click 'Test step'.</li>
 <li>Once the test is successful, click 'Publish'.</li>
</ol>

How to Integrate Webflow CMS with Marketing Tools Using Zapier

<LiveDemoIframe src={"https://story-api.livedemo.ai/workspaces/62255d3d3304f17b8f5e2d03/stories/692a4729ab56e05a00ff1969/preview?step=1&embed"}/>

 
<h2>Guide</h2>

<ol>
 <li>Navigate to the left-side panel, then click 'Create'.</li>
 <li>Select 'Zaps' from the list of options.</li>
 <li>After that, click 'Trigger' to start the integration process.</li>
 <li>Search for 'Webflow' and choose it from the suggested results.</li>
 <li>Next, choose your preferred 'Trigger Event'.</li>
 <li>Tap 'Sign In' afterwards, then log into your Webflow account.</li>
 <li>Select the Webflow workspace you wish to integrate and then tap 'Authorize App'.</li>
 <li>Provide the information needed to set up the Trigger.</li>
 <li>Once done, tap 'Continue' to run your inputs and test the Trigger.</li>
 <li>Click 'Continue With Selected Records' afterwards.</li>
 <li>Following that, find 'ActiveCampaign' and select it as the Action app.</li>
 <li>Next, click the drop-down menu and choose the specific 'Action Event' you prefer to use.</li>
 <li>Tap 'Sign In' afterwards.</li>
 <li>Provide the API credentials of your ActiveCampaign account, then click 'Yes, Continue to ActiveCampaign'.</li>
 <li>After that, fill out the input fields with the required information.</li>
 <li>Once done, click 'Continue' to publish and activate the integration.</li>
 <li>After completing these steps, your Webflow account will be integrated instantly with ActiveCampaign.</li>
</ol>

How to Integrate Webflow with ActiveCampaign

<LiveDemoIframe src={"https://story-api.livedemo.ai/workspaces/62255d3d3304f17b8f5e2d03/stories/692a472eab56e05a00ff19a8/preview?step=1&embed"}/>

 
<h2>Guide</h2>

<ol>
 <li>Navigate to the left-side panel and then click 'Create'.</li>
 <li>Select 'Zaps' from the list of available options.</li>
 <li>Tap 'Trigger' to start the integration process.</li>
 <li>Search for 'Webflow' and then select it as the Trigger App.</li>
 <li>Choose your preferred 'Trigger Event' afterwards.</li>
 <li>Tap 'Sign In' and then provide your Webflow user credentials.</li>
 <li>Select the specific Webflow site you prefer to use, then click 'Authorize App' to proceed.</li>
 <li>After that, provide all the necessary information to set up the Trigger.</li>
 <li>Once done, click 'Test' to continue.</li>
 <li>Search for 'Airtable' afterwards, then select it as the Action App.</li>
 <li>Click on the drop-down menu and then choose your preferred 'Action Event'.</li>
 <li>Tap 'Sign In' and then log into your Airtable account afterwards.</li>
 <li>Subsequently, choose your preferred Airtable workspace and then tap 'Grant Access'.</li>
 <li>Fill out the input fields with the required information.</li>
 <li>Once done, click 'Test" to authorize and publish the integration.</li>
 <li>After completing these steps, your Webflow site will be integrated instantly with Airtable.</li>
</ol>

How to Integrate Webflow with Airtable

<LiveDemoIframe src={"https://story-api.livedemo.ai/workspaces/62255d3d3304f17b8f5e2d03/stories/692a4730ab56e05a00ff19e0/preview?step=1&embed"}/>

 
<h2>Guide</h2>

<ol>
 <li>From your 'Zapier' dashboard, select 'Zap'.</li>
 <li>Click on the 'Trigger' field to select the event.</li>
 <li>Search and select 'Webflow' as your trigger app.</li>
 <li>Select 'New Order' as your trigger event.</li>
 <li>Connect your Webflow account.</li>
 <li>Select the site that you would like to receive notifications from and click 'Continue'.</li>
 <li>Click 'Test trigger'.</li>
 <li>Search and select 'Mailchimp' as the action app.</li>
 <li>Select an action event.</li>
 <li>Connect your Mailchimp account.</li>
 <li>Configure the action details and click 'Continue'.</li>
 <li>Click 'Test step'.</li>
 <li>Once the test is successful, click 'Publish'.</li>
</ol>

How to Integrate Webflow with Mailchimp Lists via Zapier

<LiveDemoIframe src={"https://story-api.livedemo.ai/workspaces/62255d3d3304f17b8f5e2d03/stories/692a4734ab56e05a00ff1a1d/preview?step=1&embed"}/>

 
<h2>Guide</h2>

<ol>
 <li>Head over to the left-side panel and then click 'Create'.</li>
 <li>Select 'Zaps' from the list of available options.</li>
 <li>After that, tap 'Trigger' to start the integration process.</li>
 <li>Search for 'Webflow' and then select it as the Trigger app.</li>
 <li>Subsequently, choose your preferred 'Trigger Event'.</li>
 <li>Tap 'Sign In' afterwards and then log into your Webflow account.</li>
 <li>Choose the specific Webflow workspace you want to use, then click 'Authorize App'.</li>
 <li>After that, provide all the information needed to set up the Trigger.</li>
 <li>Once done, click 'Test' to run the Trigger based on your inputs.</li>
 <li>Tap 'Continue With Selected Record' to proceed.</li>
 <li>Find and click 'Zendesk' from the list of available integration apps.</li>
 <li>Next, click the drop-down menu and choose your preferred Action event.</li>
 <li>Tap 'Sign In' afterwards.</li>
 <li>Provide the required information associated with your Zendesk account and then click 'Yes, Continue to Zendesk'.</li>
 <li>Fill out the provided input fields with the necessary details to set up the Action.</li>
 <li>Finally, click 'Test' to publish and activate the integration.</li>
 <li>After completing these steps, your Webflow account will be integrated instantly with Zendesk.</li>
</ol>

How to Integrate Webflow with Zendesk

<LiveDemoIframe src={"https://story-api.livedemo.ai/workspaces/62255d3d3304f17b8f5e2d03/stories/692a4816ab56e05a00ff2c67/preview?step=1&embed"}/>

 
<h2>Guide</h2>

<ol>
 <li>Select the element you wish to link.</li>
 <li>Go to the right sidebar menu and select the Settings tab.</li>
 <li>Navigate to the Link settings section.</li>
 <li>Select the link type as Page.</li>
 <li>Select the page you wish to link to.</li>
 <li>And you're done, the element is now linked to the specific page you selected.</li>
 <li>Clicking on this button will now take you to that page.</li>
</ol>

How To Link Pages In Webflow

<LiveDemoIframe src={"https://story-api.livedemo.ai/workspaces/62255d3d3304f17b8f5e2d03/stories/692a4845ab56e05a00ff312f/preview?step=1&embed"}/>

 
<h2>Guide</h2>

<ol>
 <li>Select the section you wish to link to, aka, the destination.</li>
 <li>Go to the elements right sidebar menu.</li>
 <li>Open the Settings tab.</li>
 <li>In the ID field, enter a unique name to refer to this section. Copy or remember this name.</li>
 <li>Now go to the page where you wish to link this section from, aka, the beginning.</li>
 <li>Select the element to link and ensure it can support linking or simply add a link block to it.</li>
 <li>Locate the linking section in the right sidebar menu.</li>
 <li>For relative URLs (using your homepage as the base) use the "/" to begin from your home.</li>
 <li>So your URL for another page of your project will look like "/pagename#sectionID" or "site.com/pagename#sectionID"</li>
 <li>To test, open Preview and click on the button.</li>
 <li>You should reach the linked section on another page.</li>
</ol>

How To Link To A Section On Another Page Webflow

<LiveDemoIframe src={"https://story-api.livedemo.ai/workspaces/62255d3d3304f17b8f5e2d03/stories/692a48e9ab56e05a00ff3c84/preview?step=1&embed"}/>

 
<h2>Guide</h2>

<ol>
 <li>Begin by inserting a wrapper element positioned correctly to contain your accordion.</li>
 <li>Now to create the actual accordion, go to the Add Elements tab from the left sidebar menu.</li>
 <li>Search for the Dropdown element. This element contains most of the functionality required from an accordion so it serves as a great starting point. Simply drag and drop it to insert.</li>
 <li>With the dropdown element inserted, adjust its width to resemble an accordion.</li>
 <li>Now, lets change the text to be an actual question or heading.</li>
 <li>Simply double click and edit the text.</li>
 <li>At this point, use the Preview mode from the top right button to see how it works.</li>
 <li>Notice that our default list overflows onto other elements.</li>
 <li>Back inside the designer, go to the Navigator tab from the left sidebar menu.</li>
 <li>Select the Dropdown List under the Dropdown Toggle.</li>
 <li>Locate the Position section on the right sidebar menu.</li>
 <li>Set this to Static to fix the overflow.</li>
 <li>Also consider changing the background and colors of your dropdown list.</li>
 <li>You can also choose to delete the links and replace it with another form of content in your accordion.</li>
 <li>For our example, we'll add a paragraph to open up under the dropdown.</li>
 <li>Use the Navigator to make sure the paragraph is placed inside the Dropdown List.</li>
 <li>If not, simply drag it to the correct position.</li>
 <li>Back inside the Preview mode, click on the accordion to expand like a dropdown.</li>
 <li>This makes our answer reveal below it.</li>
 <li>We can now duplicate this to create an entire accordion section. To do so, simply select and copy the wrapper element that contains all elements and paste.</li>
 <li>You now have a list of FAQs in your accordion that will each expand on click.</li>
 <li>You now have a simple yet fully functional accordion in Webflow. You can continue modifying it by adding styles, animations, etc.</li>
</ol>

How To Make Accordion In Webflow

<LiveDemoIframe src={"https://story-api.livedemo.ai/workspaces/62255d3d3304f17b8f5e2d03/stories/692a492cab56e05a00ff40c4/preview?step=1&embed"}/>

 
<h2>Guide</h2>

<ol>
 <li>To begin, from inside your Webflow designer, go to the Add Elements section in the left sidebar menu.</li>
 <li>Locate or search for the Grid element and drag it onto your project.</li>
 <li>Now that we have a grid, populate it with content like Images.</li>
 <li>To add an image simply drag and drop.</li>
 <li>You can align the content of your grid from the Layout section on the right sidebar menu.</li>
 <li>Once you have a populated grid, use the Preview button the top right to check its responsiveness.</li>
 <li>You can adjust the width of the canvas using the handle on the right side.</li>
 <li>Notice that your default Grid is not very responsive and stacks together on smaller screens.</li>
 <li>Back inside the designer, select the grid and then locate the Layout section on the right sidebar menu.</li>
 <li>Reduce the number of rows and columns to the lowest which is 1. This does not delete any content, instead, Webflow auto-generates the necessary space in rows and columns to fit the content.</li>
 <li>You can adjust the direction for fill which controls if more columns or rows are created.</li>
 <li>Go back into the Preview mode.</li>
 <li>Notice how two columns are created to fit the content when more space is available.</li>
 <li>And it collapses into a single column in lower width screens, making your grid responsive.</li>
</ol>

How To Make Grid Responsive Webflow

<LiveDemoIframe src={"https://story-api.livedemo.ai/workspaces/62255d3d3304f17b8f5e2d03/stories/692a4934ab56e05a00ff4160/preview?step=1&embed"}/>

 
<h2>Guide</h2>

<ol>
 <li>Select your navbar by clicking on it or using the Navigator.</li>
 <li>Go to the Style tab in the right sidebar menu.</li>
 <li>Locate the Position section.</li>
 <li>Under Position, locate Position and click on the drop down menu to view options.</li>
 <li>For a sticky navbar, select Sticky.</li>
 <li>Done! You now have a sticky navbar that will always stay on top even as you scroll down.</li>
</ol>

How To Make Navbar Sticky Webflow

<LiveDemoIframe src={"https://story-api.livedemo.ai/workspaces/62255d3d3304f17b8f5e2d03/stories/692a49faab56e05a00ff5019/preview?step=1&embed"}/>

 
<h2>Guide</h2>

<ol>
 <li>Go to the Add Elements option from the left sidebar menu.</li>
 <li>Pick any element you wish to either add or an existing element you wish to move.</li>
 <li>Blue indicator lines show where exactly the position the element will be dropped into.</li>
 <li>Even after being dropped, you can drag existing elements to any new positions.</li>
 <li>Once you have the element where you want it. You can customize its placement using element settings from the right sidebar menu.</li>
 <li>This includes float, spacing, positioning, layers, etc.</li>
 <li>With drag and drop, custom settings and positioning, you can place elements anywhere you want them in Webflow!</li>
</ol>

How To Move Elements In Webflow

<LiveDemoIframe src={"https://story-api.livedemo.ai/workspaces/62255d3d3304f17b8f5e2d03/stories/692a4aa0ab56e05a00ff5c20/preview?step=1&embed"}/>

 
<h2>Guide</h2>

<ol>
 <li>From inside the Webflow project editor, go to the top right menu and locate the play button.</li>
 <li>This button is the Toggle Preview button, click to launch a preview of your project.</li>
 <li>Your editor sections will collapse and your project will maximize into a full screen preview.</li>
 <li>Press the Toggle Preview button again to go back to designing.</li>
</ol>

How To Preview In Webflow

<LiveDemoIframe src={"https://story-api.livedemo.ai/workspaces/62255d3d3304f17b8f5e2d03/stories/692a4accab56e05a00ff5ef2/preview?step=1&embed"}/>

 
<h2>Guide</h2>

<ol>
 <li>Navigate to the project you wish to publish and go to the top right Publish button.</li>
 <li>Customize your options, select branches, and configure which domain to use for publishing.</li>
 <li>Consider configuring Advanced options. To do so, click on it to expand.</li>
 <li>Verify settings and click on Publish to selected domains.</li>
 <li>Depending on your project size, it will be published in a short while.</li>
 <li>And done! Your project has been published on the displayed URL or simply click on the link icon to view it live.</li>
</ol>

How to publish a webflow site

<LiveDemoIframe src={"https://story-api.livedemo.ai/workspaces/62255d3d3304f17b8f5e2d03/stories/692a4b5eab56e05a00ff6c4c/preview?step=1&embed"}/>

 
<h2>Guide</h2>

<ol>
 <li>From your 'Zapier' dashboard, select 'Zap'.</li>
 <li>Click on the 'Trigger' field to select the event.</li>
 <li>Search and select 'Webflow' as your trigger app.</li>
 <li>Click 'New Form Submission'.</li>
 <li>Connect your Webflow account.</li>
 <li>Select the Webflow site where the form is hosted and specify the form you want to track. Click 'Continue'.</li>
 <li>Click 'Test trigger'.</li>
 <li>Click 'Google Sheets'.</li>
 <li>Select an action event.</li>
 <li>Connect your Google Sheets account.</li>
 <li>Configure the action details and click 'Continue'.</li>
 <li>Click 'Test step'.</li>
 <li>Once the test is successful, click 'Publish'.</li>
</ol>

How to Push Webflow form data to Google Sheets through Zapier

<LiveDemoIframe src={"https://story-api.livedemo.ai/workspaces/62255d3d3304f17b8f5e2d03/stories/692a4b64ab56e05a00ff6c8f/preview?step=1&embed"}/>

 
<h2>Guide</h2>

<ol>
 <li>Navigate to the left-side panel and then click 'Create'.</li>
 <li>Select 'Zaps' from the list of options.</li>
 <li>After that, tap the 'Trigger' tab to start the integration process.</li>
 <li>Search for 'Webflow' and then select it from the suggested results.</li>
 <li>Next, click the 'Trigger Event' menu to view and explore the available options.</li>
 <li>Pick 'New Form Submission' from the list of options.</li>
 <li>Tap 'Sign In' afterwards and then log into your active Webflow account.</li>
 <li>Subsequently, choose the Webflow workspace you wish to use and then tap 'Authorize App'.</li>
 <li>Provide the information needed to set up the Trigger accordingly. In this case, specify your preferred Site and Form.</li>
 <li>Once done, click 'Continue' to run your input and test the Trigger.</li>
 <li>Click 'Continue' one more time to proceed further.</li>
 <li>Following that, search for 'Discord' and choose it as the Action app.</li>
 <li>Next, tap the drop-down menu and choose the specific 'Action Event' you wish to execute.</li>
 <li>Click 'Sign In' afterwards, then log into your Discord account.</li>
 <li>Subsequently, choose your preferred Discord server and tap 'Continue'.</li>
 <li>Tick the checkbox beside the permissions you wish to grant, then tap 'Authorize' to proceed.</li>
 <li>One by one, fill out the input fields with the required information related to the integration.</li>
 <li>Once done, tap 'Continue' to proceed.</li>
 <li>Finally, click 'Publish' to enable the integration and push your Webflow forms to Discord.</li>
</ol>

How to Push Webflow Forms to Discord Using Zapier

<LiveDemoIframe src={"https://story-api.livedemo.ai/workspaces/62255d3d3304f17b8f5e2d03/stories/692a4b7bab56e05a00ff6db4/preview?step=1&embed"}/>

 
<h2>Guide</h2>

<ol>
 <li>From inside your Webflow Designer, select the area which contains your text.</li>
 <li>Locate the Backgrounds section from the right sidebar menu and click to expand.</li>
 <li>Click the image to change or add as a background.</li>
 <li>Click on Choose image.</li>
 <li>Select an image of your choice.</li>
 <li>Adjust position and size.</li>
 <li>You now have an image as a background to your text.</li>
</ol>

How To Put Text Over An Image In Webflow

<LiveDemoIframe src={"https://story-api.livedemo.ai/workspaces/62255d3d3304f17b8f5e2d03/stories/692a4bf0ab56e05a00ff7639/preview?step=1&embed"}/>

 
<h2>Guide</h2>

<ol>
 <li>Open the CMS tab from the left sidebar menu.</li>
 <li>Notice a list of all CMS items and their count. Click on the small gear icon that appears on hover.</li>
 <li>Scroll to the bottom to find the Delete Collection button. Notice that you will not be able to delete the collection if it is currently being used.</li>
 <li>Webflow provides a handy View Connections button that lists all the places it is being used. Click to open.</li>
 <li>Expand the items in the list to view.</li>
 <li>You can disconnect these items directly from this menu using the small break icon.</li>
 <li>Confirm the disconnecting by clicking on Disconnect.</li>
 <li>Verify you have no existing connection before moving on to the next step.</li>
 <li>If you have no connections and the Delete... button is still not enabled. It is likely due to items still existing.</li>
 <li>Notice that we have 2 items of the type Authors. We need to delete these to be able to delete the collection. Instead of the gear icon, click on the CMS Collection Name.</li>
 <li>This will open a list of items in the collection.</li>
 <li>Click on the Select button to enable selection.</li>
 <li>Select all the items by checking the box on the header Name.</li>
 <li>Click on Delete.</li>
 <li>Confirm your choice by clicking on Delete permanently.</li>
 <li>Go back to the CMS Settings by clicking on the small gear icon.</li>
 <li>Scroll down to the Delete Collection button which should now be enabled. Click to delete.</li>
 <li>Click on Delete to confirm.</li>
 <li>You have now successfully removed CMS from Webflow.</li>
</ol>

How To Remove CMS From Webflow

<LiveDemoIframe src={"https://story-api.livedemo.ai/workspaces/62255d3d3304f17b8f5e2d03/stories/692a4ca8ab56e05a00ff82d7/preview?step=1&embed"}/>

 
<h2>Guide</h2>

<ol>
 <li>Navigate to your project editor in Webflow.</li>
 <li>Select the image you wish to rotate by simply clicking on it.</li>
 <li>On the right sidebar menu, go to the Style tab.</li>
 <li>Scroll down to 2D &amp; 3D transforms and click on the (+) button to add a transform property.</li>
 <li>Under type, select Rotate.</li>
 <li>You will now have the option to rotate your image in three axes in degrees.</li>
 <li>Enter a value or use the slider to set. For example, the Z axis rotates the image anti-clockwise so a value of 90 will make it upright.</li>
 <li>And you now have a rotated image in Webflow</li>
</ol>

How To Rotate Image In Webflow

<LiveDemoIframe src={"https://story-api.livedemo.ai/workspaces/62255d3d3304f17b8f5e2d03/stories/692a4ccaab56e05a00ff8510/preview?step=1&embed"}/>

 
<h2>Guide</h2>

<ol>
 <li>It is important to note that most changes you make in Webflow are automatically saved, such as changing the text on this heading to most other actions.</li>
 <li>Some panels and windows specifically for settings will have a Save button to save your changes, such as this page settings page.</li>
 <li>You can also view if your current state is saved and up-to-date from this tick mark icon on the top right.</li>
 <li>But to explicitly save your progress and state in Webflow, you can use the shortcut Ctrl + Shift + S to create a manual backup of the current state.</li>
 <li>This will prompt a Save backup window where you can name it to easily roll back to this save.</li>
 <li>Enter the name for the save point and click on Save.</li>
 <li>To use the save point you just created, go to the Settings tab on the bottom left.</li>
 <li>Locate the Backups option and click.</li>
 <li>Hover on your backup to view a three dotted icon for options.</li>
 <li>Pick your choice and that's it!</li>
</ol>

How To Save Changes In Webflow

<LiveDemoIframe src={"https://story-api.livedemo.ai/workspaces/62255d3d3304f17b8f5e2d03/stories/692a4ec5ab56e05a00ffaa93/preview?step=1&embed"}/>

 
<h2>Guide</h2>

<ol>
 <li>To begin, navigate to your project that you wish to share.</li>
 <li>Go to the top right Share button and click.</li>
 <li>To create a shareable link, toggle the Share read-only link option to active.</li>
 <li>You will now have a generated link to your project. Use the Copy button to copy the link and share it with people.</li>
</ol>

How to share webflow project

<LiveDemoIframe src={"https://story-api.livedemo.ai/workspaces/62255d3d3304f17b8f5e2d03/stories/692a4f73ab56e05a00ffbb76/preview?step=1&embed"}/>

 
<h2>Guide</h2>

<ol>
 <li>From your 'Zapier' dashboard, select 'Zap'.</li>
 <li>Click on the 'Trigger' field to select the event.</li>
 <li>Search and select 'Webflow' as your trigger app.</li>
 <li>Select 'Updated Order' as your trigger event.</li>
 <li>Connect your Webflow account.</li>
 <li>Select the site that you would like to receive notifications from and click 'Continue'.</li>
 <li>Click 'Test trigger'.</li>
 <li>Search and select 'Notion' as the action app.</li>
 <li>Select an action event.</li>
 <li>Connect your Notion account.</li>
 <li>Configure the action details and click 'Continue'.</li>
 <li>Click 'Test step'.</li>
 <li>Once the test is successful, click 'Publish'.</li>
</ol>

How to Sync Webflow CMS with Notion databases using Zapier

<LiveDemoIframe src={"https://story-api.livedemo.ai/workspaces/62255d3d3304f17b8f5e2d03/stories/692a4fceab56e05a00ffc3a9/preview?step=1&embed"}/>

 
<h2>Guide</h2>

<ol>
 <li>From the Webflow Dashboard, locate your project thumbnail and click on the small three dotted icon for options.</li>
 <li>Click on Settings.</li>
 <li>On the top, locate the Transfer icon and click.</li>
 <li>A pop-up window will appear, allowing you to choose between transferring the project to another user or a workspace. Select the options that apply to you.</li>
 <li>If you choose a Workspace, you will simply have to select one from a dropdown menu. For users however, you must enter a valid email ID of the user with an existing account on Webflow.</li>
 <li>Click on Transfer to [A valid email] and your project will be transferred.</li>
 <li>A notification will confirm if an invitation was sent.</li>
 <li>The project will be locked in your dashboard and you will not be able to make any changes until they accept or decline the transfer request or you cancel the transfer.</li>
</ol>

How To Transfer A Webflow Project

<LiveDemoIframe src={"https://story-api.livedemo.ai/workspaces/62255d3d3304f17b8f5e2d03/stories/692a4ffcab56e05a00ffc8bf/preview?step=1&embed"}/>

 
<h2>Guide</h2>

<ol>
 <li>From your 'Zapier' dashboard, select 'Zap'.</li>
 <li>Click on the 'Trigger' field to select the event.</li>
 <li>Search and select 'Github' as your trigger app.</li>
 <li>Select a trigger event.</li>
 <li>Connect your Github account.</li>
 <li>Select the repository you want to monitor for changes and click 'Continue'.</li>
 <li>Click 'Test trigger'.</li>
 <li>Search and select 'Webflow' as the action app.</li>
 <li>Select an action event.</li>
 <li>Connect your Webflow account.</li>
 <li>Configure the action details and click 'Continue'.</li>
 <li>Click 'Test step'.</li>
 <li>Once the test is successful, click 'Publish'.</li>
</ol>

How to Trigger Webflow Builds from GitHub Pushes via Zapier

<LiveDemoIframe src={"https://story-api.livedemo.ai/workspaces/62255d3d3304f17b8f5e2d03/stories/692a4ffdab56e05a00ffc8f4/preview?step=1&embed"}/>

 
<h2>Guide</h2>

<ol>
 <li>From your 'Zapier' dashboard, select 'Zap'.</li>
 <li>Click on the 'Trigger' field to select the event.</li>
 <li>Search and select 'Contentful' as your trigger app.</li>
 <li>Select a trigger event.</li>
 <li>Connect your Contentful account.</li>
 <li>Map your trigger details and click 'Continue'.</li>
 <li>Click 'Test trigger'.</li>
 <li>Search and select 'Webflow' as your action app.</li>
 <li>Select an action event.</li>
 <li>Connect your Webflow account.</li>
 <li>Configure the action details and click 'Continue'.</li>
 <li>Click 'Test step'.</li>
 <li>Once the test is successful, click 'Publish'.</li>
</ol>

How to Trigger Webflow Updates from Contentful via Zapier

<LiveDemoIframe src={"https://story-api.livedemo.ai/workspaces/62255d3d3304f17b8f5e2d03/stories/692a5030ab56e05a00ffcd87/preview?step=1&embed"}/>

 
<h2>Guide</h2>

<ol>
 <li>To perform an undo, you must have performed an action. For example, deleting an element.</li>
 <li>Click on the top left Webflow logo to open a menu.</li>
 <li>Select Undo or note the shortcut of Ctrl/Cmd + Z.</li>
 <li>Your changes will be undone.</li>
</ol>

How To Undo In Webflow

<LiveDemoIframe src={"https://story-api.livedemo.ai/workspaces/62255d3d3304f17b8f5e2d03/stories/692a5282ab56e05a00fffb4d/preview?step=1&embed"}/>

 
<h2>Guide</h2>

<ol>
 <li>To use a Webflow template, create a new project from the dashboard using the top right New site button.</li>
 <li>Select the Template option to quick-start your project from a template.</li>
 <li>Browse through the vast collection of Webflow templates which includes both paid and free content.</li>
 <li>If you hover on a thumbnail, you can choose between Preview Template first or directly Select.</li>
 <li>Once you select your template, you will receive a prompt to name your project. Enter the desired name and click on Create site.</li>
 <li>You have now used a template to quick-start your Webflow project.</li>
 <li>You can now use this as a starting point to further edit and customize the project until it is perfect!</li>
</ol>

LIVEDEMO

Showing tutorials from webflow category

Tutorials