{"id":120,"date":"2025-07-22T06:59:56","date_gmt":"2025-07-22T06:59:56","guid":{"rendered":"https:\/\/php80.local.nextendweb.com\/roland\/mosaicbuilder\/?post_type=documentation&#038;p=120"},"modified":"2025-09-22T13:12:43","modified_gmt":"2025-09-22T13:12:43","slug":"elements","status":"publish","type":"documentation","link":"https:\/\/mosaicbuilder.com\/docs\/elements\/","title":{"rendered":"Elements"},"content":{"rendered":"\n<h2 class=\"wp-block-heading\" id=\"overview\">Overview<\/h2>\n\n\n\n<p>Elements are the fundamental building blocks in Mosaic. They represent real HTML-based units you add to the <a href=\"https:\/\/mosaicbuilder.com\/docs\/editor\/#canvas\">Canvas<\/a> to structure layouts, insert content, or create interactivity. Each element can have <a href=\"https:\/\/mosaicbuilder.com\/docs\/editor\/class-system\/#working-with-classes\">element classes<\/a>, which are variations that adjust how the element behaves or looks.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"layout-elements\">Layout elements<\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong><a href=\"https:\/\/mosaicbuilder.com\/docs\/elements\/section\/\">Section<\/a>:<\/strong> A top-level block that groups related content and spans the full width of the page.<\/li>\n\n\n\n<li><strong><a href=\"https:\/\/mosaicbuilder.com\/docs\/elements\/div\/\">Div<\/a>:<\/strong> The Div element is a versatile container for organizing elements. It\u2019s especially useful for breaking layouts into smaller sections.<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"content-elements\">Content elements<\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong><a href=\"https:\/\/mosaicbuilder.com\/docs\/elements\/text\/\">Text<\/a>:<\/strong> The Text element is a versatile tool used for displaying titles, descriptions, or any other text on your website.<\/li>\n\n\n\n<li><strong><a href=\"https:\/\/mosaicbuilder.com\/docs\/elements\/image\/\">Image<\/a>:<\/strong> The Image element gives you the opportunity to display a chosen image on your website.<\/li>\n\n\n\n<li><strong><a href=\"https:\/\/mosaicbuilder.com\/docs\/elements\/icon\/\">Icon<\/a>:<\/strong> Inserts SVG graphics for visual emphasis.<\/li>\n\n\n\n<li><strong><a href=\"https:\/\/mosaicbuilder.com\/docs\/elements\/video\/\">Video<\/a>: <\/strong>Embeds self-hosted videos with native browser controls.<\/li>\n\n\n\n<li><strong><a href=\"https:\/\/mosaicbuilder.com\/docs\/elements\/youtube\/\">YouTube<\/a>:<\/strong> Embeds videos via a YouTube URL with adjustable playback options.<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"interactive-elements\">Interactive elements<\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong><a href=\"https:\/\/mosaicbuilder.com\/docs\/elements\/button\/\">Button<\/a>:<\/strong> Add interactive elements to your website, such as call-to-action (CTA) buttons that link to other pages or actions.<\/li>\n\n\n\n<li><strong><a href=\"https:\/\/mosaicbuilder.com\/docs\/elements\/navbar\/\">Navbar<\/a>:<\/strong> 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.<\/li>\n\n\n\n<li><strong><a href=\"https:\/\/mosaicbuilder.com\/docs\/elements\/form\/\">Form<\/a>:<\/strong> Collects input from users with fields you can customize.<\/li>\n\n\n\n<li><strong><a href=\"https:\/\/mosaicbuilder.com\/docs\/elements\/menu\/\">Menu<\/a>:<\/strong> Displays navigation links, often used inside a Navbar.<\/li>\n\n\n\n<li><strong><a href=\"https:\/\/mosaicbuilder.com\/docs\/elements\/accordion\/\">Accordion<\/a>:<\/strong> Groups content into collapsible sections for FAQs or long text.<\/li>\n\n\n\n<li><strong><a href=\"https:\/\/mosaicbuilder.com\/docs\/elements\/slider\/\">Slider<\/a>:<\/strong> Highlight content in a visually engaging and space-efficient way.<\/li>\n\n\n\n<li><strong><a href=\"https:\/\/mosaicbuilder.com\/docs\/elements\/tabs\/\">Tabs<\/a>:<\/strong> Splits content into labeled sections for easy navigation.<\/li>\n\n\n\n<li><strong><a href=\"https:\/\/mosaicbuilder.com\/docs\/elements\/loop\/\">Loop<\/a>:<\/strong> Dynamically generates repeating content, like blog posts on your pages.<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"advanced-elements\">Advanced elements<\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong><a href=\"https:\/\/mosaicbuilder.com\/docs\/getting-started\/components\/\">Component<\/a>:<\/strong> 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.<\/li>\n\n\n\n<li><strong><a href=\"https:\/\/mosaicbuilder.com\/docs\/elements\/code\/\">Code<\/a>:<\/strong> Lets you insert custom HTML, CSS, or JavaScript into your layout.<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"wordpress-elements\">WordPress elements<\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong><a href=\"https:\/\/mosaicbuilder.com\/docs\/elements\/post-content\/\">Post content<\/a>:<\/strong> Easily add your blog post content to your pages by including text, images, and any other content included in it.<\/li>\n\n\n\n<li><strong><a href=\"https:\/\/mosaicbuilder.com\/docs\/elements\/shortcode\/\">Shortcode<\/a>:<\/strong> Insert any WordPress shortcode directly into your page. It\u2019s ideal for embedding plugin features or custom functionality without writing code.<\/li>\n<\/ul>\n","protected":false},"parent":0,"menu_order":16,"template":"","meta":{"_acf_changed":false},"class_list":["post-120","documentation","type-documentation","status-publish","hentry"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v27.5 (Yoast SEO v27.5) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>- Docs - Mosaic<\/title>\n<meta name=\"description\" content=\"The Elements category includes essential building blocks for creating structured, interactive, and visually appealing websites. Each element serves a specific purpose, helping to organize content, add features, and customize designs, making the design process more flexible.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/mosaicbuilder.com\/docs\/elements\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Elements\" \/>\n<meta property=\"og:description\" content=\"The Elements category includes essential building blocks for creating structured, interactive, and visually appealing websites. Each element serves a specific purpose, helping to organize content, add features, and customize designs, making the design process more flexible.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/mosaicbuilder.com\/docs\/elements\/\" \/>\n<meta property=\"og:site_name\" content=\"Mosaic\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/mosaicbuilderwp\" \/>\n<meta property=\"article:modified_time\" content=\"2025-09-22T13:12:43+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/cdn.mosaicbuilder.com\/_\/wp-content\/uploads\/2025\/10\/docs.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1200\" \/>\n\t<meta property=\"og:image:height\" content=\"630\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:site\" content=\"@MosaicBuilderWP\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data1\" content=\"2 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/mosaicbuilder.com\\\/docs\\\/elements\\\/\",\"url\":\"https:\\\/\\\/mosaicbuilder.com\\\/docs\\\/elements\\\/\",\"name\":\"- Docs - Mosaic\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/mosaicbuilder.com\\\/#website\"},\"datePublished\":\"2025-07-22T06:59:56+00:00\",\"dateModified\":\"2025-09-22T13:12:43+00:00\",\"description\":\"The Elements category includes essential building blocks for creating structured, interactive, and visually appealing websites. Each element serves a specific purpose, helping to organize content, add features, and customize designs, making the design process more flexible.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/mosaicbuilder.com\\\/docs\\\/elements\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/mosaicbuilder.com\\\/docs\\\/elements\\\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/mosaicbuilder.com\\\/docs\\\/elements\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/mosaicbuilder.com\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Elements\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/mosaicbuilder.com\\\/#website\",\"url\":\"https:\\\/\\\/mosaicbuilder.com\\\/\",\"name\":\"Mosaic\",\"description\":\"Mosaic goes beyond page building. It\u2019s a complete theme builder and design system that helps your next website stand out in style, speed, and functionality.\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/mosaicbuilder.com\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"- Docs - Mosaic","description":"The Elements category includes essential building blocks for creating structured, interactive, and visually appealing websites. Each element serves a specific purpose, helping to organize content, add features, and customize designs, making the design process more flexible.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/mosaicbuilder.com\/docs\/elements\/","og_locale":"en_US","og_type":"article","og_title":"Elements","og_description":"The Elements category includes essential building blocks for creating structured, interactive, and visually appealing websites. Each element serves a specific purpose, helping to organize content, add features, and customize designs, making the design process more flexible.","og_url":"https:\/\/mosaicbuilder.com\/docs\/elements\/","og_site_name":"Mosaic","article_publisher":"https:\/\/www.facebook.com\/mosaicbuilderwp","article_modified_time":"2025-09-22T13:12:43+00:00","og_image":[{"width":1200,"height":630,"url":"https:\/\/cdn.mosaicbuilder.com\/_\/wp-content\/uploads\/2025\/10\/docs.png","type":"image\/png"}],"twitter_card":"summary_large_image","twitter_site":"@MosaicBuilderWP","twitter_misc":{"Est. reading time":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/mosaicbuilder.com\/docs\/elements\/","url":"https:\/\/mosaicbuilder.com\/docs\/elements\/","name":"- Docs - Mosaic","isPartOf":{"@id":"https:\/\/mosaicbuilder.com\/#website"},"datePublished":"2025-07-22T06:59:56+00:00","dateModified":"2025-09-22T13:12:43+00:00","description":"The Elements category includes essential building blocks for creating structured, interactive, and visually appealing websites. Each element serves a specific purpose, helping to organize content, add features, and customize designs, making the design process more flexible.","breadcrumb":{"@id":"https:\/\/mosaicbuilder.com\/docs\/elements\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/mosaicbuilder.com\/docs\/elements\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/mosaicbuilder.com\/docs\/elements\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/mosaicbuilder.com\/"},{"@type":"ListItem","position":2,"name":"Elements"}]},{"@type":"WebSite","@id":"https:\/\/mosaicbuilder.com\/#website","url":"https:\/\/mosaicbuilder.com\/","name":"Mosaic","description":"Mosaic goes beyond page building. It\u2019s a complete theme builder and design system that helps your next website stand out in style, speed, and functionality.","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/mosaicbuilder.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"}]}},"_links":{"self":[{"href":"https:\/\/mosaicbuilder.com\/wp-json\/wp\/v2\/documentation\/120","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/mosaicbuilder.com\/wp-json\/wp\/v2\/documentation"}],"about":[{"href":"https:\/\/mosaicbuilder.com\/wp-json\/wp\/v2\/types\/documentation"}],"wp:attachment":[{"href":"https:\/\/mosaicbuilder.com\/wp-json\/wp\/v2\/media?parent=120"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}