Skip to main content
Overview of Blocks

Blocks make up the content that users interact with on your website. These can be anything from Text blocks to 3rd party code embeds.

Tanner Ramey avatar
Written by Tanner Ramey
Updated over 9 months ago

Adding a Block

To add a block to the page, click the Blocks icon, and simply drag and drop the desired block onto the page. Once a block has been added to the page, you can get to work customizing it.

image.png


To view the options available, hover over the block itself and you'll see the Block Menu pop up in the upper right-hand corner.

Screen Shot 2022-05-15 at 3.37.34 PM.png

Block Menu

A Block’s menu is on the top of each Block and includes four different options: Edit Block, Block Options, Duplicate Block, and Delete Block. Each of these will allow you to customize your Blocks in different ways.

  • Edit Block: This provides you with more customizable features! Options available vary depending on the type of block you are editing. For example, an 'Image' block will provide additional options specific to images (resizing the photo, aligning the image, etc.). Editing a 'Text' block will provide options for customizing the characteristics of the text (bold, italic, etc.)

  • Block Options: Change the color scheme, align the content, set a max-width for the block, and hide the block from the different versions of the page (tablet, phone, or desktop)

  • Duplicate Block: This option allows you to quickly duplicate any existing Block!

  • Delete Block: To delete a block, all you have to do is click on this option.

While most of the blocks are pretty self-explanatory, some of them may be confusing. If you have any questions about specific blocks or the additional options provided, please let our support team know - we're happy to help!

Block Options

In the Block Options, you have a lot of control over how your Block is going to look on your site. This is where you can modify features such as the color scheme, orientation, layout, and much more. To access the Block Options, just hover over a block and you will see the following image pop up at the top right of the block. Select the second option.

image.png


You will then see the following menu appear:

image.png


Color Scheme

Choose from any of your existing Color Schemes (managed in the Theme editor under "Colors") to adjust the color of the various parts of your Block. All you have to do is simply select the one you want from the dropdown and you'll be all set!

image.png

Align Content

Every Block has the option to align the content to the Left, Center, or Right, relative to the space available to it on the page.

Limit Width

The easiest way to set the size of your blocks is simply to set a limit to the Block width. All you have to do is turn on Limit Width then you can toggle its width up and down with ease.

Hide From

With these settings, you can choose to hide a Block from a specific device. All you have to do is select the device type, tablet for example, and just like that it will be hidden.

Padding

Padding allows you to generate blank space between your Block's horizontal and vertical borders and the content inside it. You can do this simply by toggling the padding slides up and down.

Rotate

Every Block can be rotated on its X, Y, and Z axis' to any degree of your choosing.

Animate In

The Animate option is a great way to add some fun transitions to your site! Simply choose one of the many transition options and then anytime you scroll into a view of the Block it will animate in.

image.png

Subsplash Blocks


From the blocks menu, locate the Subsplash blocks you'd like to add, click, and drag the block to the desired position on your page.

Media Item (3 available options)

Dynamic "Most recent" Media item.

Display a Specific Single Media item

Display Dynamic upcoming Livestream

(Once you add a block you'll be able to choose between these three options.)

(Preview of the upcoming Livestream option)

Media Library (4 available options)

image.png

Display a specific Media Series

Display your whole Media Library

Display a specific list as well. (If some lists are missing, please ensure all your list have all the necessary artwork applied to them.)

Display your most recent media item.

Giving (Giving only)

This block will allow you to easily bring in your giving module to any page on your website.

App Promo (If your Standalone app is live)

  • This block contains a download link to your app!

Events

Choose a specific calendar to display on your page.

This will only show events created within the Subsplash Dashboard. (iCal feeds will not display)

Did this answer your question?