Introduction
In this blog post, we’ll show you how you can create a Read More / Read Less toggle in Bricks Builder. The best part? You won’t need to add any extra HTML or CSS code. Yes, you read that right! We’ll use the Max Addons Unfold element, which allows you to control what part of your content is revealed and remains hidden.
The Challenge of Managing Content Spacing
One of the most common challenges in web design is managing spacing. A single page often contains a wealth of information, and displaying everything at once can make the page look cluttered and overwhelming. This is where the Read More/Read Less toggle comes in!
For instance, lengthy paragraphs can appear unattractive. The Read More/Read Less toggle is a better approach, allowing you to show a snippet of text with a clickable ‘Read More’ button, thus solving the problem of managing content spacing.
Max Addons Unfold element offers an elegant solution to this problem. It not only helps you display long content in a compact and organized way but also offers numerous customization options to enhance the button’s display and functionality.
Features of Max Addons’ Unfold Element
Unfold element from Max Addons is a powerful tool for managing content visibility on your WordPress website. It comes packed with powerful features, such as:
- Selective Content Display: Decide what part of your content is revealed on the page and what stays hidden until clicked.
- Smooth Transitions: Add eye-catching animations with granular control. You can adjust animation speed and define content visibility by pixels or lines.
- Customizable Button: Personalize the toggle button to match your site’s design. Modify the button text, alignment, icon, and icon position.
- Advanced Variants: Configure styles and settings for both FOLD and UNFOLD states.
- Comprehensive Styling Options: Customize colors, alignment, background, typography, and button styling to ensure seamless integration with your website’s design.
With these robust features, the Unfold element allows you to create an interactive and stylish Read More / Read Less toggle that enhances user experience without cluttering your page.
Why Choose Max Addons’ Unfold Element?
You might assume that creating such a feature requires custom CSS or HTML coding, but that’s not the case here. The Max Addons Unfold element lets you display more content in less space without writing a single line of code.
So, even if you’re a beginner or using Bricks Builder for the first time, you can easily take advantage of the Max Addons Unflod element’s features without hassle!
How To Create a Read More / Read Less Toggle in Bricks Builder
Now that you’re familiar with the features of the Max Addons Unfold element, let’s dive into the steps to create a Read More / Read Less toggle in Bricks Builder.
1. Install and Activate Max Addons
To get started, you need to install and activate the Max Addons on your WordPress website.
2. Create or Edit Your Page
Next, decide where you want to place the Read More / Read Less toggle. You can either create a new page or edit an existing one:
- To create a new page, navigate to Pages >> Add New from your WordPress dashboard.
- If editing an existing page, find it under Pages >> All Pages and click Edit.
Add a descriptive title to your page and save it as a draft before proceeding.
3. Edit with Bricks Builder
After setting up your page, click the EDIT WITH BRICKS button. This will open the Bricks Builder editor, where you can design and customize your page.
4. Add the Unfold Element
In the Bricks Builder editor:
- Search “unfold” element on the left-hand side of the Elements Panel.
- Add the Unfold element to your page. Make sure the “Max” tag is visible on the icon, confirming that it’s from Max Addons.
Once added, the Unfold element’s settings will appear in the left panel and split into Content and Style tabs.
5. Choose Content Type
Under the Content tab, you’ll define what content will appear in the toggle. You can:
- Add the text you want to display.
- Adjust Typography to ensure the font is readable and matches your website’s design.
- Use the Background Color and Padding options to popup the design.
6. Enable Separator
The Separator toggle adds a line or divider between the visible and hidden sections of your content. Here’s how to use it:
- Enable the toggle to make your toggle visually distinct.
- Choose a color and style for the separator that aligns with your overall design.
7. Customize the Button
The Read More and Read Less button customization options are the stars of this feature. Here’s how you can style the buttons to fit your design:
- Alignment: Adjust the button placement (left, center, or right).
- Text and Icon: Define what the button says (e.g., “Read More”) and add an icon if desired.
- Icon Typography: Change the font and size of the icon.
- Position and Size: Decide where the icon appears (before or after text) and adjust the button size (Small, Medium, Large, or Extra Large).
- Style: Choose from pre-designed styles like Primary, Secondary, Muted, or Dark.
Additional Features:
- Enable Circle to create a round button.
- Enable Outline for a bordered button look.
- Customize the Border, Box Shadow, Typography, Background, and Padding to make the button match your site perfectly.
8. Configure Other Settings
For more advanced customization, explore these options:
- Transition Speed: Control how quickly the content expands or collapses when toggled.
- Content Visibility By Pixels or Lines: Define the visible portion of the content using specific measurements.
- Pixels: Use this for precise control over the height of visible content.
- Lines: Ideal for text-heavy sections to control the number of visible lines.
Wrapping Up!
And there you have it! Creating a Read More / Read Less toggle in Bricks Builder using the Max Addons Unfold element is simple and easy!
If you find this tutorial helpful, you may also be interested in learning how to create a comparison pricing table using Bricks Builder.
Max Addons is a powerful addon for Bricks Builder, packed with 50+ creative elements to help you build any type of website easily. From personal blogs to professional business sites, you’ll find the elements to match your site style and needs. So what are you waiting for? Get Max Addons for Bricks Builder today!
What do you think about this tutorial? We’d love to hear from you—drop a comment below!
1 comment