Tilt Blurb Divi Module

Another excellent product by Hædworm

*Support is provided by vendors directly. Please click here to access support for individual products
For payment or licensing issues, please click here to access EMP Support
*Vendor Support is for 6 months and updates are for 12 months on 98% of our vendors products.
Please see product descriptions for any differences.
 

The Tilt Blurb Divi Module is a custom Divi Blurb Module featuring a Tilt Effect with 3D Style customizations.

The tilt effect works on hover. As you hover over the image with your mouse cursor the image will appear to tilt. The position off the mouse cursor determines the tilt direction and amount.

The module includes all the settings of the standard Divi Blurb Module and adds settings to adjust the tilt effect in a number of ways to allow you to create some unique effects for your images.

You can adjust the Tilt Amount, the Tilt Perspective, the Tilt Speed and Scale just like the Tilt Image Divi Module but with the addition of a Glare Effect and an adjustable ‘parallax‘ type effect which makes the Blurb Content ‘float‘ above the background. 

There’s a whole lot more to the Tilt Blurb Divi Module, including the ability to ‘fix’ the Blurb Size using a hidden image so no more messing with padding to show the background image at it’s full size.

Tilt Background

Although a somewhat misleading description, the Tilt Background when enabled adds a new ‘3D’ layer to the Tilt Blurb that can sit behind or in front of the Blurb. Use it to create more depth to the Tilt Blurb or to create some interesting effects as you can see in the Demo.

Tilt Layers

The Tilt Layer effect allows you to add up to 50 duplicate layers (multiples of 5) that sit behind the main background. These can be an image or a solid/transparent color, or both! This can give your blurb background a solid 3D effect.

The script used for the Tilt Effect is called ‘vanilla tilt’ which is a forked version of tilt.js. It’s a very lightweight script that weighs in at just 4.5kb. All the other effects in this module use HTML/CSS so despite the vast features the plugin remains very lightweight. 

Please bear in mind that the Tilt Layer effect can have an impact on performance when using transparent .png images and semi-transparent layers so do be conservative when using these types of images with this effect.

Installation

Install and activate the plugin just like any other WordPress Plugin.
Once installed and activated the Tilt Blurb Module will be available along with the Divi Modules for the standard and speciality sections when you click the Insert Module(s) button in the Divi Builder.

Set-up

Add the Tilt Blurb Module to your layout.
To enable and adjust the Tilt Effect click the Tilt Settings Tab and then click the ‘Use Tilt Effect‘ Toggle switch to the ‘Yes‘ position and adjust the settings accordingly. The additional settings for the Tilt Background and Tilt Layers can be enabled with the relevant Toggle Switches. 
To enable the fixed size background, click the ‘Size with Image’ toggle switch in the General Tab under the Image & Icon heading and add the same image there that you’re using for your background image. 

Licensing

You may install this product on any number of websites that you build for yourself or your clients or as the license so determines, i.e, if it is single use, then that applies. You may not install any of these products as part of a hosting offering. Any abuse of these license terms will result in the termination of your account and the licenses that are attached – no refund will be offered or awarded in such cases.  You will receive 6 months support – premium support charges may be incurred after this period. Updates are for the life of the product unless otherwise stated on the product page.

We understand that there can be issues whilst utilizing out of date browsers. Please ensure you use up to date browsers when using our vendors products. For DIVI Theme – Third Party Plugins may not perform as desired in the Divi Visual Builder. We are working with our vendors to rectify this situation as quickly as possible. With the release of Divi 3.1 developer documentation and SOME support of third party modules and plugins are now accessible through the visual builder. 

Please be aware that you will need an amount of experience in the master theme that you are using in order to take advantage of our themes and plugins.
Please make your decision to purchase based upon your skill level to see if our products fit your needs. Due to the nature of Digital Downloads, Refunds are not possible – please ensure that the product you are buying will do the job you want it too.

All support for products is handled by Vendors and contact details will be included in the download packages. If contact details are not found within the files, please do contact us and we will be happy to put you in touch with the vendor concerned. BEFORE YOU ASK US FOR DIRECT SUPPORT – READ THIS! 

