Possible configurations
The "Read More" Page Builder element allows you to define an initial display height for the content, with the addition of a "View More" button. When users click on the "View More" button, the full content is displayed, providing an interactive experience and allowing website visitors to access the complete content as desired. This functionality is useful for presenting long or detailed information in a compact manner, keeping the page organized, and giving users control over what they want to read.
You can also define the element's width as a percentage of the page width.
Dark Theme Example
This example demonstrates the use of the container settings on a Read More component.
This Read More component was configured with:
- Display title
- Collapsed height: 200px
- Expand button label: "View More"
- Collapse button label: "View Less"
- Button color: Orange
The container settings were configured as follows:
- Dark gray background color
- White text extending to component items
- 30px padding in all sides except bottom
- Margin bottom: 32px (default)
- Border: 2px black, all around
Example with 75% width
In the heart of the vibrant city of New Orleans, where the soulful notes of jazz fill the air and the streets pulse with energy, there's a hidden gem known as Jazz Haven. This cozy venue, tucked away from the bustling crowds, offers a sanctuary for music lovers seeking solace and inspiration. Stepping through the doors of Jazz Haven, you're enveloped in the smooth melodies of saxophones and the rhythmic beats of upright basses, creating an atmosphere that's as intoxicating as a late-night jam session in the French Quarter.
As you sink into a plush armchair amidst the dimly lit interior of Jazz Haven, you're transported to a bygone era of smoky jazz clubs and sultry vocals. The walls adorned with vintage posters, the soft glow of table lamps, and the low hum of conversation create an ambiance that's both nostalgic and inviting. Whether you're sipping on a classic Old Fashioned or savoring a plate of soul food, every moment spent at Jazz Haven feels like a journey back in time to the golden age of jazz.
But Jazz Haven is more than just a venue—it's a cultural landmark that celebrates the rich history and enduring legacy of jazz music. From impromptu jam sessions to intimate concerts by local legends, the venue hosts a variety of events that pay homage to the city's musical heritage and showcase the talents of emerging artists. Whether you're a seasoned jazz aficionado or a curious newcomer, Jazz Haven welcomes you with open arms and invites you to lose yourself in the magic of live music. So come, take a seat, and let Jazz Haven be your guide on a musical journey through the soul of New Orleans.
You can have several items inside a single component.
This example is using:
- 100px as the collapsed height
- color green
- display title setting set to No
If the collapsed height is set higher than the actual height of the text, no More/Less buttons are displayed, the text is displayed in its entirety.
Configurations
Component configurations:
- Title
- If title should be displayed on the page
- Component width as a percentage of the total width available for the component
- Placement (inline, top of page content, bottom of page content, etc.)
- Container Settings
Container Settings
Container settings allows the configuration of the container housing the component. It allows the following settings:
- Padding (in px): top, right, bottom, left. Defaults to 0px for all.
- Margins (in px): top, right, bottom, left. Defaults to 32px in the bottom.
- Border (in px): top, right, bottom, left. Defaults to 0px for all.
- Border Radius (in px): defaults to 0px.
- Border Color
- Background
- Color
- Text Color
- Extend text color to items or not
- Opacity (%)
- Blur (in px)
- Media (image / video)
- Parallax Effect (for Image only)
Item Configurations:
- Title
- Display title (yes / no)
- More link label
- Less link label
- Collapsed height
- Color