Tutorials

Add or Remove a Page

  1. Log in to your Webflow account and open your project.

  2. To add a page:

    • Click the Pages panel on the left.

    • Click + New Page, enter a name, and choose a template or start with a blank page.

    • Click Create.

  3. To delete a page:

    • Hover over the page in the Pages panel.

    • Click the gear icon (Settings) and select Delete.

  4. Click Publish to make the changes live.

Tip: Regularly review your pages for relevance. Outdated or redundant pages can harm the user experience.

Update Contact Form

  1. Open Webflow and select your project.

  2. Click on the form element in the Designer to select it.

  3. To modify fields:

    • Click on the specific field you want to edit.

    • Adjust its settings in the Settings Panel on the right.

  4. To update email notifications:

    • Go to Project Settings > Forms.

    • Update the recipient email address under Form Submission Notifications.

  5. To edit the thank-you message:

    • Click the Success Message block in the Designer and edit it directly.

  6. Save changes and click Publish to make the updates live.

Pro Tip: Test your form after any changes by submitting a test message to ensure everything works.

Add a Blog Post

  1. Open Webflow and navigate to the CMS Collections panel.

  2. Select the Blog Posts collection.

  3. Click + New Item and fill in the title, body, and any required fields.

  4. Add images, videos, or links if needed.

  5. Save your changes and click Publish.

Tip: Set a featured image for each blog post to improve visual appeal and boost click-through rates.

Embed Third-Party Content

  1. Open Webflow and go to the Add Panel (A).

  2. Drag an Embed Element into your layout.

  3. Paste the third-party embed code (e.g., Google Maps, YouTube) into the widget.

  4. Adjust placement and size if necessary using the Style Panel.

  5. Click Publish to make the changes live.

Disclaimer: Not all third-party embed codes are mobile-responsive. Always preview on different devices.

Make Text Changes

  1. Log in to Webflow and open the project in the Designer.

  2. Use the Navigator panel to locate the page and section containing the text.

  3. Click directly on the text element (e.g., heading or paragraph) on the canvas.

  4. Type your new text or paste it from another source.

  5. To adjust text formatting (e.g., font size, color, alignment), use the Style Panel on the right.

  6. Changes are automatically saved. Click Publish when you’re ready to go live.

Pro Tip: Create and use global typography styles in Webflow to make future changes faster and easier.

Change Colors and Fonts

  1. Log in to Webflow and open your project.

  2. To change colors:

    • Select any element and go to the Style Panel on the right.

    • Adjust the Background Color or Font Color settings using the color picker or by entering a hex code.

    • To apply site-wide changes, edit Global Swatches in the Style Panel.

  3. To change fonts:

    • Select any text element on the canvas.

    • Go to the Typography section in the Style Panel.

    • Choose a new font family, size, weight, or alignment.

    • To apply site-wide changes, adjust Global Typography Styles.

  4. Use the Preview Tool to check how the changes appear on different devices.

  5. Click Publish to update your live site.

Tip: Use Webflow’s global color and typography settings to maintain consistency across your site.

Replace an Image

  1. Log in to Webflow and open your project in the Designer.

  2. Use the Navigator panel to locate the image you want to replace.

  3. Click on the image element on the canvas.

  4. In the Settings Panel, click on the image thumbnail under the Image section.

  5. Select a new image from the Asset Manager or upload one from your computer.

  6. The new image will automatically replace the old one. Adjust size and alignment using the Style Panel if needed.

  7. Click Publish to save the changes.

Pro Tip: Name your images descriptively (e.g., “team-photo.jpg”) to improve your site’s SEO and accessibility.

Edit the FAQ Section

  1. Log in to Webflow and open the project in the Designer.

  2. Use the Navigator panel to find the FAQ section on your page.

  3. To edit text:

    • Click directly on a question or answer and update it.

  4. To add a new FAQ item:

    • If the FAQ is part of a CMS Collection, go to the CMS Panel and select the FAQ collection.

    • Click + New Item, then fill in the question and answer fields.

  5. To delete an FAQ item:

    • Locate the FAQ item in the CMS or directly on the canvas and delete it.

  6. Click Publish to make the updates live.

Link a Button

  1. Log in to Webflow and open your project in the Designer.

  2. Use the Navigator panel to find the button you want to link.

  3. Click on the button element on the canvas.

  4. In the Settings Panel, go to the Link Settings section.

  5. Choose the type of link you want:

    • Page: Link to another page in your project.

    • External URL: Enter a full URL to link to an external site.

    • Section: Link to a specific section or anchor point on the same page.

    • Email/Phone: Use mailto: for emails or tel: for phone numbers.

  6. Save your changes and click Publish.

