<p>Revolution implementation of Rahul Dhesi&apos;s FixedPre plugin. </p>

Bob Ray 1.2.2-pl (22 KB)Other VersionsNeed help installing this extra?

FixedPre

Customize and organize your website content with collapsible sections for better navigation.

The Accordion widget offers various behavior settings, allowing you to customize how content is displayed. Choose to open multiple sections simultaneously, keep specific sections open, or expand all sections at once to match your site's needs.

Customizable Behavior Settings

With the Accordion widget, you can organize your content into separate categories for improved navigation. Additionally, you can enhance these categories with Emojis, making your content more engaging and easier to browse.

Organized Category Separation

The Accordion widget provides a selection of icons for you to choose from. Whether you prefer a downward-facing arrow, a plus sign, or other commonly used icons, you have the flexibility to select the one that best fits your design.

Selection of Icons

The Accordion widget comes with a variety of layouts, ensuring it seamlessly fits your website's design and style. Choose the layout that best suits your aesthetic and functional needs, providing a cohesive look to your site.

Versatile Accordion Layouts

The Accordion widget offers numerous design skins, allowing you to pick one that matches your brand's aesthetics. Whether your site has a modern, minimalist, or traditional design, there's a skin that will enhance its visual appeal and reduce customization time.

Multiple Design Skins

With extensive customization options, the Accordion widget can be tailored to your exact specifications. Adjust colors, fonts, spacing, and more to create a widget that perfectly matches your website's look and feel.

Fully Customizable Accordion Widget

The Accordion widget is fully responsive, ensuring it looks great on any device. This mobile optimization is essential for providing a consistent user experience across desktops, tablets, and smartphones.

Perfectly Responsive Design

The Accordion widget is designed for ease of use, requiring no coding skills for customization. Its intuitive dashboard makes it simple to modify, enabling anyone to integrate and personalize the widget effortlessly.

User-Friendly Interface

For developers and designers, the Accordion widget supports custom CSS. This feature allows for deeper customization, letting you fine-tune the widget's appearance and functionality to match your unique vision.

Custom CSS for Advanced Customization

Embedding the Accordion widget on your website is straightforward, requiring just a single line of code. This simplicity makes it accessible for users of all technical levels, and the widget updates automatically with every change you make.

Effortless Embedding

By using Collapsible Content, you can streamline your webpage, reducing clutter and improving load times. This helps create a faster, more efficient site, which can enhance user retention and search engine rankings.

Boost Site Performance with Collapsible Content

The Accordion widget ensures that your content is accessible and easy to navigate on mobile devices. This responsiveness enhances the mobile experience, catering to the growing number of mobile users and improving overall site accessibility.

Improve Mobile Usability

The Accordion widget allows you to present information in a clean, organized manner without overwhelming your audience. This makes it easier for you to manage and update your content, ensuring your site remains current and relevant with minimal effort.

Simplify Content Management

Use the Accordion widget when you have a lot of information and want to keep your pages clean, scannable, and easy to navigate. Collapsible sections let visitors open only the topics that matter to them, which reduces noise and keeps attention focused. This is ideal for FAQs, product details, documentation, policies, and long-form content that would otherwise stretch endlessly down the page. By grouping related items under clear headings, you help users understand the structure of your content and move through it at their own pace. A good accordion improves readability, lowers bounce rates on heavy pages, and makes complex information feel manageable rather than overwhelming.

Accordion

Website Components

New!

Slide in panel that appears from the top or bottom to display offers, updates, or actions clearly.

Example 1

Example 2

Example 3

Example 4

The widget comes with three different panel types that you can choose from to better fit your design and needs. Furthermore, each panel type is customizable, enabling you to match your brand's colors, fonts, and other visual elements for a cohesive and on-brand user experience.


Different Panel Types

The widget features different button layouts that can further help you customize your panel to fit your requirements. The various button layouts offer a versatile and efficient method to interact with visitors to your website, whether you want to draw attention to a limited-time deal or highlight a new product.


Multiple Button Layouts

