Content Block Types

Add and arrange your unique content to Custom Pages using these 5 content blocks. Here are details on each.

 

5-Block-Icons.png

 

Banner Image

Banner Images are a great lead-off to any custom page. They're large and visually grab the viewer's attention.

Use them to promote key ministry opportunities, display your logo, or even as image-based menu items like the "Get Involved" page below.

 

Get-Involved-Custom-Page.PNG

 

Usage Steps:

  • To add an image, drag & drop your image to the Preview area or click Browse Files. (For image details, see Image Requirements).

    Banner-Image.png

  • Use the blue circle icon to crop your image if needed.

    Crop-Photo.png

  • Add text to your image using the Banner Text box and change the text color or darken your image using the provided controls.  

    Image-Text-Controls.png

  • If you'd like your image to extend the entire width of the screen, use the provided checkbox.

    Full-Width-Image-Checkbox.png

Image Requirements:

  • Images should be a minimum resolution of 1280 x 720 pixels (16:9 ratio).
  • Image size must not exceed 5MB.
  • File format should be jpg or png.

Pro-Tip: Need great ministry images? Check out Sharefaith Media. Keyword search over 100k church graphics, mini-movies, worship backgrounds, and more! 

Image & Text

Convey a brief message beside an attention-grabbing image!

Use this block as a landing page menu, list announcements or other 'like' things, or even create a simple staff directory. This is arguably our most versatile block type!

 

image-text-block-cropped.PNG

Usage Steps:

  • To add an image, drag & drop your image to the Preview area or click Browse Files. (For image details, see Image Requirements). Crop your image as needed.

    Image-Text-Add-Image.png

  • Choose between a square or circle display, then enter a brief Header, Sub-Header, and/or Text description. 

    Image-Text-Block-Controls.png

Note: You are not required to use all three text areas. However, you must use at least one.

 

Image Requirements:

  • Images should be a minimum resolution of 300 x 300 pixels (1:1 ratio).
  • Image size must not exceed 5MB.
  • File format should be jpg or png.

Text

A Text Block works like the Image & Text Block, just without an image. A great use case might be a simple news or announcement page.

 

Text-Block-Header-Size-Examples.PNG

 

Usage Steps:

Add the block to your custom page, then add text into the desired fields. Note that you can choose your header size using the provided controls (outlined in orange below).

 

Text-Block-Controls.png

 

Link/Button

A button is a great way to emphasize a tap interaction (a link). 

You can use them to highlight new items you've just added or note areas of particular importance.

 

Button-Example.png

 

Usage Steps:

The Link/Button block can be displayed as a text link or a button.

  • If you prefer the text link, note the left, center, or right alignment icons (below left).
  • If you prefer the button, switch the Use a Button Style Toggle to ON (below right).

    Button-Style-side-by-side-markup.png

Video

The video block can display a single video from either YouTube or Vimeo.

Use it for announcements, to welcome new visitors, or to highlight a sermon or other unique media resource.

 

Video-Block-Display.PNG

 

Usage Steps:

Copy the YouTube or Vimeo embed code and paste it into the Video Embed Link field. Next, select if you'd like your video preview to span the entire width of your page.

 

Video-Block-Controls.png

 

Note: You must use the YouTube or Vimeo embed code for a video to play. Below are examples of each.

Vimeo: <iframe src="https://player.vimeo.com/video/123456789?h=123456789" width="640" height="564" frameborder="0" allow="autoplay; fullscreen" allowfullscreen></iframe>

YouTube: <iframe width="560" height="315" src="https://www.youtube.com/embed/123456789?si=AbCdEFGhiJKlm" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>

 

 

 

 

Updated

Was this article helpful?

0 out of 0 found this helpful

Have more questions? Submit a request