Get to know Pagecloud's Columns

Finding a website builder that fits all your web design needs can be tricky. You will come across platforms that offer different freedoms and limitations in design flexibility, mobile compatibility, and building experience. For example: platforms that offer responsive website building will most likely have major design restrictions. 

But you’re in luck! PageCloud recently introduced Columns, bringing you the structure of responsive website building and the flexibility of freeform editing. Now you can have all your design needs met on one platform! 

What are Columns?

Columns will help you create high performing, beautiful websites without the hassle of involving a developer or the struggle of learning how to code. 

We created Columns so you can choose to have total design flexibility, or the structure of responsive web design. Columns are containers within your Sections where you can add and arrange your content. Flexbox technology and CSS grids give Columns the ability to arrange, align, and structure your content to resize and reflow across different screens. 

Columns make designing a mobile website easier than ever. Your Columns will automatically reformat into a mobile view, and you can rearrange and edit your content in your mobile editor (discussed more below).

Column basics 

You can add up to 3 Columns (minimum 1) in your Section, and you can easily adjust the width and spacing between each Column in your Editing Menu. 

Learn more about working with Sections

Here are four examples of Columns including a Section with 1 Column (top, left), a Section with 3 Columns of equal widths (top, right), a Section with 2 Columns of equal widths (bottom, left), and a Section with 2 Columns adjusted to have different widths (bottom, right):

Each of your Columns can support a background color or image. You can also apply extra design elements like rounded corners and drop shadow effects. 

Columns offer two types of layouts: Manual and Auto. These layouts have different building experiences and design benefits, which we will explore below.

Manual Columns 

Use Manual Columns for the ultimate visual editing experience. Content can be overlaid, overlapped, stacked, and placed however you see fit. This includes text, images, videos, buttons, icons, etc. 

Here are a few examples of the stunning layouts and object arrangements you can achieve using our Manual layouts: 

You can use these templates on your website, or choose from our template browser. Top left: Oslo, top right: Ivory, bottom left: Northern, bottom right: Nuvo

Use the alignment buttons in your Editing Menu for further design control. Objects in your Column can be positioned in the centre, top, bottom, left, or right, for precision placement.

If you like having maximum design freedom, Manual layouts are perfect for you. Simple, flexible, and precise: PageCloud’s visual editing is second to none. 

Auto Columns

We encourage the use of Auto Columns as this feature will speed up your workflow by organizing your content for you, and helping you create beautiful websites that resize to fit different screens. 

Auto layouts are more structured than Manual layouts, meaning your content will be organized inside your Column in a way that allows it to act responsive. 

Before we dive into the features of Auto Columns, here are a few examples of website layouts that have been created using Auto Columns: 

You can use these templates on your website, or choose from our template browser. Top left: Koda, top right: Haus, bottom left: Vigneto, bottom right: Business (This predesigned Section is available in app! Find it in our Business Collection)

Now let’s take a look at some of the features available in Auto Columns that help you develop your layouts and arrange your content while maintaining responsiveness. 

Content alignment 

Using alignment controls in your Editing Menu, you can quickly change the alignment of all content in your Column. With one click, all your content will align to the left, right, top, centre, or bottom or your Column, saving you the hassle of moving each object individually. 

Here we can see content aligned to bottom left, centre, and right of each Column: 

This feature allows you to quickly change the layout of your content in your Column while maintaining its ability to act responsive, and its ability automatically reflow into a mobile view.

Content arrangement 

When you add a new object (text box, image, etc.) to your Column, it will organize and align itself with the other objects in the Column. This feature ensures your objects are perfectly aligned so you don’t have to worry about individual positioning. 

The above Gif shows how you can drag your object to your preferred positioning, or easily rearrange your objects using controls in your Editing Menu.  You can move an object up or down, or have it jump to the top or bottom of a group of objects. Either way, your object will always remain in line with the other content in your Column. 

Designer’s tip: You can use our Auto Groups function to select multiple objects such as icons, buttons, or text boxes, to apply vertical or horizontal orientation, and equal spacing between all objects as seen below:

Learn more about grouping objects

Padding 

Think of Padding as your Column’s margins. Setting Padding creates a border for your content and will help emphasize your Column\'s background color or image. You can adjust the size of your Padding in your Editing Menu using a sliding scale or entering the value directly. 

This GIF demonstrates how adjusting your Padding will shift all your content at once. Padding is a helpful tool in creating a well balanced design that makes use of space. 

Spacing 

The Space Below function is a helpful feature in creating consistent space between the objects arranged in your Column. Spacing can help create visually pleasing, balanced designs. You can input a specific amount of space in your editing menu, or drag the arrow below an object for a more visual approach to this feature, as shown below:

Columns and mobile editing

Working with Columns becomes especially helpful when creating a mobile website. Having a site that functions properly on a mobile screen is a crucial part of web design, and we made this process easier than ever! 

Your Columns will automatically stack to create a mobile layout, and you can adjust the content within the mobile editor.

Note: Moving an object from one Column to another while in your mobile editor will change your desktop view. 

Manual Columns you will allow you to maintain freeform editing in your mobile editor. You will have the same WYSIWYG editing freedom you experienced in your desktop view. 

Columns set to Auto will automatically reorganize your content to fit your mobile view, saving you from having to do the work twice. 

Here we can see Auto Column reflow into a mobile layout: 

On the left we have Columns in desktop view, and the right we can see how to Columns stack to create a mobile layout. Simple and efficient!

Design more with Columns

We created Columns to help you design faster, easily create mobile websites, and have the ability to choose how you want to build your website. Do more with design, and take your websites to the next level using PageCloud. 

Start your free trial today and get to know how Columns can help you do more as a web designer. 

Check out our blog for more articles on designing websites on PageCloud, and essential tips and tricks for web designers everywhere.