The widget has various button animations that are sure to draw the user’s attention and encourage them to click on the button. To make it more appealing to your consumers, you can also alter the button animations in accordance with the design language of your website or brand.

Various Button Animations

You have the freedom to tailor the user experience with the slide-in panel widget by choosing the location from which the panel will slide in, either at the top or bottom of your website, depending on your particular design and marketing requirements. This feature not only enables you to seamlessly integrate your new layout, but it also makes sure that the slide-in panel's promotional material is clearly displayed, grabbing visitors' attention and boosting the effectiveness of your marketing campaign.

Two Positions To Choose From

The Slide-In Panel widget features advanced display rules — like when or where to display the widget — that you can set and customize. The rules include action triggers like “on exit”, “time delay”, “page scroll” and more.

Customizable Display Rules

The Slide-in Panel widget has a selection of beautiful skins that you can use to add to it and enrich its visual appearance. The widget offers a selection of skins that you can use to alter the panels' style to fit your website's identity. By using these options, you can quickly and easily construct a Slide-in Panel that matches the general style of your website and has a professional appearance without having to spend hours designing it from scratch.

Multiple Skins

The Slide-In Panel widget comes with a selection of beautiful icons that you can use to add to it and enrich its visual appearance.

A Selection of Beautiful Button Icons

You may fully customize the Slide-in Panel widget to change the style to suit your needs. Customize anything you want, including the fonts, spacing, and colors! In order to create a unified and polished appearance, you may also select from a variety of font choices and modify the font's size, style, and color. You can alter the spacing in addition to these style choices to make sure it blends in with the rest of your website's design.

Fully Customizable

Any website would benefit from the widget Slide-In Panel. It has a clean and contemporary style that will improve the overall appearance of your site in addition to being fully responsive, which means it will shift fluidly to fit the screen size of any device. Having a website that is optimized for mobile viewing is essential in a world where more and more people are accessing the internet through their phones and tablets. You may use the widget to accomplish just that, providing you an advantage over rivals.

Perfectly Responsive

The use of the Slide-In Panel widget is simple and doesn't require any coding expertise. With only a few mouse clicks, you can modify the widget however you wish using our user-friendly interface. As a result, even people without coding knowledge can quickly and easily develop designed elements with a professional appearance that interact with their website and increase their online visibility and audience engagement.

Easy To Use

Our advanced editor is a powerful tool that gives you complete control over the appearance of the Slide-In Panel widget. With this feature, you can easily customize every aspect of the widget's look and feel, from the colors and fonts to the layout and positioning. But if you're feeling particularly creative, you can take your customization to the next level by editing the CSS directly. This gives you the ability to make even more advanced changes to the widget, allowing you to make it your own. Whether you want to make a few simple tweaks or go all out with advanced customizations, our advanced editor has you covered.

Custom CSS

To embed the Slide-In Panel widget on your website, simply copy and paste the provided code snippet into the HTML of your webpage. Additionally, the widget is designed to be self-updating, meaning that any changes you make to the Slide-In Panel editor will be reflected automatically on your website without the need for any additional manual updates.

Easy To Embed 

With the Slide-In Panel widget, you can greatly increase conversions by making your promotional information clearly visible. This is so that there is a greater chance that website visitors will take action and convert since the Slide-In Panel widget grabs their attention and conveys a clear and concise message.


Increase Conversions

The Slide-In Panel widget’s animation is attention-drawing and is sure to divert the users’ attention to the promotional message you are trying to convey. Using the Slide-In Panel widget to draw attention to your marketing message can boost user interaction and, as a result, your website's conversion rates.


Draw Attention

With the Slide-In Panel widget, you can improve your users’ experience by offering them valuable information that will save them money, and improve their experience. This widget can be easily integrated into your website or application, allowing you to enhance user engagement and drive conversions.

Improve User Experience

