How to make a website using Tilda constructor: a step-by-step guide

Tilda is a handy site builder with which a person without web development experience can create a functional resource. Step-by-step guide will help you quickly understand the features and features of the platform.

Why choose Tilda

At the mention of Tilda, the epithets “fashionable” and even “hyip” come to mind. The designer is actively used by representatives of the so-called creative class: freelancers of different specialties, representatives of web studios.

Tilda has become fashionable for a reason. The advantages of the designer distinguish it from similar solutions and even allow to compete with full-fledged CMS.

Like all designers, Tilda allows you to make a website without special knowledge. The interface of the platform is intuitive. At each stage of work, the system prompts the user to the following steps. Ready-made templates and modules allow you to quickly create a beautiful and functional resource.

Tilda stands out from other designers with a focus on visual appeal and ease of perception of content. These are not empty advertising slogans: the platform is distinguished by flawless typography and the successful integration of visual and textual content. This allows developers to position "tilde" as a tool for creating longridov.

Tilda users have access to modules and templates with which you can quickly create conversion landing pages. The designer is suitable for running an online store. At Tilde you can make a corporate website, a virtual business card with a portfolio, a content project.

Examples created using the resource designer can be found in the MadeOnTilda section on the official project website. Pay attention to the example of the integration of Tilda and WordPress. "Layfhaker" uses the designer to create longridov, and the main project site works on WP.

Tilda has flaws that will be discussed below. But the main one is to be discussed immediately.

Tilda cost

Three tariff plans are available to users: Free, Personal and Business.

Opportunities free tariff is enough to create a site-business card. The user receives 50 MB of disk space, the ability to create one site and up to 50 pages. Free Plan provides access to only part of the modules. Therefore, the functionality of sites at a free rate is limited.

Important point: users of a free tariff can register the site only on a subdomain. The URL looks like this: vash-site.tilda.ws. This practically does not affect the user experience, or even the credibility of the site by the search engines. Living users by and large do not care on which domain the site operates. Still, commercial sites are usually registered in the domain zones .ru, .com, .biz and the like.

Theoretically, the domain name affects the user experience. It is easier for a person to remember the URL pupkin.ru or roga-kopyta.com, than pupkin.tilda.ws or roga-kopyta.livejourlnal.com. But still, the vast majority of visitors come to the site from the search and the links, and does not enter the address of the resource in the browser line.

For a corporate site, content project, online store, it is better to use the tariff plan Personal. It costs 500 rubles per month. After payment, the user receives a domain name in the zone .ru or .com, the ability to create up to 500 pages and use 1 GB of disk space. Also, a paid rate provides full access to the library modules.

Access to the site builder costs 6000 rubles per year. This is unreasonably expensive. A full site on any CMS, for example, WordPress, Joomla !, Drupal, OpenCart, will cost much less.

For example, one of the leading hosting providers of Runet as of November 2018 offers a virtual hosting service for 3,344 rubles a year. Bonus user gets four domains in zones .ru and .rf and free SSL-certificate. The hoster provides 17 GB of disk space. This hosting provider also has cheaper tariff plans.

Business tariff includes all the features of Personal. Additionally, the user can create up to five sites. The main difference is the ability to export code and install Tilda on your server.

Connection for the Business tariff requires payment of 1000 rubles per month or 12 000 rubles per year. Please note that the hosting provider services must be paid separately.

The choice of tariff depends on the format of the site and the needs of the owner. The decision will help the table.

Tariff / Features

Price per year

Opportunities

Who is suitable

Free

Is free

Site on a subdomain, up to 50 pages, up to 50 MB on disk

Freelancers who need a small business card site

Personal

6000 rubles

Website on a paid domain, up to 500 pages, 1 GB on disk, full access to the library of modules

Bloggers, Publishers, Companies, E-merchants

Business

12 000 rubles

Possibilities of Personal tariff, the option of exporting code to the server, up to five sites on one account

No one. It is better to install an open source CMS on the server. Even some commercial CMS will be cheaper.

If the high cost of the designer is not a problem, go to the step-by-step instructions on creating a site on Tilda. In the end, each user can experience the Personal tariff for free for two weeks. As a result of testing, you can understand whether to use the platform.

Start by planning

To create a website, you need to understand what tasks it will solve. Understanding will help answer the key questions: what will be the structure of the resource, what will it look like, what will be published on the pages.

