Personalizing Zyro website templates is easy and enjoyable! Simply go to the Websites page, find your site and click Edit.
1. Customize colors
To change the global color palette of your website, expand the Styles panel on the left and make sure you're on the Colors tab. Choose a preferred preset or customize it by clicking on Change colors.
Click on a color to customize it. You set a color by dragging the cursor around the colored area, as well as using HEX, RGB, or HSL color values. 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.
2. Customize fonts
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 fonts: one for headings and one for paragraphs & menu links. These two fonts are used all across your website.
You can also customize the style of each text element locally: simply select the text segment and change its size, color, font, etc. via text element settings.
3. Add new items: pages, sections, elements
You can add an unlimited number of pages, sections, and elements to your website 🧙🏼♂️
To add more pages, expand the Pages and navigation panel on the left. Down below, you'll see options to add a new page, a dropdown menu, or a link as a menu item. The menu section, or the header, is the topmost section of your website. To learn more about the website's menu management, refer here!
To add more sections, click the Add section button – you can find it in between any two sections. There are many types of sections to choose from!
To add more elements, expand the Add elements panel on the left. You can either drag and drop an element onto the desired area, or simply click an element, and it will be put onto the selected section. To select (or activate) a section, simply click on it – an active section always has a blue border. Learn more about website elements here!
4. Customize button elements: styles and linking options
Click on a button element and choose the Edit button to open its settings. There you'll see three tabs: General, Style, and Layout.
In the general settings, you can rename your button and set up linking options. You can link a button to an internal page (within your website), external URL (any link), phone number, or email address. Learn more about it here 💡
In the style settings, choose between the primary or secondary button style, change the color, text color, size, and shape of your button. Note: The button shape is a global setting, i.e., all button elements within your website will be of the same shape to maintain consistency.
In the last tab, you can change the button alignment within the element area. Tip: Double-click on the central option for horizontal alignment, and the button will fully stretch horizontally. This way, buttons may look neater if their titles are of various lengths.
5. Edit the header of your website (logo, menu)
Note: If you can't see the header, it may be that all of your pages are hidden. To access the header settings, at least one menu item (a page, a link, or a dropdown menu) must be assigned to the main navigation.
To open header settings, simply click on the section. You'll see setting icons on the bottom-right side of the header.
6. Copy-paste sections and elements
To speed up the process, you can copy-paste elements and sections to other sections or even other pages of your website. Simply right-click on an item, and you'll see the secondary menu. You can also use popular shortcuts for copying, cutting, deleting, and so on. Learn more about copy-pasting website sections here 💡
7. Duplicate pages, sections, elements
To duplicate a page, expand the Pages and navigation panel on the left. Find a page in question, open its settings and click Duplicate. Remember to rename the duplicate page and customize it if needed.
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.
8. Remove unnecessary content: delete pages, sections, element
To delete a page, expand the Pages and navigation panel on the left. Find a page in question, open its settings and click Delete.
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.
9. Add custom HTML code
There are two ways to add HTML code to your Zyro website, and it depends on the type of the code
If the code needs to be added to the <head></head> part of your website's source code, do it at the 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.
10. Customize the mobile version of your website
Last but not least, make sure that the mobile version of your website looks good! You can switch to the mobile view by clicking on the mobile phone icon in the upper toolbar.
On the mobile view, elements are displayed in the order they've been added to the desktop view. You would need to sort the elements on the mobile view manually. Reorder the elements by drag-and-dropping them. These changes won't affect the desktop view. Learn more about it here 💡
11. Add a blog
You can add a blog to any template! Simply expand the Blog panel on the left and click Start a blog.
A new blog page will be added to your website automatically.
You can manage all your blog posts in the Blog panel: learn more 💡
12. Add a store to any website template
You can easily add an e-store to any website template!
Note: Different e-commerce features come with Business, Online Store, and Advanced Store plans.
To insert a store section or page to your site, click Add section and select Lite store (available with Business plans) or Online store (available with Online Store and Advanced Store plans).
And that's it! Now, you can access your store manager 🎉