Themes

A theme includes the following resources that provide a comprehensive framework for defining the visual and functional aspects of a website:

• Templates
• Masters
• Style guides
• Components
• Style variables
• Breakpoints
• Class system

A theme is responsible for determining a website’s visual appearance and layout, covering elements like color schemes, font styles, page layouts, and additional design features. It includes various elements that work together to give your site a cohesive look and feel.

You can use basic layouts that ensure your site remains consistent across all pages. There are also customizable layouts for different pages, allowing for variety within a unified design.

Theme modes

Mosaic allows you to work with multiple themes at the same time, but only one theme can be active (or live) at any given moment. The active theme is what visitors see on the frontend of your website.

When you click on any theme in the theme list, a popup window will appear with two options:

• Activate in live mode
• Activate in test mode

Live mode

Choosing live mode sets the selected theme as your active WordPress theme. This is the version of your site that the public will see on the frontend.

Test mode

Test mode allows you to privately preview and edit a theme without affecting your live site. If you click on a theme currently in test mode, you’ll also see the option to switch it to live mode or Exit test mode. If you click on a theme that’s already in live mode, you can still bring up the same popup to switch it to test mode, if needed.

When a theme is in test mode, the WordPress admin toolbar will display a Mosaic test mode label. You can use its dropdown to exit test mode at any time, which will return you to the live theme of your website.

Managing themes

In the Themes interface, you’ll see a list of your Themes, along with the option to create a new one.

For more options, use the Context menu, which is accessible via the three dots on each theme. This menu allows for various actions.

• Settings: You can change the Theme name here.
• Duplicate: By selecting the Duplicate option, you can create a duplicate version of your current theme, retaining all of its settings and design.
• Export: Use it to export your theme. This will generate a .zip file that can be imported later. We will also ask for this file when you need to share an export of your settings.
• Replace: This is a straightforward method to substitute the current theme with another one. You can either use a previously exported theme or pick one directly from the Theme library. Learn more in the Replace section.
• Generate thumbnail: Create a small preview image that visually represents the theme. Helpful when managing many or similarly named ones.
• Delete: Permanently delete a Theme. Use this option with caution as deletion is irreversible. Active themes cannot be deleted.
• Api export: Export your theme’s settings as a structured JSON via the Mosaic API (Free & Pro). Ideal for automation and versioning.
• Exit test mode: Switches the selected theme out of test mode.
• Activate: This function switches your website’s active theme. By selecting it, you can change the currently active theme to another one available in your theme list.

New theme

When you create a new theme, you’ll have the option to make a new empty theme to start from scratch or choose an already-designed one from the library.

Wizard

After selecting a theme from the library, you’ll be prompted to choose whether to activate the theme in live or test mode, and then start the Wizard. The Wizard will set up the prerequisites and guide you through the next steps. If you prefer, you can always go back to the theme selection to choose a different option.

1. Settings

After selecting the Wizard, you’ll first be taken to the settings setup.

• Your homepage displays: Choose the content displayed on your homepage by selecting either a static or dynamic page. Note that the following two settings are only available if you’ve selected the static homepage option.
• Homepage: Choose from your already existing pages for the homepage.
• Posts page: Determine which page on your website will display your blog posts.
• Color – mode: Pick between Light and Dark modes.
• Color – skin: Choose from a range of color options for your skin, or enter your own hex code. This setting is not available for the Blank theme.
• Font – skin: Choose a font combination. This setting is not available for the Blank theme.

2. Master

Here, you can customize your pages by adding a specific Header and Footer, removing them, or selecting from the available options provided by this Theme.

• Replace header/footer: You can explore all the available header and footer layouts and choose the one that best fits your preferences. You can also modify these layouts later if needed.

3. Templates

Select your Homepage, Blog, Post, and 404 page templates. Each option offers additional templates to replace the currently chosen one.

If you’ve chosen to display your latest posts as your homepage, you won’t receive an additional homepage template option. You can also choose any additional page templates you’d like to include in your theme later on.

• Posts per page: When selecting your blog template, you can specify the exact number of posts to display per page. This setting can be modified later if needed.

4. Pages

Lastly, select any additional pages you may need. You can filter the available templates by page category for easier navigation.

If you have chosen additional pages, proceed with the Next button. If you have not selected any pages, you will see the Finish button. Click this button to finalize the process and create your theme.

You are free to skip the Wizard any time you’d like. Adding, editing, and removing pages can be done later on as well.

Upload

Use this to upload exported themes. After you click New theme, an Upload button appears in the upper right, choose it if you prefer to upload instead of picking from the list. Select the exported .zip file to import.

Replace

The Replace option lets you quickly swap out your current theme with another one. You can choose between two sources:

• Uploaded theme: Use a theme you’ve previously exported and saved.
• Theme library: Pick a theme directly from the available library.

FAQ