Determine the necessary functionality and design will help our detailed guide to ordering a site. Here is another very useful guide, which is easy and convenient to plan a site.

Decide how you will make the site: create pages from scratch using ready-made blocks from the library or use the proposed templates.

The first method allows you to make the pages as you see them. With the help of modules from the library, you can implement the planned functionality and appearance.

In order for the site as a whole and its individual pages to be effective, the administrator will need good taste and a few examples of cool resources. The future admin must understand the visitor interaction scenarios with the site. This will help implement the planned functionality and efficiently arrange the blocks on the pages.

User Tilda should at least in general terms, know how people perceive web content. Very useful information is in our guides and articles: "How to ensure the readability of content", "Visual hierarchy in UX: how to direct the attention of the user", "How to write, optimize and impose an article."

If you decide to make pages from scratch using a block library, start by creating prototypes. Use Axure RP or other prototyping tools. Page sketches can be drawn on paper. As a last resort, simply list the blocks that should be on each page.

The second method is suitable for those who do not trust their own taste and have no idea about the design, functionality and usability of sites. Use ready-made page templates from the library. In the catalog they are grouped by thematic categories: "Business", "Shop", "Event", "Blog", "Contacts" and "Questionnaire".

Templates can be edited: remove and add blocks or swap them. Therefore, ready-made solutions provide the user with almost the same flexibility as creating a site from scratch from modules.

Working with sample pages has an important advantage. The template serves as a foolproof. It insures distant from web development users from children's mistakes, for example, incorrect and fancy layout of modules, the use of unnecessary elements to the detriment of usability.

The result of planning should be a clear picture of the future site. Plan better to fix on paper. Record at least the following information:

  • The purpose and objectives of the resource.
  • Site structure: list and page hierarchy.
  • Functionality and design of the main pages.

In order to visually show the possibilities of Tilda, I will make a website-business card of a fictional specialist. The resource will include a home page, a portfolio, a description of services, a page about a specialist, contact details and a page of publications.

The fictional specialist will work with the template, as he has no idea about web development. One of the pages of the site he will create from scratch.

How to set up a site on Tilda: basic options

After registering on the platform, go to the tariffs section and connect the Personal tariff. New users have access to a free trial period.

Go to the "My Sites" section, create a new resource and specify its name.

In the "Site Settings" section, enter a description and select a subdomain.

Go to the sections "Analytics" and "SEO" and connect the site to the systems Yandex.Metrica and Google Analytics. In the same section, you can add the Google Tag Manager container to the site. If this is your first time making a website, connect Metrics and Analytics directly.

NB! If you want to connect to the site a paid domain of the form vash-site.ru, immediately proceed to the third step of the instruction. After connecting the domain, return to the basic settings.

Counters can be connected in two ways. First: register the resource in the analytics system. Copy the counter ID number.

Paste the number in the "Yandex.Metrica" ​​field in the "Analytics and SEO" site settings in the "Tildes" panel.

The second way: in the "Analytics" section, click the "Connect" button.

Accept the request from tilde.cc for access to your Google Analytics account. Select a counter and save the changes. If the site already has pages, republish them.

Go to the "SEO" section to connect the site to the Search Console and Yandex.Webmaster services.

Click the "Connect" button next to the name of the corresponding service, accept the request from the tilda.cc application to access the account. Click the "Register Website" button. After automatic registration, the status of "Domain Confirmed" appears on the panel. The system prompts you to add a site map to the Search Console. Take advantage of this opportunity.

In the same way, register the resource in Yandex.Webmaster.

These basic settings are enough to start creating pages. It makes sense to return to the additional settings of the site when the main sections are ready. But before creating the first page should consider an important issue.

How to connect a paid domain to the site on Tilda

After registering a domain in your account on the registrar's website, log in to the service control panel. In the DNS records, specify the IP address of the Tilda 178.248.234.146 server.

If you have registered a domain in Reg.ru, go to "Domain Management - DNS Servers" in your account.

Specify DNS servers ns1.reg.ru and ns2.reg.ru. It is necessary to use a domain registered in Reg.ru on a third-party hosting.

Return to the "Domain Management" section and select the "Zone Management" subsection.

Delete existing class A entries and add a new one instead.

Add the server IP "Tilda" and save the changes.

