How Page Design Works in ShinePages: Blocks, Rows, Columns & Widgets
Understanding the Builder Grid to edit and design your pages & adjust your layout
ShinePages Support
Last Update 10 hari yang lalu
ShinePages gives you tons of flexibility when it comes to designing your pages - while still keeping everything within an easy-to-use, drag-and-drop system. The key to understanding how page design works in ShinePages is understanding the basic "grid" structure of the Builder:
BLOCK → ROW → COLUMN → WIDGET
Every page is made up of Blocks. Inside those Blocks are Rows. Rows contain one or more Columns. And your actual page content - things like headings, text, images, buttons, forms and videos - is added using Widgets inside those Columns.
Once you understand how those four pieces work together, editing and customizing your ShinePages pages becomes much easier.
Once you understand how those four pieces work together, editing and customizing your ShinePages pages becomes much easier.
Again, the basic ShinePages page structure is:
BLOCK → ROW → COLUMN → WIDGET
-A Block is the large section of the page. (see RED outline above 🟥)
-A Block contains one or more Rows. (see BLUE outlines above 🟦)
-Each Row contains one or more Columns. (see YELLOW/ORANGE outlines above 🟨🟧)
-And your Widgets - headings, text, images, buttons, forms, videos and more - live inside those Columns. (see PINK outlines above 💗)
BLOCK → ROW → COLUMN → WIDGET
-A Block is the large section of the page. (see RED outline above 🟥)
-A Block contains one or more Rows. (see BLUE outlines above 🟦)
-Each Row contains one or more Columns. (see YELLOW/ORANGE outlines above 🟨🟧)
-And your Widgets - headings, text, images, buttons, forms, videos and more - live inside those Columns. (see PINK outlines above 💗)
GOOD TO KNOW: While every ShinePages page follows the basic Block → Row → Column → Widget structure, the grid itself is very flexible. Blocks, Rows and Columns can be resized, rearranged and adjusted to create all kinds of layouts. For example, three Columns in a Row don't have to stay equal - simply drag the edge of a Column to make it wider or narrower. Think of the grid as the structure that keeps your page organized, not a rigid layout you're locked into. In addition - We also have a "Free Move" option on all widgets. Learn more about that HERE.
WORKING WITH BLOCKS:
A Block is the largest layout container in the ShinePages Builder. Think of your Page as a series of Blocks stacked vertically from top to bottom.
You might have one Block for your Hero section, another for your Services, another for Testimonials, and another for your Call-to-Action.
You might have one Block for your Hero section, another for your Services, another for Testimonials, and another for your Call-to-Action.
Adding a Block
There are two ways to add a new Block to your page.
1) Click + Add Block at the bottom of any existing Block to open the Block Library. From here, you can choose a blank Block or browse our large collection of pre-designed Block Templates.
1) Click + Add Block at the bottom of any existing Block to open the Block Library. From here, you can choose a blank Block or browse our large collection of pre-designed Block Templates.
2) Alternatively, you can also drag the Container Widget from the Widget menu directly onto your page. A Container Widget is simply a blank Block, so this is a quick way to add an empty Block when you already know you want to build your layout from scratch.
TIP: If you'd like to see the available Block Templates before deciding on a layout, use + Add Block rather than dragging in a Container Widget. Block Templates already include designed Rows, Columns, Widgets and spacing, so they're often the fastest and easiest way to add a new section to your page.
Managing & Designing a Block
Once a Block is on your page, hover over it to reveal the Block controls.
From here, you can access options for managing the Block - including moving, duplicating, saving or deleting it - as well as open the Block Settings to customize the Block itself (including the option to turn on Block Slider Mode). Click on the word "Block" to open Block Settings.
There are lots of additional design options available within Block Settings, including controls for the Block's size, spacing, background, layout and more. Rather than cover every setting here, we've put those together in a separate guide:
→Learn more: Block Settings & Designing Your Blocks
→Learn more: Block Settings & Designing Your Blocks
WORKING WITH ROWS:
A Row lives inside a Block and contains one or more Columns. Rows allow you to create different horizontal layouts within the same Block.
For example, one Row might contain a single full-width Column, while the Row directly below it might contain two,three, four or five Columns.
You can also have multiple Rows within the same Block, giving you lots of flexibility to organize and rearrange your content without needing to create a separate Block for every layout.
For example, one Row might contain a single full-width Column, while the Row directly below it might contain two,three, four or five Columns.
You can also have multiple Rows within the same Block, giving you lots of flexibility to organize and rearrange your content without needing to create a separate Block for every layout.
TIP: Rows are especially helpful when you want different Column layouts to share the same Block styling or background - like the example below. Instead of creating three separate Blocks, you can create three Rows within one Block and give each Row its own Column layout.
Adding a Row
You can add additional Rows inside an existing Block whenever you want to create a new horizontal layout within that same section.
-Use the + (plus sign icon) in the Column/Row toolbar to add a Row
-Also note that the ⚙ (gear icon) is available to access the current/existing Row's Settings.
Managing & Designing Rows
Once you have added an additional Row, you will see additional options within the Column/Row toolbar, including
-Row Settings (gear icon)
-Add New Row (plus icon)
-Delete Row (trash can icon)
-Move Row Down (down arrow icon)
-Move Row Up (up arrow icon)
There are additional options available within Row Settings for controlling how the Row and its Columns within are arranged and displayed. (Including the option to turn on Row Slider Mode and Row Tab Mode).Rather than cover every setting here, we've put those together in a separate guide:
→ Learn more: Row Settings & Working With Rows
WORKING WITH COLUMNS:
A Column lives inside a Row and acts as the container for your Widgets. Every Row has at least one Column, but you can add multiple Columns to create side-by-side layouts.
Columns determine how the horizontal space within a Row is divided - but they do not have to be equal in size.
For example, a Row with two Columns could be split evenly at 50% / 50%, or you could make one Column smaller and the other larger to create a 30% / 70%, 40% / 60% or other custom layout.
Columns determine how the horizontal space within a Row is divided - but they do not have to be equal in size.
For example, a Row with two Columns could be split evenly at 50% / 50%, or you could make one Column smaller and the other larger to create a 30% / 70%, 40% / 60% or other custom layout.
Resizing Columns
Adding Columns/Splitting a Row into Multiple Columns
You can add additional Columns to a Row (or Split a row into Multiple Columns) when you want to create another space for content within that same horizontal layout.
To add a new Column within a Row, click on the word "Column" within the Column/Row Toolbar - then select between 1, 2, 3, 4 or 5 columns.
To add a new Column within a Row, click on the word "Column" within the Column/Row Toolbar - then select between 1, 2, 3, 4 or 5 columns.
Once added, you can resize the Columns as needed to create the layout and proportions you'd like.
Duplicating, Moving & Deleting Columns
Columns can also be duplicated, moved and deleted, making it much easier to build and rearrange your layouts without recreating your content from scratch.
When you duplicate a Column, you're duplicating the Column itself AND all of the Widgets contained inside it.
This can be especially helpful when creating repeating layouts - for example, several service, feature or offer Columns that use the same basic design.
When you duplicate a Column, you're duplicating the Column itself AND all of the Widgets contained inside it.
This can be especially helpful when creating repeating layouts - for example, several service, feature or offer Columns that use the same basic design.
You can also move an entire Column to another position within your layout.
When you move a Column, all of the Widgets inside that Column move along with it - so you don't have to move each individual Widget separately.
When you move a Column, all of the Widgets inside that Column move along with it - so you don't have to move each individual Widget separately.
GOOD TO KNOW: A Column is a container for your Widgets. If you want to move or duplicate an entire group of widgets/content together, working with the Column can save you time. If you only want to move or duplicate one Heading, Image, Button or other individual element, you'll want to move or copy that Widget instead.
Managing & Designing a Column
Hover over a Column to reveal the Column controls.
From here, you can access the options for managing the Column Actions (Duplicating, Moving or Deleting), as well as open the Column Settings to customize that individual Column. (including the option to turn on Column Slider Mode). Click on the word "Column" to open Column Settings.
From here, you can access the options for managing the Column Actions (Duplicating, Moving or Deleting), as well as open the Column Settings to customize that individual Column. (including the option to turn on Column Slider Mode). Click on the word "Column" to open Column Settings.
Column Settings give you additional design control over the individual Column, including options for its background, spacing, borders, alignment and more.
Rather than cover every available setting here, we've put those together in a separate guide:
Rather than cover every available setting here, we've put those together in a separate guide:
→ Learn more: Column Settings & Designing Your Columns
WORKING WITH WIDGETS:
Widgets are the actual content elements that live inside your Columns - things like Headings, Text, Images, Buttons, Forms, Videos, Icons, Booking Calendars, Checkouts, Testimonials and more.
You can drag Widgets from the Widget Menu into a Column, move them between Columns, duplicate them, delete them and customize each Widget using its own settings.
You can drag Widgets from the Widget Menu into a Column, move them between Columns, duplicate them, delete them and customize each Widget using its own settings.
Remember: Blocks, Rows and Columns create the structure of your page. Widgets are the content that goes inside that structure.
→ Learn more: All About Widgets
ONE LAST DESIGN TIP:
ShinePages gives you a lot of flexibility to create and customize your own layouts - but you don't have to build everything from scratch. 😊
Our Website Templates, Page Templates and Block Templates have already been designed with balanced layouts, column widths, spacing and mobile responsiveness in mind.
Especially if you're newer to website design, we recommend starting with an existing layout and customizing the content, colors, fonts and images first. Then use the Block, Row and Column tools you've learned about here when you want to make more custom changes.
And remember: more design freedom doesn't always mean you need to use it. Sometimes the easiest way to get a beautiful new layout is simply to add a Block Template that's already designed the way you want.
Our Website Templates, Page Templates and Block Templates have already been designed with balanced layouts, column widths, spacing and mobile responsiveness in mind.
Especially if you're newer to website design, we recommend starting with an existing layout and customizing the content, colors, fonts and images first. Then use the Block, Row and Column tools you've learned about here when you want to make more custom changes.
And remember: more design freedom doesn't always mean you need to use it. Sometimes the easiest way to get a beautiful new layout is simply to add a Block Template that's already designed the way you want.
Want Even More Design Freedom?
For more advanced layouts, ShinePages also includes Free Move, which allows you to move individual Widgets outside of their normal position within the grid and create overlapping designs.
Free Move works a little differently from the standard Block → Row → Column → Widget structure covered in this article, so we recommend becoming comfortable with the basic grid first.
Free Move works a little differently from the standard Block → Row → Column → Widget structure covered in this article, so we recommend becoming comfortable with the basic grid first.