24. February 2016

Simple way to do some Visual Composer Grid cleanup, when you are using Bootstrap within your theme. This removes and cleans up classes.

Visual Composer for WordPress
Bootstrap / Bootstrap Sass

Enjoy coding …


11. November 2015

Really neat solution, that allows you to build a quick viewport based layout, without relying on the still buggy CSS units.

Also works nicely in combination with Visual Composer for WordPress 🙂

vUnit @ Github

Enjoy coding …


20. July 2015

When using Fullpage.js, overflowing section / slide content will be made scrollable with Slimscroll. If you want to use addons that rely on the natural scroll event, these will fail with Slimscroll. One of the candidates breaking is Scrollreveal.js for example.

I decided to work around that, to allow animations to be triggered when elements become visible or invisible  to the viewport.


You could code the viewport visibility check yourself or use the “visible” jquery plugin.

“This is a jQuery plugin which allows us to quickly check if an element is within the browsers visual viewport, regardless of the scroll position. If a user can see this element, the function will return true.” jquery-visible on Github


The idea was to extend or hook into slimscroll without touching the fullpage.js codebase. Fullpage.js wraps overflowing content within a fp-scrollable container. Slimscroll itself provides events to track your position within the scrollable area in pixels or when top / bottom have been reached.




  1. Hook into fullpage.js
  2. Track viewport & visible elements (jquery-visible)
  3. Track direction of scroll
  4. Get current position
  5. Assign classes to elements to trigger animations


This is just a crude and simple starting point, but should give you the basic idea. This still needs some throttling, so that its not called on every scroll position.



Very basic idea to get some transitions working.

Hopefully Fullpage.js will be switching to iScroll natively in the future, as it provides far more options to handle scrollable areas. You can use iScroll now, but you have to disable the scrolling feature within Fullpage.js and call iScroll yourself. Not that difficult to do 🙂

There is also a WordPress Plugin that wraps Fullpage.js natively with a nice interface (WP_Fullpage) and my upcoming Visual Composer integration, which already uses iScroll 🙂

Enjoy coding ….


4. June 2015

When mapping shortcodes using vc_map, you can assign icons to your new Visual Composer element.

If you created a container element, that wraps around other  elements, the child element icon will currently be overwritten with the parent icon. A fix is apparently on its way 🙂

Currently the only way is to skip the icon option completely and use pure CSS for that.

You can enqueue a CSSs file for the admin through a vc_map option “admin_enqueue_css“.

The CSS targets the icon of the displayed element in the editor and the icon when adding new elements to the layout.

Enjoy coding …


3. June 2015

This video should give you a good idea what the addon can actually do.

In my last article I gave you a rough overview of the features & requirements. Here some more details and additions:

  1. Added the fixed header & footer container to the admin interface. You can add special padding, to the top and bottom, through the fullpage settings and make room for them. These are standard content containers, that can hold any Visual Composer content or row setup.
  2. Added automatic menu, which adds links to each section as they are created. Link title matches the section title.
  3. Define section and slide anchors, which are reflected in the browser history.
  4. Sections and Slides can have different backgrounds, providing nice effect options. I added an image background to Section 1 and semi-transparent background colors to the Slides.
  5. Fullpage.js configuration is fully integrated and working. The system sets defaults for a quick start.
  6. Fullpage.js CSS override has been added, but is not complete yet. Added code editor.
  7. Fullpage.js Events have been added and are fully functional. These events are triggered after load, after slide load, after leaving a slide and other events.
  8. iScroll can be seen in Section 2. Added resize handling and configuration options. Still need to do some minor tweaks.
  9. iScroll custom scrollbars are on my list, but not sure I will add these yet.
  10. Prebuild Templates will be added, so that you can quickstart your design. Visual Composer 4.5+ provides some nice new options.
  11. Visual Composer requirement will be 4.5+.
  12. The admin provides a nice color separation for all components and count for slides & sections.

