Visual Composer 文档 -

What is Visual Composer Hub?

The Visual Composer Hub is a cloud library of elements, templates, blocks, addons, and stock images.You can download the content from the Hub and use it for building websites in Visual Composer. The content of the Hub ranges from a simple text block element to full page templates.Based on your license (free or premium) you can access part or all content of the Hub. A user with a premium license has access to over 500+ assets and extended design options.How to access Visual Composer Hub?The Visual Composer Hub can be accessed in the following two ways:Navigate to the Visual Composer menu under the WordPress dashboard and select Visual Composer Hub.In the Visual Composer editor, click on the Hub icon from the navigation bar. Opening Hub from the editor is handy since you can instantly download and add content to the page.Visual Composer Hub contentThe Visual Composer Hub consists of:ElementsTemplatesBlocksAddonsHeadersFootersSidebarsStock ImagesGiphyWhile the premium license has access to all 500+ Visual Composer Hub assets, the free version has limitations to 40+ elements and templates.How to download content from the Visual Composer Hub?To download the assets from the Visual Composer, hover over the element or template and click on the download icon.To sort out free and premium elements, you can use the Hub menu located at the top. Just hover over each section (elements, templates, blocks, addons, etc.) and select either free or premium from the dropdown.All downloaded elements and templates will appear in your Add Content window, which you can find under the ‘+’ sign in the navigation bar.

Unsplash stock images

Visual Composer makes it easy for you to choose and use stock images. The premium license gives you access to the whole Unsplash stock image library right from the editor. All images on Unsplash are free of charge.Access the Unsplash image library from Visual Composer HubTo access the Unsplash stock image library and download images through the Visual Composer Hub:Open Visual Composer Hub;Navigate to Stock Images;Search for the image you want to use;Click on the image and choose the preferred size;The image will be added to the Media Library.Note: There are 3 available image sizes – Small, Medium, and Large. You can choose whichever size that you would like to have on your website.Access the Unsplash photo library through a content elementOpen the edit window of any content element that allows adding media (ex. Single image, Image Galleries, Hero Sections, etc.) or Design Options background image;Click on the “edit/add image” icon;Go to the Stock images tab;Search for the image you want to use;Click on the image and choose the preferred size;The image will be added to the Media Library.

GIPHY Integration

The Visual Composer Hub has integration with GIPHY allowing you to instantly add an animated image from giphy.com.In the Visual Composer Hub, the Giphy tab allows access to all images from the giphy.com library. All images can be downloaded to your media library and added to the site.To add an animated image from the Giphy library:Download the Giphy element from the hub and add it to a page.Edit the image and under the “Add images” window navigate to the Giphy tab.Use the search option and download the image of the required size.It will be downloaded to the media library and is ready to be assigned to the element.To add a custom .gif image:Download GIF animation element from the Hub.Add it to the page and select the .gif image from the media library.

Elements & templates

The Visual Composer Hub consists of a wide range of elements and templates. The content elements are the basic building blocks of the layout. Each element has a wide range of settings which makes unique styling possible.The templates on the other hand are pre-built layouts that can be added to a page. All templates consist of elements that can be adjusted to your liking. You can make minor changes or use templates like a base for your page layout.In the Visual Composer Hub, you can find the following template types:Full pagesBlocks (sections)HeadersFootersSidebarsActivating a premium license gives access to all elements and templates from the Visual Composer Hub. To download elements and templates, hover over the element or template and click on the download icon. Downloaded content will appear in your “Add Content” window. You can then add elements and templates to your page.

Addons

