Pre-built components

About the feature

Advanced Views comes with a set of pre-built components for a quick start. Meta Fields and their Field Groups along with responsive CSS rules are included.

The goal of the library isn't to provide a complete library of ready-made elements, but rather a set of the most often used elements, which can be easily customized for your project.

After customization, you can save the components manually or use the reusable component library feature to reuse them in other projects.

This encourages different freelancers and agencies to create their own sets of unique elements, instead of reusing common ones, thereby fostering the presence of distinct and unique designs.

How to use it

1. Opt-in items

Open the Views or Cards items table and click on the 'Pre-built components' tab.

It displays a list of available pre-built components with descriptions. You can also find detailed descriptions of them on this page.

2. Import opted items

Choose the opted item or items and click 'import' either below the item title or in the bulk actions. It'll import the item itself, along with the related meta group.

3. Tune the group location rules or activate Gutenberg block

After the item is imported, you'll see a notice with links to the item itself and meta group. Click on the meta group link and set up the location rules for your target page.

Tip: If you have the Pro version, you can add the imported component to your Gutenberg library. In this case, you should skip setting up location rules and visit the item link to activate the Gutenberg block option.

4. Fill out data

Visit the target page and fill out the new meta fields. If you've added the Gutenberg block, then add the block to the page and fill out the fields.

5. Paste the shortcode in the target place

Note: If you've opted for the Gutenberg block option, skip this step.

Visit the imported item, copy the shortcode, and paste it into the target place. You're done!

Now you can visit the page and see the pre-built component in the list. You can refine the pre-built styles and markup according to your needs.

Pre-built Views

Note: The screenshots below are taken on a fresh WordPress installation, without page builders and global styles. The appearance of the imported items on your website may vary depending on your theme/plugin's global styles. You can edit the imported items to refine it and achieve your desired look.

Title

Description

Notes

About us (Pro)

A horizontal or vertical section featuring a title, description, and items. Each item includes an image, title, and description.

Left or right direction is managed via the 'select' field. Available in the Pro version only, as uses the repeater field inside the template

Call to action

Banner with a colored background, including a title, description, and button.

Contact form (Pro, ContactForm7)

Basic styles for forms from the Contact Form 7 plugin.

Available in the Pro version only, as uses the shortcode inside the template

Pre-built Cards

Title

Description

Notes

Pre-built components

About the feature

Advanced Views comes with a set of pre-built components for a quick start. Meta Fields and their Field Groups along with responsive CSS rules are included.

The goal of the library isn't to provide a complete library of ready-made elements, but rather a set of the most often used elements, which can be easily customized for your project.

After customization, you can save the components manually or use the reusable component library feature to reuse them in other projects.

This encourages different freelancers and agencies to create their own sets of unique elements, instead of reusing common ones, thereby fostering the presence of distinct and unique designs.

How to use it

1. Opt-in items

Open the Views or Cards items table and click on the 'Pre-built components' tab.

It displays a list of available pre-built components with descriptions. You can also find detailed descriptions of them on this page.

2. Import opted items

Choose the opted item or items and click 'import' either below the item title or in the bulk actions. It'll import the item itself, along with the related meta group.

3. Tune the group location rules or activate Gutenberg block

After the item is imported, you'll see a notice with links to the item itself and meta group. Click on the meta group link and set up the location rules for your target page.

4. Fill out data

Visit the target page and fill out the new meta fields. If you've added the Gutenberg block, then add the block to the page and fill out the fields.

5. Paste the shortcode in the target place

Note: If you've opted for the Gutenberg block option, skip this step.

Visit the imported item, copy the shortcode, and paste it into the target place. You're done!

Now you can visit the page and see the pre-built component in the list. You can refine the pre-built styles and markup according to your needs.

Pre-built Views

Title

Description

Notes

About us (Pro)

A horizontal or vertical section featuring a title, description, and items. Each item includes an image, title, and description.

Left or right direction is managed via the 'select' field. Available in the Pro version only, as uses the repeater field inside the template

Call to action

Banner with a colored background, including a title, description, and button.

Contact form (Pro, ContactForm7)

Basic styles for forms from the Contact Form 7 plugin.

Available in the Pro version only, as uses the shortcode inside the template

Pre-built Cards

Title

Description

Notes