How To Create a Cool 3D Tilt Effect With Themify Builder

3D Titl Demo

3D Tilt is a fun new way for users to experience your website. Instead of having all your images and text static, 3D Tilt allows images and text to float and glide slightly as the user moves their cursor over each item.

Check out our demo to get a taste of 3D Tilt.

Then use the incredibly simple two-step process to apply it to your site.

3D Tilt Effect Tutorial:

Step 1: Choose the row that you wish to apply the 3D tilt effect on. Add tilt-3d in the "Additional CSS Class" field.

Titl 3D Code input field

Step 2: Then add the following Javascript code in Themify > General > Header Code:

	var $ = jQuery;
	Themify.LoadAsync( '', function(){
		var $body = $('body');
		$( '.tilt-3d' ).each( function(){
			var $panel = $( this );
			var $pContent = $('.module-text', $panel),
				$img = $('.module-image', $panel);

			function initTilt() {
				TweenMax.set([$pContent, $img], { transformStyle: "preserve-3d" });

				$body.mousemove(function(e) {
					var sxPos = ( e.pageX - $panel.offset().left ) / $panel.width() * 100 - 100;
					var syPos = ( e.pageY - $panel.offset().top ) / $panel.height() * 100 - 100;$pContent, 2, {
						rotationY: 0.03 * sxPos,
						rotationX: -0.03 * syPos,
						transformPerspective: 500,
						transformOrigin: "center center -400",
						ease: Expo.easeOut
					});$img, 2, {
						rotationY: 0.03 * sxPos,
						rotationX: -0.03 * syPos,
						transformPerspective: 500,
						transformOrigin: "center center -200",
						ease: Expo.easeOut

		} );

	} );

We'd like to give a shoutout to Peter Barr for creating the original 3D Tilt script we used in this tutorial.

If you enjoyed this tutorial, please let us know in the comments below. We'd also love to hear about any future tutorials you'd like to see. Enjoy!

Read More

30% OFF Spring Sale 2018

Spring Sale 2018

Spring is upon us! It’s time to freshen out the old and welcome in the new. Do a bit of spring cleaning on your web presence and take advantage of our Spring Sale!

We’re offering 30% OFF all purchases (excluding the Lifetime Club). And if you really want your website to spring forward, you may want to seriously consider the Lifetime Club. The one-time purchase will literally give you lifetime access to all Themify themes, plugins, addons, support, and updates. And for one week we’re offering $100 OFF the Lifetime Club, for a total cost of $249! See below for our promo codes to get your fresh start.

  • 30% OFF themes, plugins, or Club Memberships use: SPRING
  • $100 OFF the Lifetime Club Membership use: SPRINGLIFE

The Spring Sale runs from March 12th to 19th, 2018.

Happy Spring everyone!

Read More

Post Type Builder Pre-release Announcement

We are very excited to pre-announce the latest Post Type Builder (PTB) rebuild release! The release is scheduled on February 27, 2018 (Tuesday). There's going to be a lot of changes with the upcoming release. Not to worry though, the main changes are on the back bone engine. This means that you won't see any noticeable changes on the frontend or backend interface. One of the primary reason of this rebuild is to provide better compatibility when using PTB with third-party themes and plugins. Now the PTB Template engine is more stable and works great with most WordPress themes (we've tested it with many third-party themes). Aside from this update, we've also made some significant improvements with the overall plugin! Take advantage of this huge upgrade by updating your PTB plugin on February 26, 2018.

Things To Prepare for the Update:

Below are some FYI stuff that's good to know, and best practices that we recommend you do before updating:

  • Backup your site. We highly recommend doing this periodically, especially when updating anything on your site. If you haven't done this yet, check out our documentation that outlines how to fully backup your site.
  • First update PTB plugin and then update all PTB addons that you have. All PTB addons must be updated to work with the latest version.
  • After updating the PTB plugin updates, make sure to clear any cache plugins that you may have.
  • Encounter an issue? You can roll it back to the previous versions. The previous version can be downloaded by accessing the file link manually: (you need to login to Member Area with an active PTB membership to access this link).
    • If you need help, Contact us with your site URL and outline the issues you're encountering and we'll fix it right away.
  • Can't update with your login credentials?
    • If you can't update to the latest theme version your membership could be expired. Send us an email through our contact page with your Themify username.

Read More

Valentine’s Day – 30% OFF Sale!

Valentines Day 2018 promotion

Will you Beee ours?

There’s love in the air and we want to help spread it. In honour of Valentines Day, we are offering 30% OFF all products (excluding the Lifetime Club), and $100 OFF the Lifetime Club.

  • 30% OFF Sale coupon code: HEARTS30
  • $100 OFF Lifetime Club code: HEARTS100

The 30% OFF promo applies towards all theme, Club Membership, and Themify Builder plugin purchases, as well as membership upgrades and renewals! And don’t forget about the Lifetime Club – a one-time purchase of the Lifetime Club provides you unlimited access to ALL Themify products, including support and updates, with no expiry date. Nab this deal of $100 OFF and receive the Lifetime Club for only $249!

This 8 day sale starts today and ends on Monday, February 19, 2018 at 11:59pm EST. Set your website aflutter and take advantage of this heart-filled sale!

Happy Cupid Day!

Read More

Early Notice About Upcoming Framework Update!

Update: February 12, 2018

Ready....Get set....This is an early notice that we're deploying a new framework update on Monday (February 12, 2018). We're packing the new framework together with a theme update so you won't have to update it separately, just update the theme once and it'll come built in with the latest framework with all the good stuff. So take time this weekend to get ready for this update. (more…)

Read More

How to Make a Fullcover Row Background with Themify Builder

Fullcover Row Background tutorial

Instead of using a regular white background for your website, why not try using an image that fully covers your page? We think it could help create a minimal looking site that is both sleek and modern. To achieve this look, you'll need to insert some custom code – but fear not, for we've provided easy step-by-step instructions.


Read More

Spring Sale - Get 30% off with code SPRING, or $100 off Lifetime Club with code SPRINGLIFE!