Skip to main content

Component

The component is a combination of several fields. It’s very convenient when you want to reuse a bunch of fields. The components are helpful in creating banners, sliders, etc.

Use cases:

1. Banner

Let’s see how you can create banners:

You will have to create a component type first, follow the below steps:

  1. Go to your workspace.
  2. Click on the Content Model menu option given in the sidebar.
  3. Click the "+" icon next to Components and choose "New Component" to create one.

    Frame 110.png

  4. A popup dialog will appear, asking for the following information:

    Frame 109.png

    1. Component Name - Enter the name of the component, say "Banner".
    2. Description - Enter the description of the component.
    3. Parent Folder - Select the folder to organize the components.
    4. Enable localization for this content-type - You can opt for localization if you need.
  5. Once done, click on Save, and the component will be created.
  6. Now you have to add the fields that are needed in the banner.
    1. Title - Text
    2. Link - Text
    3. Image - Media

Frame 112.png

Adding this component to a Content type

  1. Read this article on how to add a field.
  2. Select the component that you want to use for this content type. We’ll use “Banner” here.
  3. You can choose to make the component Repeatable or Single, but for the banner, we would want it repeatable so we can add it multiple times.
    1. Single Component: It would allow using the component only a single time in this content type.
    2. Repeatable Component: It would allow using the component multiple times in the content type.
  4. You can choose to make this component required.
  5. Click on the Save button.
  6. The component will be added to the content type.

Frame 111.png

Frame 114.png

Now we need to add values to this content type from the content library.

Add an entry to component

  1. Go to Content Library, and open the content type where you added the component.
  2. Click to add an entry, and now you can add the values for all the fields.
  3. You will see a tab with the component name ("Banner" in this case), click on it.
  4. You should be able to see the fields that you added in the component, i.e., Title, Link, and Image.
  5. Also, a link option to Add new, if you click on it, then another set of component fields will appear.
  6. Add three sets of values for the banner, which can be used as a carousel.

Frame 113.png

2. Hero Carousel Slides

In a similar way, you can use the component to create 'Hero Carousal' in Experro. The carousel component will require the following fields:

  • Slide Title - Text type
  • Slide Sub Title - Text type
  • Slide Button Text - Text type
  • Slide Button Link - Text type
  • Slide Image - Single Media type

You can make changes as per your requirement in the above fields.

Next, use this component in a content type where you want to display the carousel. It is best to add this in the content, which is used for similar types of pages that will display the carousel.

Just add entries, and that's it.