Overview
Elements are the fundamental building blocks in Mosaic. They represent real HTML-based units you add to the Canvas to structure layouts, insert content, or create interactivity. Each element can have variants, which are variations that adjust how the element behaves or looks. In the Add panel, elements are grouped into the sections below.
Assets
- Component: Reusable elements that hold a specific design. They are building blocks that you can add to a Template to show the same pre-made design you created.
Structure
- Section: A top-level block that groups related content and spans the full width of the page.
- Div: The Div element is a versatile container for organizing elements. It’s especially useful for breaking layouts into smaller sections, and it comes with Container, Grid, Rows, and Columns presets.
Basic
- Text: The Text element is a versatile tool used for displaying titles, descriptions, or any other text on your website.
- Image: The Image element gives you the opportunity to display a chosen image on your website.
- Button: Add interactive elements to your website, such as call-to-action (CTA) buttons that link to other pages or actions.
- Icon: Inserts SVG graphics for visual emphasis.
Video
- Video: Embeds self-hosted videos with native browser controls.
- YouTube: Embeds videos via a YouTube URL with adjustable playback options.
- Vimeo: Embeds Vimeo videos with adjustable options.
Builder
- Navbar: The Navbar element was made to help you create a top menu for your website. It is a combination of elements within its scope, so by default, it contains an Image element for the logo and a WP Menu element for the menu points.
- Form: Collects input from users with fields you can customize.
- Modal: Shows content in a centered window over a dimmed backdrop — for confirmations, sign-in prompts, cookie or age gates, and other important notices.
- Popover: Shows content on top of the page without blocking it — next to the button that opened it or in a fixed spot on the screen. Great for menus, small panels, and tooltip-like hints.
- Menu: Displays navigation links, often used inside a Navbar.
- List: Builds ordered or unordered lists from the items you add, with vertical or horizontal layouts.
- Accordion: Groups content into collapsible sections for FAQs or long text.
- Slider: Highlight content in a visually engaging and space-efficient way.
- Tabs: Splits content into labeled sections for easy navigation.
- Loop: Dynamically generates repeating content, like blog posts on your pages.
Map
- Google Maps: Embeds an interactive Google map centered on a location you choose.
- OpenStreetMap: Embeds an interactive map powered by OpenStreetMap.
Advanced
- Code: Lets you insert custom HTML, CSS, or JavaScript into your layout.
WordPress
- Post content: Easily add your blog post content to your pages by including text, images, and any other content included in it.
- Shortcode: Insert any WordPress shortcode directly into your page. It’s ideal for embedding plugin features or custom functionality without writing code.