FAQ

Is Mosaic SEO friendly?

Yes, Mosaic outputs clean, semantic code and can absolutely be SEO friendly, but you need to use the given features, to get the best result.

Images

At Image elements always use their Alt field to describe the content of the image.

Headings and text

Use Heading, Text, and Paragraph elements logically to create a clear structure.

• Headings should be used as titles and subtitles.
• Text elements can be used for short standalone content.
• Paragraph elements are intended for longer descriptive text.

Meta tags

For page titles, descriptions, and other metadata, use an SEO plugin like Yoast SEO, which works seamlessly with Mosaic.

Optimization

Website speed affects search engine rankings. To achieve the best results, ensure your website is optimized, as you see lower.

---

Is Mosaic accessible?

Yes. Mosaic is built to support accessibility standards, but you need to use the given features, to get the best result.

Images

At Image elements always use their Alt field to describe the content of the image, so screen readers can interpret them.

Sliders

Within Slider elements the suggested element order is:

• Button – Arrow left
• Button – Arrow right
• Navigation
• Slides

This is because when using the Tab key, focus moves through elements one by one. In sliders, users typically want to navigate to the previous or next slide first. The bullets then provide direct access to any slide. Finally, the slide content becomes relevant once the desired slide is selected.

Accordions

Accordion elements have aria-expanded attributes on the accordions by default, which are changing between true and false state, based on whether or not the given accordion is opened.

Enter or Space opens/closes the accordions, when they get focused on using Tab button.

The Plus and Minus icons are SVG icons. Check the lower ARIA attributes for a suggestion regarding them.

ARIA attributes

At each element, in their Settings → Attributes panel, you can add any ARIA attributes needed for accessibility. Examples:

• For a Button element, add role=”button” to specify its role.
• For a Section, add role=”section” for clearer structure.
• For an SVG icon, add aria-hidden=”true” if you don’t want screen readers to interpret it.

---

Is Mosaic optimized for fast page loading?

Yes, Mosaic loads as fast as possible, but the speed of your pages largely depends on your content. To ensure your pages are fully optimized, follow this guide:

Images

Image elements should contain optimized files. (For image optimization you can use for example GIMP.)

At the settings of Image elements, use Loading – Lazy, to delay the loading of images to when they become visible.

Videos

Avoid loading big files, like videos. But if you really want to load those elements as well, make sure the files have optimized sizes.

Length of pages

Don’t have too much content on your pages. Google recommends having maximum 1500 DOM element on a single page. Depending on the types of elements you use, this usually means about 8–10 sections per page.

Figure out the issue

In case you see your pages loading slowly, and you cannot figure out what is the cause of it, use Chrome for debugging. Go to a page where the problem happens -> press F12 -> click on Network tab -> refresh the page. Here you can see what is loading for how long, so for example if you accidentally used a very big image somewhere, this will help you identify it.

---

How to translate your Mosaic pages?

Mosaic beta is not yet tested with translation plugins.

---

How to translate Mosaic admin pages?

If you would like to translate the admin pages of Mosaic, you will need to do the following:

Requirements

Before you begin, make sure you have the following installed and set up:

Latest Node.js
Download and install from: https://nodejs.org/en/download

Poedit (for editing translations)
Download and install from: https://poedit.net/download

Basic command line knowledge
You should know how to handle the Command Prompt (Windows) or Terminal (Mac).

Mosaic
You can either work directly inside your local WordPress site at: wp-content/plugins/mosaic/Languages/, or extract the Mosaic plugin installer ZIP and work inside: mosaic/Languages/.

Project Structure

.
├── src/ # Source files (do not edit)
├── dist/ # Generated translation files
├── mosaic.pot # Base translation template
├── package.json
└── README.md

1. Create your translation file

1. Open the mosaic/Languages/mosaic.pot file in Poedit.
2. Choose “Create new translation”.
3. Select your desired language (for example, Hungarian).
4. Save the file with a name like:

   mosaic/Languages/mosaic-hu_HU.po

5. Now you can translate all the text directly in Poedit.
   When finished, save your work — the .po file will contain your translations.

2. Open the command line

You’ll need to run the build commands inside mosaic/Languages.

On Windows:

1. Click the Start menu, type cmd, and press Enter.
2. Use the cd command to navigate to the Languages folder:

   cd [PATH-TO-WORKING_DIR]\mosaic\Languages

On Linux:

1. Open Terminal (press Ctrl + Alt + T, or search for “Terminal” in your application menu).
2. Use the cd command to navigate to the Languages folder:

   cd [PATH-TO-WORKING_DIR]/mosaic/Languages

On Linux/macOS:

1. Open Terminal (you can find it via Spotlight with Cmd + Space, then type “Terminal”).
2. Use the cd command to navigate to the Languages folder:

   cd [PATH-TO-WORKING_DIR]/mosaic/Languages

Install the dependencies

Once you’re inside the folder, run this command:

npm install

This will automatically download all necessary packages for the translation build process.

4. Build the translation files

After installation finishes, run:

npm run build

This command compiles all .mo translation files into the dist folder.

5. Upload your translation to the website

If you are working on a local WordPress site, you can skip to → 6. Test your translation.

If your site is hosted remotely, or you are not working directly inside your local WordPress installation, upload your compiled translation files to your server:

1. Copy the contents of wp-content/plugins/mosaic/Languages/dist from your local environment
2. Upload them to the same location on your site: wp-content/plugins/mosaic/Languages/dist
3. Overwrite existing files if prompted.

6. Test your translation

You can test your translation by switching your site’s language:

1. Go to WordPress Admin → Settings → General
2. Change Site Language to the language you translated
3. Save the settings and reload the page to see your translation in action

Your translation should now be active.

7. Share your translation with the community

If your translation is more than 80% complete, feel free to send it to us. With your permission, we’ll include your translation in future releases of the plugin and credit you in our documentation.
You can contact us here: https://mosaicbuilder.com/support/