1. Tutorials
  2. Paragraph Options Layouts
  3. Circle Column Icon

Circle Column Icon

View the example page to see this paragraph in action.

Circle Column Icon example

Guidelines for using this paragraph

  1. This block is always used at 100% width of the page container (not the browser window).
  2. Avoid placing more than 2 of these blocks on top of each other.
  3. All column content in this block is center aligned.
  4. It is recommended for descriptions more than 300 characters to be left aligned instead of center justified.

  1. The best way to prepare content is to write great titles, description and Calls to Action for your text links.
  2. Have the same fields filled for each section to maintain visual balance, however not all fields must be filled in.

The only visible change that happens is that each section will stack and each column will be the full width of the device viewport.

How to use this paragraph

  1. Create a Basic Page.
  2. Scroll down to the Paragraphs section, click the drop-down arrow, and click "Add Circle Column Icon Container".
    Selecting Circle Column Icon Menu Item
  3. Proceed to the Overview of a Circle Column Icon Container section of this guide below.
  4. Once you've added up to 4 icons, choose your publishing options and click "Save" at the bottom of the page.

Overview of a Circle Column Icon Container

Overview of Circle Column Icon Paragraph

  1. Click and drag the crosshairs handle to rearrange your paragraphs.
  2. Remove the Circle Column Icon paragraph.
  3. (Optional) Title - this is the title for the Circle Column Icon paragraph. It appears above the icons.
  4. Grey Background Toggle - if this option is unchecked, the divider will appear on a white background. If it is checked, it will appear with a grey background. Only use the grey background if you are adding a divider between two paragraphs that also use a grey background.
  5. (Optional) Body - this is the body for the Circle Column Icon paragraph. It appears above the icons.
  6. (Optional) Anchor ID - add a unique ID if you'd like to link to this specific section of the paragraph from another location.
  7. Click and drag the crosshairs to rearrange your icons within the Circle Column Icon paragraph.
  8. Remove the Circle Column Icon.
  9. Font Awesome icon - begin typing a descriptive word (e.g. "book") to autofill different Font Awesome icons. Click to select the icon that works for you. 
  10. Column title - this title appears below the Font Awesome icon.
  11. (Optional) Column body - this content appears below the Font Awesome icon.
  12. (Optional) URL - this link appears below the Font Awesome icon. If you will be uploading a file, enter <nolink> in this field - it will be overridden when you select your file in the File Override field.
  13. (Optional) Link text - this is the text for the link that appears below the Font Awesome icon.
  14. (Optional) File Override - add a file if you would like the link set to link to a file instead of a URL
    • You can either upload a file directory to the page, or open the file browser to upload the file to the site's central file repository. It is recommended that you open the file browser to upload, so that you can reuse the image in the future.
    • If you are opting to use the File Override, you'll still need to fill in the URL field - we recommend adding <nolink> 
  15. (Optional) Anchor ID - add a unique ID if you like to link to this specific column of the paragraph from another location.
  16. Add Circle Column Icon - this adds another Circle Column Icon. There are no limits on the number of circle column icons you can add. Containers will automatically stack in rows of up to 4 containers per row.