How to Use Blocks to Build Your Web Page

Introduction

Blocks are essential building units for constructing a webpage. They serve as containers for your content and allow you to customize the appearance and functionality of your site. This guide will walk you through using blocks effectively to create and design your web pages.

Adding a Block

To start building your page, follow these steps:

1. Click on the "Start Building Your Page" option.
2. Choose to create your own block from scratch or select a pre-made block.
3. Customize the block by swapping out content, images, fonts, and colors.

The Block Manager

The Block Manager provides several options for managing and selecting blocks:

• Blocks Layouts: Pre-made complete website templates.
• Saved Blocks: Your previously saved custom blocks.
• Global Blocks: Blocks used across multiple pages.

On the left side of the Block Manager, you can:

• Choose between Kit 1 and Kit 2, which can be used interchangeably.
• Select a light or dark style.
• Use the category filter to find blocks for specific purposes (e.g., hero sections, contact forms, galleries, footers, headers, testimonials).

Adding and Removing Blocks

• To add a block, find the one that fits your needs and select it—it will automatically appear on your page.
• To remove a block, click on the options at the top right of the block and select "Delete."

Customizing Blocks

Each block has a set of tools to enhance its functionality:

1. Duplicate: Create a copy of a block to maintain consistency.
2. Settings: Adjust the width, canvas size, padding, margins, and styling.
3. Save Block: Save customized blocks for future use.
4. Colors & Backgrounds: Change background colors, add images, videos, or maps.
5. Global Blocks: Enable features like membership access, multilingual support, and block sliders.

Adding Content to Blocks

To add content within a block:

1. Click on the plus icon (+) in the middle of the block.
2. Open the elements drawer and add layout structures like columns and rows.
3. Drag and drop text, images, and other elements onto the page.

Adjusting Spacing and Layout

• Use the blue bar at the top and bottom of a block to adjust padding.
• Click, hold, and drag to increase or decrease the spacing.
• Set blocks to boxed or full-width mode:
• Full-width: Stretches the block across the entire screen.
• Boxed: Adjusts the width within a percentage-based container.
• Adjust the block height to Auto, Custom (pixels or percentage), or Full Height.

Using Block Dividers

Block dividers allow for seamless transitions between sections:

1. Access dividers from the settings panel.
2. Select a suitable divider style.
3. Adjust the color and placement (top or bottom) for better visual appeal.

Conclusion

By understanding how to use blocks effectively, you can build a visually appealing and functional webpage with ease. Experiment with different layouts, styles, and customization options to create a unique and engaging website.