I have a law that I abide by. I call it Monti’s First Law of Temporal Proximity to Christmas. Said law dictates that no Christmas decorations shall be put up and no Christmas music shall be played before Thanksgiving dinner. It’s purpose is to help ensure that the festivity and (desirable) accoutrements of the season are savored rather than ridden into the ground like a tired old mule (as the commercial powers that be in our world are wont to do).

But for you, dear friends and Divi enthusiasts the world over, I am breaking my law. I’m going to show you 3 simple ways to decorate your Divi website for the holidays with some animated falling snow.

Watch the Video Tutorial

Written Instructions

Method #1: Set it and forget it with the Snow Storm plugin.

The Tribulant Snow Storm plugin makes it about as easy as it could possibly be to add animated snowfall to your site. Simply install the plugin, activate it, and you’ve got snow.

The one drawback with this plugin is that when the body of your site loses focus, the snow simply stops in place. So if you click away from the browser window, you’ll get a bunch of dots all over your screen rather than a smooth falling snow animation. In my experience with the myholidayecards.com sample site, this behavior also occurs when the user clicks on iframe content, like embedded YouTube videos.

These behaviors might not be an issue for you, in which case the Snow Storm plugin may be a great fit. Although I love the Snow Storm plugin and have used it for quite some time, I wanted to find an alternative.

Method #2: Use a background video with the Bgvideo plugin.

I have a 3-part tutorial devoted to using the Bgvideo plugin from Pommiegranit for creating full screen background video that stays fixed behind your content (which makes for an interesting parallax scrolling effect):

You can leverage this technique to easily add animated snow to your web site. How I’ve done it:

Download the plugin ZIP file from Pommiegranit’s GitHub repository and install it on your WordPress site.

I created a looping snow animation in PowerPoint®, and then recorded the full screen animation to an MP4 with a screen capture tool (I’m actually partial to Movavi Screen Capture Pro because it yields a higher frame rate than other tools I’ve used — even Camtasia). You can grab an animated snowfall PowerPoint template for free at my PowerPoint Snow page. And there’s always the option of just finding a stock video that works with your design.

Upload your snowfall MP4 and link to it using the bgvideo shortcode in any module that handles text:

[bgvideo mp4="your-video-url.mp4" width="1280" height="720"]

Voila! Your video will automatically loop in the background behind your content and span the height and width of your browser viewport. When you consider how many different effects you can achieve with a video, this becomes a pretty powerful technique.

Method #3: Use Particles.js

This one’s my favorite, but it requires a little more technical legwork than the previous two methodologies. Have no fear, though — easy-to-follow directions and working code samples are provided:

Go to the Particles.js website, and notice the configuration widget on the right:
Click the drop-down menu on the top-left of the configuration widget, and you’ll notice there’s a preset for snow.
Choose that, and then you can customize the look and feel of the snow using the configurator. Once finished, you can download your custom configuration as a JSON file that can be used in concert with particles.js on your site.
Custom implementations of particle animations have never been so easy!

Once you’ve downloaded your custom particlesjs-config.json file, you’ll also need to download the Particles.js package, grab the particles.min.js file, and upload that along with your JSON file to the root directory of your Divi child theme using either cPanel or an FTP client.

Next, create a new file in the same directory within your child theme, name it snowfall.js, paste the following script into the file, and save it:

In essence, this script sets the templateUrl variable to the path of your child theme directory (we have to enqueue it a special way in order to make that work — more on that below), adds an id of “particles-js” to the body tag of your site, and initializes the particles.min.js script using the custom configurations found in your particlesjs-config.json file.

Next, open the functions.php file in your child theme, add the following, and save it:

This will enqueue the snowfall.js file in such a way that it is 1) dependent on jQuery, which is what we want, and 2) aware of your child themes directory path.

Finally, open the style.css file in your child theme and add the following CSS declaration:

.particles-js-canvas-el {
position: fixed;
top: 0;
left: 0;
}

The ParticlesJS script will dynamically add a canvas element with a class of particles-js-canvas-el to render the animation, so you want to make sure that element is behind your content and in a fixed position so everything floats above it when scrolling.