In the "Add CNAME record" section, specify the www subdomain. It is necessary for the site to be available at the addresses of the form vash-site.ru and www.vash-site-ru. In the Canonical name field, add the value "tilda.ws.", And in the Subdomain field, add the value "www".

In the Tilda control panel, specify the domain in the corresponding section of the site settings. Save the changes.

Changes take effect within a few hours. After setting up the domain, proceed to the creation of site pages.

How to create site pages on Tilda

To create a page, click the corresponding button in the control panel of the site.

Select the appropriate template. If necessary, edit the blocks, add content.

Tilda template pages consist of modules that can be customized, interchanged, deleted and added new. To bring up the edit menu, just hover over the module.

In the upper left corner is a drop-down menu. Use it to select one of the module templates. Note that when you hover the cursor over the template description, the system displays a block thumbnail.

In the "Settings" menu, various options are available to the administrator depending on the block. You can usually customize the appearance, size, indicate the range of visibility on different screens. Typography settings are available for some units.

Pay attention to the possibility of choosing a tag for block headers that are located on the page first. For the main title, it is important to specify the H1 tag. For titles of the second and third order tags H2 and H3 are available.

Examine the available block settings that you use on the page. If necessary, make the necessary changes.

In the "Content" menu, add the information you plan to publish in the module. Editing options depend on the type of block you are working with. For example, in the module page cover, you can select a background image and logo, change the title and description.

The information in the blocks can be edited without opening the "Content" menu. To change the data, place the cursor on the desired line and add a record. If necessary, use the visual editor. A menu appears at the top of the screen.

At the top right is the module control menu. Use the tool to duplicate, delete, hide or change the position of the module on the page.

On the page you can add additional modules from the library. To do this, click the "+" sign on the border of the block, select and add the required module in the library.

Use the block map to evaluate the appearance and functionality of the page. The tool will help you understand which blocks are worth removing, adding or swapping. The page layout can be activated in the "More - Module Map" menu in the upper right corner of the screen.

After editing the modules and content, pay attention to the page settings. The corresponding section is available in the vertical menu at the top of the screen or in the "More" drop-down menu.

In the basic settings, specify the title and description. If necessary, change the URL of the page. This is true for the internal sections of the site.

In the "Badge" section, if necessary, change the image that is used in the preview page.

In the Facebook and SEO section, edit the snippet of the page in social networks and search results. By default, the data for the snippet is drawn from the page title and description.

There are additional features in Facebook and SEO settings. In the "Display in search results" section, click the "Set special meta-data" button. Here you can change the title and description if necessary. Do not waste time on specifying keywords, since search engines do not take into account the keywords meta tag.

Edit the canonical link to the page: make the URL user-friendly. For example, instead of the automatically generated link to contact pages or the trubnikoff.tilda.ws/page1554510.html portfolio, specify the CNC trubnikoff.tilda.ws/contact or trubnikoff.tilda.ws/portfolio respectively.

If necessary, prohibit search engines from indexing the page or suggest to search engines not to follow links on the page.

In the display settings in Facebook you can specify the application ID and Twitter account.

The "Export" tab of the page settings is available only to owners of business accounts. On the "Actions" tab, you can move, delete or duplicate the page.

Note the "Advanced" tab in the page settings menu. Here, a very important function is available to users: inserting arbitrary HTML code into the page header. It can be used to add tracking codes or Schema.org micromarking to a specific section of the site.

To add a Schema.org microdata to the page, implemented via JSON-LD, use the free code generator. Create a script. In the advanced page settings, click the "Edit Code" button. On the page that opens, add and save the microdata.

After publishing the page, check the correctness of the microdata using the Google tool.

Read more about introducing structured data through JSON-LD in our article on new reality in search.

After editing the look and content and selecting the appropriate settings, publish the page. To do this, click the "Publish" button at the top of the screen to the right.

You have created the home page of the site. In the same way make the other pages: "Services", "Portfolio", "About Us", "Contacts", "Blog".

How to work with the internal pages of the site

Tilda позволяет использовать разные шаблоны для каждой страницы сайта. Это удобно, так как в библиотеке есть адаптированные для конкретных задач макеты страниц. Но использование разных шаблонов может удивить пользователя. Представьте, что человек с главной попадает на страницу "Услуги", которая выглядит совершенно иначе. Это может ухудшить пользовательский опыт.