Use the Slide In Panel widget when you want to deliver an important message or offer without covering the entire screen. The panel appears from the top or bottom and can hold text, forms, buttons, or media while leaving most of the page visible. This makes it well suited for announcements, cookie information, secondary calls to action, or targeted promotions tied to behavior. Because it feels lighter than a full overlay, visitors are more likely to read the content instead of closing it immediately. You can time or trigger the panel based on key events and keep the main layout cleaner by moving less central content into this flexible, attention grabbing space.

Slide-In Panel

Popups, Bars & Buttons

Boost Sales

Embed images into titles. Control animation, positioning, font, and responsiveness.

Add an extra layer of intrigue to your titles with animated backgrounds. The gentle movement of the image can create a captivating effect, keeping your audience engaged and encouraging them to explore your content further.

Add Dynamic Animations

Take full control over how your background images align with your titles. This feature enables you to fine-tune the position and coverage of your images, ensuring a seamless blend with your titles for the most impactful visual effect.

Optimized Image Positioning

With the option to emphasize text with a stroke, you ensure maximum readability for your audience. This feature enhances the contrast between your text and its background, making your titels more striking and easier to read.






Enhanced Text Visibility

The power to set the animation direction of your background images is in your hands. Whether it's right, left, up, down, or a zoom effect, you can decide the path that best complements your title and site design.

Customizable Animation Direction

You can also control the pace of your animations to match the rhythm of your website. This feature allows you to set the speed of your image movements, creating a harmonious and engaging visual experience for your site visitors.

Flexible Animation Speed

Breathe new life into your titles with a vast selection of fonts. This feature lets you experiment with different typography styles, allowing you to find the perfect match for your brand and the message you want to convey.

Variety of Font Choices

The Headline With Background Image widget is designed to keep user-friendliness at the forefront, ensuring easy usage and understanding of its functionalities. Its intuitive interface encourages user interaction and makes sure that visitors can smoothly navigate the widget, leading to a better overall website experience.

Easy to use

The Headline With Background Image widget is fully responsive, ensuring your content looks its best on any device. This means your engaging titles and eye-catching images will retain their impact and readability, whether viewed on a desktop, tablet, or smartphone.

Fully Responsive

Like our other tools, the Headline With Background Image widget also provides the flexibility to integrate custom CSS for a truly tailored look. Users with coding skills can boost the widget's aesthetics, attaining their preferred design style by incorporating their own custom CSS code.

Customize with Custom CSS

The Headline With Background Image widget is easy to add to your website, needing just basic tech know-how. This means you can quickly set it up without needing lots of extra help or fancy skills, making the whole process smoother and faster.

Easy to embed

The Headline With Background Image widget allows you to unleash your creativity without requiring advanced technical skills. This user-friendly tool enables anyone to create visually stunning headlines, making your website more appealing and interesting in just a few simple steps.

Effortless Creativity

This widget turns your headlines into an immersive visual experience. By using the Headline With Background Image widget, you are more likely to attract and keep the attention of your visitors, creating a memorable first impression.

Visually Engaging Content

By using images as the backdrop for your headlines, you add a new dimension to the user experience. This fresh and unique approach to presenting information can make your site more enjoyable and compelling for visitors, increasing user engagement.

Enhanced User Experience

Use the Headline With Background Image widget when you want to blend strong typography with visual storytelling in a single element. Instead of placing text over generic backgrounds, you choose specific images that directly support the message in the headline. This is powerful for campaigns, product launches, hero sections, and storytelling pages. Carefully chosen visuals behind your key line help visitors immediately understand context and emotion without extra words. With control over positioning, animation, and fonts, you can keep readability high while still creating a memorable, brand aligned first impression that feels unique compared to standard blocks.

FixedPre

MODX extra

App Details

Pricing

App Info

Some of the best Common Ninja extras for MODX

Accordion

Slide-In Panel

Headline With Background Image

extras You Might Like

Discover the best apps for your website

Common Ninja Search Engine

FixedPre

MODX extra

App Details

Pricing

Check Out the Accordion Widget

App Info

Some of the best Common Ninja extras for MODX

Accordion

Slide-In Panel

Headline With Background Image

extras You Might Like

Discover the best apps for your website

Common Ninja Search Engine