Disclaimer: Ensure external links open in a new tab so users don’t lose access to your website.

Host & Connect a Custom Domain

  1. Log in to Webflow and open your project.

  2. Go to Project Settings from the dashboard.

  3. Navigate to the Hosting tab.

  4. Under Custom Domains, click Add Custom Domain.

  5. Enter your domain name (e.g., www.example.com) and click Add Domain.

  6. Update your DNS settings with your domain registrar:

    • Add the provided A Records and CNAME Records to your DNS settings.

  7. Once updated, return to Webflow and click Check Status.

  8. When verified, click Publish to host your site on the custom domain.

Pro Tip: Double-check your DNS settings to avoid downtime during the connection process.

Change Domain/URL

  1. Log in to Webflow and open your project.

  2. Go to Project Settings > Hosting.

  3. Under Custom Domains, click Add Custom Domain.

  4. Enter your new domain (e.g., www.newdomain.com) and click Add Domain.

  5. Update your DNS settings with the new A and CNAME records provided by Webflow.

  6. Verify the new domain and click Make Default to set it as the primary domain.

  7. Click Publish to make the changes live.

Disclaimer: Changing your URL can affect SEO rankings. Set up redirects from the old URL to avoid losing traffic.

Switch Image to Video or Vice Versa

  1. Log in to Webflow and open the project in the Designer.

  2. Locate the image or video you want to replace.

  3. Delete the existing element and use the Add Panel (A) to insert a new one:

    • For videos, drag a Video Element and paste the video URL.

    • For images, drag an Image Element and upload or select your image.

  4. Adjust size and alignment using the Style Panel.

  5. Use the Preview Tool to ensure responsiveness on all devices.

  6. Click Publish to save the changes.

Tip: For videos, consider lazy loading to improve page performance, especially on mobile devices.

Round Corners (Container, Video, Image)

  1. Log in to Webflow and open your project in the Designer.

  2. Select the container, image, or video element you want to edit.

  3. In the Style Panel, locate the Borders section.

  4. Adjust the Radius field to round the corners (e.g., 10px, 20px).

  5. Preview the changes on desktop, tablet, and mobile views using the Device Preview Tool.

  6. Click Publish to make the updates live.

Pro Tip: Experiment with corner radius values to find the perfect balance between sharp and rounded edges.

Change Menu Items

  1. Log in to Webflow and open your project in the Designer.

  2. Locate the Navbar using the Navigator Panel.

  3. Click on the menu text to edit it directly or use the Settings Panel to update links.

  4. Rearrange items by dragging them within the menu structure.

  5. Adjust the menu design (e.g., colors, font, spacing) using the Style Panel.

  6. Test the menu on mobile and tablet views with the Device Preview Tool.

  7. Click Publish to update the changes.

Adjust Spacing and Alignment

  1. Open your Webflow project in the Designer.

  2. Select the element you want to adjust.

  3. Use the Style Panel to modify:

    • Padding: Space inside the element.

    • Margin: Space outside the element.

  4. To align content, use the Layout section in the Style Panel (e.g., Flexbox settings).

  5. Test the changes on different devices with the Device Preview Tool.

  6. Click Publish to save your updates.

Add or Remove Products

  1. Go to the CMS Collections panel and select Products.

  2. To add a product:

    • Click + New Item and fill in details like name, description, price, and images.

    • Save your changes.

  3. To remove a product:

    • Locate the product in the collection.

    • Click the gear icon and select Delete.

  4. Click Publish to make the updates live.

Update Pricing or Inventory

  1. Open the Products Collection in the CMS.

  2. Select the product you want to edit.

  3. Adjust the Price or Stock Quantity fields.

  4. Save your changes and click Publish.

Configure Payment Methods

  1. Go to Settings > Ecommerce Settings > Payments.

  2. Choose a payment provider like Stripe or PayPal.

  3. Follow the steps to connect your account.

  4. Save your changes and click Publish.

Handle Customer Orders

  1. Open the Ecommerce Settings and navigate to Orders.

  2. Click on an order to view details.

  3. Mark orders as Fulfilled once processed.

  4. Save changes, and Webflow will update the order status.

PreviousIntroduction to WebflowNextDeutsch

Last updated