Introduction
Crafting a multilingual website with Divi is a bold and rewarding endeavor that fuses stunning design with powerful language capabilities to elevate user experience and expand your global reach. With the unmatched strength of Divi, Polylang, and ACF at your fingertips, you can build a site that speaks to everyone—clearly, confidently, and beautifully. This guide empowers you to create a dynamic, inclusive, and impactful web presence that honors linguistic diversity while maintaining the signature elegance of Divi. Unleash your creativity and captivate a worldwide audience with every click.
Install Divi Theme
- Download the Divi Theme zip file from your Elegant Themes account.
- Go to Appearance > Themes > Add New in your WordPress dashboard.
- Click Upload Theme, select the Divi zip file, and click Install Now. Then click Activate.
Install Polylang
- Navigate to Plugins > Add New.
- Search for “Polylang”, then install and activate it.
- Use the setup wizard or go to Settings > Languages to add languages (e.g., English, French, Spanish).
Install Advanced Custom Fields (ACF)
- Navigate to Plugins > Add New.
- Search for “ACF”, then install and activate it.
Create the Language Selector Custom Field
- Go to ACF (Advanced Custom Fields) in the WordPress admin.
- Select Field Groups
- Click Add New
- Name the field group “Language Selector.”
- Add a new field with the following:
- Field Type: Select
- Field Label: Page Language
- Choices:
en : EN
fr : FR
es : ES
- Set Settings Rules to “Post Type is equal to Post.”
- Click Save to save.
Build a Multilingual Template in Divi
- Go to Divi > Theme Builder.
- Create or edit a template.
- Add your desired sections and modules.
Set Conditional Display Based on Language
- Open the settings of the module you want to conditionally display.
- Go to the Advanced tab, then Conditions.
- Add a condition using “Manual Custom Field Name.”
Custom Field Name: page_languageValue: en / fr / es (as needed) - Name the condition descriptively, enable it, and save.
Apply and Test the Language Selector
- Create or edit a page of the selected post type.
- Ensure the Page Language field is visible. (Check Screen Options if it’s not.)
- Select the appropriate language.
- Add your content and save.
- Preview the page to verify the conditional display works.
Congratulations, you’ve just made your Divi template multilingual!
You now have a multilingual component within Divi, controlled by a custom field and displayed conditionally based on the language selected for each page. This solution leverages Divi’s Theme Builder, Polylang’s translation capabilities, and ACF’s custom fields to offer a scalable, low-maintenance solution for multilingual WordPress sites.
