Visual Composer 文档

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.

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.

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.

Font Manager

Visual Composer Font Manager allows overwrite theme default fonts and define your own custom typography. The Font Manager addon is available to all premium license owners and can be downloaded from the Visual Composer Hub.You can access Font Manager from the Dashboard. To start with the Font Manager, enable it via toggle.With Font Manager enabled, you will have access to typography settings on the left and preview on the right. Font Manager allows to define typography for headings, paragraphs, links, quotes, menu, and buttons. To adjust typography, open corresponding accordion and adjust typography attributes.Important: Visual Composer Font Manager works with Visual Composer layouts and Starter theme.

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.

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).

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.

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.

Features