Layout elements overview

The Layout tab in the Composer Element Library provides structure and arrangement for pages, including Column Layouts, Accordions, Tabs, Containers, and Personalization elements. This article lists every Layout element and what each is for.

đŸ’¡Quick answers

  • Which element adds columns to a section of a page? A Column Layout element from the Layout tab. Choose 2 Column, 2 Column Wide Left, 2 Column Wide Right, 3 Column, or 4 Column.
  • Showing or hiding content based on a click? Use an Accordion element for vertically-stacked panels that expand and collapse, or a Tabs element for horizontal tabs that switch content in the same space.
  • What is a Container element for? Holding other elements together so they can be moved, customized, or saved as a Shared element as a single unit. Container elements cannot be deleted by admin users; contact Finalsite Support if removal is needed.
  • Can different content be shown to different audiences? Yes. Use a Personalization element with one Personalization Panel per segment. Pair it with the Personalization options on the page to target each panel.
  • Switching between Accordion and Tabs format? Open the Panel Group element settings and choose the alternate format under Accordion OR Tabs Format. Switching does not lose panel content.

What are Elements?

Elements are the fundamental building blocks of your Composer pages. Learn more about how elements work in the article, "Understanding elements" and read about each of the 5 tabs in the element library: Standard, Module, Layout, Social, and Shared.

Layout elements are useful for providing layout and structure to your Composer pages. When working in collaboration with the Page layout and appearance menu, the possibilities are endless! The third tab of the Element Library is the Layout tab. Clicking on the name of each element in bullets below will take you to the article that explains more about how each one works.

layout elements .png

List of all Layout Elements

Here are all of the elements that live in the Layout tab of the Element Library

  • Column Layout elements: Column Layout elements give you more control over the layout and arrangement of elements on your pages. In addition to adding multiple columns to a page through the Page Layout and Appearance menu, you can add two, three, or four columns to any layout section. Here are the options for Column Layouts:
    • 2 Column Layout element
    • 2 Column Wide Left Layout element
    • 2 Column Wide Right Layout element 
    • 3 Column Layout element 
    • 4 Column Layout element 
  • Accordion element: The Accordion element lets you create a series of "panels" that can be hidden or shown by the end user and configured to display custom content to be expanded or collapsed as a way of targeting a specific block of content displaying in a particular panel. Learn more in the article, "Customize an Accordion or Tabs element." 
  • Container element: The Container element is used to hold other elements on the page. You can drop any other elements into a Container element to hold as many elements as needed. Container elements are unique in that they cannot be deleted from a Composer page without Finalsite Support's help! 
  • Personalization element: The Personalization element works together with the Personalization options for each page to target information on your site directly to the users who will be interested in it the most. Create segments for personalization so that you can then add Personalization elements onto different pages on your website to configure these pages to meet your needs.
  • Tabs element: A Tabs element allows you to easily organize a large amount of content on a single page by allowing different content to occupy the same space on a page. Learn more in the article, "Customize an Accordion or Tabs element." 
Was this article helpful?
1 out of 1 found this helpful

Comments

0 comments

Please Sign in to leave a comment if you don't see the comment box below.