How to Launch Your Website Using Framer’s FREE Hosting

I’m going to show you how to build a free website and by the end of we’re going to have a website that looks something like this and in order to do this we’re going to use something called a framer so let’s go over to my desktop here and I’m here at framer dcom and they do have a really really nice website and you can see that they have some pretty notable customers too including SpaceX and quora uh but what I wanted to show you first before we get into the tutorial is the pricing section so um yes they do have the free plan but if we come here to the personal tab they also have.

paid plans that are start at $5 a month but if you come down here to the FAQ section you’ll see that they start talking about the free plan where you have access to a website with up to 1,000 pages and 5 megabyte file uploads um it also does say our free plan is ideal for non-commercial use I think the reason they say that is because you cannot connect a custom domain name with this plan you have to use a framer subdomain we’ll get that a little bit later on in the tutorial but for now let’s go ahead and sign up for an account so we’ll click on sign up here and then I’m going to.

Now but Let’s First Start Off Down Here

continue with my email address and then they’re going to send you an email to verify your email address so I went ahead and did that now I’m going to enter my information and agree to the terms of service click continue and I’m going to use framer for personal use all right and after doing that we come to the framer editor so we’re going to basically in this tutorial make two pages one will’ll create from scratch and then one we will make from one of the pre-existing templates that you can find under the pages section here so we are under the uh insert menu right now but let’s first start off down here under the elements.

they have a whole bunch of different elements as you can see here we want to just pick an image and create a header with that so under media let’s take an image object and drag that onto our canvas and what’s really cool about framer if you’ve used other website Builders is that you can pretty much drag this and drop it anywhere on the canvas and you’ll see if you’re in the center you get that vertical uh Pink line to indicate that and if you want your image to be responsive so right now it’s a absolute where it’s dropped on the canvas you can drag the edges of that image not only to make it bigger.

but to snap it to the side so you’ll see that this blue uh Edge Bar up here turned blue to indicate that and then we can do that for the right hand side too all right that looks good now how do we actually change the image this was tricky for me at first there is a bit of a learning curve for framer so with the image element selected you have to come down to Styles fill choose image and then we’ll pick something from our desktop so let’s try to upload this image right here and unfortunately because we are on the free plan uh we can’t upload anything more than 5 megabytes so uh we could.

Like Next Let’s Add Some Text So We

either compress that but I have a backup image here we’ll upload this one instead it’s only 2.8 megabytes we’ll open that and it’ll upload in just a second okay that looks good I’m going to zoom in here with my keyboard control+ and uh also the framer editor I’m going to middle click and I can pretty much drag the canvas around anywhere i’ like next let’s add some text so we can come up here to the insert menu again and they have a couple different ways you can insert text so they have this creative pre-built text which we’ll start out with first and then they also have it up here I’ll show you how to do.

that next so let’s create let’s drag this onto our canvas and we’ll put this right on top of the image and then we’ll make sure it’s centered and then to change the text itself we can make sure we have that element selected come down here to the right and instead of saying fit we’re going to call this website Tony hikes all right that looks good and we can simply drag this around to make it look bigger change the font size and then we’ll recenter that all right so let’s change the text color right now it’s black uh I want to make it white and that kind of makes it blend into the background image so.

I also found this really interesting um there’s kind of this hidden menu I wanted to add some uh either a shadow or an outline to my text and I couldn’t really find out how to do that at first but if you come down here to where it says text and just in this black area you right click then you can add these other properties so um let’s see what a stroke looks like and that kind of just puts an outline for the text and you can make that as thick or as thin as you want in order to get rid of that just right click on stroke and then we’ll remove it and instead of.

Stroke Let’s Do a Shadow and I’m

stroke let’s do a shadow and I’m going to increase X and Y until it pops out from the background and then decrease the blur okay so that looks better let’s add another image now the first the mistake that I made first when I use framer was I just would come back here to insert same thing that we did before find an image and then drag it on the canvas but when you publish that image is going to have a position that is as these blue lines indicate up here um favoring up and to the left so if you have a really wide screen uh it’s going to be way off to the left we don’t.

want to do that it’s much better to use a layout and then put your elements inside of that so let’s do two columns and we can just drag and drop that to the size that we want and then to make sure we’re selecting both columns the entire element um we can come up to layers and expand the desktop and we have the stack here um and that as you can see we have this entire element selected and now we can drag that around and make sure we’re centered on the page here there we go and now we could drag in another image element like we did before but each element is actually can be converted.

Now and Let’s Search for You Know A

into an image so with the left column selected we come over here to our properties and instead of the fill being a color we can get rid of that and add a different fill and then up here they’re not labeled but on the right hand side you’ll see that that kind of looks like an image so we’ll click that and just like before we can either choose an image from our computer but they also have plugins so if you’re not familiar unsplash is a image platform they have a couple other plugins but we’ll use that one right now and let’s search for you know a hiking picture and there’s a bunch of images here you.

can scroll for a while and probably still not see all of them um I’m going to pick this one and that’ll upload right to our site and then for the right column let’s go ahead and add some text so before we did insert creative and Drug our text into here uh we’ll do that but I also wanted to show you that you can create text up here so click on text and then kind of drag and drop and that ends up being something like a text box I’ll fill that in with some text that I already have okay something like that and then for this section heading we can drag this to the appropriate size.

On the Right Hand Side Here and Just