С проблемой легко справиться. Adapt the template selected in the first stage to the tasks that a particular page solves. To do this, just edit the structure of the template page: delete unnecessary and add the necessary modules.

Create a page "Portfolio". To save the monotony save the cover page. Add the necessary information to the module.

Edit the introductory text block. Use it to talk about implemented projects. You can insert a presentation video into this module. To do this, use the drop-down menu in the upper left corner of the block to select the appropriate module layout.

After the introductory block, add a portfolio module to the page. Look for a suitable tool in the "List of Pages" section of the library.

Use the drop-down menu to select the appropriate module template. Edit the content. To add links to work, create the appropriate pages with a description. In the "Content" menu, select the options you want and save the changes.

After the portfolio block, add a conversion module to the page. A suitable option can be found in the library section "Form and Button".

Edit the content and specify the link for the button. This can be a page with contact information or a suitable block from existing pages.

You have created a portfolio page with links to completed projects and a conversion button.

Using templates, create and edit other pages on the site. Imagine that one of them needs to be done from scratch.

How to make a Tilda page from scratch

Imagine that for some reason the publication page needs to be made from scratch. Click the "Create page" button, instead of the template, select the option "Blank page".

Add to the page the necessary modules from the library. On the blog page you can do without the cover, which occupies the entire first screen. It is enough to add a title, after which a grid of posts will appear.

After the title, add the appropriate block from the directory section "List of Pages". At the bottom just add another block with contact information. Specify general settings and publish the page.

You have created the main pages of the site. Pay attention to the navigation menu.

How to make a site menu on "Tilde"

To make the menu, create a new page of the site. Use a blank sheet, not a template. In the block library, select a menu item. Find the right module here.

Add menu items and links to pages in the block content settings. Name of the menu item in the field to the left. Using the button "Select page" add a link to the desired section of the site.

In the content settings section "Logo" add the site name. If you have a logo, upload it.

Add links to profiles in social networks, edit the Contacts button. Specify the page settings and publish it.

Assign the created page as a header for all other pages. To do this, go to the general settings of the site. Select the "Cap and Basement" section and use the drop-down menu to select the desired page.

Save changes and publish all pages. Check how the menu is displayed.

Business card site specialist with basic functions ready. If necessary, take advantage of additional features "Tilda".

What else can Tilda

With the help of additional features Tilda designer can solve special problems. Some of them are listed below.

WordPress Integration

This feature may be of interest to WordPress resource owners who want to use Tilda features. For example, with the help of the constructor, you can quickly create an effective landing page or design a longrid beautifully.

The implementation of the idea can be estimated by the example of "Layfhakera." The project's website is powered by WordPress, and with the help of Tilda, the editorial staff made a series of longrides.

To integrate Tilda with WordPress, you need to pay a business tariff and install a plugin.

CMS WordPress has enough paid and free tools to create landing pages and design longrid. Take this into account when assessing the feasibility of paying a business fare.

Preparation of letters for mailing

The letter constructor can be found in the Tilda control panel. The tool allows you to make letters from ready-made templates and send them to subscribers via the SendGrid or MailChimp services. You can also export code to other email marketing platforms.

Created letters can be stored on a subdomain of the form nashi-pisma.tilda.ws. Letter templates are edited and configured the same way as Tilda site pages.

Creating custom blocks

This feature is suitable for professionals who have at least a basic understanding of web design. Using the Zero Block editor, they can create page modules on their own.

To open the block editor, in edit mode, click the Zero button in the list of modules at the bottom of the page, or select "Zero Block" in the module library.

Integration with external services

The site on "Tilde" can be integrated with external services:

  • CRM.
  • Payment acceptance systems.
  • Forms for contacts.

To integrate in the site settings, select the menu "Forms" and "Payment systems".

Creation of promotional codes

To create and publish a promotional code, open the corresponding menu in the "Payment systems" section in the site settings. Specify the appropriate parameters and publish the promotional code.

Electronic commerce

Tilda has all the tools to quickly launch an online store. The site can be integrated with payment services. In the "Business" section there are page templates adapted for e-commerce. In the block menu "Store" there are modules with which the store pages can be made independently. In the "Other" section, there are modules for integrating the Tilde site with the platform for creating ecommerce sites Ecwid.

Custom 404 page

Tilda users can independently assign and edit a 404 page. To do this, create and publish a page. In the site settings in the "More" section, use the drop-down menu to select the desired option.

