OG Designer Advanced
Use source content, field modes, and page-type rules when one default share image is not enough.
Use this page after you know the basic editor flow and want more control over how images are filled and where they are used.
It introduces the advanced terms as you need them: source content is the page information Mosaicora reads, field modes decide how each value is filled, and page-type rules choose when a different image should be used.
Connect a source website
Choose the website and page that Mosaicora should use as the source for titles, images, and other content.
- 1
Open the Content Source card in the preview area.
- 2
Select the connected website you want to use.
- 3
Choose the page path you want to preview.
- 4
Refresh the preview and confirm the expected page content loads.
Choose how fields are filled
Choose whether Mosaicora should fill a field automatically, use a value you type, or read a specific part of the page.
- •
Auto uses the connected page or preset defaults.
- •
Custom lets you type the final value directly.
- •
CSS selector is the developer-friendly option for reading a specific page element.
Field mode example
A simple example of how the three field modes work together.
Title: Auto
Subtitle: Custom
Author: CSS selector → article .byline
Image: CSS selector → article .hero-imageTune the design
Adjust the visual polish after the content is loaded, and use popup controls when you want a setting closer to the preview.
- •
Typography controls set fonts and text style.
- •
Image Effects controls adjust placement, filters, borders, and shadows.
- •
Brand Settings apply the connected logo and colors.
- •
Background controls let you choose and fine-tune the background.
- •
Open a popup control when you want to adjust a setting while keeping the preview in view.
Save, load, and assign templates
Keep image layouts reusable by saving them, loading them later, and assigning them to the right places.
- •
Save a template once the layout and content are ready.
- •
Load a saved template when you want to continue from a previous setup.
- •
Assign the template to the site default, URL rules, or page-type rules.
- •
Delete the template when it is no longer needed.
Assignment example
A compact example of the destinations that can point to the same template.
Site default: Editorial Base
URL path /blog/*: Article Story
Page type rule: Product → Product SpotlightPreview and troubleshoot
Use the preview to confirm the default image and any rule-based variations before visitors see them.
- •
Use Live Preview while you are editing.
- •
Open the full preview when you want a closer review.
- •
Use the browse presets control if you want to change the starting layout.
- •
Check the source, brand, and template assignment again if the default or alternate image looks wrong.