and make sure that we’re in the center here and then pull this up okay that’s looking good I did also want to point out that for each one of these um text elements you can come into the properties on the right hand side here and just like again if you’re familiar with web design you can have um different types of elements like a header one header 2 paragraph so we can if we like this layout right here the way it looks the font the size all that stuff we can assign this as header one so then in the future we can just quickly reuse that header one formatting and the same thing for the paragraph.

element here we’ll do the same thing uh we’ll do a new style and assign this to the paragraph all right that looks good now this is the desktop view and by default that’s the only view if you wanted to create a view for you know a tablet you can simply come up here to the top and add that as well and what it’s going to do is generate that at uh what have we got 810 pixels wide and we’re going to have to make some modifications here with our text all right that looks good and then we’ll do the same exact thing for mobile phone and again I’ll make those modifications all right that looks.

First Page Let’s Go Ahead Head and Add

good so we got our mobile we got our tablet and we got our desktop um I also wanted to point out that if you wanted to add more content to the page it it does get cut off right here but it’s really easy to increase the size so make sure you’re in the layers section click on uh one of your break points desktop for example and then all you simply have to do is increase the height so I’m just clicking and holding on the height and you can see the pages get a little bit longer okay so that looks good for our first page let’s go ahead head and add a new page so in.

order to do that we can come to our Pages tab here click this plus button and do new page we’ll call this Mount Everest and as I promised let’s start from a template this time so up here at the top toolbar let’s go to insert pages and there’s a bunch of different templates that you can choose from uh we’re going to pick project page so let’s just click on ADD page and what that does is gives you these pre-built templates with all the break points for desktop tablet and phone so as you can see here we can simply change this image like we did before so click on that element get rid of the existing.

All Right Let’s Use This One and By

fill add a new one we’ll pick one from the plugin again use unsplash and then we’ll see if they have a picture of Mount Everest all right let’s use this one and by just changing that one image on the desktop it automatically updates the views for tablet and phone as well I’m going to make a few more changes here to customize the page all right this is looking good the other thing I wanted to show you on this page was the navigation bar at the top because we do want to link this page to our homepage and vice versa so I’m going to get rid of this completely so with that element select it I’m.

going to delete it and then I wanted to show you under the insert menu they do have a whole section of navigation bar so they have dark themes and light themes we’re just going to go with a simple light theme now and we’re going to drag that up to the top here and what’s cool about a component like this is you can double click it and as it says here components can be reused which is perfect for a navigation bar so let me show you how to work with this so desktop phone phone open let’s zoom in a bit here and we will customize this so um basically let’s get rid of all of these.

These and Let’s Start Out with Just A

other links I’m just going to click delete or hit delete on my keyboard for all of these and let’s start out with just a link back to the homepage so with this link select it we’re going to come over here and change that text from features to home and then up here at the top we have option for link so we want to link to the homepage and then while we’re at it let’s actually duplicate this link and do the Everest link as well so with that link selected we’ll come over here we’ll link to the homepage and we’ll call that Everest all right all the way back up here let’s go back to our.

Mount Everest page so here we have our Navar with home and Everest but if we go back to our pages and go to the homepage that bar is not here yet so how do we get that over there well we can simply come back over to the Mount everis page and copy highlight that element uh you can right click copy and then go back to the homepage and right click paste and then let’s move this around oh yes and one last thing I wanted to show you before we go ahead and publish this is that there are some other cool features like if you select this image come over here to the right hand side.

The Top Let’s Publish Our Website So I’ll

with the property and they have a shadow so U just to give it a little bit of depth to the page we can add a shadow all right that looks good so we have our homepage which is now and we have our Mount Everest page up here at the top let’s publish our website so I’ll click the publish button and down here at the bottom it says the project has been published to this random domain name uh let’s change that so if we come up here to the upper left hand corner and go to site settings and then domain we’ll see that random URL that it assigned us ATF framer doapp we can change that.

get a free framer subdomain let’s change that to tonyh kes. framer website see if that’s available it is and that is now our new URL so let’s click on that and see what our website looks like and there you go like I said earlier this is a pretty wide screen so things are spread out more but let’s look at what this looks like on a tablet or a mobile phone so in Google Chrome developer tools we can use this feature to see what different devices would look like so for example an iPhone 12 Pro this is kind of what that would look like and then we can go back to responsive mode just to kind.

All Right Let’s Test Out Our Links Make

of see how you know wides screen would look like what we saw initially and then maybe a tablet would look like this and then a phone would start to condense things to be responsive all right let’s test out our links make sure they’re working so let’s click on the Everest link up here that should take us to the Everest page and it does and then we can go back to the homepage here and that works too so the last thing I wanted to point out here was uh down here in the bottom right hand corner we do have this hovering Watermark made in framer this is just a limitation of the free version of framer.

to get rid of this you would have to upgrade to a paid plan here are some of the limitations we encountered with framer’s free web hosting and if these are deal breakers for you I want to make you aware of another web hosting option called element that gives you hosting with unlimited Pages you can register your domain name anywhere you’d like and you won’t have watermarks on your website even if you did choose to go with a paid framer plan you’re still locked into the framer ecosystem which is quite powerful and dynamic as you saw but Elementor is a bit more intuitive and it’s built on an opsource platform called WordPress Elementor is powered by.

The Google Cloud Platform Has Dozens

the Google Cloud platform has dozens of drag and drop widgets that allow you to customize your website in really neat ways and also a robust integrated AI website builder that can not only build your entire website for you but also help you along the way with content generation Elementor is the sponsor of and I have a link for you in the description below to get you started also here if you want to learn more about elementer thank you Elementor for sponsoring.