General Note: You MAY need to purchase the Divi Theme or the Elementor page builder to use this product. Please see the product description notes above for more information.

Licensing

You may install this product on any number of websites that you build for yourself or your clients or as the license so determines, i.e, if it is single use, then that applies. You may not install any of these products as part of a hosting offering. Any abuse of these license terms will result in the termination of your account and the licenses that are attached – no refund will be offered or awarded in such cases.  You will receive 6 months support – premium support charges may be incurred after this period. Updates are for the life of the product unless otherwise stated on the product page.

We understand that there can be issues whilst utilizing out of date browsers. Please ensure you use up to date browsers when using our vendors products. For DIVI Theme – Third Party Plugins may not perform as desired in the Divi Visual Builder. We are working with our vendors to rectify this situation as quickly as possible. With the release of Divi 3.1 developer documentation and SOME support of third party modules and plugins are now accessible through the visual builder. 

Please be aware that you will need an amount of experience in the master theme that you are using in order to take advantage of our themes and plugins.
Please make your decision to purchase based upon your skill level to see if our products fit your needs. Due to the nature of Digital Downloads, Refunds are not possible – please ensure that the product you are buying will do the job you want it too.

All support for products is handled by Vendors and contact details will be included in the download packages. If contact details are not found within the files, please do contact us and we will be happy to put you in touch with the vendor concerned. BEFORE YOU ASK US FOR DIRECT SUPPORT – READ THIS! 

The Tilt Blurb Divi Module is a custom Divi Blurb Module featuring a Tilt Effect with 3D Style customizations.

The tilt effect works on hover. As you hover over the image with your mouse cursor the image will appear to tilt. The position off the mouse cursor determines the tilt direction and amount.

The module includes all the settings of the standard Divi Blurb Module and adds settings to adjust the tilt effect in a number of ways to allow you to create some unique effects for your images.

You can adjust the Tilt Amount, the Tilt Perspective, the Tilt Speed and Scale just like the Tilt Image Divi Module but with the addition of a Glare Effect and an adjustable ‘parallax‘ type effect which makes the Blurb Content ‘float‘ above the background. 

There’s a whole lot more to the Tilt Blurb Divi Module, including the ability to ‘fix’ the Blurb Size using a hidden image so no more messing with padding to show the background image at it’s full size.

Tilt Background

Although a somewhat misleading description, the Tilt Background when enabled adds a new ‘3D’ layer to the Tilt Blurb that can sit behind or in front of the Blurb. Use it to create more depth to the Tilt Blurb or to create some interesting effects as you can see in the Demo.

Tilt Layers

The Tilt Layer effect allows you to add up to 50 duplicate layers (multiples of 5) that sit behind the main background. These can be an image or a solid/transparent color, or both! This can give your blurb background a solid 3D effect.

The script used for the Tilt Effect is called ‘vanilla tilt’ which is a forked version of tilt.js. It’s a very lightweight script that weighs in at just 4.5kb. All the other effects in this module use HTML/CSS so despite the vast features the plugin remains very lightweight. 

Please bear in mind that the Tilt Layer effect can have an impact on performance when using transparent .png images and semi-transparent layers so do be conservative when using these types of images with this effect.

Installation

Install and activate the plugin just like any other WordPress Plugin.
Once installed and activated the Tilt Blurb Module will be available along with the Divi Modules for the standard and speciality sections when you click the Insert Module(s) button in the Divi Builder.

Set-up

Add the Tilt Blurb Module to your layout.
To enable and adjust the Tilt Effect click the Tilt Settings Tab and then click the ‘Use Tilt Effect‘ Toggle switch to the ‘Yes‘ position and adjust the settings accordingly. The additional settings for the Tilt Background and Tilt Layers can be enabled with the relevant Toggle Switches. 
To enable the fixed size background, click the ‘Size with Image’ toggle switch in the General Tab under the Image & Icon heading and add the same image there that you’re using for your background image. 

General Note: You MAY need to purchase the Divi Theme or the Elementor page builder to use this product. Please see the product description notes above for more information.

