Help Center
Adjusting the mobile version of a website
How to additionally customize the page view on different devices
Tilda automatically adapts websites for different devices: smartphones, tablets, laptops, and desktop computers. If needed, you can flexibly customize the mobile version of standard blocks or create your own responsive version of the website using Zero Block.
In this guide, we explain in detail how to set up the mobile version of a website in Tilda.
In this guide, we explain in detail how to set up the mobile version of a website in Tilda.
Mobile version editing mode
After adding and configuring standard blocks, you can additionally edit their mobile version. To do this, click the mobile device icon in the center of the page editor panel.
In the dropdown menu, select the required screen size. If you need to check how the page looks on a specific device, select it or the closest option in the Devices section.
In the dropdown menu, select the required screen size. If you need to check how the page looks on a specific device, select it or the closest option in the Devices section.
The editor will switch to mobile mode, making it easier to edit blocks.
Important: Switching the block view in the editor is not a full preview of the finished website. In this mode, animations do not work, and some blocks may be displayed differently from the published page. To see how the website will look after publication, click Preview.
Preview mode
In preview mode, click the mobile device icon and select the required screen size.
Important: You cannot change block settings in preview mode. It is used only to check how the page is displayed.
To hide the editor interface, click the arrow icon in the lower-left corner or next to Editing.
To change the preview scale, click the 100% icon and select the required value from the dropdown menu.
Click the pencil icon to return to the editor and make changes to blocks.
Editing block settings for the mobile version
Each block has separate spacing and typography settings for the mobile version. Depending on the block, additional settings for individual elements on mobile devices may also be available. These settings are usually marked with hints in the settings panel.
For example, a menu block may have a separate settings section for this.
For example, a menu block may have a separate settings section for this.
In cover blocks, mobile version settings may be marked with a phone icon.
To open separate settings for a mobile device, click the desktop icon next to the required field. An additional field with a smartphone icon will appear.
Changing font size and line spacing for mobile devices. In the block settings, open the Typography section, click the desktop icon, and enter the font size for the mobile version in the field with the mobile device icon.
Line spacing is configured the same way.
Line spacing is configured the same way.
Changing the image corner radius and outer spacing for covers on mobile devices. You can set a separate corner radius or outer spacing value for mobile devices in blocks from the Cover and Image categories.
To change the radius or spacing, click Settings and find the required field. Then click the desktop icon next to the field and enter the value for the mobile version.
To change the radius or spacing, click Settings and find the required field. Then click the desktop icon next to the field and enter the value for the mobile version.
Changing background image positioning. In cover blocks and other blocks where this setting is available, you can select the part of the image that will be displayed in the block.
To set automatic positioning, select the appropriate value from the dropdown menu, for example, Center Center.
To set automatic positioning, select the appropriate value from the dropdown menu, for example, Center Center.
To set positioning manually, click the icon next to the field.
The image with positioning points will open. You can select one of the ready-made points or place your own point where needed.
Positioning helps adjust how the background image is displayed on the mobile version so that the same image looks correct on different screens.
Setting up spacing for mobile devices
In any block, open the settings, click the icon next to the Top padding or Bottom padding fields, and enter the value for the mobile device.
Visibility range on different devices
If you need different blocks to be displayed on smartphones and desktop computers, set up the visibility range.
Open the block settings and scroll down to Visibility range on devices. Specify which devices the block should be displayed on. Then save the settings and republish the page.
Open the block settings and scroll down to Visibility range on devices. Specify which devices the block should be displayed on. Then save the settings and republish the page.
Setting up responsive design in Zero Block
You can configure block responsiveness for different devices by converting the block to Zero Block using the option in the block settings. This option is currently available in most blocks.
After converting a block to Zero Block, the content and design will return to their default settings. Text and images will need to be added to the block again.
After conversion, you will be able to manually configure how the block looks across five screen width ranges or add your own ranges. Learn more about setting up responsive design in Zero Block in the articles Zero Block. Getting started and Zero Block. Responsive design.
Disabling page responsiveness
If you disable responsiveness, the page will be displayed on mobile devices the same way as on desktop.
To disable the responsive version, go to Page settings → Additional, select Disable responsiveness for mobile devices, and republish the page.
To disable the responsive version, go to Page settings → Additional, select Disable responsiveness for mobile devices, and republish the page.
