# 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. {% hint style="info" %} 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](https://docs.advanced-views.com/templates/reusable-components-library-pro) 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. {% endhint %} ## 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. {% hint style="info" %} 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](https://docs.advanced-views.com/display-content/custom-gutenberg-blocks-pro). {% endhint %} #### 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* {% hint style="info" %} 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. {% endhint %}

| 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.
In Pro only, because it 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. | In Pro only, as it 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](https://docs.advanced-views.com/shortcode-attributes/view-shortcode#id-6.-loading-fields-from-a-menu) 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. | In Pro only, as it uses the slider feature | ## Pre-built Post Selections {% hint style="info" %} 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. {% endhint %}

| Title | Description | Notes | | ---------------------------- | ------------------------------------------------------------------------------------------ | ------------------------------------------ | | Latest articles | 4-column grid displaying the latest posts, featured image, title, and last updated date. | | | Latest articles slider (Pro) | 3-column slider displaying the latest posts, featured image, title, and last updated date. | In Pro only, as it uses the slider feature |