Micemade Documentation

Mosaic Contents for Elementor

A practical guide to installing the plugin and building free-form, grid-based content layouts inside Elementor — for posts, custom post types, and any Elementor widget.

Open Repository Start Installation
Version 0.1.0
Widgets Content Layout & Widgets Layout
Requires Elementor
Support GitHub

Introduction

Overview

Mosaic Contents for Elementor adds two Elementor widgets under the Mosaic Contents category:

  • Content Layout — display posts or any custom post type in free-form, grid-based layouts.
  • Widgets Layout — fill each layout cell with any available Elementor widget to compose free-form layouts.

Both widgets are built around the same idea: instead of being constrained by "classic" HTML layout models (flexbox, CSS grid, columns), you place and size items freely on an underlying grid that handles snapping and organization for you.

Main strengths

  • Free-form placement on an underlying, snap-friendly grid.
  • Drag-and-resize editing directly inside Elementor.
  • Separate desktop, tablet, and mobile layout control.
  • Content Layout: works with any post type and its taxonomies.
  • Widgets Layout: cells host any Elementor widget, including nested Containers.
  • Saved setups, style presets, and per-cell styling.

Concept

The Free-Form Grid System

The core of both widgets is a grid layout engine. Rather than arranging content in rigid rows and columns, you drag and resize items anywhere on a fine underlying grid. The grid provides snapping points, so items stay aligned and organized without you writing any CSS or fighting flexbox/grid rules.

Shared layout concepts

  • Predefined Layouts — start from a ready-made arrangement of cells.
  • Custom Layout — your drag-and-resize changes are stored automatically.
  • Reset Layout — discard custom edits and return to the predefined layout.
  • Add Cell / Add Item — add another grid cell to the layout.
  • Grid Gap and Grid Row Height — control spacing and row density.
  • Allow Overlap and Compaction Type — define how items behave when moved (overlapping vs. auto-packing).
  • Grid Visualization — show the underlying grid as a placement aid while editing.
  • Z-index controls — bring cells forward or send them backward when they overlap.

Important: Layout changes made by dragging or resizing are saved with the page only after you click Update or Publish in Elementor.

Setup

Requirements

Before installing the plugin, make sure your site meets these requirements:

  • WordPress 6.0 or newer
  • PHP 7.0 or newer
  • Elementor installed and activated

Elementor Pro is not required for the functionality documented here. WooCommerce is not required either — the Content Layout widget works with any registered post type, so it can display WooCommerce products if that post type is selected, but it does not depend on WooCommerce.

Download

Package Contents

Your downloadable package should include the plugin files and this documentation folder.

mosaic-contents-for-elementor/
|-- assets/
|-- controls/
|-- includes/
|-- widgets/
|-- src/
|-- index.php
|-- mosaic-contents-for-elementor.php
|-- readme.txt
|-- docs/
    |-- index.html
	|-- assets/

The docs directory contains the self-contained HTML help file used for delivery and support reference.

Install

Installation

Install through WordPress admin

  1. Log in to your WordPress admin area.
  2. Go to Plugins > Add New > Upload Plugin.
  3. Upload the plugin ZIP file.
  4. Click Install Now.
  5. After installation completes, click Activate Plugin.

Install through FTP or SFTP

  1. Extract the plugin ZIP on your computer.
  2. Upload the mosaic-contents-for-elementor folder to /wp-content/plugins/.
  3. Open Plugins in WordPress admin.
  4. Activate Mosaic Contents for Elementor.

After activation

  1. Confirm that Elementor is active.
  2. Edit a page with Elementor.
  3. Search for the Mosaic Contents widget category.
  4. Drag the Content Layout or Widgets Layout widget into your page.

First Run

Getting Started

The fastest way to start is:

  1. Open a page in Elementor.
  2. Add the Content Layout or Widgets Layout widget.
  3. Pick a predefined layout first.
  4. For Content Layout, choose the post type and query; for Widgets Layout, drop widgets into cells.
  5. Customize spacing, alignment, and styles.
  6. Drag and resize cells in the preview area to build a custom, free-form layout.
  7. Click Update or Publish to save the current page state.

Both widgets follow the same general control pattern:

  • Content / Query tab — for Content Layout, choose the data source and query.
  • Layout tab — grid behavior, layout presets, custom layout storage, and helper tools.
  • Style tab — typography, alignment, colors, borders, and per-cell styling.

Widget Guide

Content Layout Widget

The Content Layout widget queries posts or any custom post type and arranges the resulting items as cards in a free-form grid.

Widget panels

Query settings

  • Post Type: choose any registered post type (posts, pages, or a CPT).
  • Taxonomy and Terms Filter: filter by the taxonomies of the selected post type.
  • Order By and Order: sort the query results.
  • Sticky Only: limit output to sticky posts.
  • Enable Pagination: split results across multiple pages.

Layout options

  • Predefined Layouts, Custom Layout, and Reset Layout.
  • Add Item: add an additional grid cell.
  • Grid Gap and Grid Row Height.
  • Allow Overlap and Compaction Type.
  • Grid Visualization as a placement aid.

Styling options

  • Item Card Style with reusable Style Presets.
  • Text controls for title, excerpt, read-more, and taxonomy text sizes (with excerpt truncation).
  • Card layout, alignment, and image display / focal point.
  • Colors for text, links, and backgrounds; borders, radius, and shadow.

Element order and visibility

Reorder and show or hide card elements (such as Title, Excerpt, Read More, Taxonomy, and custom meta) using the element order & visibility controls.

