Installing Josefin

Subscribe to Our Newsletter

Receive our latest news, updates & special offers – straight to your inbox.


Thanks for purchasing Josefin Theme, a premium multi-purpose theme from Superfly, designed and developed in partnership with Artillery Media. In this page, you will find step-by-step instructions explaining how to install your new child theme.

Josefin was built specifically for use with Divi by Elegant Themes. In order to install this child theme, you must first purchase a membership to Elegant Themes and download the Divi theme package. If you’ve not yet purchased a membership, visit


If you are updating your version of Josefin to 2.0, here’s a couple of things you need to know:

  1. We’ve integrated the login customizer natively into the theme. You know longer have to install a separate plugin to customize your login screen. Just head to Divi > Theme Customizer > Login Customizer and style away! You can also go ahead and remove the separate Divi Login plugin as it’s no longer needed.
  2. We’ve also integrated a new version of the Page Builder Everywhere (PBE) plugin (version 2.0). You should be prompted to install the new version once you install Josefin 2.0. Once installed, you will need to setup your new modules using the new PBE methodology. It’s just a matter of going to Appearance > Widgets and adding a Divi Layout section to the PBE sections, as needed and selecting the appropriate layout you’ve built from the Divi Library. For detailed instructions about Page Builder Anywhere 2.0, please read the Product Description here.


Once you’ve downloaded the Divi theme package, login to your WordPress website and go to Appearance > Themes. Find and upload the Divi parent theme and activate it. Just like you installed the Divi parent theme, install & activate the child theme located in your Josefin download package.



Once you activate Josefin, you should see a notification at the top of your screen prompting you to install the recommended plugins. Simply click the “Begin installing plugins” link to get started.


On the next screen, install & activate the necessary plugins. Once all of your plugins have been installed and activated, you’re good to go!

Migrating & Importing

Sample Content


We’ve partnered with Epic Web Solutions & Monterey Premier to bring you one of the simplest, easiest ways to import and activate all demo content… all with one click! Once you’ve activated your plugins, go to Divi > Import Demo Data and click the “Import Demo Data” button. Sit back and let the system do the rest for you! Be patient though, depending on your hosting provider and server speed, this process could take several minutes.


Setting Up the Twitter & Instagram Feeds:

If you’d like to replicate the look & functionality of the Josefin demo, you’ll need to do a little bit of setup to add the Twitter & Instagram feeds to your footer. If you installed the plugins in the steps mentioned above, you’re already halfway there. There’s just 2 more steps and you’re good to go.

  1. Open up Appearance > Widgets and create 2 new widget areas: one for the Twitter Feed and another for the Instagram Feed. You’ll need to save the page and refresh to see your newly created widget areas. Now drag and drop Rotating Tweets in to the Twitter Feed area and Instagram into its area. You can open up these widgets to enter your username and adjust the feed displays accordingly.
  2. To setup the Twitter widget there is one last step remaining, due to Twitter’s API rules. Go to Settings > Rotating Tweets and follow the instructions on screen to obtain your API credentials. Once you’re done, hit Save Changes and you’re good to go!


Setting Up The Twitter/Instagram Widgets
Setting Up Split Sections
Implementing the Josefin Animations
Switching between light/dark toggles & contact forms


These add-ons are extra features you can add to your Josefin site. These add-ons are not fully supported…implement at your own risk.  Be sure to save your custom CSS in the Theme Options before making these changes. You can save the CSS code in a text file on your machine.

Creating a Features Grid
Add a White Border Around the Viewport
Implement Worth The Read Plugin
Adding a Ken Burns Effect to Section Backgrounds

Need Help?

We’ve Got Your Back

Have Divi Questions?

For assistance with using the Divi theme framework, Elegant Themes offers free technical support to all their members. Login to your account at and click “Support”.

Questions About Josefin?

For questions or support regarding Josefin, click here. We can help you with basic questions related to installing your child theme or provide premium support or advanced customization for an additional fee. Be sure to sign up for our newsletter to receive notifications of Josefin updates or other premium child themes and add-ons coming soon!

Plugins Used in Josefin:

The following plugins are used (or recommended for use) in the Josefin Theme:

Terms & Conditions:

All designs are the intellectual property of Superfly and may not be sold, redistributed or given away. We ask that you respect the hard work we’ve put into this custom design and not send this file to others. Due to the nature of this product, refunds are not available. If you have additional questions, please visit us at

Basic support is available free of charge to help with installation of your theme and replicating the theme demo. However, we simply cannot support everyone’s customizations of the Josefin Theme. If you are new to the Divi Framework or have general questions related to customizing your child theme, we recommend joining one of the many Facebook groups available, specifically tailored for help & support with Divi.

Disclaimer: Josefin is a child theme created by Superfly in partnership with Artillery Media. Josefin is not a licensed product of Elegant Themes and Superfly is not affiliated with or sponsored by Elegant Themes.


Questions & Answers

How do I change my fonts? Can I use something other than Josefin?
We’ve setup Josefin as the default font… well, because the theme is called Josefin, lol. But we realize you may want to use your own fonts as well. If you do, here’s how you remove Josefin as the default font. Just go into Appearance > Editor > style.css. Just search for “font-family” and remove the “!important” piece from the css. Save your page and you’re good to go!


Now, just select whatever font you want to use from the Divi Module options or within the Divi Theme Customizer settings.

How do I change the main/fixed header color?

You will need to login and go to Appearance > Editor > style.css and search for the section labeled “HEADER”. These 3 styles control the color of the header. The first two styles are for the main header and the last is for the fixed header. Simply change the background-color value to whatever you’d like, save the page and you’re good to go!

body.et_pb_pagebuilder_layout #main-header {
background-color: rgba(0, 0, 0, 0) !important;
#main-header, body.single-project.et_pb_pagebuilder_layout #main-header, body.single-post.et_pb_pagebuilder_layout #main-header {
background-color: rgba(0, 0, 0, 1) !important;
}, body.et_pb_pagebuilder_layout {
background-color: rgba(255, 255, 255, 0.8) !important;


“The theme is missing the style.css stylesheet.”

If you’re getting this error or anything similar, it’s probably because you’re trying to upload the main .zip file that you purchased and downloaded. You first need to unzip the main download package to see the file. This is what you need to upload.

How Do I Change The Footer Text?

Josefin uses the Page Builder Everywhere plugin by to display the footer widget areas. Click here to read the instructions for how to make changes to the footer section(s).

How do I change my login screen?

We’ve natively integrated the Divi Login by inside the Josefin theme to bring you complete control over the look and feel of your login screen. To replace the background image or to completely style your login page, just go to Divi > Theme Customizer > Login Customizer and change whatever settings you’d like!