Tilda tools are enough for a person without special knowledge to quickly make a website of almost any type.

Tilda CRM

In the fall of 2018, Tilda offered users a useful tool: free CRM. To work with the system, select the appropriate section in the vertical menu and click the "Create a new sheet" button.

In the settings in the "Site" section connect to the CRM website.

In the site settings, confirm the CRM connection. To do this, you can select the page block settings and go to the "Forms" section.

After connecting all applications from the site will come to CRM. If the request is received by phone, you can add it to the system manually using the "Add request" button.

In the application the operator is available contact details of the client. Here you can create notes and respond to requests. To reply to the client by e-mail, you need to click on the link "Open card" and go to the tab "Letter".

The list of applications can be viewed in a standard tabular format or in kanban format. The switch is located in the upper right corner of the screen.

Instead of a conclusion: Tilda or site on the engine?

I am skeptical about the site designers, as they do not give the user the opportunity of a full-fledged CMS. Thanks to "Tilde" the degree of skepticism has decreased. The tool is really comfortable and functional. Instead of a conclusion, I suggest comparing Tilda with the most popular WordPress engine.

What will you lose if you choose Tilda instead of WordPress

Money

For access to the full functionality Tilda will have to pay at least 6000 rubles a year. There is a Free tariff, with which you can create up to 50 pages on the site. Free users can only add basic modules to their pages.

WordPress is free by default. You can create an unlimited number of pages, so it’s more convenient to use WordPress resources for content projects. The site owner needs to pay only for hosting and domain name.

Thousands of plugins and design templates are available to WordPress users for free. With their help, you can almost unlimitedly expand the functionality of the resource and change the appearance.

Secure connection

By default, sites on the Tilda subdomain are accessible via https. After paying the Personal or Business tariff, you can buy an SSL certificate and set up access to the site via a secure protocol via the CloudFlare service.

Russian users may have problems with access to resources, as some providers block IP CloudFlare, and regulatory authorities do not recommend site owners to use this service.

Ease of introducing microdata

You can add structured data to the Tilda site pages. You will have to do this manually: create the markup and publish it on each page separately.

On the pages of a WordPress site, you can set up basic markup types, for example, Article or BlogPosting, for all publication pages. This can be done using SEO combines, for example, the All in One SEO Pack. There are also separate plugins, for example, WPSSO Schema JSON-LD MarkUp.

Optimize page loading speed

Tilda users have virtually no influence on the speed of loading pages. You can only remove from the pages of individual modules and compress images. The rest will have to trust the developers of "Tilda".

WordPress users can independently optimize the speed of loading pages.

Accelerated Mobile Pages

Tilda users cannot deploy AMP yet. WordPress users have this opportunity. Google eagerly directs users to accelerated pages.

Access to site files

Site owners on Tilde do not have this option, but WordPress leads do. However, access to the file system is usually needed for advanced users of the engine.

Editing the sitemap and robots.txt file

Tilda creates sitemap.xml and robots.txt automatically, and users cannot edit them. On WordPress, you can create your own sitemap and robots.txt file using plugins, for example, All in One SEO Pack. The user can edit the map and directives for search engines.

What do you gain if you choose Tilda instead of WordPress

Money

If you need a one-page website or an online business card with a portfolio and contact information, it’s cheaper to work with Tilda. Website portfolio at Tilda can be done for free, but it will be available on a subdomain.

Easy template editing

With Tilda, any user without special knowledge can feel like a designer. To change the templates on WordPress need special knowledge.

The visual appeal of the pages

This item is a continuation of the previous one. With the help of "Tilda" you can beautifully design your site page. It does not require special knowledge and a lot of time.

On WordPress, you can choose a visually attractive template. But to add additional design, take time and knowledge.

Simplicity

On Tilda easier to create a site and manage it. For simplicity, you will have to pay with money and limitations in the functionality of the resource.

What is the result

Tilda Constructor is a convenient and effective tool for creating websites. It does not have all the functions of a full engine. But not all users need the CMS functionality. Perhaps the main advantage of "Tilde" - the ability to quickly make a visually attractive site. Designer limitations can be a plus for users without experience. The platform will protect them from serious errors that may reduce resource efficiency.

Watch the video: How to create web pages with Tilda webinar for beginners (November 2019).

Loading...

Leave Your Comment