Hit refresh on your site, and ta-da! You just added snow to your site with Particles.js! Congrats!

]]>https://montidesign.com/3-ways-to-add-falling-snow-animation-to-a-divi-website/feed/2Controlling the Divi Toggle/Accordion Module Animation Speedhttps://montidesign.com/overriding-divi-toggleaccordion-module-animation-speed/
https://montidesign.com/overriding-divi-toggleaccordion-module-animation-speed/#commentsThu, 13 Jul 2017 20:37:07 +0000https://www.montidesign.com/?p=2071Searches in multiple Divi user groups made it clear that I'm not the only one interested in changing the animation speed on the Divi Toggle and Accordion modules. But how to cleanly override something hard-coded in a core theme JS file? Check out my hack.

Google is NOT my friend.

Not today, at least — nor, apparently, anybody else’s. Searches in multiple Divi user groups made it clear that I wasn’t the only one looking for the means to change the animation speed on the Divi Toggle and Accordion modules. It was also clear that the interwebz sort of shrugged its shoulders in answer to my queries.

As far as I can tell, there’s no “clean” way to achieve this. The animation speed is hard coded in a JS file inside the Divi theme core.

We all know that editing core theme files is a level of hackery unbecoming of a self-respecting WordPress designer/developer, so I came up with the cleanest methodology I could that’s based in a child theme:

A little klugey, perhaps, but functional. And still, I maintain, WAY better than editing core parent theme files.

Feedback welcome. If you’ve got a better solution, I definitely want to hear about it.

]]>https://montidesign.com/overriding-divi-toggleaccordion-module-animation-speed/feed/9How to Find Reputable Web Designers & Developershttps://montidesign.com/find-reputable-web-designers-developers/
https://montidesign.com/find-reputable-web-designers-developers/#respondMon, 01 May 2017 13:51:50 +0000https://www.montidesign.com/?p=2003Six vital steps you should take to protect your business and avoid getting ripped off

Since I started Monti Design eight years ago, I’ve been hired several times to perform project “rescues.”

In a nutshell, these are engagements where I am asked to step in and get a stalled web project over the finish line after the original designer or developer flaked out and left a client hanging (and usually a little poorer). As a result, I’ve witnessed some appalling behavior from a small number of competitors — but for the most part, that sort of thing has been a rarity.

However, in early April, I had back-to-back appointments with two prospective clients, and both had horror stories. One was reaching out to me for help and advice because their unscrupulous web designer was holding their domain name and website hostage without cause. The other recognized that he needed my services, but had been burned so many times that he was almost irremediably suspicious of me.

“You need to realize that there are a lot of charlatans in your field,” he said. “Put yourself in my shoes. I may not know what I don’t know about what you do. That makes me vulnerable, and I’ve already been taken advantage of as a result.”

Wow. Point well taken.

Upstanding web professionals would do well to anticipate and alleviate such concerns when interacting with a prospect or pitching a solution. Beyond that, we ought to be willing to do our best to educate fellow business owners so they’re 1) equipped to find and hire reliable, competent web designers and developers, and 2) empowered to avoid getting ripped off.

So, on behalf of all the hard-working, professional, trustworthy web designers and developers out there…

Dear Business Owners: We’re sorry for the bad apples in our profession, and we genuinely feel your pain. Here are six things you can do to help ensure you’re getting a reputable web professional, and to keep you from parting unnecessarily with your precious time and hard-earned cash:

1. Let me Google that web designer for you.

Seriously, do a quick search on them. Not just the business, but the name of the designer as well. Check their reviews. See if they’re in the news for anything untoward — uncovering it will be one of the best things you can do for your business.

Your domain name is a valuable corporate branding asset. You should safeguard it as jealously as you would your logo.

Remember the client I mentioned who had their site and domain held hostage? They did a search on their web designer after he showed his true colors, and it turns out that he had a disturbing criminal history that caught the attention of the local news media on more than one occasion. Imagine the pain, heartache, and lost productivity they could have been spared had that search been done long before they gave him any money or the keys to their online kingdom.

Speaking of which…

2. Never, never, never, never, NEVER transfer ownership of your domain name to a web designer or developer.

If they ever suggest that you do this, that’s your cue to run away.

Again, I’m going to refer to the poor client that got taken for a ride by the web designer with a rap sheet. How did they lose control of their domain and web assets, you ask? Well, at the outset of their engagement, he persuaded them to transfer ownership of their domain to him. Think about it: he was the web professional. They trusted that he knew what he was doing and had their best interests at heart.

