Paragraph Types

Here’s how an accordion can benefit your website:

• Provide a dynamic and intuitive layout that effectively utilizes screen space, creating an engaging and organized user experience.   

• Your audiences can swiftly access the specific information they are seeking. This saves time and enhances user satisfaction.

• Offer a clever solution for presenting content collections without overwhelming site visitors. By striking a balance between comprehensive information and avoiding information overload, you ensure a seamless browsing experience. 
   

Create captivating and organized web layouts with Section (Configurable Column Layout). It’s like adjustable display wall panels in a museum or gallery, dividing your webpage into visually appealing sections. You can place different content elements, like multiple columns of cards, for effective organization.
 

Features:

• Visual Impact: Create layouts that have a strong visual impact, strategically positioning text and images for an engaging reading experience.

• Flexible Design: Easily organize content without complex coding.

• Multiple Column Layouts (1 to 4): Design pages with multiple columns like two columns side by side or three columns.

• “Nested” Paragraph Types: Each column choice comes with a set of “Nested” Paragraph Types, allowing you to include elements like cards with optional images, content/embeds, image embeds, image lightboxes, video lightboxes, and WYSIWYG.

• Background Color: Customize your section’s appearance with nine color options in the "Behavior" tab, making it stand out and complement the rest of the page.

• Responsive Design: Layout adapts to different devices for optimal readability.  
   

See Section (Config Col Layout)

WYSIWYG (What You See Is What You Get) is a user-friendly tool for content editing. It’s the most flexible tool you have with a variety of typography, image, and link styles. With options like the "Paragraph" and "Style" menus, you can easily display your text. It allows you to add links (styled as buttons or action links), un/ordered lists, quotes, horizontal lines, images, and videos. Alternatively, it can be used for straightforward News Articles with just a paragraph of text.  

Note: Improve visitor experience by adding image information in the "Caption" field. For best practice include credit in italics, e.g., (FirstName LastName/SLAC National Accelerator Laboratory). This enriches the content and provides attribution. As a result, an "i" icon appears at the image’s corner, revealing the caption when clicked.
 

See Image Overlay

The PROMO Box is like an attention-grabbing banner strategically placed in a museum, guiding visitors to discover and explore additional sections of your website. It is an innovative approach to showcasing multiple links—traditionally referred to as quick links—making it effortless for visitors to navigate to areas you want to promote. With interactive design in mind for engagement, the PROMO Box seamlessly integrates with your page layout. Simply click the "Behavior" tab > Transition style > slide in effect to make the PROMO Box gracefully appear from the left side of the page.    
 

Note: The advantage of the PROMO Box Paragraph Type is its positioning outside of a section rather than as a side panel. This strategic placement grants it greater prominence without constraining the width of the rest of the content within the page layout. As a result, the PROMO Box stands out and captures attention while allowing the remaining content to maintain its full width and visual impact.   

See PROMO Box example

Cards provide advantages by simplifying information scanning and encouraging interaction. Maximize user engagement and elevate the user experience by following these essential tips when creating your cards.

• Overview & Gateway: Cards give a brief glimpse of content and act as an entry point linking to more details.

• Details & Legibility: Keep cards simple, concise, and informative enough to encourage click-throughs.

• Versatile and Eye-Catching: Cards exhibit vibrant visuals and serve a multitude of purposes. They effortlessly adapt to all screen sizes while allowing for seamless stacking.

• Image or Icon: Utilize unique images/icons to aid quick page scanning and recognition.

• Consistent Cards: Avoid mixing different card types (e.g., display Card with Icon or Card with Image).

• Card Height: Align and balance cards in rows, controlling word and line counts for a clean appearance.   

See Card with Image  

See Card with Show More  

See Card display style  

See Card with Links  

See 4 Sm Card with Opt Image  

See 4 Card with Icon  

Tables can be powerful communication tools, capable of conveying a substantial amount of information quickly and efficiently. They have several advantages: 

• Make complex material easier to understand. 

• Help organize large amounts of data in a structured manner. 

• Enable readers to quickly find specific information. 

• Improve the reading experience by making it easier for readers to compare information. 

Note: Similar to WYSIWYG, Table PT provides a range of user-friendly content editing tools for you to explore. 
[A] Click "Insert table" and drag the cursor over outlined dots to select desired rows and columns.
[B] Click "Row" to activate the toggle button and make the "Header row" distinct. 
[C] To add a table caption, click "Toggle caption on". 
[D] To add a link, click the "Link" icon.