标签： features

Insights

Visual Composer Insights is an inbuilt analytical tool that automatically analyzes your page content and provides qualitative and quantitative feedback.The Insights checks help you to create content that will rank higher (SEO), will be more accessible, and will load faster (site performance).You can access Insights from the navigation bar. The color next to the bell icon will indicate errors (red), warnings (yellow), and success (green).There are following checks available:

Title

Description

Empty content

The empty content message shows up when you haven』t added any content to the page you are working with.

Title length

Page title (or title tag) is a short description of your webpage that appears at the top of search engine results pages. The optimal length for the page title is between 10 to 60 symbols.

Content length

The length of your text provides the search engine with clues to determine your content and focus keywords. The recommended minimum of your text is 300 words, but the longer your content is, the more on-topic information you can offer to your site』s visitors.

Paragraph length

Properly sized paragraphs improve the readability of your text. If your paragraph contains more than 200 words, people won』t be able to scan and process the core idea easily.

Missing H1

H1 indicates a heading and describes the topic of your page. The topic heading is an influential ranking factor and often the most visually notable content on your page. Every page needs only one H1 tag that focuses on one keyword phrase, or sentence.

NoIndex

If you set a "noindex" directive for your page or post, this will exclude your content from search results.

Image ALT attribute

The alt text (alternative text) is added to describe the image in case the file can』t be displayed. Alternative text is important for screen readers, it also helps search engines to understand more about your page or the page you』re linking to.

Image size

The size of an image file impacts both the performance and SEO ranking of your page. The larger the file size, the slower your site loads. The faster the site, the easier it is for the search engine』s bot to analyze and add a page into a web search.

Internal/External links

Those two link types are components of the search engine』s algorithm to calculate your site position on search engine results pages. External links point from one website to another, but internal links tie the information within your own website.

Google Analytics code

Google Analytics Tag collects and sends data from your website to the Google Analytics platform.

Contrast check

Automatic content contrast check for meeting WCAG 2.0 accessibility standards.

In addition to Insights, Visual Composer Notification Center is located in the next tab. There you can find links to useful articles and tutorials curated by the Visual Composer team.Note: In some cases, you can ignore some of the warnings if they are not required. For example, if you don't want your page to appear in the search results, pay no attention to the no index warning from the Visual Composer Insights.

Popup Builder

Visual Composer Website Builder allows you to create engaging popups for your WordPress site. The Popup Builder add-on is available to all premium license owners and can be downloaded from the Visual Composer Hub.With the help of popup builder, you can create site-wide and page-specific popups that get triggered:On-page initial load (only once)On-page loadExit-intentElement ID (when an element appears in the viewport)On-click (via Link Selector)You can set site-wide popups in Dashboard.The page-specific popups are controlled from the Frontend editor settings.To trigger popup on the element appearance, you will need to add a unique element ID to the Visual Composer element.Popup editorVisual Composer Popup Builder allows you to design custom popups using the Frontend editor. To access the Popup Builder editor, navigate to Popups in the Visual Composer Dashboard.First, you will need to specify the popup template name.Visual Composer Popup Builder editor interface is no different from the Frontend editor. This means you can use rows, columns, and content elements downloaded from the Visual Composer Hub to create a design for your popup.As you create a new popup template, you will have a popup container element added to the layout by default.The popup container is a default (root) element of the Popup Builder that allows you to style popup overall look (including overlay, close button, shape, and even popup width).For the width of the popup, you can use either pixel or specify popup width in percentage. The percentage will be automatically calculated depending on the screen size of the popup.The popup container attributes contain regular and container Design Options, that has additional functionality for popup.Note: Popup Builder has in-built responsiveness which means that your popup content will look good on all devices.Important: As you create a popup, don't think about the trigger events yet. You will be able to define popup displaying on various trigger events in the site-wide or page-specific templates.

Features

Role Manager