(Their story ends happily, thank goodness — they got the domain back and switched hosts in the end.)

Keep in mind that your domain is a valuable asset, and the core component of your corporate brand. You would insist on maintaining direct control over who has access to your company’s logo and how or where they can use it, wouldn’t you? You should safeguard your domain name just as jealously.

Plus, from a technical standpoint, it’s completely unnecessary to hand total control of your domain name over to a web designer. It’s a common practice for a web professional to simply request access to your current domain registrar or webhost.

You’ll have to determine for yourself how trusting you want to be. Many domain registrars like Namecheap or GoDaddy help you out in this regard by allowing you to create guest administrators on your account. You get several benefits from this approach:

It puts you in the driver’s seat in terms of what your web designer can and can’t do with your domain and DNS settings.

It frees you from having to share your personal login credentials with a third party.

It frees your web designer/developer to work as quickly and independently as possible without having to bug you for access to your server or domain settings.

Check your domain registrar or webhost’s documentation for more information.

3. Ask for references.

Once you’ve got them, use them! Your two main concerns are with the competence and trustworthiness of a prospective web professional, right? Send a couple of their references a quick email, or give them a call. Ask them to specifically evaluate those two factors.

4. Do they use a contract? Ask to see a copy.

Whether you’re working with an individual freelancer or an agency, a contract isn’t just for your comfort and benefit — it protects both your business and theirs. Contracts are indispensable aids to successful project management and a project outcome that makes everybody happy. A solid web professional will understand this and typically has a contract template on-hand that they can share with you.

I’m especially fond of Andrew Clarke’s Contract Killer for its plain language approach. It’s easy to adapt and has served as the foundation for all Monti Design contracts.

5. Ask about their processes in the event of a dispute.

You hope it never happens. A web professional who’s worth his or her salt does, too — but if they’re hosting your website for you, you both need to give thought to what happens to your site in the event of a dispute.

A contract is an indispensable aid to successful project management and a project outcome that makes everybody happy.

You don’t want to be at their mercy with no redress other than coughing up cash. And you definitely don’t want to lose SEO ground or market-share because your company website has gone AWOL (courtesy a web designer with a hair-trigger temper).

In eight years of doing freelance web design and development work for over 60 different clients, I can think of only one time where I had to resort to the threat of “turning off” a client’s web site for non-payment of development and hosting fees.

I’m of firm belief that this phenomenon should be a rarity, for three reasons:

Contracts that spell out the scope of a project, mutual obligations, and fee schedules go a long way toward heading disputes off at the pass (hint, hint — see #4 above).

A formal process of negotiation and escalation should be agreed upon by both freelancer and client long before a dispute arises.

A good web professional knows how important your web assets are to your business; holding a website to ransom in order to force payment or other concessions from a client should be a reluctant measure of absolute last resort.

Don’t hesitate to ask about how disputes are handled. If they don’t have an escalation/negotiation process, ask them to put one together that you both agree upon. Then, have it codified in your contract.

6. Ask if they carry liability insurance.

A well-oiled website running on all cylinders, generating leads and adding to your bottom line — it’s a lovely thing to behold.

But this is the Internet. The Internet can be a scary place. Even the most expert, conscientious web professional can only control so much. Things can and sometimes do go wrong.

What sort of things? Vulnerabilities in web publishing software. Hackers. Server crashes. DDOS attacks. Data breaches. Things that have the potential to create loss and liability for freelancer and client alike.

A serious web professional carries insurance as a result — for his or her own protection, and for yours.

There you go. Hopefully, when you go bobbing for web designer/developer apples, these six qualifying action steps will help you avoid the apple with the worm in it. Happy hunting.

Fellow web professionals: Any other recommendations? Be sure to leave a comment below.

]]>https://montidesign.com/find-reputable-web-designers-developers/feed/0Divi’s Library to the Rescuehttps://montidesign.com/divis-library-rescue/
https://montidesign.com/divis-library-rescue/#respondSat, 25 Jul 2015 00:50:51 +0000https://www.montidesign.com/?p=2171Creating and using global items in the Divi Library to quickly and easily add repeated elements, like a breadcrumb, to pages in Divi

