Baked into your Market With Me site is a pre-designed grid system which ensures a responsive design no matter the user’s device size. The system is built in a way that enables site elements to expand, contract, and rearrange themselves automatically as the viewport size changes.
But the responsive features don’t end there!
To give you even more control over page layouts, your site comes equipped with additional features. 4 of them are highlighted here.
SECTION WIDTH OPTIONS
First up is page width options. More times than not, the default settings for section widths will suit you just fine, but there may be situations where you’ll want to make an adjustment.
To do this, simply visit the administration panel for your section, where you will be able to toggle each section between “full width” and “boxed width”.
“Full width” allows the content and/or background to bleed from one site of the screen to another. Let’s just say, as an example, you want to create a distinct section of your page that has a different background color than the one above it. You may want to have the background color go from end to end.
“Boxed width” constrains all content within a section to a pre-defined width. Use this in those instances where you don’t want to allow your content to go from one end of your screen to the other.
COLUMN CONTROLS
Next up is column controls. Within each section of your page, you will be able to add as many columns as you desire.
By default, your site has common column layout options built in. Just select the one that matches your desired design and the columns will appear on the screen.
From here, you can manipulate the width of your columns with precision by dragging the edge of the column or inputting the desired column width.
Down the line, if you find that you no longer need a column, you can delete it. If you find that you need more columns , you can add them.
You can even nest columns inside of each other for more advanced layouts.
WHITE SPACE CONTROLS
Another aspect of the grid system is what I call white space controls.
White space is the space between text, images, graphics. It gives elements ‘air to breathe’ so that the user can focus on what is important. It also helps to make content more readable. Consider Apple landing pages. They may great use of white space to tell the story of their products features.
With the white space controls within your website, you will be able to control the height, width, padding, and margins of each section on your site.
You will also be able to adjust these attributes at the column level. This means that each you can change heights, widths, padding, and margins for each column on your page.
RESPONSIVE EDITING
A final grid system feature is one of my favorite: responsive editing.
Again, your Market With Me website is already mobile responsive. All text and images will adjust according to the users device size.
But your site also includes advanced responsive editing controls that enable you to tweak every attribute for specific devices-sizes and further fine tune the design.
For instance, you at desktop, tablet, and mobile breakpoints, you can:
- Show and hide at elements
- Change attributes like font sizes, padding, and margins
- Adjust column sizes
- Reverse the order in which columns stack
—-
So there you have it:
- Page Width Options
- Column Controls
- White Space Controls
- Responsive Editing
The Market With Me website has a responsive grid system that allows you to go beyond oversimplified and generic page design and create something truly unique.