Personalizing Zyro website templates is easy and enjoyable! Simply go to the Websites page, find your site and click Edit:

Customization possibilities

Customize colors

You can customize website colors in two ways: globally and locally.

To create the global color palette, expand the Website styles panel on the left and make sure you're on the Colors tab. Choose from pre-designed color palettes or customize the preferred one by clicking on Change colors:

Click on a color to customize it. You can always go back to the original color palette by clicking on Reset colors:

You can also customize colors for each website element individually. Simply click on an element and choose Edit, for example, text:

Customize fonts

You can customize text styles in two ways: globally and locally.

To edit global fonts, expand the Styles panel on the left, and open the Text tab. Choose from the suggested font pairs or customize them by clicking on Edit text styles. Each pair consists of two font families: one for headings and one for paragraphs and navigation links. These two font families are used all across your website:

You can also customize the style of each text element individually. Simply select the text segment and change its size, color, font, etc. via text element settings:

Add new items: pages, sections, elements

You can add an unlimited number of pages, sections, and elements to your website.

  • To add more pages, follow these steps: How to add more pages to a website?

  • To add more sections, click the Add section button – you can find it in between any two sections.

  • To add more elements, expand the Add elements panel on the left and drag and drop a selected element anywhere on your page.

Customize button elements: styles and linking options

Click on a button element and select Edit button to open its settings. There are two tabs of them (General and Style):



Rename your button

Choose between the primary and secondary button style

Set up linking options: you can link a button to a specific page or section within your website, any URL, phone number, email address, or file

Change button color (+ hover color)

Change button text color (+ hover color)

Change button shape

Edit the website's navigation menu

The navigation menu, also called the header section, is the topmost section of your website. The header can also contain a logo.

To edit the navigation menu, click on the header and you'll see the settings menu on the bottom-right side of the header section:

NOTE: If you can't see the header section, it's likely that all your website pages are hidden from the navigation menu

Copy-paste sections and elements

To speed up the website building process, you can copy-paste elements and sections to other sections or even other pages of your website:

Duplicate pages, sections, elements

To save up some time, you can duplicate website pages, sections, and elements.

  • To duplicate a page, follow these steps: How to duplicate website pages?

  • To duplicate a section, click on it and hit the Duplicate button on the right:

  • To duplicate an element, click on it and hit the Duplicate button:

Remove unnecessary content: delete pages, sections, element

You can easily delete irrelevant content from your website.

  • To delete website pages, follow these steps: How to delete a website page?

  • To delete a section, click on it and hit the Delete button on the right:

  • To delete an element, click on it, and hit the Delete button:

Add custom HTML code

There are two ways to add HTML code to your website, and it depends on the type of code you want to add.

If the code needs to be added to the <head></head> part of your website's source code, use the Custom code field in your website's integration settings.

If the code needs to be added to the <body></body> part of your website's source code, use the embed code element.

Customize the mobile version of your website

Make sure that the mobile version of your website looks good: switch to the mobile view by clicking on the mobile phone icon in the upper toolbar:

By default, website elements are displayed on the mobile view in the order they've been added to the desktop view. Even if you, later on, reorder elements on the desktop view, these changes are not automatically applied to the mobile view. You can sort the elements on the mobile view manually. This way, you can lay out elements differently on desktop and mobile views. Learn more: How to edit the mobile version of a website?

Add a blog

You can add a blog to any website template! Simply expand the Blog panel on the left and click Start a blog:

Add a store to any website template

With our Business plan, you can easily add an e-store to any website template: learn how to sell online with the Lite store!

Did this answer your question?