I needed to add a breadcrumb to an interior page template on a web site I was working on. I started to add the Yoast breadcrumb to page.php in my child theme (a la this tutorial from Elegant Themes: http://bit.ly/1Hbtz8e) and realized it wasn’t going to afford me the flexibility I needed.

]]>https://montidesign.com/divis-library-rescue/feed/0Full Screen Background Videos (with a Twist) in Divi, Part 3https://montidesign.com/full-screen-background-videos-twist-divi-part-3/
https://montidesign.com/full-screen-background-videos-twist-divi-part-3/#commentsSun, 14 Jun 2015 21:00:07 +0000http://www.montidesign.com/?p=1767Part 3 of a three-part tutorial on how to create fullscreen video backgrounds and video hero banners with the Divi theme from Elegant Themes. This part focuses on using transparent backgrounds in Divi sections to allow your background video to bleed through to create visual interest through subtle movement and texture.

Howdy again, friends.

If you haven’t read them already, you might want to read/watch parts 1 and 2 before this one, although in some ways this tutorial stands on its own — you don’t have to have a video background to benefit from this technique.

At the end of the Part 2 tutorial video, I mentioned that I had added a class to the section containing the hero banner content to create a hook for some custom CSS:

Now, I’ll make my standard disclaimer and say that this part of the technique can be replicated entirely via the Divi builder. That’s nice, but unless you’re building a one-page site, it’s messy. Better to use a child theme and its stylesheet to create and control the styles we’ll be building and discussing herein.

Give it up for child themes

WordPress child themes are lovely things, and there are oodles of plugins nowadays to help you create child themes if you’re not comfortable using a code editor and FTP to do it. In the past, I’ve used the Child Them Configurator plugin, but these days I prefer the Divi Children plugin specifically for Divi-based sites. The former works with any theme.

So what’s so great about child themes? If you’re a relative newcomer to WordPress and you haven’t been through the parent theme/child theme spiel, here it is: If you purchase a theme, the developer is going to be releasing regular updates for that theme because the WordPress core is evolving all the time. If you’ve been naughty and have edited that theme directly (whether you’ve changed the functions.php file or the style sheet) you run a very great risk of having all of your customizations wiped out every time the theme gets updated.

Working with a child theme keeps your customizations safe. A child theme inherits all the styles and functionality of its parent (in this case, Divi) and allows you to create targeted overrides.

Transparently cool

Now that that’s out of the way, let’s take a look at the custom CSS that goes with the .transparentBlack class I mentioned previously:

I’ve set a background color for each of these classes in CSS using RGBA. RGBA is just a way of setting colors using red/green/blue values and then a transparency value that’s between 0 and 1. One (1) is completely opaque, zero (0) is completely transparent. If you chose a decimel inbetween, it’s going to be semi-transparent. The closer you get to one, the less transparent it is. The closer you get to zero, the more transparent it is.

Once you set up your transparent background classes in your child theme style.css file and add those classes to the Divi builder sections that you want to have transparent backgrounds, the result is what you see here:

Howdy, friends.

This is Part 2 of a three-part tutorial on how to create HTML5 video backgrounds and video heroes using the Divi theme. Part 1 is available here.

Before I continue, I wish to make a disclaimer. Many savvy Divi users may be asking, “Why use this technique when you can add a background video to a full-width header module, or even a standard section?”

Those modules do provide a quick way to add background videos to your content, and they can function very well as a video banner or hero. But there are times when I want a little more control over the elements of my page than what Divi offers through its modules and the Builder. And this technique also allows us to do some fancy-schmancy stuff that the standard modules can’t quite do on their own. Nothing against Divi — obviously, I’m a huge fan. But I like to think of Divi as a robust platform that can (and should) be expanded as creatively as us creatives/developers can manage. So, the technique I’m outlining in this tutorial is about augmenting Divi’s superb functionality to achieve something even more fantabulous. Fair enough?

Now, back to our regularly scheduled program.

Even though I’ve used this technique on more recent web sites, I’m going to continue to use the Thief Stoppers website as an example revealing to you, dear reader, my secret sauce.

The bgvideo plugin gives you the ability to easily create a background video that spans the width and height of the browser. All you have to do is drop a shortcode in the WordPress text editor and set some attributes like video’s native height and width and the URLs for the mp4, webm, and ogg versions of your video; the rest of the attributes are set by default.

The real magic is in the fixed attribute. This is set to yes by default, and it’s this attribute that allows you to create a parallax effect scrolling over top the background video.

