The Advanced layout lets you design your content block sections exactly the way you want, with full control over columns, spacing, colors, images and text. No code is needed: everything works with simple sliders and menus, and you see your changes live. Let's dive in!
Step 1: Turn on the Advanced layout
Open your website in the UENI Editor.
Click the section you want to change.
At the top of the settings, switch Type of Layout from Basic to Advanced.
Click the Design Content Blocks button.
Step 2: Set up the Section tab
The design panel has three tabs. The Section tab controls the whole section and the space around it.
Gap Below Title: space between the section title and your blocks (0 to 100px).
Widget Padding Top: space between the section title and the menu (0 to 200px).
Widget Padding Bottom: space between your blocks and the footer (0 to 200px).
Widget Padding Left and Right: space between your blocks and the sides of the screen (0 to 200px).
Background Color: the color behind the whole section.
Pro tip: Click the down arrow next to a setting to use different values on phone, tablet, laptop, and desktop. This works on every tab.
Step 3: Arrange your blocks in the Content tab
The Content tab controls the container that holds your blocks.
Columns: how many blocks sit side by side (1 to 12).
Container Size: Default Value, Full Width, Small, Medium, or Large.
Container Alignment: Default (Center), Left, Right, Space Evenly or Space Between.
Gap Between Items: space between your blocks (0 to 100px).
Container Padding Top, Bottom, Left and Right: space between the container's edges and your blocks (0 to 200px).
Background Color: the color of the container.
Font Color: the color of your block titles.
Step 4: Design each block in the Blocks tab
The Blocks tab styles every block in the section at once.
Layout and spacing
Content Layout: choose Stacked (title, text, and button one below the other), Split (title left, text and button right), Inline action (title and text left, button right) or Heading row (title and button on one row, text below).
Content Alignment: align text, title, and action button to the left, center or right of the Content Block.
Vertical Content Alignment: align text, title, and action button to the top, center or bottom of the Content Block.
Gap Inside Item: space between the image and the text (0 to 100px).
Item Padding: space between the block's edges and its content (0 to 200px).
Min Height: minimum height of the block container regardless of screen size
Card style
Elevation: adds a shadow, from 1 to 24. Higher numbers cast more shadow.
Hover Effect: None, Elevate, Lift, Grow or Image Zoom.
Border Corner Radius (0 to 100px), Border Width (0 to 20px) and Border Color.
Background: a solid color or a Linear, Radial or Angular gradient. Use + and - to add or remove gradient colors, and the invert and rotate buttons to adjust it.
Text and buttons
Title and Text settings: font size (0 to 200px), font weight, margins (0 to 200px), and color.
Action Button Width and Action Button Margin (0 to 200px) on each side.
Warning: Action Button Width only works with the Stacked and Split content layouts.
Images
Image Container Position: Left of Card, Right of Card, Top of Card, Bottom of Card or Fit Card.
Image Container Aspect Ratio: 1:1, 4:3, 3:4, 16:9 or 9:16.
Image Container Width (10% to 100%) and Corner Radius (0 to 200px).
Image Fit: Cover, Contain, Fill or None.
Image Position: pick which part of the image stays in view, from Top Left to Bottom Right.
Disable Gutters: adds or removes space around the image.
Step 5: Style one block differently (optional)
Open any block and click Design Block to give it its own spacing, colors or image style. Click Reset to defaults to match it back to the rest.
Step 6: Check and save
Use the phone and desktop toggle at the top of the editor to check your design. Not happy? Switch back to Basic, or click Cancel before saving.
Note: Start small. Change one thing, check the live preview, then move on.
Final thoughts
Click Save, and your newly designed section is live. Enjoy making it your own!