Addons gives you extra functionality to extend the capabilities of the Visual Composer Website Builder beyond elements & templatesList of Visual Composer AddonsVisual Composer Hub offers an addons section, where you can download exclusive extensions without installing additional plugins:Font Manager: Control the typography and font styles of your site, including links, paragraphs, headings, and buttons.Global Templates: Control content across multiple pages from a single point.Export/Import: Transfer Visual Composer templates, headers, footers, and sidebars between different sites. You can access the export/import option in Visual Composer Settings.Template Widget: Add Visual Composer templates in the sidebar via a widget.Gutenberg Template Block: Add any Visual Composer template to your Gutenberg layout via Visual Composer Template block.Dynamic Content: Insert dynamic content like post title, featured image, other WordPress fields, and custom fields in your pages without coding.Maintenance Mode: Enable maintenance mode across the site while making changes to it.Premium Design Options: Premium features that extend edit form capabilities for the Visual Composer Premium subscribers.Premium Icon Libraries: Extend Visual Composer icon picker with additional icon libraries such as Entypo, Batch, Dripicons, etc.Theme Builder: Design custom layouts for pages, posts, archives 404-pages and replace theme default layouts with custom designs.Element Presets: Creating reusable elements when the same settings are used again.Popup Builder: Create popups and manage their triggers (ex. on click, exit intent, page depth, page load).Role Manager: Control access to the editor based on the WordPress user role or lock certain elements on your page.How to download AddonsTo download and install addons:Open Visual Composer Hub;Navigate to addons section;Click on “Download Addon”;The addon will be downloaded and automatically installed on your siteWhen activating Premium, there are addons that will be downloaded and installed automatically (ex. Theme Builder, Premium Icon Libraries, and Premium Design Options).

WooCommerce

Visual Composer Website Builder has integration and is fully compatible with WooCommerce. The biggest e-commerce plugins for WordPress.You can use different WooCommerce elements to build a site in Visual Composer:Single product pageCart pageAdd to cart buttonCheckout pageArchive pageAccount PageFeatured product pageBest selling productRelated productRecent productTop-rated productYou can also edit your single product page using Visual Composer by enabling it in the Role Manager:

TranslatePress

Visual Composer Website Builder integrates fully with TranslatePress plugin to create multi-lingual sites. Using it, you can translate any Visual Composer element or template instantly from the frontend. The language switcher element available in the hub makes it easier for a website visitor to switch languages.Once the TranslatePress plugin is installed, navigate to Settings – TranslatePress and add the required language.Translating the Page:To translate a page, click on the Translate Page option in the top bar while viewing the page:This will open the translation interface on left. We can now hover onto the respective element on right and select the translate option next to it:In the interface on left, we now see an option to add a corresponding translation for it:This is also applicable to the image elements where you can set different images based on the language. Once the translations are added, save the change.Adding a Language Switcher:To add a language switcher, download the TranslatePress Language Switcher element from the Visual Composer Hub and add it onto the page:

Others

The Visual Composer integrates with a variety of plugins which makes it easier to display their output. These elements can be downloaded from the Visual Composer Hub.To use them, the respective third-party plugin needs to be installed. Following are the plugins which Visual Composer integrates with:WooCommerceAdvanced Custom FieldsTranslatePressGravity FormsContact Form 7Caldera FormsCaptainFormNinja FormsWP FormsEnvira GalleryEssential GridEventOn CalendarKreatura SliderMailChimp for WordPressNextGen GallerySlider RevolutionwpDataTables

Gravity Forms

Visual Composer makes it easier to add a form created using the Gravity Forms plugin through its interface.Once the Gravity Forms plugin is installed and activated, a form can be created under Forms – New form:You can check the detailed process of creating form fields on the Gravity Forms website. Upon saving the form, the next step is to add it to the page.To add a form, download the Gravity Forms element from the Visual Composer Hub:Upon adding it onto the page, you can select the form which was previously created. You can also choose to show/hide the title and description in its settings.

ACF

Advanced Custom Fields allows adding custom fields (also called metadata) to your WordPress site.Visual Composer provides the Advanced Custom Fields element which can be downloaded from the Visual Composer Hub. The element allows displaying custom fields from the Advanced Custom Fields.As a developer, you can also add an extra class name to the element and use local or global CSS to style the output of your field to your liking.In addition to that, Visual Composer offers Dynamic Content Fields feature which allows you to use custom fields from Advanced Custom Fields.