Speed, structure, and design flexibility: Meet the new Pagecloud

We’ve been keeping busy at PageCloud, and we’re excited to bring you our best and biggest feature release to date.

We’ve created a collection of features that structure your content to have the ability to resize and reflow across different screen sizes. These features will accelerate your workflow by arranging your content so you can easily build high performing websites for both desktop and mobile viewing. 

This update is exactly what you need to take your designs to the next level, and we’re here to help you do the best work of your career! 

This article will cover each feature and give you some tips and tricks along the way: 

• A quick overview
• Sections 
• Working with Columns
• Manual Columns
• Auto Columns
• Full width vs. Page width 
• Understanding object widths 
• Mobile stacking 

A quick overview

We’ve combined the flexibility of free form editing with the structure and speed of responsive web design. This means you have the option to have full control over the placement and positioning of your content, and the option to have your content structured to be responsive. What could be better than that?

Each feature uses a combination of CSS grid and flexbox which position your content in a “responsive-like” grid. This layout model allows your content to align, evenly distribute space, and grow and shrink within its container. 

Building a responsive website is great for mobile accessibility, UX, and overall site performance. However, most platforms that offer fully responsive building give you less control over the placement of your content. So we took it upon ourselves to give you both maximum design control and the ability to have your content act responsive.

Before we dive into more specifics about each feature, let’s take a quick look at how all these features work together: 

Objects:

• Refers to your actual content (text boxes, graphics, images) that you will arrange within your Columns
• Can be set to Full width or Max width
• Can be grouped together 

Mobile Mode: 

• Mobile editing view
• Stacks your Columns  

Okay, now let’s have a closer look all these features and their function. Excited? We are too!  

Get to know the features

Sections

Sections are horizontal containers where you can organize your content to build your website’s pages. Consider Sections your page’s foundation, determining the length of your page, the background colors, how many Columns you wish to work with (minimum 1, maximum 3), and whether you will be working with Full width or Page width (discussed in detail below). 

With one click, you can add a new Section to your site to expand your page. You can choose to add a blank Section, or a predesigned Section as a starting point, and you can easily rearrange Sections in your tool bar. 

Section padding acts as page margins to frame your Columns and develop your layouts, as seen below: 

Sections can also be instantly duplicated. This is a valuable feature for designers because you can mock up several Sections to compare different design variations. You can also duplicate a Section and, for example, replace the photo, text, or background color to add new content quickly while staying consistent with your designs. 

Browse predesigned Sections

Section height

Sections can be set to either Auto height or Full height. Auto height adjusts the Section to fit the size of the content, meaning if the content in your Section is small, the Section will be small. This is a helpful feature to eliminate unnecessary space, and frame your content for a more balanced design. You can also set a Minimum height so your Section can’t shrink smaller than your specified size. 

Here you can see a Section set to Auto height, with a Minimum height of 429px:

Full height adjusts your Section to fit the height of the device on which it’s being viewed. Selecting Full height ensures the Section will occupy the entire screen until the user begins to scroll. This feature is best used for the Sections where you want to make the biggest statement, often including a background photo. 

Learn more about Sections 

Working with Columns

Columns! Columns are an exciting new addition to your Sections. Up to 3 Columns can be supported within a Section, and you can play around with the width of each Column in your Editing Menu. 

Here you can see 3 Columns of equal width, with 20px spacing between each: 

Columns can also be duplicated just like a Section to help you work faster, and you can add space (also known as a gutter) between each Column to customize your design. 

You can set your Column to either Manual or Auto Layout, which we will cover next.

Learn more about adding and adjusting Columns 

Manual Columns

Manual Columns mean you can position your content within the Column however you see fit.

Manual Columns give you the ultimate free form editing experience. Place your content wherever your heart desires: side by side, overlaying, overlapping, stacked, you name it. This WYSIWYG editing is a designer’s dream, allowing you to experiment and explore new designs. 

Auto Columns

We encourage you to make Auto Columns your new best friend. Auto Columns structure your objects using content alignment settings that guide how each object will be laid out. 

Here you can see our Auto Columns content alignment features in action: 

When adding content to your Auto Column, your objects will arrange themselves in a way that allows them to resize and reflow across different screens, including mobile (discussed more below). 

You can adjust the column padding, space below objects, and width settings of your content. These settings allow you to develop your layouts while maintaining responsiveness. 

Designer’s tip: The space below function is available in your Editing Menu, but you can also drag the arrow at the bottom of each object for a more visual approach to this feature, as seen below:

Auto Groups

A designer favourite, Auto Groups is a formatting dream come true. This feature uses flexbox layouts so when you group objects you can reposition and arrange your content all at once. 

This feature applies content alignment settings like top center or bottom left to all objects within the group, and can be applied both vertically and horizontally. Auto Groups ensure an even distribution of space between each object creating a well-balanced design. 

Now you can play around with the positioning of all the objects within the group at one time. This tool ensures your content remains perfectly aligned, and speeds up your workflow by moving all objects at once. 

Learn more about Auto Groups 

Full width vs. Page width

You can set your Section to either Page width or Full width. Page width sets a screen size (default 1080px, but can be changed in Page Properties) for your website, which allows you to use free form editing.  

Full width view allows your Columns and content to adjust to fit the width of any web browser. We encourage you to explore Full width view since most web designers agree that having a website that fills the screen on a larger monitor makes more of a statement.

Note: Your Section can only be set to Full width if all your Columns within it are set to Auto.

Understanding object widths

When organizing your content within Auto Columns, you can set your object to have a Maximum width or be set to Full width.

Setting an object to Full width would allow it to grow and shrink as you resize your browser window. Choosing Full width ensures that no matter someone’s monitor size, your content will grow to fit the screen. Our designers at PageCloud all agree that setting objects, Columns, and Sections to Full width creates a better user experience.

Max width (only available in Auto Columns) allows you to determine a stopping point for how large an object can grow when enlarging your screen size. Setting a Max width ensures that even if your Section and Column are set to Full width, the specific object won’t expand larger than your set size, giving you further control over your content and layouts.

Here you can see a Max width set for a text box:

Mobile Stacking

Our editor allows you to easily switch from the desktop to mobile view of your site. Having a site that functions properly on a mobile screen is a crucial part of web design. Using Auto Columns is the easiest way to ensure a mobile functional website without having to do twice the work. 

As stated above, Auto Columns structures your content so it automatically transitions to a mobile screen. The Columns will stack on top of each, and the content within the columns will restructure within the mobile view. You can always adjust padding, height, and space below objects while in your mobile editor for further design control. 

Here are your Auto Columns in desktop (left) vs. mobile (right) view: 

Manual Columns will also stack, but you will have to spend some time in your mobile editor to reformat your content to fit the mobile display. You will have the same free form editing design control in your mobile editor.  

Note: The mobile editor will inherit style choices you made in the desktop editor. Once you’ve made an edit in the mobile editor, that edit will override (as in, won’t be affected by) any changes made in the desktop view.

Learn more about working in our mobile editor 

The best tools for the job

We are always working to improve and evolve our editor to best fit your growing design needs. We’re confident these features will help you accomplish more with web design from getting the job done faster, to making more of a statement with your designs. 

Visit PageCloud.com to learn more about our platform, or start your free trial.

Follow our blog for future updates and details surrounding these exciting new features, and make sure to leave us a comment with any questions you might have.