For an in-depth understanding of the Row element and its capabilities, check out our Row Element article.
Here are some key layout examples using row and step-by-step guides.
1. Design Hero Banner
A hero banner is a prominent banner placed at the top of your page, usually with a background image, headline, and call-to-action button.
While you can use a pre-designed Hero Banner element for this, the Row element gives you greater control and flexibility.
Steps to Create It:
Step 1: Drag and drop a 2-column row. This creates the base layout for your hero banner.
Step 2: Set background for the section.
Use the Settings tab to choose a solid color:
upload a background image:
Step 3: Drag and drop a text element, button, or any other elements like icon lists or item lists into your layout.
Customize them via the Settings and Advanced tabs for adjustments.
Step 4: To adjust background size, go to the section’s Advanced tab to fine-tune margins and padding for an ideal fit.
Step 5: Switch to mobile view and adjust the layout for responsiveness.
2. Design Product Breakdown Section
The layered product breakdown layout is perfect for highlighting product features or specifications in a structured, visually appealing way.
Steps to Create It:
Step 1: Drag and drop a 2-column row. This forms the foundation for your product breakdown layout.
Step 2: Drag an image element to the left column and upload your desired image.
Step 3: To create the breakdown content with icons/images similar to the sample, drag and drop a 2-column row into the right column.
Step 4: Add elements to each smaller column. Similarly to the sample, we’ll add an image and accordion element.
Step 5: Upload images and update text for each breakdown item.
Step 6: Repeat for additional sections or use the Copy/Paste feature to duplicate.
Step 7: Switch to mobile view and adjust the layout for responsiveness.
3. Design Product Details
For a detailed product section, you can create a custom layout that organizes product images, descriptions, and purchase options.
Steps to Create It:
Step 1: Drag a 2-column row to your editor.
Step 2: Place an image in the left column. Add headings, text blocks, buttons, etc in the right column.
Step 3: Replace placeholder text, upload image:
and link your CTA buttons:
4. Design Testimonial Box within a Carousel
To design a Testimonial Box within a Carousel, follow these steps:
Step 1: Drag the Carousel element to your page.
Step 2: Within the carousel, add a 2-column row. Adjust the column sizes to your preference. Then insert images into the left column and text into the right column.
Step 3: Adjust the appearance of each element to suit your style.
Step 4: Use the Copy/Paste feature to replicate slides, then update each with new content.
For more design tips and in-depth tutorials on creating optimized layouts, explore our GemPages Academy.
