Tutorials

Add or Remove a Page

To Add a Page:

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

  2. Click on the Pages tab in the top-left menu.

  3. Click + Add Page and name the page.

  4. Your new page will be added to the project.

To Delete a Page:

  1. Right-click on the page you want to delete in the Pages panel.

  2. Select Delete Page from the options menu.

Note: Changes in Framer are saved automatically. To update the live website, click Publish.

Update Contact Form

  1. Log in to Framer and open your project.

  2. Select the form element you want to modify.

  3. To modify fields:

    • Select a field in the form and use the Properties Panel to adjust its settings.

  4. To update email notifications:

    • Add or change the recipient email in the Form Submission Settings.

  5. To edit the thank-you message:

    • Adjust the Success Message in the Properties Panel.

Tip: After making changes, always test the form to ensure submissions work as expected. Click Publish to make updates live.

Add a Blog Post

  1. Log in to Framer and open your project.

  2. Navigate to the Blog Section of your website.

  3. Click Add Post to create a new blog entry.

  4. Enter your title, content, and media (images or videos).

  5. Save the changes and click Publish to make your blog post live.

Pro Tip: Use headings, bullet points, and images to make your posts engaging and mobile-friendly.

Embed Third-Party Content

  1. Open Framer and navigate to your project.

  2. Select the Embed option from the Add Menu.

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

  4. Resize and position the content using the Properties Panel.

  5. Click Publish to make the embedded content live.

Pro Tip: Preview your site after embedding content to ensure proper display across devices.

Edit Text

  1. Log in to Framer and open your project.

  2. Navigate to the page containing the text you want to change.

  3. Click directly on the text element. A text editor will open.

  4. Type your new text or paste it into the editor.

  5. Use the Properties Panel to adjust font, size, color, or alignment.

  6. Framer saves changes automatically. Click Publish to make your updates live.

Change Colors and Fonts

To Change Colors:

  1. Select the element (text, background, or button) you want to change.

  2. Use the Properties Panel to update the Fill Color or Font Color.

  3. For global changes, adjust Color Styles under the Design System tab.

To Change Fonts:

  1. Select a text element and go to the Properties Panel.

  2. Update the font family, size, weight, or alignment.

  3. Apply site-wide changes by editing the Font Styles in the Design System.

Pro Tip: Use consistent font and color styles across your project for a polished look. Click Publish to make the changes live.

Replace an Image

  1. Navigate to the page with the image you want to replace.

  2. Click on the image to open its settings in the Properties Panel.

  3. Click the current image thumbnail to replace it.

  4. Choose an image from your Library or Upload a new one.

  5. Framer saves changes automatically. Click Publish to apply the changes.

Pro Tip: Use optimized images to maintain fast loading times on your site.

Edit FAQ Section

  1. Log in to Framer and open your project.

  2. Locate the FAQ section on your page.

  3. Click on a question or answer to edit the text.

  4. To add a new FAQ:

    • Duplicate an existing FAQ block or use the Add Element tool to create a new one.

  5. To delete an FAQ:

    • Select the block and press Delete or use the toolbar to remove it.

  6. Click Publish to make the changes live.

Link a Button

  1. Log in to Framer and open your project.

  2. Navigate to the button you want to link.

  3. Click on the button to open the Properties Panel.

  4. In the Link field, set the desired link destination:

    • Page: Link to a page within your project.

    • External URL: Paste the full URL.

    • Section: Use an anchor link to jump to a specific section on the page.

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

  5. Framer saves changes automatically. Click Publish to make the button functional.

Host & Connect a Custom Domain

  1. Log in to Framer and open your project.

  2. Click Publish in the top-right corner.

  3. In the publish menu, select Custom Domain and click Connect a Domain.

  4. Enter your domain name and click Connect Domain.

  5. Framer will provide the required DNS settings:

    • Add the provided A Records and CNAME Record to your domain’s DNS settings.

  6. Once updated, click Verify Connection in Framer.

  7. The site will go live after DNS changes propagate (this can take up to 48 hours).

Change Domain/URL

  1. Log in to Framer and open your project.

  2. Click Publish in the top-right corner.

  3. In the publish menu, click Manage Domains.

  4. Enter the new domain name and follow the DNS instructions provided by Framer.

  5. Verify the connection to activate the new domain.

Pro Tip: Update any internal links to reflect the new URL.

Switch Image to Video or Vice Versa

  1. Navigate to the element you want to replace.

  2. Delete the existing image or video element.

  3. Add a new element:

    • For images: Use Add Media > Image.

    • For videos: Use Add Media > Video and paste the video link or upload a file.

  4. Adjust the size and placement using the Properties Panel.

  5. Framer saves changes automatically. Click Publish to make updates live.

Disclaimer: Videos may increase page load times. Optimize video sizes before uploading.

Round Corners (Container, Video, Image)

  1. Select the element you want to modify.

  2. Open the Properties Panel and locate the Corner Radius field.

  3. Enter a value (e.g., 10px) or adjust the slider to round the corners.

  4. Framer saves changes automatically. Click Publish to apply the updates.

Change Menu Items

  1. Open the Header section containing the menu.

  2. Click on the Menu component to open its settings.

  3. To edit menu items:

    • Update the text by clicking directly on a menu item.

    • Change links by entering new destinations in the Link field.

    • Rearrange items by dragging them into position.

  4. Click Publish to make the menu updates live.

Pro Tip: Check how the menu looks on different screen sizes using the Preview Tool.

Adjust Spacing and Alignment

  1. Select the element you want to adjust.

  2. Use the Properties Panel to modify:

    • Padding: Adjust the space inside the element.

    • Margin: Adjust the space outside the element.

  3. Use alignment tools to position elements vertically or horizontally.

  4. Framer saves changes automatically. Click Publish to update your site.

Add or Remove Products

To Add a Product:

  1. Navigate to the Shop Section of your project.

  2. Click + Add Product and enter product details like name, price, and description.

  3. Upload product images and save the changes.

To Remove a Product:

  1. Select the product in the Shop Section.

  2. Click Delete in the toolbar.

Click Publish to make the updates live.

Update Pricing or Inventory

  1. Open the Shop Section of your project.

  2. Select the product you want to update.

  3. Modify the price or inventory count in the product details.

  4. Click Publish to save the changes.

Configure Payment Methods

  1. Go to Ecommerce Settings in your project dashboard.

  2. Add a payment method (e.g., PayPal, Stripe).

  3. Follow the connection instructions provided.

  4. Save and publish your changes.

Handle Customer Orders

  1. Navigate to Order Management in the dashboard.

  2. View order details such as products, shipping, and payment status.

  3. Mark orders as fulfilled once shipped.

  4. Framer saves changes automatically.

PreviousIntroduction to FramerNextDeutsch

Last updated