Thank you for purchasing a license of “Composium – WP Bakery Page Builder Extensions Addon”.
A lot of time and effort went into this plugin and I am hopeful that you will enjoy its features and additions to “WP Bakery Page Builder”. Every element is crafted with you (the end user) in mind and the plugin receives constant updates and improvements to existing elements, as well as adding new elements and features.
This plugin is an add-on to the popular “WP Bakery Page Builder” page builder plugin for WordPress, and as such will NOT work without the base plugin installed and activated. There is also no association between the author of this plugin and the developers of WP Bakery Page Builder. If you have any question regarding the “WP Bakery Page Builder” plugin itself, please contact the respective author (“WPBakery”) for support.
Please install the plugin like you would install any other plugin in WordPress. You can either upload the extracted plugin directory directly to you server using any FTP program, or use the WordPress Plugin Installation routine.
Due to the overall file size for the plugin package, and to avoid any issues with insufficient upload or timeout limits, it is highly recommended to install the plugin via FTP.
1. In your WordPress Admin panel, click on “Plugins” -> “Add New”
2. Click on “Upload”
3. Click on “Browse” and navigate to the folder on your harddrive where the plugin file (ZIP version; the file as downloaded directly from CodeCanyon) is located. Select the plugin file and click on “Open” in your popup window.
4. Click on “Install Now”
5. Wait until WordPress finishes the upload and installation process.
6. Click on “Activate Now”
1. Extract the ZIP file you received from CodeCanyon. The file should include a folder named “ts-visual-composer-extend”
2. Using any FTP program, navigate to your WordPress installation and find the folder “wp-content”. Open that folder and (inside) find the folder “plugins”. Now open that folder and you should see a listing of all currently installed plugins for your WordPress installation.
3. Upload the complete plugin folder you extracted in step 1 into the “plugins” folder you just navigated to via FTP. Ensure, that the plugin folder is uploaded directly into the “wp-content/plugins” folder and not accidentally into one of the existing folders for one of the existing plugins.
4. Once the upload is finished, log into your WordPress admin section and go to the plugins section. You should now see “Composium – WP Bakery Page Builder Extensions” listed as available plugin. All that is left is to activate it.
If you have problems installing the plugin, follow the step by step instructions you can find here.
If you have followed all these steps correctly, and your system passed the memory check, the plugin should now be installed and functional.
After you successfully activated the plugin, it will take you to a dedicated page “About Composium”, providing you with some initial guidance and summary information about the plugin.
You should also see a new menu items in your WordPress backend, named “Composium” (see screenshot; the screenshot image shows all possible sub menu items, but not all will be available after initial plugin installation, as some features must first be enabled in the plugin settings).
Depending upon your individual WordPress setup and internal size limits, you might encounter some problems/errors when attempting to install or activate the plugin. The most common ones would be the following:
When using the standard WordPress routine, please ensure that your WordPress upload and post size limits are large enough in order to accommodate the size of the plugin file. Otherwise, you will have to upload the plugin via FTP or to increase the restricting limits first.
If during the standard install routine you encounter a white page or a message asking you “Are you sure you want to do this?”, your upload / post size limits are most likely not sufficient for the file size and you should opt for the FTP method.
In order to increase upload and post size limits for WordPress, you need to change some key system files, which allow you to set a custom upload value. Please follow the instructions provided in this article:
http://www.wpbeginner.com/wp-tutorials/how-to-increase-the-maximum-file-upload-size-in-wordpress/
Any basic Google search will also provide you with more detailed information. In general, you need to add the following lines to your php.ini file:
upload_max_filesize = 32M post_max_size = 32M
When activating the plugin, it will conduct a basic memory check in order to ensure that your system is having sufficient memory left to actually handle the plugin and all of its elements and features. If that check determines that there is NOT sufficient memory, it will prevent the plugin from getting activated.
That is done in order to prevent any WordPress crashes due to memory overflows, which would otherwise result in the so-called “White Screen of Death”. In that case, a critical error message (see below) will be shown instead, asking you to contact our support for further assistance. Of course, increasing your PHP server memory will fix the problem. There is a section dedicated to that process further down on this page.
Unfortunately, and to prevent a potential system crash, the plugin “Composium – WP Bakery Page Builder Extensions Addon” could not be activated. It seems your available PHP memory is already close to exhaustion and so there is not enough left for this plugin.
Whenever we release an update for this plugin, there are multiple ways of getting informed about the update availability, and also how to obtain the update package itself. In the plugin settings page, you will find an option to enable/disable an update notification message and page, which will add an update message in to the top admin bar, as well as creating a new page in the plugin’s “Composium” menu entry, showing information about the update.
Provided you also entered and confirmed your license key in the plugin settings, you will also find an option to enable/disable an automatic update procedure for the plugin, using the native WordPress update routine that is used for plugins from the official WordPress repository.
When the update notification feature is enabled, the plugin will check for available updates via intermittent calls to our server (every 12 hours). If our server returns that an update is available, a corresponding message/link will be added to the top admin bar, and a new page will be added to the “Dashboard” menu in your WordPress.
That new page will provide you with information about where/how you can obtain the update package, a summary about the changes the update includes, and basic instructions about how to apply the update to your system.
The message and page will remain active until you either applied the update, or you manually disable the notification feature in the plugin settings.
If you entered and confirmed your license key for the product in the plugin settings, the automatic update routine will be enabled automatically; you can disable the feature in the plugin settings, if you don’t want to use it.
Just like the notification feature, the plugin will intermittently (every 12 hours) contact our server to check for an available update. If an update is available, you will see a corresponding addition to the plugin on the official plugin listing page in WordPress. Sometimes, the update information will also include an addition, informing you about some extra requirements, such as the need to ensure that you are using a specific (minimum) version of WP Bakery Page Builder itself.
The official “Updates” page WordPress is maintaining in your “Dashboard” menu item will then also show the plugin as having an update available. You can then update the plugin via WordPress itself, simply by checking the checkbox next to the plugin and clicking on the “Update Plugins” button below the plugin listing.
Due to the file size of the plugin, the auto-update routine might not be able to complete on some WordPress installs, if the internal memory and upload limits for WordPress are set too low. In that case, a manual update via FTP should be used.
Whenever a new version of the plugin is released, it will be made available in our support forum, where you can access it, using the dedicated “Downloads” page. Critical updates will also be made available on CodeCanyon as download.
A manual update procedure is very similar to the manual installation process via FTP, as described above. The only difference will be that on your server, you will already have a folder “ts-visual-composer-extend”, because the plugin is already installed.
So you would simply replace all files on your servers with their new versions. All plugin settings are secure from that procedure since the plugin is storing those in the actual WordPress database, so no settings will be lost.
Starting with its initial release, you also have the option to use an automated update process through WordPress. In order to use that routine, you are required to enter and confirm your license key in the plugin settings first, which will activate the auto-update feature.
Once the auto-update feature is active, the plugin will notify you of any available update from within WordPress, like any other plugin does that is coming from the official WordPress repository.
You can then update the plugin using the built-in WordPress update routine for themes and plugins. Due to the plugin file size, please ensure that your WordPress internal post-size, upload limits and remaining PHP memory are sufficient to accommodate the update file. If the automated update fails, please use the FTP method instead.
Currently, this plugin provides more than 140 new elements to WP Bakery Page Builder. By default and in order to keep performance at its best, only the most commonly used elements are actually activated. In order to use any of the other elements, you will need to activate them first in the plugin settings and save the settings.
When going to the plugin’s settings page, navigate to the “Elements: Main” tab, which will give you access to all standalone elements that are part of this addon.
Due to the large number of available elements, the main elements are grouped in sub-categories, which can easily be navigated via the provided sub-tabs, located in the section “Standard Elements”. Simple enable or disable the elements based on your needs.
You will also find additional sections, providing access to other elements that are either dependent upon other 3rd party plugins that have to be purchased and installed separately, or elements that have been deprecated/retired.
Aside from the main (general) elements, this plugin also includes some very specialized elements that will only be used by users with very specific needs. Those element will simply be referred to as “Other Elements” and can be enabled on the settings page, using the “Elements: Other” tab.
Currently, the elements available there are as follows:
The plugin includes elements dedicated to the popular WooCommerce plugin. Those elements will only be available if an activated WooCommerce plugin (v2.x) has been detected. Once detected, you will find a new section in the plugin settings, where you can control, which WooCommerce elements you want to to use.
All custom WooCommerce elements that are part of this plugin are by default enabled and need to be manually enabled before you can use them. Enabling or disabling the WooCommerce elements happens the same way, as described above for the main elements of this plugin.
Simply find the new tab “Elements: WooCommerce” in the plugin’s settings page, where you can control which WooCommerce elements of this plugin you want to use.
The plugin includes elements dedicated to the popular bbPress plugin. Those elements will only be available if an activated bbPress plugin (v2.x) has been detected. Once detected, you will find a new section “Elements: bbPress” in the plugin settings, where you can control, which bbPress elements you want to to use.
All bbPress elements represent the standard shortcodes that are already included in bbPress. “Composium – WP Bakery Page Builder Extensions Addon” will not add any new features or stylings to those elements; it will just provide you with a convenient way to utilize those standard shortcodes.
If you have issues with functionality or styling of those standard shortcodes, you need to consult bbPress support (and/or your theme author, in case bbPress came built-in with your theme).
If the elements you enabled in the plugin settings do not show up in WP Bakery Page Builder, when editing a page or post, it is most likely that you are using the so-called “User Roles Manager” that is part of WP Bakery Page Builder itself (not part of this addon).
If you do use that native WP Bakery Page Builder feature, you need to assign all newly added elements to the respective user roles that are actually allowed to use the elements.
You can access the “User Roles Manager” from within the settings page for WP Bakery Page Builder itself; either by clicking on the sub-menu item “Role Manager”, or the matching tab on the main settings page.
Once you are within the settings for the “User Roles Manager”, scroll to the section “Elements”, which will provide you with a listing of all elements that are registered with WP Bakery Page Builder. Simply mark the elements the respective user role is allowed to use, save the settings, and provided the logged in user has the required user role, all assigned elements should be available when editing a page or post.
“Composium – WP Bakery Page Builder Extensions Addon” gives you the option to expand the internal row and columns settings provided by the original WP Bakery Page Builder with additional settings. These additional options allow you to add background effects to rows, such as parallax, gradient colors and YouTube video backgrounds. You will also be able to add viewport animations to rows and columns.
In order to avoid conflicts with similar plugins or theme settings, the extended row and column options are by default disabled and must be manually enabled in the plugin settings. Before doing so, please ensure that your theme or other active add-on plugins for WP Bakery Page Builder aren’t already providing similar options, as WP Bakery Page Builder is limited in how many extended options can successfully be processed.
While the additional options for columns are limited, the options that can be added to the row settings are very extensive. Adding all available extended row options can cause some delays when opening a row settings panel, as all those new settings have to be processed by WP Bakery Page Builder.
For that reason, it is possible to “build” a custom set of extended row options, using the extended options within the plugin’s settings page.
“Composium – WP Bakery Page Builder Extensions” includes several custom post types that are associated with some of the elements. By default, all custom post types are disabled upon plugin installation and must therefore be enabled manually if you want to use them.
In the plugin settings section (“Composium”), you will find a page called “Settings”, which includes multiple tabs in order to control a variety of plugin features and options. The first tab is called “General Settings” and includes a section to enable or disable custom post types. Please select the post types you are planning to utilize and save the settings. After that, you will notice the new custom post types in your admin section along with the matching elements in WP Bakery Page Builder.
This plugin (currently) includes 16 different icon fonts (more coming with future updates), giving you access to over 4,600 different icons. You can disable the fonts you are not planning to use to save bandwidth and server load. For that reason, only the “Font Awesome” font is activated once you first installed and activated the plugin. In order to use any of the other fonts, use the font manager in the plugin settings to activate or deactivate icon fonts.
When using the “date” only or “date/time” target for the countdown, you also have the option to provide a separate shortcode as value for the target date/time, instead of directly entering a date/time. That shortcode should dynamically generate the desired date/time in the required format, as the countdown will otherwise fail to work.
When using the shortcode option, you can NOT cache the page with the countdown, as WordPress will otherwise not be able to update the shortcode value anymore. If WordPress is loading a cached version of the page, the generated date/time will always stay the same.
The countdown element is very flexible when setting the date and/or time it is supposed to count down to. But sometimes, things are a little more complicated and the target date/time should be set dynamically upon page load.
By using another shortcode (which is basically just a function) to dynamically generate the target date and time, it is possible to do so, since the element allows you to add the syntax for another shortcode as value for the target date/time.
The following shortcode is one such example: It will always count down to the next Wednesday, 7:00 PM. If today is Wednesday, it will count down to next Wednesday’s date; if today is Tuesday, it will count down to tomorrows date.
// Define Shortcode Callback Function
function TS_VCSC_NextDayOfTheWeek($atts) {
ob_start();
extract(shortcode_atts(array(
"day" => "Monday",
"time" => "false",
"hours" => 0,
"minutes" => 0,
"seconds" => 0,
), $atts));
// Check Time Syntax
if ($time == "true") {
if (($hours >= 0 && $hours <= 24) && ($minutes >= 0 && $minutes <= 59) && ($seconds >= 0 && $seconds <= 59)) {
$time = $time;
} else {
$time = "false";
}
}
$finddate = strtotime("next " . ucfirst($day));
if ($time == "true") {
$maketime = mktime($hours, $minutes, $seconds, date('m', $finddate), date('d', $finddate), date('Y', $finddate));
} else {
$maketime = mktime(0, 0, 0, date('m', $finddate), date('d', $finddate), date('Y', $finddate));
}
if ($time == "true") {
// Required Output: dd/mm/yyyy hh:mm AM/PM
echo date('m/d/Y h:i A', $maketime);
} else {
// Required Output: dd/mm/yyyy
echo date("m/d/Y", $maketime);
}
$myvariable = ob_get_clean();
return $myvariable;
}
// Register Shortcode with WordPress
add_shortcode("TS_VCSC_NextDayOfTheWeek", "TS_VCSC_NextDayOfTheWeek");
// Shortcode Usage Example (in Countdown Element Settings)
[TS_VCSC_NextDayOfTheWeek day="Wednesday" time="true" hours="19"]Version 2.6.0 of “Composium – WP Bakery Page Builder Extensions” introduced the option to define the animated values for the circle and the label inside the circle by using an external shortcode, provided of course, that the utilized shortcode creates a valid integer (numeric) value.
This shortcode randomly creates a number between 1 and 100, that can be used as the percent value for the circle and for the label inside the label.
function TS_VCSC_GetRandomPercent($atts){
ob_start();
extract(shortcode_atts(array(
"min" => "1",
"max" => "100",
), $atts));
$result = rand($min, $max);
echo $result;
$myvariable = ob_get_clean();
return $myvariable;
}
add_shortcode("TS_VCSC_GetRandomPercent", "TS_VCSC_GetRandomPercent");This shortcode calculates the expired and/or remaining seconds of the day. The circle shows the expired seconds, while the label inside the circle shows the remaining seconds of the day.
function TS_VCSC_GetSecondsOfDay($atts){
ob_start();
extract(shortcode_atts(array(
"factor" => "1",
"remaining" => "false",
"aspercent" => "false",
), $atts));
$secondsday = 24*60*60;
$timestamp1 = strtotime(date("d M Y"));
$timestamp2 = time();
$result = round(($timestamp2-$timestamp1)*$factor);
// Calculate Remaining Seconds in Day
if ($remaining == "true") {
$result = $secondsday - $result;
}
// Convert Seconds in Percent
if ($aspercent == "true") {
$result = round($result / $secondsday * 100);
}
echo $result;
$myvariable = ob_get_clean();
return $myvariable;
}
add_shortcode("TS_VCSC_GetSecondsOfDay", "TS_VCSC_GetSecondsOfDay");This custom shortcode will retrieve the number of comments for either all posts or one specific post, identified within the shortcode via post ID.
function TS_VCSC_GetNumberComments($atts){
ob_start();
extract(shortcode_atts(array(
"id" => "",
"sitewide" => "false",
), $atts));
if ($sitewide == "true") {
$comments = wp_count_comments($id);
} else {
$comments = wp_count_comments();
}
echo $comments->total_comments;
$myvariable = ob_get_clean();
return $myvariable;
}
add_shortcode("TS_VCSC_GetNumberComments", "TS_VCSC_GetNumberComments");This custom shortcode retrieves the number of posts or pages on the site, using their status (“publish”, “draft”, etc.).
function TS_VCSC_GetNumberPosts($atts){
ob_start();
extract(shortcode_atts(array(
"type" => "post",
"status" => "publish",
), $atts));
$count_posts = wp_count_posts($type);
echo $count_posts->$status;
$myvariable = ob_get_clean();
return $myvariable;
}
add_shortcode("TS_VCSC_GetNumberPosts", "TS_VCSC_GetNumberPosts");This custom shortcode calculates the number of remaining days until a (future) date.
function TS_VCSC_GetDaysUntilDate($atts){
ob_start();
extract(shortcode_atts(array(
"day" => "1",
"month" => "1",
"year" => "2018"
), $atts));
$date = mktime(0, 0, 1, (int)$month, (int)$day, (int)$year);
$days = (isset($date)) ? floor(($date - time()) / 60 / 60 / 24) : 0;
if ($days >= 0) {
echo $days;
} else {
echo 0;
}
$myvariable = ob_get_clean();
return $myvariable;
}
add_shortcode("TS_VCSC_GetDaysUntilDate", "TS_VCSC_GetDaysUntilDate");“Composium – WP Bakery Page Builder Extensions” gives you the option to expand the internal Row and Columns settings provided by the original WP Bakery Page Builder with additional settings. These additional options allow you to add background effects to rows, such as parallax, gradient colors and YouTube video backgrounds. You will also be able to add viewport animations to rows and columns.
Please note that advanced effects such as parallax or full width images will strongly depend upon your theme and/or framework and will automatically be disabled on mobile devices in order to ensure performance and compatibility.
If you added backgrounds to your rows through this plugin before WP Bakery Page Builder released its v4.1.0, you will have to reapply the background settings again. The reason being that the page builder made some significant changes to its backend row and column settings by introducing tabs. In order to be compatible with those improvements, we had to rewrite part of the plugin and rename some parameters. We apologize for the inconvenience!
We realize that there are other extension plugins available that provide you with the same or maybe even better options. Also, sometimes, when WP Bakery Page Builder is part of your theme, the theme authors already included similar options with their theme, which should always have priority since those are specifically made for the theme. For those reasons, extended row and column options are by default disabled and must be manually enabled in the plugin settings.
Furthermore, using multiple plugins or theme internal features that expand row and column options can cause conflicts when used with each other for the same row / column. These are not errors with the plugin or theme, but rather due to the fact how the original WP Bakery Page Builder plugin allows developers to hook into the process of creating rows and columns, which is limiting the number of simultaneous hooks into the routine.
Until the author of WP Bakery Page Builder changes the internal hook, that hook can only be used once per row / column, which means that whatever plugin or theme feature uses it first, will block all other subsequent attempts to use the hook for the same row or column. Therefore, all other plugins or theme features attempting to use that hook will fail.
In order to avoid any conflicts between “Composium – WP Bakery Page Builder Extensions” and other plugins or your theme extending row / column settings as well, the row / column features for “Composium – WP Bakery Page Builder Extensions” must be manually enabled in the plugin settings page (click on image above).
The background of an element is the area covered by the width and height of that element (whether those dimensions are set explicitly, or the content dictates them); it also includes the area covered by padding and borders. A background-color (or background-image) that’s applied to an element will appear beneath the foreground content of that element, and the area covered by the padding and border properties for the element. This coverage area is evident where an element has transparent (or dotted or dashed) borders, and the background is seen beneath the borders (or between the dots).
The value “scroll” allows the background-image to scroll along with the document. When it’s used on an element that has a scrollbar the value scroll ensures that the background-image doesn’t move with that element’s scrolling mechanism, but instead scrolls with the document’s scrolling mechanism.
The value “fixed” stops the background-image from scrolling with its containing block. Note that although the fixed background-image may be applied to elements throughout the document, its background-position is always placed in relation to the viewport. This means the background-image is only visible when its background-position coincides with the content, padding, or border area of the element to which it is applied. Thus, a fixed background-image doesn’t move with elements that have a scrollbar because it’s placed in relation to the viewport.
In order for the “Row Parallax” or “Fixed Image” effect to work properly, you need to use an image that is larger than the row it is used for. For up/down parallax and fixed image scroll, the image should have at least 1.5x the height of the row’s height, and for left/right parallax, the image should be at least 2x the width of the row. Depending upon parallax speed (how much is the image moved per mouse scroll) and the actual row dimension, you might even need a larger image.
If the image dimensions are too close to the dimensions (width / height) of the row or you select a faster parallax speed, the image won’t have sufficient “material” to “scroll” with and you end up with an image that suddenly ends, just showing white space.
“Composium – WP Bakery Page Builder Extensions” includes a fully featured premium lightbox solution for your images and a variety of video sources (YouTube, Vimeo and Daily Motion), that is deeply embedded with the plugin. While most settings should be self-explanatory, the following tabs will provide some more in-depth information.
By default, the included lightbox uses a simple black overlay, without any opacity. You can change the overlay color and/or opacity and even apply a noise pattern in the “Lightbox Settings” section, located in the plugins settings page.
One feature of the lightbox is that it automatically creates a backlight effect for each image. While the backlight color might seem random, it is in fact based on the most saturated color of the image, which isn’t always the most used color of the image. The plugin allows you to completely and globally remove the backlight effect or to apply a global backlight color, using the appropriate options in the plugin’s settings page.
If you don’t like the auto-generated backlight color but also don’t want to apply global settings, you can define your own color for most of the elements that use the lightbox, or define a common color for the lightbox gallery element. In order to do so, just locate the corresponding option that you will find in the settings panel for each element that can utilize the lightbox.
The plugin provides you with a couple of other setting options, that might be relevant to you, although it is usually best to leave those settings at the default values:
Starting with v2.0 of the plugin, you will notice some custom post types in your back-end admin panel. Currently, there are four custom post types available: “CP Team”, “CP Testimonials”, “CP Skills” and “CP Timelines”. These post types are used to populate corresponding elements with data. That way, the data has to be entered only once and can be used multiple times all over your page. Also, changes to the date will then be reflected on all elements at once.
If your theme already provides you with similar post types and even provides you with matching elements for WP Bakery Page Builder, you should probably utilize those instead as they are guaranteed to match your theme and work with it flawlessly. By default, all custom post types types that come with “Composium – WP Bakery Page Builder Extensions” are disable upon plugin installation and must be manually activated in the plugin settings page.
“Composium – WP Bakery Page Builder Extensions” allows you to import one custom icon font, provided that font has been created and processed by the IcoMoon app. The IcoMoon app can be found here.
The custom font upload requires that your server has CURL as well as some PHP functions (allow_url_fopen / file_get_contents / file_put_contents / unzip_file) enabled.
In order to be able to import a custom font, your system / server must have at least one of the following functions enabled:
1) file_get_contents()
2) cURL
The plugin will test the existence of these function and will disable the import feature if none are detected.
If the font pack import was successful, you will receive a notification and the page will refresh. After the page has reloaded, you will see some basic information about the font pack you just imported as well as a preview of all icon included in that font pack.
While the IcoMoon app that you used to build your icon font should (in most cases) remember the font when you visit it again, you can download the JSON file and re-import back into the IcoMoon app if you need to make changes to your font or want to add more icons. The download button also allows you to download the original .zip file that you uploaded in case you need it somewhere else.
Starting with v4.0.0 of this plugin, the “TS Fancy Tabs” element allows for a so-called “deeplinking”, which means it is possible to link to each tab directly, using the tab ID.
Each tab will automatically receive a fixed permanent ID name (random numeric combination), which can NOT be changed. You can retrieve the ID from the individual tab settings panel, using the “Other Settings” section, where you will find a setting option named “Tab ID” (for example, “1429206997205-12-9”).
In order to link to that tab, you will use the numeric ID, but MUST prefix the numeric ID with the text string “tab-“, in order to create the final ID that is used by the underlying script in order to identify a tab:
Numeric ID: “1429206997205-12-9“
Required Prefix: “tab-“
Final ID: “tab-1429206997205-12-9“
You can then use the final ID as anchor for a link on the page; remember to also use the “#” sign when using an elements ID as target for a link.
<a href="#tab-1429109016792-2-9" title="" target="_self">Open Tab #3</a>
The “Downtime Manager” module was introduced with v5.0.0 of the plugin, and is designed to allow you to create custom maintenance pages, which can then be used to set your overall site into a downtime or maintenance mode.
By default, the “Downtime Manager” module is disabled and must be manually enabled in the plugin settings page. As the individual downpages / maintenance pages are to be created via custom post types, there are two different locations within the plugin’s settings page to enable this module, but enabling it once using either one of those locations will be sufficient.
Location #1:
“Composium” -> “Settings” -> tab “General Settings” -> section “Website Downtime Manager (BETA)”
Location #2:
“Composium” -> “Settings” -> tab “Custom Post Types” -> section “Website Downtime Manager (BETA)”
Once you enabled the “Downtime Manager” module and saved the settings, you will find a new menu entry “Downtime Manager” in the “Composium” section of you WordPress admin menu, as well as a new custom post type “CP Downpages”.
The custom post type “CP Downpages” is used to create the individual downtime / maintenance page(s), and you need to create at least one such page first, before you can set your site into downtime / maintenance mode.
Once you created such a page, you can use the setting options provided in the “Downtime Manager” section to set your page into downtime / maintenance mode.
In order to create any custom downpage / maintenance page, you will be using the new custom post type “CP Downpages”, which you should find as new entry in your WordPress admin menu.
WP Bakery Page Builder itself will automatically be enabled for this custom post type, so you will find the familiar “Backend Editor” button for WP Bakery Page Builder available to you. Alternatively, you can of course design a basic page, using just the default WordPress editor.
No matter which editor type you chose, you will find an additional section below the editor, which will allow you to define some aspects of this particular downpage / maintenance page, such as overall layout (boxed layout, full width), and other basic styling options.
By definition, a downpage / maintenance page does not use any theme related features and stylings, including the main menu. As such, this plugin will prevent WordPress from loading any theme related files (CSS + JS), when rendering the downpage / maintenance page for your viewers.
Some themes purchased on “ThemeForest” include a bundled version of WP Bakery Page Builder, and provide their own custom elements to WP Bakery Page Builder. Unless those custom elements are placed into a dedicated plugin (outside of the theme folder), those elements will not render/work correctly, without those CSS/JS files.
The downpage settings do include an option to load all theme related CSS/JS files, but based on the theme’s coding, the theme’s JS file can cause problems, if it isn’t coded correctly and not checking if theme features that are usually present (like the menu), are actually present.
Once you created at least one downpage / maintenance page, using the custom post type “CP Downpages”, you will be able to set your site into an actual downtime / maintenance mode, using the controls provided in the “Downtime Manager” settings, which you will find in the plugin’s main menu entry.
While this section will provide you with information about how to manually trigger the tooltip on inline content, any such usage is NOT part of the official scope of this plugin and therefore not covered by any support.
In order to manually apply the included tooltip script to inline text strings, you require at least v5.1.0 or higher of the plugin.
While “Composium – WP Bakery Page Builder Extensions” includes a variety of elements that can utilize an optional tooltip, WP Bakery Page Builder does not provide an interface to easily apply a tooltip to a specific text string within an element or a larger text string, when using the basic “Text Block” element, or any other element using a tinyMCE text editor for content.
If you want to add a tooltip to any such text strings, you will have to resort to some manual basic coding, by adding a specific class name and some data attributes to the text string that is supposed to use the tooltip.
Naturally, this can only be done for elements that allow you to provide content by either entering or manipulating the HTML code directly, for example the tinyMCE editor you will find in many element. Have in mind that you need to switch the editor from “Visual” to “Text” in order to change the underlying HTML code for the content.
For more information about how to do so, please follow the instructions provided below:
By default, this plugin will only load a JS/CSS file, if an element actually requires it, which means the loading of a specific file is triggered by the shortcode function that renders the element.
When manually adding a tooltip to an inline text string, the plugin does not know that it needs to load the tooltip files, unless the element that contains the inline text string, or another element on the same page, happens to be able to utilize the tooltip script by itself, and is set to use a tooltip in general, which would then trigger the tooltip files to be loaded.
But in many instances, that might not be the case, and the files are simply not getting loaded, preventing the tooltip from actually working.
In order to ensure that the tooltip files are loaded, you can set the plugin to simply just load only the tooltip files on any page or post. You will find a corresponding setting option for that in the settings section of the plugin:
“Composium” -> “Settings” -> tab “External Files” -> option “Load Tooltips On All Pages”
The code below provides the most basic example as to how to apply a manual tooltip to an inline text string, by assigning one class name and one data attribute to a SPAN element.
Hover over <span class="ts-has-tooltipster-tooltip" data-tooltipster-text="This is just a test for the tooltip!">this</span> word, in order to see a tooltip.
Hover over this word, in order to see a tooltip.
The tooltip can be applied to any valid DOM element type, as long as the class name “ts-has-tooltipster-tooltip” is assigned to the element, and the data attribute “data-tooltipster-text” is present, which holds the actual tooltip content.
Those two attributes will result in the default black tooltip style, using a “swing” entry animation. But you can further “finetune” your tooltip, by using additional (optional) data attributes.
The following is a listing of all available data attributes that can be used to control the tooltip:
Because the content/value for data attributes is stored between exclamation marks (“), you can NOT use exclamation marks as content/value for a data attribute itself, as you would otherwise generate an invalid HTML markup.
The “data-tooltipster-html” attribute only accepts a “true” or “false” value and is by default set to “false”. When using this attribute, and setting it to “true”, the tooltip script will expect the tooltip content to be provided in a base64 encoded format, in order to allow for using HTML code within the tooltip content.
Otherwise, if the data attribute is set to “false” or omitted, the tooltip script will expect only a basic text string without any additional HTML code as tooltip content.
The “data-tooltipster-text” is the only mandatory data attribute, as it contains the actual content for the tooltip. If you set the “data-tooltipster-hml” to “true”, the content for the “data-tooltipster-text” attribute must be encoded via base64 routine, as the tooltip script will decode whatever content is provided.
The “data-tooltipster-title” attribute simply allows you to add a title to the tooltip. It is by default empty (omitted) and only accepts a basic text string as content.
The “data-tooltipster-position” simply defines where the tooltip should be placed in relation to the text string that triggered the tooltip. By default, the position is set to “top”. The available options here are:
The “data-tooltipster-theme” attribute will allow you to assign a different theme (background + font color combination) to the tooltip. The available options here are:
The “data-tooltipster-animation” attribute will allow you to define a different entry animation for the tooltip. The available options here are:
The “data-tooltipster-arrow” attribute only accepts a “true” or “false” value, and simply indicated whether the toolip should contain a small arrow indicator, pointing towards the text string that triggered the element.
The attribute is by default set to “true” and can be omitted if you want to keep the arrow indicator.
The “data-tooltipster-offsetx” attribute allows you to assign an optional horizontal offset (x-axis) to the tooltip, in order to better control its position in relation to the inline text string that triggered the tooltip.
By default, the offset is set to “0” (zero), but can be either a positive or negative number, representing the number of pixels that the tooltip should be moved horizontally.
The “data-tooltipster-offsety” attribute allows you to assign an optional vertical offset (y-axis) to the tooltip, in order to better control its position in relation to the inline text string that triggered the tooltip.
By default, the offset is set to “0” (zero), but can be either a positive or negative number, representing the number of pixels that the tooltip should be moved vertically.
While this section will provide you with information about how to manually trigger the lightbox on inline content, any such usage is NOT part of the official scope of this plugin and therefore not covered by any support.
In order to manually apply the included lightbox script to inline text strings, you require at least v5.1.0 or higher of the plugin.
While “Composium – WP Bakery Page Builder Extensions” includes a variety of elements that can utilize the built-in lightbox, WP Bakery Page Builder does not provide an interface to easily apply a lightbox to a specific text string within an element or a larger text string, when using the basic “Text Block” element, or any other element using a tinyMCE text editor for content.
If you want to add a lightbox to any such text strings, you will have to resort to some manual basic coding, by adding a specific class name and some data attributes to the text string that is supposed to use the lightbox.
Naturally, this can only be done for elements that allow you to provide content by either entering or manipulating the HTML code directly, for example the tinyMCE editor you will find in many element. Have in mind that you need to switch the editor from “Visual” to “Text” in order to change the underlying HTML code for the content.
For more information about how to do so, please follow the instructions provided below:
By default, this plugin will only load a JS/CSS file, if an element actually requires it, which means the loading of a specific file is triggered by the shortcode function that renders the element.
When manually adding a lightbox to an inline text string, the plugin does not know that it needs to load the lightbox files, unless the element that contains the inline text string, or another element on the same page, happens to be able to utilize the lightbox script by itself, and is set to use the lightbox in general, which would then trigger the lightbox files to be loaded.
But in many instances, that might not be the case, and the files are simply not getting loaded, preventing the lightbox from actually working.
In order to ensure that the lightbox files are loaded, you can set the plugin to simply just load only the lightbox files on any page or post. You will find a corresponding setting option for that in the settings section of the plugin:
“Composium” -> “Settings” -> tab “External Files” -> option “Load Lightbox On All Pages”
The lightbox script that is built into “Composium – WP Bakery Page Builder Extensions” is able to display a variety of content (images, iframe, modal, video, etc.) within the lightbox. Depending upon which type of content you want to show, the required HTML markup for the manual trigger will be a little different.
The inline trigger element must be wrapped with a link anchor (“a”), which will hold the required class name and (data) attributes. What content is shown inside the required link is fully up to you, however.
Below you will find some examples for the most common usages for the lightbox script.
Required Class Name:
ts-custom-lightbox-media
Required Attributes:
The “href” attribute simple contains the path to the image you want to show within the lightbox
For an image to be opened within the lightbox, the “data-type” attribute is not required. If it is provided anyway, it needs to be set to “image”
Markup For Lightbox Trigger:
<a href="https://www.composium.krautcoding.com/wp-content/uploads/2016/11/Germany-Collection-23.jpg" target="_blank" class="ts-custom-lightbox-media" data-title="This is the image title" rel="inlinetriggers" data-thumbnail="https://www.composium.krautcoding.com/wp-content/uploads/2016/11/Germany-Collection-23-300x225.jpg">
<img src="https://www.composium.krautcoding.com/wp-content/uploads/2016/11/Germany-Collection-23-300x225.jpg" style="display: block; width: 100%; height: auto;">
</a>Required Class Name:
ts-custom-lightbox-media
Required Attributes:
The “href” attribute simple contains the path to the video, as provided by the video provider.
For a video to be opened within the lightbox, the “data-type” attribute is required. Its value depends upon the video source. Available options are “youtube”, “dailymotion” or “vimeo”.
The following example is showing a YouTube video within the lightbox, and the “data-type” attribute is set to “youtube” accordingly.
Markup For Lightbox Trigger:
<a href="https://www.youtube.com/watch?v=csltI1qcgEw" target="_blank" class="ts-custom-lightbox-media" data-thumbnail="https://www.composium.krautcoding.com/wp-content/uploads/2014/05/hamburg-wallpaper-1-1-1024x635.jpg" data-title="This is a Youtube Video" data-type="youtube" rel="inlinetriggers">
<img src="https://www.composium.krautcoding.com/wp-content/uploads/2014/05/hamburg-wallpaper-1-1-1024x635.jpg" style="display: block; width: 100%; height: auto;">
</a>Required Class Name:
ts-custom-lightbox-media
Required Attributes:
The “href” attribute simple contains the path to the page you want to show within the lightbox. If using a page on a different domain, ensure that the external domain does not use any restrictive “x-frame-options”, which will block the external page from getting shown within another page via iFrame.
For an iFrame to be opened within the lightbox, the “data-type” attribute is required and must be set to “iframe” accordingly.
Markup For Lightbox Trigger:
<a href="http://wikipedia.org" target="_blank" class="ts-custom-lightbox-media" data-width="50%" data-height="75%" data-title="This contains an iframe element" data-type="iframe" rel="inlinetriggers">
<img src="https://www.composium.krautcoding.com/wp-content/uploads/2016/11/Conceptual_Words_031-1-1024x612.jpg" style="display: block; width: 100%; height: auto;">
</a>Required Class Name:
ts-custom-lightbox-modal
Required Attributes:
The “href” attribute contains the unique ID of the element on your page that contains the content you want to show within the lightbox. When providing the Id via the “href” attribute, ensure that you prefix it with the “#” character accordingly.
For a modal popup to be opened within the lightbox, the “data-type” attribute is required and must be set to “html” accordingly.
Markup For Lightbox Trigger:
<a href="#ts-my-custom-modal-popup" target="_blank" class="ts-custom-lightbox-modal" data-title="This is a modal popup" data-type="html" rel="inlinetriggers">
<img src="https://www.composium.krautcoding.com/wp-content/uploads/2016/11/Conceptual_Words_054-1-1024x612.jpg" style="display: block; width: 100%; height: auto;">
</a>Markup For Hidden Modal Popup Content:
<div id="ts-my-custom-modal-popup" style="display: none; padding: 15px; background: #ffffff;">
<h2 style="border-bottom: 1px solid #eeeeee; padding-bottom: 10px; margin-bottom: 10px;">This is a modal popup!</h2>
<p style="text-align: justify;">
This is a modal popup window, triggered via manual inline element. It is just an otherwise hidden element on your page that will be shown when the user clicks on your manual inline trigger.
</p>
</div>In addition to the required class name and (mandatory) attribute “data-type”, you can further finetune the lightbox by using additional data attributes:
The “data-title” attribute allows you to assign a custom title that will be shown with the content inside the lightbox. The content/value is limited to a basic text string without any HTML markup.
The “data-thumbnail” attribute allows you to define a custom image that should be used as thumbnail within the lightbox. This option will only be used, if the content to be shown within the lightbox is manually grouped with other triggers on the same page, using the “rel” attribute.
If the content type within the lightbox is an image and/or a video from YouTube/DailyMotion/Vimeo, and no custom thumbnail has been provided using the “data-thumbnail” attribute, the lightbox will use the image to be shown in the lightbox, or will attempt to retrieve a cover image for the video from the respective video source.
The “data-effect” attribute will allow you to define a custom entry animation for the content to be shown within the lightbox. If omitted, the lightbox will simply use a random transition, or the default transition you selected in the global plugin settings for the lightbox. Available options here are:
The “data-color” attribute allows you to define the backlight/glowlight color that is shown at the bottom of the screen.
By default, this value is set to “auto”, which means the lightbox will calculate the color based on the most saturated color in the image that is to be shown within the lightbox (for media type “image”), or a basic white glow for all other media types.
If you want to completely “hide/remove” the backlight, you should set the color to “rgba(0,0,0,0)”, which will render a fully transparent backlight/glowlight, making it effectively invisible.
Otherwise, define any color you want, using HEX/RGB/RGBA values to set your own custom color.
The “data-width” attribute is only really useful for video, iFrame or modal popup content, but can also be applied to images, and will determine the maximum width the lightbox content can have, based on available screen width.
You can either use dynamic values as percentage, such as “50%” (the percentage sign is required), or as absolute fixed pixel value, such as “600” (without a “px” string).
When using a fixed maximum size and the available screen size drops below the specified value, the lightbox will automatically adjust the size to match the screen size.
The “data-height” attribute is only really useful for video, iFrame or modal popup content, but can also be applied to images, and will determine the maximum height the lightbox content can have, based on available screen height.
You can either use dynamic values as percentage, such as “50%” (the percentage sign is required), or as absolute fixed pixel value, such as “600” (without a “px” string).
When using a fixed maximum size and the available screen height drops below the specified value, the lightbox will automatically adjust the height to match the screen height.
The “rel” attribute can be used to group your lightbox trigger with other lightbox triggers on the same page, that use the same group name.
If items have been grouped using the “rel” attribute, the lightbox will render preview thumbnails for all items in the same group, allowing the user to easily view the other lightbox content without having to close the lightbox first, and then to click on another trigger first.
In order to show the required thumbnails, the “data-thumbnail” attribute should be used accordingly.
Some elements use some text strings that you might want to change or translate into a language that matches your site. Whenever possible, corresponding translation options will be provided in the plugin settings page under the tab “Language Settings”.
Please have in mind that the entered translations are used globally on the site so whatever language you chose to translate the text strings into, will be the language in which those text strings will be shown all over your page.
“Composium – WP Bakery Page Builder Extensions” is more extensive than most themes and probably any other addon for the page builder. With almost a 140+ different elements (counting WooCommerce and bbPress elements), custom post types, built-in icon fonts and so much more, it can potentially slow down your WordPress installation.
Particularly activating all available features can contribute to a slow down, or even a breakdown, if not sufficient memory has been allocated to your server and the WordPress installation. Also, the more plugins hook into the post/page creation process by providing additional features, the more your site could slow down.
Recommended Memory: 512MB+
Some hosting services allow you to manually increase the memory limit for the PHP server, while others require you to contact them and request an increase. If your hosting service allows you to do it yourself, you can use the steps below. Before making any changes to files, make sure you keep a copy of the original file so you can restore everything in case something goes wrong.
To increase the memory limit that has been assigned to your PHP server itself, you can edit the “php.ini” file found on your server and add/change the following line:
memory_limit = 256M ; Change the 256M to your needs
A minimum of 256 MB is recommended, but more is always better.
While that line will affect the PHP server that is hosting your site, you will also have to make a change to your WordPress installation itself. In the WordPress main directory, find the file “wp-config.php” and check if the file includes a line that is similiar to this:
define('WP_MEMORY_LIMIT', '128M');That line defines how much of the PHP memory WordPress is actually allowed to use. Increase that number (maximum value equals the memory limit set in the “php.ini” file) and re-upload the changed file to your WordPress folder.
If your PHP server is running in Apache mode and you don’t have direct access to the “php.ini” file but are allowed to create/change a “.htaccess” file, you can attempt to use that file to increase your server memory limit. Find the “.htaccess” in your root directory of the specified domain, if there isn’t, create one. Put the following line in it:
php_value memory_limit 256M ; Change the 256M to your needs
For drupal, there is another choice, you can edit “sites/default/settings.php”. Locate the PHP settings section and add the following line at the end of that section:
ini_set('memory_limit', '256M');There are many reasons that can lead to increase failed. If you are a shared hosting user, the most possible reason is: Your hosting vendor does not allow for increasing the PHP memory limit, in this case, contact your host to increase the PHP memory limit for you or consider changing your hosting service all together.
Naturally, the more elements and features of the plugin are activated, the more resources it requires to run, affecting memory utilization’s and general load speeds. But we have yet to see a buyer that is really using every element and feature of the plugin.
Therefore, you first step should be to go through the plugin settings and to deactivate all features and elements you are not planning to use. Once deactivated, the plugin will not be loading the associated files for that element or feature anymore, improving overall performance as every file that doesn’t have to be loaded anymore lowers memory consumption and improves load times.
Even though the plugin includes 16 different icon fonts, potentially giving you access to over 4,600 different icons, it is not advised to actually use all of them. Each icon font requires a CSS file, defining the class names and general styles for each icon, and the icon font file itself, which tells the browser how to “draw” the icon. Less active icon fonts means that less of those files have to be loaded.
Also, the more icons are utilized (not necessarily tied to the number of active icon fonts, as each icon font includes a different number of icons), the longer it will take WP Bakery Page Builder to load and build the element settings panels that include a visual icon selector. It will take more time to build a visual preview of 2,500+ icons, than it does for 400 icons. So only activate the icons (icon fonts), you are actually planning to use.
If you do require a large number of icons, you should deactivate the visual icon selector in the plugin settings (tab “General Settings” -> section “Basic Settings”). That way, WP Bakery Page Builder doesn’t have to build the icon previews anymore, substantially improving the time it takes WP Bakery Page Builder to load and open element settings associated with icons. Instead of the visual selector, you simply manually enter the icon class name.
By default, the plugin will, when editing a page on the backend, provide a thumbnail image for each of its elements, that can utilize images. That helps to quickly identify which element is using which image. But the way WP Bakery Page Builder works, each of those thumbnail images has to be loaded individually via Ajax request, after the page has loaded. If you use many image elements, that can cause “waiting times” until you can start editing, as you will have to wait on WP Bakery Page Builder and your browser to load all those thumbnail images first.
In order to speed things up, you can disable the thumbnail image preview in the plugin settings (tab “General Settings” -> section “Basic Settings”). Once disabled, WP Bakery Page Builder will only provide you with the numeric image ID that WordPress assigned to each image.
The following is live snapshot of our demo site, giving you an idea about what other plugins we use alongside “Composium – WP Bakery Page Builder Extensions”, our theme and most importantly, how all that translates into memory utilization. As you can see, we use a lot of other major plugins on our site (incl. WooCommerce) and a major premium theme, but our memory load remains around 50MB … and that is with ALL features of WP Bakery Page Builder Extensions activated. If your system requires much more than that, you need to look at other plugin you are using and/or your theme.
In the plugin settings for “Composium – WP Bakery Page Builder Extensions”, you will find a system summary page for your specific WordPress installation. Information provided there can be useful when troubleshooting and/or requesting support.
WP Bakery Page Builder introduced its frontend editor with v4.3.0 and with each following update, the frontend editor receives further improvements. In general, the frontend editor is designed to handle the 40 or so native elements that are part of WP Bakery Page Builder itself, but there are some critical drawbacks and potential issues when using the frontend editor with add-ons that you should be aware of:
This add-on includes some elements, that rely on the popular “Isotope” script for their functionality. As of now, the add-on is utilizing Isotope v 1.5.x. We are of course aware that the author of Isotope already released v2.x of the script, but for several reasons, we intentionally (for the time being) decided to stay with v1.5.x of the script. It is also critical to know that v 2.x is NOT compatible with v1.x.
It is of course possible, to use both Isotope version throughout the same overall website, provided only one version (the one required by the element needing it) is loaded on any given page. When a page is loading both versions, neither one will work due to their inherit incompatibility to each other.
This add-on will only load it’s Isotope version if a matching element shortcode has been detected, so you need to ensure that other plugins or your theme are not loading another (conflicting) Isotope version on the same page.