How to create unique layouts with premium blocks

BySupport Admin

Standard layouts work for many, but your store often needs a specific look to stand out. By using Kadence blocks within your WooShop site, you can move beyond simple rows of text and create complex, professional designs without touching a line of code.

How to build a custom layout

  1. Open the WordPress editor: Go to your Pages or Posts and select the one you want to edit.

  2. Add a Row Layout block: Click the plus (+) icon and search for "Row Layout." This is the foundation of any custom design. It allows you to choose your column structure (e.g., two columns, three columns, or staggered layouts).

  3. Select your column structure: Choose how you want to divide the space. Don’t worry about being perfect yet; you can change the column widths later by dragging the dividers.

  4. Insert Premium Blocks: Click inside a column and add a specific block. For unique looks, try the Info Box (for icons and text), the Advanced Gallery (for masonry or carousel photo grids), or the Advanced Slider.

  5. Adjust the spacing: Select your Row Layout block and look at the right-hand sidebar. Under the "Layout" tab, you can adjust the padding (space inside the block) and margin (space outside the block) to give your content room to breathe.

  6. Style the background: Use the "Style" tab to add a background color, a subtle gradient, or an image to your entire row or individual columns.

  7. Check for mobile: Click the mobile icon at the top of the settings sidebar. This lets you change the column stacking order or font sizes specifically for phone users without changing the desktop version.

Practical layout ideas

  • The "Our Story" Section: Use a two-column Row Layout. Place an Advanced Image block on the left with a rounded border and a Text block on the right with a handwritten signature font.

  • Visual Category Grid: Instead of a list, use a three-column row with an Info Box in each. Set a background image for each box that represents a product category, like "Summer Collection" or "Best Sellers."

  • Restaurant Specials: Use a Row Layout with a narrow left column for a food photo and a wider right column for the description and price. Duplicate this row to create a clean, organized menu list.

Troubleshooting common issues

  • The layout looks "squished": You likely have too many columns or too much padding. Check the "Container Max Width" in the Row Layout settings to ensure it matches your theme settings.

  • Text is hard to read over images: If you use a background image, go to the "Background Overlay" settings in the block sidebar. Add a dark or light overlay with 50% opacity to make your text pop.

  • Columns don’t stack correctly on mobile: Select the Row Layout block, go to the Mobile view settings, and ensure the "Collapse Columns" toggle is active. This ensures your three-column desktop layout becomes a single vertical column on phones.

  • Blocks are touching each other: Add "Bottom Margin" to your Row Layout block. This creates a natural break between different sections of your page.

Summary

Customizing your WooShop site is a matter of nesting blocks inside rows and adjusting the spacing. Start with a Row Layout, add your content blocks, and always check how it looks on a mobile device before hitting publish.

Related links:

  • Setting up your global brand colors

  • Managing your WooCommerce product catalog

  • A guide to the Kadence Advanced Gallery block

Similar Posts