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 |
Featured item | 2-column layout with the image displayed on the left and the title, description, and button shown on the right. | With the left/right direction switcher |
Featured section | 2-column layout with a large image shown on the right and the title, description, and text link displayed on the left. | |
Footer | Copyright text with the current year. | |
GDPR cookie consent | Website cookie notice with JavaScript to manage its appearance, a link to the policy, and a button to accept included. | |
Header (with WP menu) | Header with a logo and WordPress menu items. The menu supports two levels of hierarchy. | Add the 'menu-slug' argument to the shortcode to load from the target menu. |
Hero (introduction) | Full-screen image background with a text block overlay, including title and description with padding. | |
Testimonials (Pro) | Testimonials displayed in a slider format with 3 items in a row, featuring the message, author, and company icon. | Available in the Pro version only, as uses the slider feature |
Pre-built Cards
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 |
|---|---|---|
Latest articles | 4-column grid displaying the latest posts, featuring the post's image, title, and last updated date. | |
Latest articles slider (Pro) | 3-column slider displaying the latest posts, featuring the post's image, title, and last updated date. | Available in the Pro version only, as it uses the slider feature |
Last updated
