Two column design in Divi mobile layout
The fist time you do this it contains a few steps. But once the CSS is setup you only need to adjust the 2 settings of the row, and give the class name to the columns that should be affected. … Read more…
The fist time you do this it contains a few steps. But once the CSS is setup you only need to adjust the 2 settings of the row, and give the class name to the columns that should be affected. … Read more…
Creating a parallax background effect for your scenes in Hype is not hard. In the following video you can see how it works: var objects = document.getElementsByClassName("mouseParallax"); function map(value, low1, high1, low2, high2){ return low2 + (value – … Read more…
In the following video I demonstrate how we can have a timeline played back, as soon as a specific element scrolls into view: $(".scroll").scroll(function() { playIfVisible("highlight"); }); function playIfVisible(name){ var posY = document.getElementById(name).getBoundingClientRect().top; var winH = $(window).height(); … Read more…
In the following video I show how you can create simple hover effects in Hype:
Here is a short tutorial on how to add blend modes in Hype: var modes = ["normal","multiply","screen","overlay","darken","lighten","color-dodge","color-burn","hard-light","soft-light","difference","exclusion","hue","saturation","color","luminosity"]; for(var a = 0; a < modes.length; a++){ var mode = modes[a]; var modeClass = "blend_"+mode; var elem = document.getElementsByClassName(modeClass); for(var i … Read more…
In the following video I show how the default header and footer of a Divi page can be hidden with some simple CSS code. This can be done either for just specific pages, or globally for the entire website. This … Read more…
In the following videos I am demonstrating how pages build with wordpress/divi can be linked inside of Hype. Overview: Setting up Hype: The following code will be needed for the “On Scene Load” function: var containerID = "wp_work1"; var link … Read more…
Here is a quick video showing how you can add a stroke to text (there is no sound, cause it’s soooooo simple). Below the video you can copy the code you need to enter. In the code you can change … Read more…