Documentation
Components for RebelMouse
What is Components and Why It Matters?
RebelMouse's Layout and Design tool is highly flexible, enabling developers and non-technical users alike to create new design and functionality elements using drag-and-drop components. However, websites typically share common building blocks such as text, images, and logos that appear in various placements across the site.
These essential elements shouldn't be buried in the code. Instead, they should be easily accessible for non-technical users to change them effortlessly. Designers, product managers, and other non-technical users often need to update simple features and design styles without diving into the code.
This is where Components come into play. Components allow for creating a single source of truth for display content. Marketers and editorial teams can manage basic texts, images, and even HTML in a reusable way, ensuring consistency across the site. Moreover, these components are simple for non-technical users to edit, making it easy for everyone involved to maintain and update the site’s content.
Let's take a look at how it works.
How to Enable Components for your site?
Components are already enabled by default for any site.
How to access Components?
On the Layout and Design menu there is a Components link to the dashboard where you can configure components:
This is how the dashboard looks like:
You will be able to add/edit/delete components as you wish and we will explain a little below how they work.
Wrappers or Grouping
Before adding any component, you have the option to create component Groupings around the components you want to organize.
These wrappers (or groupings) help keep your content organized. You can rename them to anything you like, such as in the example above where a wrapper called "Truck 12" that groups all the content for this specific Truck:
Defining Components
Inside the Variables Element and inside a grouping you are able to add/edit/delete components. Types of Components:- Heading
- Formated text
- Text
- Image
- Custom HTML
Define Values for Component Types
Here we have the grouping Truck 12, that contains 2 components in it:
Truck-12-Title, that contains a Heading with value Truck 12 Mercedez 2024
Image, that contains an image of a Truck
Using Components
For using any component you need to:
Click on +, Components, and click on the component you want to add to the page.
The component will be then shared on the page.
Importing Components from a different site
In order to allow the current site to pull Components from a different site, you will just need to grant permission using Site Networks Tool. Great! Once this is done it means that your current site can use the Components from a different site (and any other shared element).
Using Components from a different site
Once the permission is granted via Site Network you will see that any component existing on the original site will show up on the current site on the Components list. And you can just use it.
In summary, RebelMouse's Components tool is crucial for maintaining a consistent and efficient site design. By providing a single source of truth for display content, it allows both technical and non-technical users to manage and update elements like text, images, and logos effortlessly. The flexibility of creating and grouping components ensures that content is organized and easily accessible, empowering non-technical users to make changes themselves. Whether you're defining new components or importing them from another site, the Components tool simplifies content management and keeps your site cohesive and professional.
Table of Contents
- What is Components and Why It Matters?
- How to Enable Components for your site?
- How to access Components?
- This is how the dashboard looks like:
- Wrappers or Grouping
- Defining Components
- Define Values for Component Types
- Using Components
- Importing Components from a different site
- Using Components from a different site