Google Sites Columns and Content Blocks
Learning Objectives
- Understand how columns and content blocks work in Google Sites
- Learn to organise webpage content using column layouts
- Master customisation techniques for content blocks
- Ensure your content displays properly on all devices
Introduction
This chapter covers the fundamentals of organising web pages using columns and content blocks in Google Sites. These tools help you create clean, professional layouts that work well on any device. You'll learn practical techniques for structuring content that's both visually appealing and easy to navigate.
Lessons
Lesson 1: Working with Columns
Columns help you organise content in a structured, readable way. Google Sites makes it simple to add and arrange columns without any coding knowledge.
Step 1: Select the page where you want to add columns
Step 2: Click the "Insert" panel on the right side of your screen
Step 3: Choose from the available column layout options (1, 2, 3, or 4 columns)
Step 4: Drag your chosen layout onto the page
Step 5: Add content by dragging elements into each column
This is the bit most people miss: Column layouts automatically adjust based on screen size, but you should still check how your content flows between columns on different devices.
Lesson 2: Adding and Customising Content Blocks
Content blocks are the building blocks of your pages. Each block can hold different types of content and can be customised to match your design needs.
Step 1: Click "Insert" and select your content type (text, image, embed, etc.)
Step 2: Drag the content block into your chosen column
Step 3: Click on the block to add your content
Step 4: Use the formatting toolbar to adjust styling options
Step 5: Resize blocks by dragging the corners or edges
Available content block types:
- Text boxes for written content
- Image blocks for photos and graphics
- Embed blocks for videos and external content
- Button blocks for calls-to-action
- Divider blocks for visual separation
Lesson 3: Making Your Layout Responsive
Google Sites automatically adapts your layout for different screen sizes, but you can optimise this behaviour for better results.
Step 1: Design your page using the desktop view
Step 2: Click the preview icon in the top right corner
Step 3: Switch between desktop, tablet, and mobile views
Step 4: Check that text remains readable and images display properly
Step 5: Adjust content sizing if needed for better mobile display
Here's the quick version: On mobile devices, multi-column layouts automatically stack vertically. Plan your content order accordingly so it makes sense when stacked.
Practice
Create a practice page with the following elements:
- A two-column layout in the main content area
- Text content in the left column
- An image in the right column
- A full-width text block below the columns
Preview your page on desktop, tablet, and mobile views to see how the layout adapts. Pay attention to how the columns stack on smaller screens.
FAQs
Can I adjust the width of individual columns?
No, Google Sites uses preset column widths that distribute space evenly. You cannot manually adjust column widths, but you can choose different column layouts to change the overall structure.
What happens to my columns on mobile devices?
Columns automatically stack vertically on mobile devices. The content flows from top to bottom in the order you placed it, so arrange your content with this in mind.
Can I nest columns inside other columns?
Google Sites does not support nested columns. You're limited to one level of column division per section, which keeps layouts simple but may limit complex designs.
How many content blocks can I add to a single page?
There's no specific limit to the number of content blocks you can add, but pages with too many elements may load slowly and become difficult to navigate.
Jargon Buster
Columns: Vertical sections that divide your page layout, allowing you to place content side by side rather than stacked vertically.
Content Blocks: Individual elements that hold different types of content like text, images, or videos. Each block can be moved and customised independently.
Responsive Design: A design approach that ensures your website looks good and functions properly on all device sizes, from desktop computers to mobile phones.
Layout: The arrangement of visual elements on your page, including how columns and content blocks are positioned relative to each other.
Wrap-up
You now know how to use columns and content blocks to create organised, professional-looking pages in Google Sites. Start with simple two-column layouts and gradually experiment with more complex arrangements as you become comfortable with the tools.
Remember to always check your mobile view while designing, as this is how most visitors will see your site. Focus on creating content that flows logically when columns stack vertically on smaller screens.
Your next step is to practice these techniques on a real page. Try different column combinations and content block types to see what works best for your specific needs.