Modules
Modules are the building blocks of pages and are used to display information in visually engaging ways. These elements are available through the Divi Builder, which is used for creating pages.
Modules can be styled in various ways to match your page tone and make content visually distinct.
Purpose of This Page
This page showcases all available modules in the Divi Builder. Each example demonstrates how the module can be used and provides guidance on how best to incorporate it into your site, including detailed usage instructions and styling tips.
How to Use This Page
Use this page as a reference when selecting modules for your site. Each module is demonstrated in context with configuration tips and styling options.
Available Modules
The following modules are available for use when building a webpage:
Accordion
Expandable sections that organize content into collapsible panels. Ideal for FAQs or layered information where space-saving is important.
What is an Accordion and why use one?
Organizing Content Visually
Accordions allow large amounts of related content to be grouped into expandable sections. This helps users quickly locate what they need without scrolling through everything.
Use Cases
They’re great for FAQs, resource lists, definitions, or other helpful but not essential content that cannot be displayed all at once.
When is an Accordion most effective?
Ideal Scenarios
Use accordions when your content:
- Is thematically grouped
- Doesn’t need to be consumed in a fixed order
- Works well when hidden or revealed interactively
Avoid These Situations
- When every user must see all the content
- For storytelling or tutorials that depend on linear reading
- When the page is already highly interactive (to avoid overload)
Benefits of Accordions for user experience
Enhancing Readability
By reducing visual clutter, accordions help users stay focused. Content becomes easier to scan and less overwhelming.
Mobile-Friendly Format
Accordions condense space, making them ideal for mobile screens with limited vertical real estate.
Encouraging Engagement
Users are more likely to click into content that feels optional and well-organized.
Tips for writing effective Accordion headings
Be Clear and Descriptive
Use titles that clearly indicate the content inside. Good examples:
- “Key Features”
- “Step-by-Step Overview”
Remember – Keep It Consistent
Whether you’re using sentence case or title case, maintain the same style throughout all headings for a clean, professional look.
Best practices for Accordion content
Prioritize Clarity
Break content into short paragraphs or bullet points. Users should be able to get the point at a glance.
Avoid Content Overload
If the content is too long, consider linking to a full page or providing a short summary in the accordion with a “read more” link.
Remember – Stay Organized
Limit each accordion item to one clear idea or theme to avoid confusing users.
Design and accessibility considerations
The accordion should respond visibly to interaction with +/—icons, indicating expanded or collapsed states.
Keyboard and Screen Reader Support
Accordions should be fully navigable via keyboard and accessible to screen readers. Use semantic HTML elements and ARIA attributes as needed.
Consistency Across Pages
Use a consistent accordion style throughout the site so users know what to expect.
Audio
Embeds audio files directly into your page. Great for podcasts, interviews, music samples, or audio guides.
Fall Orientation 2024
Bar Counters
Displays progress bars to visually represent data or achievements. Commonly used for skill levels, project completion, or statistics.
- Jobs Filled 80%
- Internships Filled 65%
Blog
Automatically pulls and displays recent posts from your site. Useful for creating dynamic news sections, updates, or article feeds.
News Headline
Extra Extra, read all about it!
Blurb
Combines an icon or image with a heading and short description. Perfect for highlighting services, features, or key contacts in a visually engaging way.
Undergraduate Opportunities
Explore hands-on research projects across disciplines. Gain experience, work with faculty mentors, and present your findings at conferences.
Call to Action
A focused content block with a headline, description, and button. Best used to drive user engagement for events, signups, or featured content that require an action.
Ready to Join a Student Organization?
At App State, there are numerous student groups for all interest types. Get involved today, make lifelong connections, and build career skills by participating in a student club or organization.
Circle Counter
Displays numerical data in a circular format. Great for showcasing stats, milestones, or performance metrics in a compact visual.
%
Success Rate
Code
Allows you to insert custom HTML, CSS, or JavaScript. Useful for advanced users who need to embed third-party widgets or custom functionality, like an interactive map.
Countdown Timer
Creates a live countdown to a specific date/time. Effective for promoting upcoming events, launches, or deadlines.
Spring 2026 Commencement
Day(s)
:
Hour(s)
:
Minute(s)
:
Second(s)
Divider
Adds horizontal lines or spacing between sections. Helps visually separate content and improve page flow.
Gallery
Displays multiple images in a grid or slider format. Ideal for showcasing photo collections, event highlights, or visual portfolios.
campus
appstate-site-image
students-online-900
campus-life-fall-portrait-2×3
Icon
Inserts scalable vector icons with customizable colors and sizes. Useful for visual cues, feature highlights, or navigation aids.
Image
Adds a single image with options for alignment, borders, and effects. Commonly used for inline images or visual accents.
Number Counter
Animates numbers to count up to a target value. Great for displaying statistics, achievements, or impact metrics.
Students Attended
Person
Showcases individual profiles with name, title, photo, and bio. Ideal for small faculty/staff directories, team listings, or speaker profiles.
John Smith
Assistant Director
John has led Appalachian State University’s initiatives for over a decade. His work focuses on providing the best student opportunities that allow students to grow and develop their career readiness skills. He collaborates with local organizations to provide students with career opportunities after they graduate from Appalachian State University.
Post Slider
Displays posts in a rotating slider format. Useful for highlighting featured articles, announcements, or blog entries.
Post Title
Displays the title of the current post or page dynamically. Often used in custom templates or blog layouts.
Modules
Pricing Tables
Creates comparison tables for pricing plans or service tiers. Useful for product pages, membership options, or course offerings.
Students
Undergraduate and graduate- This feature is included
- This feature is included
- This feature is included
- This feature is included
- This feature is not included
- This feature is not included
Faculty/Staff
App State employees- This feature is included
- This feature is included
- This feature is included
- This feature is included
- This feature is not included
- This feature is not included
General Public
Outside of App State- This feature is included
- This feature is included
- This feature is included
- This feature is included
- This feature is not included
- This feature is not included
Slider
Rotates through multiple content slides with text, images, and buttons. Great for featured content, announcements, or storytelling.
Tabs
Organizes content into tabbed sections for easy navigation. Ideal for program details, service breakdowns, or multi-step guides.
Appalachian State offers many undergraduate and graduate programs across variety of fields, including business, education, health sciences, and the arts. Our faculty are dedicated to providing hands-on learning experiences, research opportunities, and mentorship to prepare students for successful careers. Explore our academic resources, advising services, and study abroad programs to enrich your education.
Life at App State is vibrant and engaging, with hundreds of student organizations, leadership programs, and cultural events throughout the year. From residence halls to campus dining, we provide a supportive environment where students can thrive. Discover opportunities for community service, wellness programs, and social activities that make campus life unforgettable.
Cheer on the Mountaineers in sports! Our athletic programs include football, basketball, soccer, and more, with state-of-the-art facilities for athletes and fans alike. Whether you’re competing or supporting from the stands, athletics at App State foster school spirit and teamwork. Learn more about schedules, tickets, and how to get involved.
Testimonial
Displays quotes or endorsements from students, faculty, staff, or other stakeholders. Adds credibility and a personal touch to your content.
Joining the Honors College was the best decision I made at Appalachian State. The small class sizes and personalized mentorship helped me grow academically and personally. I had the chance to conduct research with faculty, present at conferences, and build a strong network of peers who share my passion for learning. These experiences prepared me for graduate school and beyond.
Text
The most versatile module for adding and styling paragraphs, lists, and rich content. Used in nearly every page layout.
The mission of the Department of Biology is to provide a rigorous education in the life sciences while fostering research and community engagement. Students in our department gain hands-on experience through:
- laboratory courses
- fieldwork in the Blue Ridge Mountains
- collaborative research projects with faculty
We emphasize critical thinking, scientific inquiry, and sustainability in all aspects of our curriculum. Explore our degree programs, faculty profiles, and student resources to learn how we prepare graduates for careers in healthcare, environmental science, and biotechnology.
Toggle
Similar to Accordion but designed for single collapsible sections. Useful for hiding optional or detailed content.
What is a Custom Post Type?
Custom post types allow you to create specialized content beyond standard pages and posts. For example, you can build an Events post type to manage campus activities with dates, locations, and registration links. Similarly, a Faculty Directory post type can organize staff profiles with photos, bios, and contact information. These custom structures make your site more dynamic, easier to navigate, and tailored to your department’s needs. By using custom post types, you maintain consistency and improve the user experience across your site.
Video
Embeds video content from YouTube, Vimeo, or uploaded files. Perfect for introductions, tutorials, or promotional media.
Video Slider
Displays multiple videos in a slider format. Great for showcasing a series of interviews, lectures, or media highlights.
Social Media Follow
Adds icons linking to your social media profiles. Helps users connect with your organization across platforms.