Mastering Elementor: Section and Column Settings for Layout Control

Preface

Are you ready to take your Elementor skills to the next level? Understanding how to effectively use section and column settings is crucial for creating stunning, responsive websites. Elementor, a leading WordPress page builder, offers powerful tools to control your website’s layout. In this guide, we’ll explore these settings to help you build better websites with ease. Welcome to STARTMAKINGWEBSITES, your go-to resource for mastering website creation!

Why Master Elementor’s Section and Column Settings?

Before diving in, let’s understand why these settings are so important.

• Layout Control: Sections and columns are the backbone of your website’s structure. Mastering their settings gives you precise control over content placement.
• Responsiveness: Properly configured sections and columns ensure your website looks great on all devices.
• Design Flexibility: These settings unlock a wide range of design possibilities, allowing you to create unique and engaging layouts.
• Improved User Experience: A well-structured layout enhances user experience, making it easier for visitors to navigate your site.

Getting Started with Elementor

If you’re new to Elementor, don’t worry! It’s a user-friendly drag-and-drop page builder that simplifies website design. You can install it directly from your WordPress dashboard. Just go to Plugins > Add New and search for Elementor. For a comprehensive introduction, check out our guide on getting started with Elementor the complete guide.

Hint: Make sure you have Elementor installed and activated before proceeding. Also consider reading this blog post about [10 Expert Tips and Tricks for Mastering Elementor Page Builder](https://www.startmakingwebsites.com/10-expert-tips-and-tricks-for-mastering-elementor-page-builder/)

Understanding Sections and Columns

• Sections: Think of sections as the main containers for your content. They span the full width of your website and hold columns.
• Columns: Columns divide sections into vertical segments, allowing you to arrange content side-by-side. You can adjust the width of each column to create different layouts.

Exploring Elementor’s Section Settings

To access the section settings, hover over a section and click the ‘Edit Section’ icon (six dots). This will open the settings panel on the left side of your screen.

Layout Tab

The Layout tab controls the basic structure of your section.

• Content Width:
  • Boxed: Limits the content width to a specific value, creating margins on either side.
  • Full Width: Allows the content to span the entire screen width.
• Columns Gap: Adjusts the spacing between columns within the section.
  • Default: Uses the default gap defined in your Elementor settings.
  • No Gap: Removes the gap between columns.
  • Narrow, Extended, Wide, Wider: Preset gap sizes.
  • Custom: Allows you to specify a custom gap size in pixels.
• Height:
  • Default: Uses the default height based on the content.
  • Fit to Screen: Adjusts the section height to fill the screen.
  • Min Height: Sets a minimum height for the section, ensuring it’s always at least that tall.
• Column Position: Controls the vertical alignment of columns within the section.
  • Top, Middle, Bottom, Stretch: Aligns columns to the top, middle, bottom, or stretches them to fill the section height.
• Vertical Align: Aligns the content within the section vertically.
  • Top, Middle, Bottom, Space Between, Space Around, Space Evenly: Controls how content is distributed vertically.
• Overflow:
  • Hidden, Visible, Scroll, Auto: Determines how content that overflows the section is handled.

Style Tab

The Style tab lets you customize the appearance of your section. Check out this post about the Top 10 Free Best Google Fonts for Your Website to give your website an individual look.

• Background:
  • Classic: Sets a solid color or image as the background.
  • Gradient: Creates a gradient background with two or more colors.
  • Video: Uses a video as the background.
  • Slideshow: Displays a slideshow of images as the background.
• Background Overlay: Adds a layer on top of the background for visual effects.
  • Color, Gradient, Image: Options similar to the Background settings.
  • Blend Mode: Controls how the overlay blends with the background.
• Border:
  • Border Type: Sets the style of the border (solid, dashed, dotted, etc.).
  • Width: Adjusts the thickness of the border.
  • Color: Sets the color of the border.
  • Border Radius: Rounds the corners of the section.
• Shape Divider: Adds decorative shapes to the top or bottom of the section.
  • Type: Select from a variety of shapes.
  • Color: Sets the color of the shape.
  • Width, Height: Adjusts the size of the shape.
  • Flip, Invert: Flips or inverts the shape.
• Typography: Edit the typography settings by selecting beautiful fonts for your website. Go to this internal link to receive useful tipps: How to choose the right fonts for your website
• Box Shadow: Adds a shadow effect to the section.

Advanced Tab

The Advanced tab provides additional options for more advanced control.

• Margin and Padding: Adjusts the spacing around the section.
  • Margin: Adds space outside the section.
  • Padding: Adds space inside the section.
• Z-Index: Controls the stacking order of elements.
• CSS ID & Classes: Adds custom CSS IDs and classes for styling.
• Motion Effects: Adds animation effects to the section.
  • Entrance Animation: Sets an animation that plays when the section comes into view.
  • Scrolling Effects: Creates parallax or other scrolling effects.
• Background:
  • Background Color: Sets a solid color as the background.
  • Background Image: Uses an image as the background.
• Responsive: Controls the visibility of the section on different devices.
  • Hide on Desktop, Tablet, Mobile: Hides the section on specific devices. This function is very important for your website’s SEO, so you should implement this when possible. Read this post about how to optimize your website for SEO.
• Attributes: Add custom attributes to the section element.
• Custom CSS: Adds custom CSS code to style the section. To be able to find your CSS later you may want to read this blog post: WordPress Style CSS – What it is and where to find it

.custom-section {
  background-color: #f0f0f0;
  padding: 20px;
}

Mastering Elementor’s Column Settings

To access the column settings, hover over a column and click the ‘Edit Column’ icon. The settings panel will appear on the left.

Layout Tab

The Layout tab controls the structure of your column.

• Column Width: Sets the width of the column as a percentage of the section width.
• Horizontal Align: Aligns the content within the column horizontally.
  • Left, Center, Right: Aligns content to the left, center, or right.
• Vertical Align: Aligns the content within the column vertically.
  • Top, Middle, Bottom, Space Between, Space Around, Space Evenly: Controls how content is distributed vertically.
• Widget Space: Adjusts the spacing between widgets within the column.

Style Tab

The Style tab allows you to customize the appearance of the column.

• Background:
  • Classic, Gradient, Video, Slideshow: Similar options to the section background settings.
• Background Overlay: Adds a layer on top of the background for visual effects.
• Border:
  • Border Type, Width, Color, Border Radius: Similar options to the section border settings.
• Box Shadow: Adds a shadow effect to the column.

Advanced Tab

The Advanced tab provides additional options for advanced control.

• Margin and Padding: Adjusts the spacing around the column.
• Z-Index: Controls the stacking order of elements.
• CSS ID & Classes: Adds custom CSS IDs and classes for styling.
• Motion Effects: Adds animation effects to the column.
• Responsive: Controls the visibility of the column on different devices.
• Attributes: Add custom attributes to the column element.
• Custom CSS: Adds custom CSS code to style the column.

.custom-column {
  background-color: #ffffff;
  padding: 15px;
}

Practical Tips for Better Layout Control

• Use Consistent Spacing: Maintain consistent spacing between elements to create a clean, professional look.
• Leverage Padding and Margins: Use padding to add space inside elements and margins to add space outside elements.
• Optimize for Mobile: Always check how your layout looks on different devices and adjust settings accordingly.
• Experiment with Backgrounds: Use backgrounds to add visual interest and highlight important content.
• Take Advantage of Shape Dividers: Add shape dividers to create unique and eye-catching section transitions. If you need a custom page or website design consider using Themeforest

Example Layouts

Let’s look at some example layouts you can create using Elementor’s section and column settings.

Two-Column Layout with Image and Text

1. Create a section with two columns.
2. In the left column, add an Image widget.
3. In the right column, add a Heading and a Text Editor widget.
4. Adjust the column widths to create a balanced layout.
5. Use the Style tab to customize the appearance of the section and columns.

Three-Column Layout with Icons and Text

1. Create a section with three columns.
2. In each column, add an Icon Box widget.
3. Customize the icon, heading, and text for each box.
4. Adjust the column gaps to create equal spacing.
5. Use the Style tab to customize the appearance of the section and columns.

Info: Elementor is a great tool to create websites or landing pages but you need also the right web hosting for your websites or landing pages. You can chose between Bluehost, Dreamhost, Hostgator and GoDaddy

Full-Width Image with Text Overlay

1. Create a section and set the Content Width to ‘Full Width’.
2. Add a Background Image to the section.
3. Add an Overlay with a semi-transparent color.
4. Add a Heading and a Text Editor widget inside the section.
5. Use the Advanced tab to adjust the margin and padding for the widgets.

Conclusion

Mastering Elementor’s section and column settings is essential for creating professional, responsive websites. By understanding and utilizing these settings, you can achieve precise layout control and unlock a wide range of design possibilities. Start experimenting with different settings and layouts to discover what works best for your projects. Remember, STARTMAKINGWEBSITES is here to guide you every step of the way. Keep learning, keep creating, and have fun building amazing websites!If you liked this tutorial you may also consider this awesome guide: How to Install Astra Starter Templates