Customizing Block Settings — Colors, Fonts, Padding & Spacing
Every block in MobiDrag has its own set of customizable settings. This guide walks you through how to access them and what you can change — from colors and typography to layout controls and visibility toggles.
1 Opening a block's settings
To customize a block, simply click on it in the canvas. A teal highlight border appears around the selected block, and its settings load instantly in the right panel.
You can also open settings by hovering over a block on the canvas and clicking the ✏️ pencil (edit) icon in the action toolbar that appears.
2 Understanding the right panel
The right panel is your settings editor. Its contents change completely depending on which block is selected. Settings are organized into logical groups — for example, a Product Grid block shows:
| Setting group | What you control |
|---|---|
| Collection | Which product collection to display |
| Items Shown / Columns | Number of products and grid columns (1, 2, or 3) |
| Header | Section title text and "View All" link visibility |
| Product Card | Toggle Image, Title, Price, Add to Cart, Add to Favourite on/off |
| Vertical Gap / Horizontal Gap | Sliders to set spacing between product cards |
| Background & Padding | Section background color and inner padding |
3 Changing colors
Color pickers appear inline whenever you click on a color swatch in the right panel. You can set colors for:
- Block background — the overall section background color
- Text color — headline, body, and label text
- Button color — background and text of action buttons
- Divider / border color — separator lines
Global colors first: Before editing individual block colors, set up your Brand Kit (Colors section). Brand Kit colors are available as swatches in every block color picker, keeping your design consistent.
4 Fonts and text settings
For blocks with text content — banners, headers, section titles — the right panel shows text fields where you type directly. Font family and size are controlled globally in the Brand Kit → Typography section rather than per-block, ensuring a unified look across your entire app.
Per-block text settings typically include:
- Label / title text content
- Subtitle or description text
- Button label text
- Font weight toggle (Normal / Bold) on some blocks
5 Padding and spacing
Most blocks include slider controls for spacing. Sliders give you visual control without typing pixel values:
- Vertical Gap — space between rows of items (e.g., product rows)
- Horizontal Gap — space between columns
- Padding — inner whitespace between the block edge and its content
Drag the slider handle left to decrease, right to increase. The canvas updates in real time so you see the exact result as you drag.
6 Show / hide elements
Many blocks let you toggle individual sub-elements on or off using the 👁 eye icon next to each item. For example, on the Product Grid block you can hide the rating, the "Add to Favourite" button, or the price — without removing the block itself.
7 Tips for consistent styling
- Set Brand Kit first — define your palette and fonts in Brand Kit before styling individual blocks. This way, every block starts from your brand's baseline.
- Use consistent padding — for a polished look, use the same padding value (e.g., 16 px) across all content blocks.
- Preview as you go — changes reflect live in the canvas. Scroll the phone preview to see how your edits look in context.
- Undo instantly — if a color or spacing change looks wrong, press Ctrl + Z to revert it immediately.