Divi Person Module with Translucent Hover Effecct

Found this on Reddit in the rdivi sub. The username I borrowed heavily from is u/Some_leek3330. This effect uses the Person Module.

We’ve worked hard building our websites. So why is everybody in a hurry to move on instead of sticking around to read our content?

Bounce Rates — The percentage of visitors who fail to engage with more than one page on our site. This is a very common problem shared by most small-business websites. A number of factors can contribute to the problem. Are there any simple solutions?

Sleuthing out the bounce rate by logging into to our Google Analytics dashboard. If you see a bounce rate higher than 50 percent to 60 percent of your visitors, or an average time-on-site that’s less than one minute, consider taking one or all of the following actions.

Experiment with multimedia.

Multimedia files tend to hold viewers’ attention for longer. Your visitors might not sit down and read 2,000 word articles, but they may listen to all of the same content in a single visit if it’s conveyed through an engaging video or audio.

Try experimenting with everything from embedded video clips to slideshow presentations to podcasts to image galleries. Measure the impact of these additions on your site’s “stickiness” metrics to determine which techniques to use again.

Tighten Up Your Design

Visitors decide within seconds whether to stay on a web page or not. It’s your duty to make sure that decision is positive.

Since the human brain processes visual information first, a professional and pleasant design goes a long way to make this outcome much more likely. However, on the flip side, if your design looks like a throwback to the 90s, your visitors are out of there faster than you can say “animated background image”.

Make your content more readable.

If you’ve ever stopped by a web page that consists of nothing more than a long, unbroken piece of dense text, you know how important readability is in attracting and keeping people on a website.

To make your content more readable, adopt the following techniques:

Declutter — Remove unnecessary distractions such as unneeded widgets and keep things simple. Focus on what really matters. This will keep your visitors focused as well.

Create space — Give elements enough breathing room. Cramped design is not visually appealing and will send visitors packing. Margins and padding around page elements are your friend.

Place important content on top — Have a look at your website (including the mobile view). Is your most important content immediately visible? If not, change it. Anyone coming to your site should immediately understand their benefit of being there.
These tips might seem simple, but they create more elements on a page for your readers to engage with, and can significantly reduce your site’s bounce rates.

Add internal links.
Another contributing factor to high bounce rates is the failure to present readers with multiple content options that might interest them. For example, suppose you land on a sports website looking for the answer to the question, “Who won the 1997 Super Bowl?” The page gives you the answer, but fails to provide links to supporting pages about star players Brett Favre, Reggie White and Desmond Howard — all topics that may have interested you and kept you on the site longer. Instead, you get your information and leave, contributing to the site’s high bounce rate.

Can you see what I’m doing here?

• Cut paragraphs so that they consist of no more than two to five sentences
• Use subheads to break up content into sections
• Add bullet or numbered lists when possible
• Bold or italicize key words and phrases

One simple way to keep people on your site longer is to add internal links to other related pages throughout your site. Though these links also provide some search engine optimization (SEO) value, it’s important to structure them with the goal of helping your readers find other information they’ll like. Don’t use this as an opportunity to keyword-stuff your links full of SEO phrases.

Use High-Quality Visuals

As pointed out earlier, humans are highly visual. For that reason, images are among the most engaging types of content out there. As a consequence, adding them to your web pages is a good way to improve time on site.

Visuals make written content more engaging, can support your argument aesthetically and are a great way to break it up. Plus, with the amount of free images on the web, there’s really no excuse not to use them.

When you do use visuals, make sure they are relevant to your topic and that you optimize them beforehand. Plus, don’t limit yourself to images and photos. Use infographics, embed videos, presentations and other visual content.

Gradient Horizontal Line

Demo and Code

Demo

HTML

<div id=”gradientLine”></div>

CSS
#gradientLine {
height: 2px;
width: 100%;
display: block;
background-color: background: #a90329;
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJod…EiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
background: -moz-linear-gradient(left, #a90329 0%, #a3039d 44%, #1800a3 100%);
background: -webkit-gradient(linear, left top, right top, color-stop(0%,#a90329), color-stop(44%,#a3039d), color-stop(100%,#1800a3));
background: -webkit-linear-gradient(left, #a90329 0%,#a3039d 44%,#1800a3 100%);
background: -o-linear-gradient(left, #a90329 0%,#a3039d 44%,#1800a3 100%);
background: -ms-linear-gradient(left, #a90329 0%,#a3039d 44%,#1800a3 100%);
background: linear-gradient(to right, #a90329 0%,#a3039d 44%,#1800a3 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a90329', endColorstr='#1800a3',GradientType=1 );
}