To get the bgvideo plugin, just go to its GitHub repository and download the zip archive.

Then you go into your WordPress backend and manually install the plugin by uploading the zip file. Once installed, use Divi’s page builder to create a section (it doesn’t have to be a full-width section), add a row, insert a full-width column, and then add two text modules. The first text module is where you’re going to drop the shortcode, like so:

And now, a cautionary excursis — don’t throw your back out cheering.

Two not-so-brief words of warning:

Make sure that your video is not too heavy; by that, I mean you don’t want the file size of the videos themselves to be exceptionally large. Otherwise, they’ll to take too long to download (especially on mobile) and that’s going to negatively impact the performance of your page, which in turn can impact your site’s SEO performance. I typically encode the video at 720p (1280 x 720) — since the average screen size on the web is around 1366 x 768, a 720p video won’t be overly pixelated if it’s stretched to fill the screen. It also will begin streaming pretty quickly, particularly if you limit your loop to 20 seconds or less. If you get much longer than that, it’s going to take too long to download.

DO NOT upload your videos directly to WordPress unless they are TINY as videos go. You want to keep your WordPress database as spry and as light as possible. If it gets bogged down with a bunch of gargantuan video files, it’s not going to perform well. Plus, depending on who you are hosting with, delivering videos from your server may violate their Terms of Service. The last thing you want is for your hosting provider to pull the plug on your site without warning because you’re using too much bandwidth or too many resources on the server. Don’t risk your precious website going “bye-bye” because you violated your host’s Terms of Service.

To mitigate the video performance issue, I use Amazon S3 (I’ll elaborate in a future post). It’s cheap, it’s fast, and all I had to do was create a bucket there where I store and serve my HTML 5 videos. It’s as slick as a greased kid on a Slip N’ Slide, and it keeps you from cluttering up your WordPress database. And that, friends — to borrow Charlie Sheen’s parlance — is bi-WINNING.

But I digress…

As I was saying a few paragraphs ago, once you’re dropped your bgvideo shortcode in and then you can just add another text module that has your hero copy and call to action buttons.

Next, I’ll talk about how to add multiple transparent background colors that allow the background video to bleed through using CSS and your Divi child theme.

]]>https://montidesign.com/full-screen-background-videos-twist-divi-part-2/feed/8Full Screen Background Videos (with a Twist) in Divi, Part 1https://montidesign.com/fullscreen-background-videos-twist-divi-part-1/
https://montidesign.com/fullscreen-background-videos-twist-divi-part-1/#respondFri, 12 Jun 2015 07:53:39 +0000http://www.montidesign.com/?p=1632Have you seen those web sites that have the big, spiffy, full-screen, looping video background as part of their site header? Well, that's not hard to achieve with Divi. Here's Part 1 of a three-part tutorial on how to create fullscreen video backgrounds and video hero banners with the Divi theme from Elegant Themes.

Howdy, friends.

This is Part 1 of a three-part tutorial on how to create fullscreen video backgrounds and video hero banners with the Divi theme from Elegant Themes.

What do I mean by a “video hero banner”?

Invision’s website, which I like a great deal, is a good example of it:

In their banner area, an HTML 5 video loops in the background. The background video is set that behind a semi-transparent black background so that the hero copy and the call to action button is more legible. This is a very attractive technique, and it’s also very much in vogue right now.

And it’s not hard to achieve with the Divi theme.

Here are a handful of websites built by yours truly where I’ve done something similar using Divi. The most recent one is a site for Target Restoration:

Like the Invision site, I’ve set up a looping HTML 5 video in the background and set it behind a semi-transparent black so the hero copy and call to action buttons stand out enough to be readable.

You can also check out downtoearthtechnology.net and mcgregorexchange.com, both of which are my handiwork and employ the same technique in Divi that I’m outlining in this tutorial. There’s an added twist though to these latter two examples, however — the background video is fixed in its position, so that when you begin to scroll down the page it approximates a parallax scrolling effect.

What’s more, I’ve used semi-transparent background colors on the different content sections to allow the video to bleed through a little bit. That adds some visual interested to the background as well as some texture, but it’s unobtrusive enough that it doesn’t compete with body copy.

In Part 2 of the tutorial, I’ll walk you through creating the video hero itself. Then, in Part 3, I’ll talk about setting up the transparent backgrounds in Divi and how to apply them to your content. See you in Part 2.