Build an Advanced Framer Website with Oliur

Cover image of Oliur giving a tutorial on how to build a Framer website
Cover image of Oliur giving a tutorial on how to build a Framer website
Cover image of Oliur giving a tutorial on how to build a Framer website

1. Intro

In this course, we'll be diving into the process of building a website in Framer. This guide is perfect for those who have some experience with Framer, perhaps having already constructed a basic website, and are now eager to tackle something more intricate.

2. Setting up the Homepage and Navigation

Join us in this Framer tutorial as we build a sleek, responsive website. We'll start with easy navigation using Framer's own tools, then jump into creating an eye-catching hero section. You'll get tips on styling, like making cool text effects and adding images. Plus, learn how to ensure your site looks great on any device, from desktop to mobile. Perfect for those looking to step up their web design game with Framer!

3. Building the Pricing Page

In this Framer tutorial, we're diving into building a sleek, responsive pricing page. We kick off by setting up our page and then borrowing elements like the navigation and hero section from our homepage for a cohesive look. Watch as we tweak the layout, style our pricing columns with neat features and descriptions, and ensure everything is looking sharp on both desktop and mobile.

4. About and Contact Page

In this Framer tutorial, we're tackling the About and Contact pages. We start by duplicating our Pricing page and transforming it into an About page - tweaking the hero section, ditching the pricing grid for a cover image, and adding some stylish text and job listings. Then, we dive into the Contact page, where we seamlessly integrate Framer's pre-built contact form and FAQs section, tweaking the styles to make them our own.

5. Updates and Changelog Pages using the CMS

In this video, we guide you through the process of updating the change log section of your website. Starting with adding a CMS (Content Management System) and a blog page, we demonstrate how to utilise the provided templates and customise them for your needs. The tutorial covers various aspects of web design including adding sections, adjusting padding, and ensuring responsiveness across devices.

6. Setting up and Managing a Blog using the CMS

In this video, we walk you through the process of adding a blog to your website using the CMS system. To make the most of your time, we start with an already-established blog section containing several posts, each with unique content and thumbnails.

7. Site Overview

In this brief video, we showcase the completion of our full website, highlighting the recent updates made to the navigation for improved functionality. We take you on a quick tour through the various pages, including the change log and contact page, demonstrating the seamless operation of each section. A key aspect of our website is its responsive design, ensuring an optimal viewing experience across different devices. This marks the successful completion of our website, fully functional and ready for visitors.

If you're having trouble building your Framer website, or if you'd like some extra guidance, don’t hesitate to reach out.

Each of our templates comes with step-by-step video tutorials, making it simple for you to customise and launch your website with confidence. Whether you need a portfolio, blog, or business site, our templates are designed to be flexible and user-friendly.

Pro Shot

Promote your iPhone Pro photography masterclass.

Course landing page Framer website template
Pro Shot

Promote your iPhone Pro photography masterclass.

Course landing page Framer website template
Pro Shot

Promote your iPhone Pro photography masterclass.

Course landing page Framer website template
Financial GPT

Launch your next innovative AI platform with full-scale website.

AI startup Framer website template
Financial GPT

Launch your next innovative AI platform with full-scale website.

AI startup Framer website template
Financial GPT

Launch your next innovative AI platform with full-scale website.

AI startup Framer website template
Subscription

Achieve consistent MRR with an attractive website.

Design agency's Framer website template
Subscription

Achieve consistent MRR with an attractive website.

Design agency's Framer website template
Subscription

Achieve consistent MRR with an attractive website.

Design agency's Framer website template

Remix. Customise. Publish.

All done in a few clicks.

Framer website template

Save time and money with the modern way of building a website.

Framer website template

Save time and money with the modern way of building a website.

Framer website template

Save time and money with the modern way of building a website.

Affiliate program

Earn up to $199 per order as an affliate.

Affiliate program

Earn up to $199 per order as an affliate.

Affiliate program

Earn up to $199 per order as an affliate.

Autumn Sale | 20% off on all templates