TILDA - Build and Publish A Beautiful Free Website Without Code

30 in 30 Dec 26, 2020

Yesterday I shared a short tutorial on how to build a free website using WordPress. Today I am going to explore another platform used to build websites without any knowledge of coding. Tilda is an intuitive website builder that helps you to make a website without coding. Tilda makes use of their hundred of pre-made templates to make your website come to life.

Using Tilda we can make a brand new website for free. Follow this short tutorial to see how this drag and drop website builder work.

Step 1: Go to Tilda Website

Visit tilda.cc and click the button that says "Create a Website for free"

Tilda Homepage
Tilda Homepage

After clicking the link you will be directed to this registration page

Tilda Registration

Fill in the form above with your name, email address and password. Then sign up. After clicking signup you might have to check a box to prove you're a human. Just like the one you see below

Step 2: Create a New Site

After the sign up step, you will be lead to this page where you have to create your project and name it. See below

Name your project

After naming your project click the "Create" button.

I have named my project "Monalidor", and after clicking create, the following page appears.

As you can see our website is just empty now...so let's create a new page by clicking the button that says "Create new page"

Step 3: Pick a Template

As soon as we click "create new page" we will be directed to this page that has a collection of templates. Don't be overwhelmed here, just pick something that you think will work for the kind of website you want. You can always change it later or modify it to your liking.

Tilda Templates
Tilda Templates

As you can see above, you have a lot of options to pick the template you desire.

For this simple website we are going to create I am going to pick a Basic Business Page. Mind you that this is just a starting point you can change this template by adding or removing new blocks of images, texts or columns.

So pick the following template and click Create.

Basic Business Page Template
Basic Business Page Template

Step 4: Edit Your Template

After creating your page/template you will be lead to this page

Edit Template

Before you reach the page above Tilda will give you a quick introduction in the form of slides of how to use their platform. Be free to quickly go over the five slides and that 2-min video if it appears, if it doesn't just follow along...

From here most of the layout should be quite intuitive. For example, if you click on the word 'Company name', a cursor will appear and you can start typing. Also if you double click the text the whole text block will be selected and you can change the words accordingly just like I have done here below

Replacing text on Template

See what I have done there? I have replaced all the texts that came with the template. Also if you pay close attention you will notice when you start typing a white bar appears at the very top of the page...that's a fixed formatting menu that will help you to format your text. Maybe you want to add a link, to change the font family, to make the text bold or italic or even to add some colors...explore those options on the white menu bar.

Be free to hover over any icon or options to see and words will pop up to explain what that specific icon or option is for.

Second Section

If you scroll down, you will reach this section...

Second section of the Template

Let's do the same here and start by editing the text. The drill is the same click or double click on the text to start writing your own text.

If you wanna replace that photo just click on the photo and an upload box will pop up. See how I have achieved that here below...I replaced the image with my own

Replacing both text and image

See how easy that was. Tilda makes it extremely easy to edit text and images on their platform.

Third Section

Ok, let's edit the third section together. Then after this section you should be able to play around the platform and learn about few things on your own. This is how the third section of our template looks...

Third Section of the Template

Again I will edit the heading, the description text and the image on this section. This section has three alternating blocks of images and texts.

While we're still here it's important to mention that there are three or four areas that you can use to edit your content. Let's take a look...

Step 5: Know Tilda Tools for Editing Content

I would like you to get familiar with the following tools or sections of the platforms that you can use to edit content. I have mentioned one before but I am going to reiterate here

Formatting Bar

I don't know if this is the formal name for it, but this is your white menu bar that appears whenever you click on a text block. It looks like this

Tilda Text Formatting Bar

As you can see you have Bold, Italic, Underline and so many other icons used to format text. Use this menu bar whenever you want to format your text, it works just like your favorite word processor.

Block Settings and Content Bar

This is where you can also edit the content for your section. Tilda gives you two places to edit your content. You can either edit your content on the page itself or you can click this content button and a box will pop up for you to edit. Make sure you click Save or Save and Close after you're done editing using this option.

Block Settings and Content Bar

The Settings button - I would not worry much about this option for now. But when am comfortable with the platform the Settings button will give me options to change a block or to adjust a few things on the block am already in. Be free to explore that option when ready but as of now it's not necessarily.

The dropdown menu indicated now by TL02 is used to have a fast preview of how your block will look like in case that option is selected. Click the dropdown menu and hover over the different options to see what you get. You don't have to click...just hover...and when you're ready and happy with one of the options you can click it to see exactly how it will look on your page.

Blocks Bar (Copy, Duplicate, Delete...)

The following bar has options for you to be able to copy a block, to duplicate, delete or even move it up and down. Play around to see how each option works. If you mess up there is always an Undo option at the very top of the page

Add Block

Whenever you see this plus sign it indicates that you can add a block when you click it.

Tilda Add a New Block

Step 6: Publish Your Site

Our last step is to publish our site. When you're done editing you can either preview how your website looks or if you're ready you can hit publish for the whole world to see. This bar is shown at the very top of the page

Publish Tilda Website

Upon hitting the Publish button, you should see this dialog box. Put the name under which you want your website to be found. An example could be 'monalidor' and the full address will be 'monalidor.tilda.ws' Tilda will finish that last part (.tilda.ws), all you have to do is pick a name.

Site Address

Congratulations 🎉…Your website is live! You can share that link with others and also that's how your website can be found on the Internet. Next time you want to edit your website or publish a new site just use your email and password to login to Tilda.

Mind you that I have only touched the surface of Tilda, they offer a lot of other services. If you wanna have a custom domain, an online store or any of their premium features you may want to buy a subscription. They start at $10/month

If you enjoyed this tutorial or have questions just leave the comments below.

…🥑🥑

One day you will wake up and there won’t be any more time to do the things you’ve always wanted. Do it now

Tags

Ami Amigo

Ami Amigo (pseudonym) is one of the main contributors to this blog. He is a tech aficionado, developer, blogger and an online instructor. Ami Amigo studied Computer Science and Philosophy in college

Great! You've successfully subscribed.
Great! Next, complete checkout for full access.
Welcome back! You've successfully signed in.
Success! Your account is fully activated, you now have access to all content.