Quick Start
This guide walks you through building a simple section with Styble Pro — a two-column layout with text on one side and an image on the other. It takes about five minutes.
1. Create or edit a page
Go to Pages → Add New (or edit an existing page) to open the WordPress block editor.
2. Add a Container
The Container block is the foundation of every Styble layout.
- Click the + (block inserter) button.
- Search for Container and select it.
The Container holds your columns and gives you control over width, padding, background and alignment.
3. Add Columns
Inside the Container, add a Column layout and choose a two-column structure. Each Column can hold any blocks you like.
4. Add content
- In the first column, add an Advanced Text block and type a heading and paragraph.
- In the second column, add an Advanced Image block and choose an image from your media library.
5. Style with the inspector
Select any block to open its settings in the right-hand inspector. Settings are grouped into tabs — typically Content, Style and Advanced — so you can adjust spacing, colors, typography and responsive behavior.
Use Global Settings
Instead of picking colors and fonts by hand on every block, define them once in Global Settings and reuse them everywhere.
6. Make it responsive
Use the device switcher (desktop / tablet / mobile) in the editor toolbar to preview and fine-tune each breakpoint. Many block controls can be set per device. The tablet and mobile breakpoints themselves are configurable in Global Settings → Breakpoints.
7. Publish
Click Publish (or Update) and view your page on the front end. The block's styling is rendered with scoped, dynamically generated CSS so it looks identical to the editor.