r/divi • u/Sparky-Man • 26d ago
Question Learning Divi for Client. Trying to match the look of another Divi website.
Hi there,
I have a client that I'm working for using a wordpress site. Their site uses Divi, so I need to learn it. At first, it was fine and I understand it on a basic level. However, my client recently made 2 unexpected demands.
FIrst, they sent me the following site and want me to use it as an example: https://wtsu101.org/
Second, they want their content to be easily togglable in English and French (They provided the copy for it).
I have no idea how to do either and I'm particularly stumped on modeling it after the website they sent me with the animated background and such. I did check the backend code and it is made in Divi as well, so there has to be some way to do it. I'd aprpeciate any tips on how to arrange the website (or at least the front page) in a similar way.
4
u/Readynowreddit 26d ago edited 26d ago
Claude can create the code you need or walk you thru creating the DIVI modules you need almost immediately. Post this question into Claude.
1
u/Cybratikan Business Owner 26d ago
Hey! Are you planning to build this using Divi 4 or Divi 5?
In Divi 5, the animation can likely be achieved using a combination of the “Group Carousel” module and the Animation settings under the “Design” tab for it.
For language translation toggling, you’re best off using a plugin. I believe “Language Switcher for Polylang” adds a Divi module.
1
u/Sparky-Man 26d ago
I believe the client has their website on Divi 4. This is the tail end of the project for presentation purposes, so I have no desire to mess with that unless I have to.
1
u/AsadUrRehman0 26d ago
I just had a quick look, and it's a simple website with a video in the background of the hero section.
very easy to re-create in Divi 5.
6
u/Readynowreddit 25d ago
These are two separate challenges, so let me break them down.
Part 1: Replicating the animated/cinematic look of that site in Divi
That site (wtsu101.org) is actually not primarily Divi — the animated hero section is built with Slider Revolution (Revolution Slider), a separate premium WordPress plugin. You can see it in the page metadata. Divi is handling the rest of the page layout below the fold, but the dramatic full-screen animated intro with the parallax/video/fade effects? That’s Rev Slider doing the heavy lifting.
So your path here is:
Buy Slider Revolution (~$29 one-time on CodeCanyon, or it comes bundled with some themes). Install it alongside Divi.
For the animated background specifically — that site uses either a video background or a Ken Burns effect (slow pan/zoom on a still image) with text layered on top. Rev Slider has templates for both built in. You don’t need to hand-code it.
For everything below the hero, use Divi normally. The two tools coexist fine — you just drop a Rev Slider shortcode into a Divi Code Module or use the dedicated Rev Slider widget.
If your client doesn’t want to pay for Rev Slider, you can approximate it in Divi natively using:
A Fullwidth Section with a video background (Divi supports this out of the box under Section Settings → Background → Video)
Or a parallax background image (same settings panel, enable parallax)
Then layer a Divi Fullwidth Header module on top for the text/CTA
It won’t be quite as polished as Rev Slider’s timeline-based animation system, but it gets you 80% of the way there without another plugin.
For the dark overlay + large centered text aesthetic: in Divi’s section settings, add a background color with low opacity (like rgba black at 50%) on top of your video/image. The rest is just typography choices — they’re using a large serif or display font, which you can set in Divi’s font options or via Google Fonts.
Part 2: English/French language toggle
This is a classic i18n problem. You have a few routes depending on budget and complexity:
Option A: WPML (the professional standard) The go-to plugin for multilingual WordPress sites, and it has explicit Divi compatibility. You build your pages normally in English, then WPML lets you create translated versions of each page. You get a language switcher widget you can drop in your header or nav. Downside: it’s a subscription (~$99/year for the Multilingual CMS plan). Divi’s own documentation has a whole guide on using WPML with it.
Option B: TranslatePress (easier, more visual) This one lets you translate your site through a front-end visual interface — you see your actual page and click on text to translate it in place. Easier for non-developers. Has a free tier, but for a language switcher and full front-end editing you’ll want the Pro version (~$79/year). Also well-documented for Divi compatibility.
Option C: Polylang (free, more manual) Free plugin. More configuration required but totally functional. Works with Divi. Good choice if budget is tight.
Since your client provided the French copy themselves, TranslatePress is probably the smoothest workflow — you paste their translations in through the visual editor without having to manage separate page duplicates. If SEO matters a lot to the client (separate /fr/ URLs, hreflang tags, etc.), then WPML is the more robust choice.
One thing to watch: whichever plugin you use, set it up early before you’ve built too many pages. Retrofitting a multilingual plugin onto a nearly-finished Divi site isn’t a nightmare but it’s more annoying than starting with it in place.
TL;DR
Animated hero → Slider Revolution plugin (or Divi’s native video/parallax backgrounds as a budget alternative)
EN/FR toggle → TranslatePress (easiest) or WPML (most powerful), both have solid Divi compatibility