Typical workflow

  1. Add the widget to the page.
  2. Choose the post type and refine the query (taxonomy, terms, order, pagination).
  3. Select a predefined layout.
  4. Adjust card styling or apply a style preset.
  5. Drag and resize grid cells for a custom, free-form layout.
  6. Save the result as a Saved Setup if you want to reuse it later.

Widget Guide

Widgets Layout Widget

The Widgets Layout widget turns each grid cell into a drop zone for any Elementor widget. It is ideal for building free-form sections where headings, images, buttons, containers, and other widgets are placed and sized independently on the grid.

Adding widgets to a cell

  • Drag a widget from the Elementor panel directly onto a cell.
  • Click the cell's add (+) icon to open the widgets panel, then pick a widget.
  • A cell can hold any number of widgets, stacked in order.
  • Dropped widgets stay real, native Elementor elements — click one to edit it in the panel as usual, and its settings save with the page.

Arranging cells and widgets

  • Drag a cell by its handle to reposition it on the grid; resize it from its edges.
  • Drag a widget's body to reorder it within a cell or move it to another cell.
  • Nesting is supported: drop a Container / Grid / Flexbox and add widgets inside it; you can also drag a nested widget out into another cell.
  • Empty cells show an Elementor-style empty-view drop zone.

Layout options

Widgets Layout uses the same grid controls as Content Layout: predefined layouts, custom layout, reset, add cell, grid gap, row height, overlap, compaction, and grid visualization.

Cell controls (in the editor)

Hovering a cell reveals a compact control cluster with an Edit cell button (opens that cell's style settings), z-index buttons, a drag handle, and a remove cell button.

Typical workflow

  1. Add the widget and pick a predefined layout.
  2. Drag widgets from the panel into the cells (or use the cell's + icon).
  3. Reposition and resize cells; reorder widgets within and between cells.
  4. Style each cell individually (see Per-Cell Styling).
  5. Save or publish the page.

Styling

Per-Cell Styling (Widgets Layout)

Widgets Layout offers two levels of cell styling: a global Cell Style section that applies to every cell, and a Per-Cell Style repeater that overrides styles for individual cells.

Cell Style (global)

  • Background, padding, border, border radius, and box shadow applied to all cells.
  • Acts as the fallback whenever a per-cell field is left empty.

Per-Cell Style (repeater)

  • One repeater item is managed automatically for each cell in the grid.
  • Per cell you can set: background, padding, text color, links color, overlay color, horizontal and vertical content alignment, border, border radius, and box shadow.
  • Any field left empty falls back to the global Cell Style settings.

Editing a cell's styles

Click a cell's Edit cell button to jump straight to that cell's repeater item in the Style tab. Repeater actions stay in sync with the grid: adding a repeater item adds a cell, removing one removes its cell, and duplicating one creates a new cell that copies the original cell's styles and its widgets.

Reuse

Saved Setups and Style Presets

The Content Layout widget provides two ways to accelerate design work: Saved Setups and Style Presets.

Saved Setups

  • Store a combination of layout and style settings.
  • Save the current configuration, load a previous setup, or delete one you no longer need.
  • Use them to reuse a full widget configuration across the same site.

Style Presets

  • Apply a prepared visual design package quickly.
  • Use a preset as a starting point, then refine colors, borders, or typography manually.
  • Use them to speed up styling while keeping your own layout structure.

Recommended order of work

  1. Choose the widget and content source.
  2. Choose or build the layout.
  3. Apply a style preset.
  4. Fine-tune individual settings.
  5. Save the final result as a Saved Setup for reuse.

Workflow

Layout Editing, Helpers, and Responsive Workflow

Both widgets support the same free-form layout-editing workflow inside Elementor.

How editing works

  1. Start with a predefined layout.
  2. Drag grid cells in the preview to move them.
  3. Resize grid cells from their edges.
  4. Use the grid visualization overlay for more precise positioning.
  5. Use Elementor's device mode switcher to review desktop, tablet, and mobile views.
  6. Click Update or Publish when you are done.

Resetting your work

If a custom layout becomes too complex, use the widget's Reset Layout button to discard layout edits and return to the selected predefined layout.

Responsive editing tip

Layouts are stored per breakpoint, so always check tablet and mobile after finishing a desktop design. Some spacing, alignment, and text controls are responsive and can be adjusted per device.

Important: If you drag or resize cells but leave the page without clicking Update or Publish, those layout changes will not be saved.

Support

Troubleshooting

The widget does not appear in Elementor.

  • Confirm that the plugin is activated.
  • Confirm that Elementor is installed and active.
  • Search for the widgets under the Mosaic Contents category.

Content Layout shows no posts.

  • Confirm the selected post type has published content.
  • Check the query settings — selected taxonomy, terms, order, or the Sticky Only option.
  • If pagination is enabled, confirm there are enough items to fill a page.

A widget I dropped into a cell disappeared or duplicated.

  • Reorder or move widgets by dragging the widget's body, not its inner controls.
  • To remove a placed widget, use Elementor's native Delete on that element.
  • Use Undo (Ctrl/Cmd + Z) to revert an unexpected drag result.

My layout changes are lost after leaving the page.

  • Make sure you clicked Update or Publish after dragging or resizing cells.
  • Use the grid visualization and reset tools to rebuild the layout if needed.

Styling looks different on mobile.

  • Open Elementor's responsive mode and review tablet and mobile controls.
  • Check responsive typography, padding, and alignment settings, and the per-breakpoint layout.

References

Sources, Credits, and Support