Role Manager allows you to restrict WordPress user roles to access certain features of the Visual Composer editor or lock certain parts (elements) of your content.Role Manager addon is very useful to agencies that work with customers and large organizations.You can download Role Manager from the Visual Composer Hub with active premium license.For the free version users, Role Manager allows enabling/disabling Visual Composer for different post types (posts, pages, custom post types).Role Manager configurationYou can access Role Manager from Visual Composer Dashboard.In the Role Manager, you will have all available user roles listed.By default, the Administrator role has full access to all Visual Composer features, while Subscriber has no access to any features.To modify user role access, open accordion, and make adjustments.To help you out, Visual Composer has role manager presets available in the dropdown for all user roles. Applying preset will overwrite user role access rights.Element lockThe element lock feature is available within the Frontend editor in the element edit window or tree view.To lock the element, click on the "lock" icon. The element will now be available for edit only to the Administrator role. Click on the "unlock" icon to unlock the element.You can use element lock to disable content manager access to the overall page layout and leave only certain elements available (ex. text block). It will allow you to reduce human error and ensure design consistency when working with content.

Content elements & structure

Visual Composer offers hundreds of different content elements that you can use to build your pages. There are 40+ predefined elements available right from the start. You can download more elements from the Visual Composer Hub.All downloaded elements will be added to the element library and can be added to the page from the Add Content Window.When working with elements, there is a simple concept you should understand. There are 2 types of elements:Structure elements (section, row, column)Content elements (text blocks, images, buttons)Structure elements allow you to create the structure of your page. Your layout consists of rows divided into columns. Sections are used to combine rows.You can place content elements into columns. In other words, fill columns with the content.Rows and columnsA row is the root element of Visual Composer that can be divided into columns.To divide a row into columns, you will need to adjust the "Row Layout" available in the row edit window. To access the row edit window, use row controls.There is no limit in how many columns a row can contain. You can use percentage, fraction, and pixels to set column width. The maximum width of the row is 100%. This means having 50% and 50% columns will divide your row into 2 equal columns.Since rows and columns are responsive, the width will adapt to different screen sizes.To have fixed-width columns, you can use the pixel value. This is very useful if you don't want your column to reduce in width (ex. you have a logo image that you don't want to scale down on different devices).Another value accepted by the "Row Layout" is "auto". The auto means that it will take all the free space available up to 100%. For example, if you set your row layout to 30% and auto - you will have two columns where the first one will take 30% of all width and the second the rest 70%.It is allowed to have a row width that exceeds 100%. In such a case, columns that do not fit in will be moved to the down (stacking).In addition to a simple row layout, you can adjust custom responsiveness. It allows you to adjust column width for specific devices or even hide parts of the content.There are more controls available to rows that allow to stretch the content, set column height, column gap, content vertical position, and adjust advanced design options.Content elementsRegular content elements that can be placed inside columns are the ones you will use to build your content. Elements like text block, single image, buttons, galleries, and more will contain your static content.You can adjust the content and design of those elements from the element edit window.There are simple elements and more advanced elements that can contain other elements (ex. button group containing multiple buttons or tabs that can contain other elements).In addition, you can convert your static content elements into dynamic content elements. Dynamic content elements can display WordPress default fields and custom fields. To enable dynamic content, you will need to connect the element to the custom field.Some elements, like post list or post grid, are dynamic by default. The purpose of those elements is to display dynamic content (ex. a list of your posts).How to create your own elements?Visual Composer allows adjust attributes of any element and save it as a preset.To save an element as a preset:Add an element to the page and style itClick on the Settings" icon in the element edit windowName your element and click "Save as Preset"Your new element preset will be added to the Add Content WindowYou can use presets when creating branded elements for your site or working on the site for your customers. Element presets can reduce the time you spend styling different elements.For more advanced custom elements (not based on existing elements), you can use Visual Composer API. An API allows you to create completely custom elements for your projects or create addons for sale.How to substitute elements?You can easily substitute elements from the same group while keeping the content of the element the same.This allows you to quickly see how different elements look inside your layout (ex. how different buttons look).To substitute an element with another one:Open element edit windowClick on the substitute iconSelect another element from the listThe element will be substitutedHow to hide elements?You can hide any element of Visual Composer. This means that the element will still be available in the Frontend editor, but won't be visible to your site visitors.You can use the hide option to temporarily hide elements and enable them once needed.To hide an element:Open element edit windowClick on the "Eye" iconThe element will be hiddenTo unhide, perform the same steps.How to rename elements?Visual Composer allows giving your elements a custom name. That is very useful when working with large pages.Naming elements allow you to quickly navigate through the layout to overview your content.You can rename an element by clicking on the element title in the element edit window or in the Tree View.

Templates