The addon is mostly done. I am finalizing the main admin area this week and will do a final cleanup next week, for the first beta release.

Many people have asked me for a release date. I currently plan to have a fully working Beta in the next 2-3 weeks. Will offer the Addon to a small closed group of customers first, before I think about other release options. I think I will offer between 20-30 slots for the beta run. If you are interested let me know.



  1. Quickly choose which section / slide to load, when the page is opened.
  2. The addon is injecting its own page template, to make sure that the main container is clear of any theme related margins or padding. As soon as the Fullpage container is added to the layout, the template gets selected dynamically.
  3. 21.06.2015 – updating to latest fullPage.js version (2.6.6) and adding new options and changes
  4. 13.08.2015
    – beta has been delayed due to my vacation & an accident I am recovering from. This is still just a side project 😉
    – updating to latest fullPage.js version and adding new options to admin
    – updating to latest Visual Composer version
  5. 03.09.2015
    – moving to Visual Composer 4.7
    – finalizing the admin area
  6. 14.01.2016
    – moving to Visual Composer 4.9x
    – fullpage.js version update
    – iScroll update
    – admin /front-end cleanup … getting close 🙂
  7. 17.02.2016
    – works pretty flawless by now
    – plugins are updated
    – admin complete, working on some minor cosmetics
    – not sure yet about distribution 🙂 … my current projects come first!
  8. 07.03.2016
    – adding version / requirement checks for all linked libs
    – moved to VisualComposer 4.10
    – fullPage.js version bumped to 2.7.8
    – final cleanup of all areas on the way


28. May 2015

Update: Video Preview

I am still busy finalizing the Fullpage.js Addon for Visual Composer. Hope to have some more images or even a video next week 🙂

Some requirements for the Visual Composer Addon:

  1. PHP 5.4+, as I am using traits and advanced autoloading.
  2. Timber (TWIG for WordPress), for current and future templating. Currently mostly used for the main administration of the core module handler.
  3. iScroller for overflowing content (will be part of the package)
  4. Otherwise the default Fullpage.js restrictions apply

The Addon will ease Fullpage.js integration immensely, but for a more advanced integration some CSS / JavaScript knowledge will always be needed. Do checkout the main Fullpage.js documentation for more information.

Many people have asked me for a release date. I currently plan to have a fully working Beta in the next 2-3 weeks. Will offer the Addon to a small closed group of customers first, before I think about other release options. I think I will offer between 20-30 slots for the beta run. If you are interested let me know.


11. March 2015

I have been working on a full integration of fullpage.js into Visual Composer for WordPress. This allows to easily build fullpage layouts, with different pages and full slide capabilities. Also added iScroller functionality, to allow overflow content to work nicely on certain pages. All  of this is working with simple drag & drop 🙂 and can be used by any unexperienced user.

I am currently cleaning up the addon, but I am not sure yet if I will offer it as a commercial addon or keep it for my internal projects only 🙂

Will post a video later this week.


Visual Composer for WordPress


7. November 2014

Visual Composer for WordPress provides many ways to extend its functionality. There are already many add-ons available for this dynamic page builder, but its easy to do the extending yourself,  by following the hints in the documentation 😉

In this small tutorial we are adding a “type” field to allow a special css class to be added to each of our row containers.

New Visual Composer element properties can be easily added by using the vc_add_param function. See documentation for more information. In our case we are adding a property to the vc_row element.
Continue reading Extending the Visual Composer Row element with a new property


30. October 2014


I am working on a new website for a customer and we are using the WPLMS (WordPress Learning Management System) as a foundation. The packaged theme is based on Bootstrap.

The theme provides its own page-builder, but we prefer to use Visual Composer, as we built some custom VC-Addons to ease future page updates for our customer and custom content integration. Visual Composer provides some nice full-width addons, which are not working with the current theme layout. I decided to use a custom page template to allow Visual Composer to take over, where needed 🙂 Continue reading WordPress, WPLMS, Visual Composer and full width content