You may also like these items

Support Request

You have questions about your purchased plugin, theme or layout? Then use this form to get your answers as soon as possible. If you have a license key, please enter it here. You can find it in your account under "view details and downloads". Otherwise, please use the purchase id from your transaction. You can find them in the first column in your purchase history (ID).

2 + 13 =

10 Comments

  1. Jesse Ward

    It seems this plugin doesn’t work at all with the tilt effect on Safari. Works just fine on Chrome and I haven’t tried on other browsers, but on Safari it goes totally wonky.

    • haedworm

      Hi Jesse, sorry to hear you’re having issues. an you tell me which version of Safari you are using and which device and OS version?

      • Jesse Ward

        I’m using the most current version of Safari. So 11, on a MacBook Pro on os High Sierra.

        I should also mention that the demo version of tilt blurb on this site displays properly. So it must be something with my setup. I just installed the plugin normally though and am using the latest version of divi.

  2. Shaun Davis

    Are you aware that the plugin demo crashes mobile browsers?

    I understand the hover effect not working on mobile but crashing iphones is disastrous. It happens when the large “TILT BLURB DIVI MODULE” comes into viewpoint.

    • haedworm

      Hi Shaun, thank you for this. I was not aware although I was concerned about the number of effects I have on the demo page as they can be memory intensive when using lots of them on a single page. From my understanding, it is the use of opacity and shadows that use more processing power to ‘paint’;more so when combined with animations. It seems to vary across devices though I don’t think the larger effect should cause any issues on it’s own.
      I will split the demo page into multiple pages.
      I would add to this that it’s probably best to avoid enabling the tilt effect on mobile/tablet devices as the use of the tilt effect on touch screens is futile.

      Thanks again for letting me know.

  3. haedworm

    Hi Samuel, that is correct.
    This is because the effect relies on mouse hover and there is no mouse or hover on mobile.
    The blurb will be visible on mobile, and there will be some limited movement ‘on touch’ but I think it’s best to disable it on mobile.

  4. haedworm

    As Andrew rightly said this is currently not possible. As far as I am aware this is true of all third party Divi Modules at the present time.
    Hopefully this will become easier to implement with the pending Divi 3.1 ‘developer’ release where according to a recent post by Nick Roach of ET ‘Divi 3.1 will be remembered as one of the most important updates to Divi ever, laying the groundwork for a vibrant development community.’

Submit a Comment

Divi is a registered trademark of Elegant Themes, Inc. This website is not affiliated with nor endorsed by Elegant Themes.

External links on this website may be affiliate links that could result in us receiving compensation (payment) when you purchase a product or service from that link. For example, we may receive pay per click revenue or commission on sales of products. This helps us to pay the bills and deliver great content for you to enjoy when you are browsing these web pages. You do not pay any extra fees for these items.

By purchasing a product from The Elegant Marketplace you are agreeing to these terms. We do not offer custom support queries, although suggestions will be accepted and acted upon if possible. We do hold data that allows us to connect with you for product updates when you purchase a product. This is not an email marketing list. Should you wish to sign up to our marketing list, please visit our homepage where you will see an optin - We send out around two emails a week to keep you informed of product updates, You may opt out of our marketing communications at anytime by using the unsubscribe facility found at the bottom of each email.

Get the latest news!

Join our mailing list to receive the latest news and updates from our team.

Thanks, we appreciate your support

Pin It on Pinterest

Share This

    Support Form


    The author will normally get back to you within the next 48 hours. All requests are processed one after the other. If you do not receive an answer within this time, please check your spam folder and make sure that you have entered the correct email address.

    You can help us to help you faster. If errors occur, first deactivate all plugins and go back to the parent theme if you are using a child theme (which you should). Check again. Then first turn on your child theme again and then step by step your plugins. Check again every time. Where does the error occur? You can also enable debug.log to get more information to share with us. Use the following snippet to write the debug.log to your "wp-content" folder: Enable debug.log

    Please submit some screenshots showing the problem. The JPG and PNG format and several files are allowed (optional).

    8 + 3 =