Visual Composer allows you to work with templates. A template is a set of elements formed as a ready-to-use layout. A template can be added to the page with a single click.Once a template is added, you can replace the content of the template with your own. Using templates speeds up the process of creating a page.You can use Visual Composer predefined templates, download templates from the Visual Composer Hub, and create your own templates to reuse them.Note: Features like block templates, global templates, template download, and export are premium features.How to add a template?All downloaded and created templates can be added to your page from the Add Content Window.Open the Add Content Window, navigate to templates and click on the template you want to add.If you want to download more templates, visit Visual Composer Hub. The Hub gives you access to different types of templates, including page templates and block templates.A block template is a template that can be used as a section (part) of your page.How to create your own templates?In Visual Composer, you can create your own templates.To save all your page as a template:Open Add Content WindowNavigate to the Templates tabName your template the inputClick "Save Template"The template will be saved and added to the listIn addition to page templates, you can save a part of your page as a template. You can save any row (with content included) as a template. To save row as a template:Open row Edit WindowClick on the Settings iconName your template the inputClick "Save as a Block"The template will be saved and added to the listTo delete templates:Open Add Content WindowClick on the Settings iconClick on the "Cross" icon of the template to delete itGlobal templatesGlobal templates allow to display the same template on several pages and update it from one place. As you modify the global template, all copies of that template will be updated automatically.This allows to speed up the content management process and ensure design consistency for similar blocks.With the Global templates addon downloaded, all templates created and downloaded can be used as global templates.To access global templates, open Visual Composer Dashboard and navigate to Global Templates. There you can edit, delete, and create new templates.To add a global template to the page you will need to use the Global Template element. The element will be downloaded automatically together with the addon.Once you add an element to the page, you can choose any of your templates from the dropdown menu.Note: If you want to add a template as a regular template (not global) you can still add template through the Add Content Window.Export and Import templatesYou can export Visual Composer templates (by one or bulk) to upload them to another site.To export the template, make sure to install the Export/Import addon from the Visual Composer Hub.To export templates open Visual Composer Dashboard and navigate to Global Templates.Note: You can also export headers, footers, sidebars, layouts, and popups.In the list of templates, hover over the template you want to export and click on "Export". If you want to download several templates, select the templates and choose Export from the Bulk actions.Your template/s will be downloaded as a zip file.To import templates, navigate to Dashboard - Import and select a zip file that contains templates. The templates will be uploaded to your site and added to the list.

Custom CSS & JS

Visual Composer makes it easy to add your custom CSS & JavaScript. You can add custom code to a specific page (local) or site-wide (global). In addition, you can control JavaScript placement in the header or footer of the page.You can add custom CSS & JavaScript from:Visual Composer Dashboard (global only)Visual Composer Frontend editor (local and global)You can access CSS & JS editor by opening Visual Composer page settings and switching to CSS or JavaScript tabs.When to use local or global CSS & JavaScript?If you want your code to execute on a single page or several pages out of many, it is highly recommended to use local CSS & JS. If you want to add custom code site-wide, you will need to use global CSS & JS. Local CSS & JS allows you to keep your site clean and improve your Core Web Vitals score since Google penalizes sites with unused CSS & JS.Element ID & Extra class nameAll elements of Visual Composer have 2 default parameters:Element IDExtra class nameYou can use those parameters to refer to specific elements or groups of elements from your custom CSS & JavaScript. To apply custom CSS & JS to specific elements:Add unique Element ID or Extra class nameOpen custom CSS or JavaScript tab in the SettingsAdd your custom codeImportant: It is not recommended to use the same Element ID for multiple elements.

Theme Builder

