Page Blocks

Introduction to Blocks

Building a modern, responsive website on ShoutCMS is done through the use of Blocks. Across each of your pages, you'll likely use at least a few Blocks per page, which are designed to make it easier for you to manage your website.

Blocks Benefits

With Blocks, you can easily plan out your website & new pages, determining what type of content you need - and then adding the necessary Blocks to your page(s).

1. Different types of Blocks for different types of content
2. Can be easily customized and adjusted
3. Click and drag to quickly reorder your page content

For Developers

Blocks represent an incredible time saver for you. Due to their easy customization, you can save large amounts of time and effort by creating unique Block classes that can be applied & modified across your ShoutCMS website.

1. Use the Inspect tool to help style your Blocks
2. Create and apply Block classes to each individual Block
3. Add additional CSS or JS to each Block if needed

Different Block Types

To compensate for the incredible variety of site content you might need to feature, we've designed and created lots of different Blocks for you to use across your ShoutCMS website.

Each Block is designed to be used alongside certain types of content, but we encourage you to experiment and get creative with how you use Blocks.

Skip ahead to using Blocks

Editor Block

This will likely be your most used Block on your ShoutCMS website. The Editor Block is used for adding image, text, and video content to your website.

1. Drag and drop templates
2. Visual page building & designing
3. Source code view for advanced users
   

Related Content & Categories Blocks

Quickly append links to the other pages, articles, and products on your ShoutCMS website. These Blocks allow you to easily and consistently add secondary navigation across your site.

1. Related content for specific pages
2. Related category for areas on your website
3. Pick and adjust the layout with just a few clicks

Form Block

Make it easier than ever to collect information your users want to share with you. Use the Form Block to append a form you've created to a page, article, or product.

1. Add forms you've created previously
2. Easily add surveys and signup forms to your site
3. Changes to your forms automatically apply to your Form Blocks

Gallery Block

Need to showcase high quality imagery of your services, products, or even deals? The Gallery Block lets you add different types of galleries to your pages - with customizable layouts.

1. Showcase your imagery easily
2. Add banners with links to specific pages
3. Quickly change between layouts

Files Block

Want to allow your site visitors to access downloadable files? Use the Files Block to quickly append downloadable files on your pages.

1. Upload useful documents for your users
2. Use the Files Block for product documentation
3. Append manual application forms

User Block

Feature a contact in your ShoutCMS site on your page. The User Block lets you append a contact's information directly to a page.

1. Make it easier for visitors to connect with your team
2. Contact updates automatically apply to your User Blocks
3. Further customize your intranet with staff users

Form Submissions Block

Showcase form submissions on a page for reviewing or sharing purposes. The Form Submissions Block lets you append and display form submissions on a page.

1. Add front-end form submissions to your intranet area
2. Get access to submissions without needing to log in
3. Adjust the visibility to Admins if necessary

Tags Block

Feature the back-end tags on a page, product, or article to the front-end of the page. Use the Tags Block to quickly append tag links for your users to engage with.

1. Make it easy for users to find similar content
2. Make your categorization visible for users
3. Adjustments to tags automatically update your Tags Blocks

Expandables Block

Got a lot to say? The Expandables Block lets you add an accordion or set of tabs for users to engage with, allowing you to display large amounts of information more efficiently.

1. Showcase product information
2. Keep your pages looking tidy
3. Use embedded Editor Blocks to customize your expandables content

Calendar Block

Are events and dates an important piece of information for your website? The Calendar Block allows you to embed a fully functional calendar right onto your pages for users to engage with.

1. Showcase upcoming events
2. Feature important dates for users
3. Quickly update & adjust your calendar contents

Building with Blocks

To ensure you're making the most out of your time and energy, we encourage you to read through the following methods of using Blocks - helping you build with Blocks more efficiently.

1. The Create and Clone Method (Easy)

This approach involves creating and refining a page, article, and product - then using it as a page template. With your template, you can hide the page by adjusting the visibility and SEO settings - cloning it whenever you need to create a similar page.

Because cloning also includes cloning the Blocks on your page, you can easily save yourself time and energy that would've been spent on recreating each Block.

1. Cloning copies over your Blocks to the new page
2. Can create custom page templates across your site
3. Easy to keep pages consistent

2. The Custom Journeys Method (Intermediate)

This approach uses the visibility and access settings on a Block to show and hide Blocks depending on which user is logged in. You can have upwards of 2x to 3x to even 10x the number of Blocks you'd usually have, with each additional Block offering a unique experience to your users.

Although it doesn't take too long to modify the visibility settings, you'll need to carefully plan out all of your user journeys to get the most out of this method.

1. Adjust visibility and access by group for different Blocks
2. Offer unique deals and promotions to different groups
3. Rewards planning and time investment

3. The Custom Classes Method (Advanced)

If you have front-end development experience, or even just experience with HTML and CSS, you'll likely want to use it with Blocks.

This approach involves creating custom classes in your Override CSS area of ShoutCMS, using and modifying Block-specific classes across your website. With this method, you can more easily modify entire areas of your site, by adjusting the class(es) your different Blocks are using.

1. Use CSS to create custom Block classes
2. Quickly modify entire areas of your website
3. Save large amounts of time

Summary

There's a lot of different ways you can approach using Blocks on your ShoutCMS website. Depending on your knowledge and comfort level, you can use them as simply or as complex as you'd like.

We've designed Blocks to give you ample room to experiment with, and to offer an incredible level of depth that you can take advantage of.

Adjusting Block Settings

While working on a Block in the back-end of ShoutCMS, you'll likely notice some icons appear on the right side. These are your Block controls, one of which is your Block Settings.

With each Block, you can adjust them to create more unique and rewarding experiences for your users:

1. Block contents
2. Visibility and access settings
3. Background colours and imagery
4. Spacing between Blocks
   
5. Custom classes, CSS, and JS

To modify the settings of your Block, simply open up the settings popup for the Block using the Block controls. Navigate to the area you'd like to adjust, and change the values as necessary.

If you ever happen to notice a Block appearing or functioning oddly, make sure you check the Block settings of that Block to see if anything incorrect has been applied.