Everything on a page is a widget inside a section. You place widgets from the Elements panel, then edit each one in two places: what it says or shows, and how it looks.
How to add a widget
- Click Add in the left rail. The Elements panel opens.
- Type in Search elements…, or browse the categories (Basic, Layout, Media, Showcase, Effects, Business, Blog, Dynamic, Navigation, Custom). Hover a card to see what it does.
- Drag a card onto the page. Blue lines show where it will land.
- Or select a column or box first, then click a card to insert it there. The hint at the top of the panel tells you which way works right now.
You can also add one from a section or column toolbar: Add > Widget, then pick from the short list of common widgets. Right-click > Add > Widget opens the Elements panel.
Custom widgets your agency has published for the site appear in the Custom category. Widgets from the platform library carry a small ContentForge badge (or Library on a white-label editor).
How to edit a widget
Click a widget to select it and a toolbar appears above it.
- The main button changes what the widget holds. It's named for the widget, for example Edit Text, Manage Image, Manage Button, Manage Photos or Manage Reviews. Most open a window where you add items, links and settings.
- Edit Design opens the Design panel on the right: colors, fonts, spacing, borders, size, animation and the widget's own style options. Design changes apply to the screen size you're editing (see Responsive design). The sections every Design panel shares are explained in Widget Design panel basics.
- More > Connect to Data fills the widget from Business Info, Business Text or a collection (see Connect to Data).
The toolbar also has Duplicate, Alignment (for widgets with an alignment setting), move arrows and Delete. Every toolbar and right-click item is listed in Keyboard shortcuts, right-click menu and toolbar.
Number boxes next to sliders: type the number you want (select the old one first to replace it). It's checked when you press Enter, click away or stop typing for a moment. A number outside the allowed range snaps to the nearest one and a small note says the limit, for example "max 48". Leaving the box empty puts the old value back. The up and down arrow keys change it by 1, or by 10 with Shift.
When a setting has more choices than fit across the panel, they show in two or more rows of equal buttons.
Resize a widget by dragging
Image, Button, Spacer, Video, HTML Embed and Divider show resize handles when selected. Drag a side or corner handle.
- The drag changes only the screen size you're on. Resize a button on Mobile and its Desktop and Tablet size stay as they were.
- On Desktop the new size also flows down to Tablet and Mobile, unless you've already set a different size there.
- Each drag is one undo step.
Copy, paste and duplicate
- Duplicate (or Ctrl/Cmd+D) places a copy right after the original.
- Copy (Ctrl/Cmd+C), then select another element and paste with Ctrl/Cmd+V, or right-click and choose Paste Above, Paste Below or Paste Inside.
- You can copy whole sections, as well as Advanced Tabs, Accordions and Grids. Whole sections can't be duplicated; copy and paste them.
Hide on a screen size
- Right-click > Hide From, then pick All Screen Sizes, Ultrawide, Desktop, Tablet or Mobile. The same list is under More on the toolbar.
- Or, in Layers, click the eye icon (Hide on this device) while you're viewing that screen size.
Hiding is set for each screen size separately. Hiding something on Desktop doesn't hide it on Ultrawide.
Pin or stick a button
Buttons, Download File, Icon and WhatsApp widgets have a Position group in the Design panel. Full details are in Widget Design panel basics.
- Fixed (called Floating on the Icon and WhatsApp widgets) pins the widget to the screen, for example a "Call now" button at the bottom center of a phone. Pick one of nine spots under Pin to and set the distance from the edges.
- Sticky keeps the widget a set distance below the top of the screen while its section scrolls past.
- Position is set per screen size. To pin a button on phones only, switch to Mobile and choose Fixed there.
- In Edit mode a dashed marker stays in its column so you can still select or move a pinned widget.
Show a pinned button on every page
Once a widget is Fixed on at least one screen size, the Position group shows Show on every page.
- Turn it on and the same button appears on every page of the site. Change it on any page and every page changes.
- It's kept with the site's footer. In Edit mode a dashed On every page marker sits at the end of the footer, so you can select it from any page.
- It only shows on the screen sizes where it's pinned.
- To leave it off some pages, open Except these pages and untick them.
- Turn it off and the button goes back to the page you're on, at the end of the page.
- The site needs a footer first. If you remove the footer, the buttons shown on every page go with it.
Button and image shapes
Underline-only and slanted buttons, rounding just some corners, double borders and tilted photos are all in the widget's Design panel. See Button widgets and Image and Logo widgets.
Examples
- A plumber's "Call now" bar on phones: add a Button, link it with Click to call, switch to Mobile, set Position to Fixed at the bottom center, then turn on Show on every page.
- A full-width button on phones only: select the button on Mobile and drag its side handle to the column edge. Desktop keeps its normal width.
- A photo that only shows on computers: right-click the image > Hide From > Mobile and Tablet.
- Reuse a card you built: select the card's column, Ctrl/Cmd+C, select a column on another page, Ctrl/Cmd+V.
Limits and what it can't do
- Only Image, Button, Spacer, Video, HTML Embed and Divider have drag handles. Size the others in their Design panel.
- You can't lock a single widget for clients. Lock its section or column instead (right-click > Lock Editing for Client).
- Whole sections can't be duplicated, only copied and pasted.
- Clicking a card in the Elements panel does nothing until a column or box is selected; drag it instead.
Good to know
- Big text never runs off its box. When a heading's longest word is wider than its box (a long brand name on a phone, say), the text gets smaller on that screen size until the word fits. It never gets bigger than the size you set. A word is split mid-letters only if it still can't fit.
- To delete, use Delete on the toolbar or right-click menu, or press Delete/Backspace. Undo brings it back.
Who can use it
- Agency people with the Mount Olympus tool can do everything here.
- Client people (see Client permissions): Editor lets them add, move, resize, design, hide and delete widgets. Widget content lets them only change what existing widgets say and show. Editing an HTML Embed's code needs Dev Mode. Nothing inside a section or column locked for clients can be changed.
Troubleshooting
- I click a card in Elements and nothing happens: no column is selected. Select a column first, or drag the card onto the page.
- 'No elements match "…"': try a shorter or different word. Search looks at widget names and their descriptions.
- Resizing on Mobile changed nothing on Desktop: that's by design. Switch to Desktop and resize there too.
- A number box won't accept my value: it's outside the allowed range and snapped to the limit shown under it.
- The Add button is missing: you're a client person without the Editor permission.
- There's no edit button on an HTML Embed (as a client): you need Dev Mode to edit its code.
- I can't select or change a widget (as a client): its section or column is locked for client editing. Ask your agency.