Theme Builder is a premium Visual Composer addon that allows you to design custom layouts for singular (pages, posts, custom post types) and archives (category pages). You can then overwrite your theme default templates site-wide or per-page basis.The addon will be downloaded automatically once you activate Visual Composer Premium.You can access Theme Builder from the Dashboard menu.In the Theme Builder you can:Create Layouts for singular and archivesAssign layouts to pages, posts, custom post types, and archives in the Layout SettingsCreate custom headers, footers, and sidebarsImportant: It is recommended to use Layout Builder to design headers, footers, and sidebars right in the layout.Create new layoutTo create a new layout open the "Layouts" section and click on "Add Layout".The editor will load and you will have to name your layout and select the type. There are two layout types to choose from:SingularArchiveBecause of a different WordPress structure, it is required to specify the layout type you want to build. You will not be able to change it after.Note: You can create several layouts for singular and archive to use on different posts, pages, custom post types, and archive-type pages.Once you select the type, you can start building. The editor will load and you will see predefined content already available. You can remove that content at any time.For the singular templates, you will have the content area defined as a part of the page. The content area is a mandatory element for singular layouts. This area will be used by your pages and posts to output the content. You will be able to create content within this area for specific pages and posts once you assign the layout to the post type.For the archive page templates, you will need a post list or post grid element added with "Dynamic WP Query" specified as a Source. This will indicate that the post list is dynamic and is based on the archive page type it is assigned to.In addition to mandatory elements, you can use any other Visual Composer elements. This allows you to design the layout around your content area or post list. You can design the header, footer, sidebar, and apply page-wide Design Options.Important: If you plan to use the same header, footer, or sidebar across multiple layouts, consider building this part as a Global Template. Global Templates make it easy to modify all copies of your template from one place.Theme Builder offers a list of additional elements available only in the Layout Builder. These are dynamic content elements that work as placeholders. With these elements, you can specify the places where to display WordPress default and custom fields (ex. post title, comment area, featured image, and ACF fields).Once your layout is ready, save it. It is time to assign your new layout.Assigning layoutWith Visual Composer Theme Builder you can assign layout site-wide or apply it to specific page.How to assign layout template globally?To assign layout globally, navigate to Dashboard - Theme Builder - Theme Builder Settings. In the Layout Settings, locate the page, post, custom post type, or archive type you want to overwrite and select the layout template from the dropdown menu. Save the changes and your custom layout will be automatically applied to all new and existing pages.How to apply layout template locally?You can apply a layout template to be used on a specific page.To do that, open the page or post with the Frontend editor and navigate to page settings. Make sure you have the page layout set to "Default".Choose your layout template from the dropdown menu. The layout will be applied automatically.Don't forget to save the page for changes to take effect.

Design Options

Design Options are powerful design controls available to all Visual Composer elements and page settings.You can use design options to:Control element margins, paddings, borders, and border-radiusApply background images, slideshows, gradient color, and videosAdd element CSS animationApply parallax effects, box-shadow, dividers, and make elements stickyTo access element design options, select "Edit" from the element controls (hover or right-click) and scroll down to Design Options.To access page design options (including Layout Builder), open page settings and switch to the Design Options tab.In Visual Composer, there are two types of Design Options:Container design options (row, column, section)Element design optionsContainer design options offer more features for customization (ex. parallax effects are available to container design options only).Responsive design optionsVisual Composer allows applying design options per device type.This means you can optimize your design for specific devices to ensure high speed and better usability.To modify design options per device, select "Custom" in the Device type dropdown (located at the top of Design Options).

Dynamic content

Dynamic content allows adding WordPress default field or custom field values to your pages and layouts.With dynamic content, you can display post titles, featured images, custom fields, fields from Advanced Custom Fields (ACF) and define the exact location and style. Once you update the values, all elements that display dynamic content will update their values automatically.Dynamic content is available to all Visual Composer premium users and the addon can be downloaded from the Visual Composer Hub.There are two ways on how to use dynamic content in Visual Composer:Page or post editor: display custom field values on your pages or postsLayout Builder: use dynamic content as placeholders when creating new layouts.Dynamic content in pagesAll Visual Composer elements that output either text or single image can be converted into dynamic content. In addition, background values in Design Options can be set to dynamic as well.What does it mean? As you insert a single image element, you can replace the static image with dynamic content to display your post feature image. The same can be done with background images in Design Option for all elements including rows and columns.You can also replace the text block with the value from your custom fields (ex. post title, ACF field). The same can be done with other text-type elements like headings, buttons, etc.To enable dynamic content, in the element editor form, click the dynamic content icon.Once the popup shows up, select the custom field you want to display.Note: You can select dynamic content from the same post or specify another post.Dynamic content in the Layout BuilderAs your work with the Layout Builder, you will need to use special dynamic content elements (available in Layout Builder) to create placeholders for different parts of your page. For example, specify the location of the title, featured image, and even content area.In the Layout Builder, dynamic content helps identify the locations where the placeholder must be replaced with the real content. Once you apply your layout to archives, pages, or posts, all placeholders will display specific post titles, dates, etc.Note: When creating an archive page layout in the Layout Builder, make sure to set 'Data source' as 'Dynamic query'. This will work as a dynamic placeholder to display your post list.