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 Layouts or Post Selections items table and click on the 'Pre-built components' tab.

It displays a list of available pre-built components with a short description for each.

2. Import opted items

Click 'import' either below the item title or select multiple items and import in the bulk actions. It'll then 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 Pro, 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. That's it, you're done!

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

Pre-built Layouts

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.