Rise & Shine

On the next screen, install & activate the necessary plugins. You may be prompted to setup WooCommerce if it’s not already installed. Just follow the prompts to complete the setup. Once all of your plugins have been installed and activated, you’re good to go!

Once the importer plugin has been installed, click the Tools > Import > WordPress link again to open the importer. You will see an option to upload an XML file. Click the “Choose File” link and locate the riseandshine-content.xml file from the Import folder of your Rise & Shine download package. Complete the import dialog to finalize the import and add all pages, posts & content.

Before leaving the import page, you’ll want to import the Divi Library as well. Just as before, click the “Choose File” link and located the riseandshine-library.xml file and complete the import to add the items to your library.

Visit Pages or Posts to confirm that your sample content has been imported. Also visit the Divi > Divi Library page to confirm that your library items have been imported.

To import these options and set up your Customizer like the demo, be sure that you’ve successfully installed and activated the Customizer Export/Import WordPress plugin (via Step 2). After installing and activating the plugin, go to Divi > Theme Customizer and look for the Export/Import section – typically located at the bottom of the screen.

Click to find the riseandshine-customizer.dat file and add that file into the uploader within the Export/Import section of the Theme Customizer and press the “Import” button.

The first row module is made up of the split column section, similar to the layout featured on the homepage.

To replace the image, go to the row module settings > Advanced Design Settings and choose a new column background.

To replace the content, simply open up the text module and edit as needed.

The next row module is a what we call, the “Flyover Menu”. This is an overlay screen that appears when you click the “View Menu” button in each menu section.

Divi shortcodes are used to display the menu in a 2-column layout. For a list of all shortcodes available, click here.

There are also several neat effects that you can achieve by altering the classes over the flyover menu. You can preview each effect by clicking the View Menu button on the different menus of the Rise & Shine demo. Below is a complete list of effects that can be achieved by adding it as a class in the flyover menu row module:

open-fade-in
scroll-from-top
scroll-from-right
scroll-from-left

Be sure not to remove the fw-menu class as this will break the functionality of the menu overlay.

More information about the WordPress Countdown Widget plugin can be found here: https://wordpress.org/plugins/wordpress-countdown-widget/

More information and instructions for using Recipe Card can be found on their website at: https://wordpress.org/plugins/recipe-card/

Plugins > Editor > Select the Divi Login plugin > Select DiviLogin/login-styles.css

The logo used on the login screen is the same logo uploaded to Divi > Theme Options > Logo

To change the background image used, simply replace the image url for the .login class. 

If you would like to change the color from the Rise & Shine gold to your own color, simply find and replace all references to the hex code #dfa91f.

Once you’re finished editing or adding your styles, click Update File to save your changes.

Elegant Themes made a change in a recent Divi update that overrides the default mobile menu font. This can be easily fixed by adding “!important” to the following selectors under Appearance > Editor > style.css. Just search for the 2 styles below and add this to the font-family, as follows:

#et_mobile_nav_menu .mobile_nav.closed .mobile_menu_bar:before {
    font-family: ‘Montserrat’, Helvetica, Arial, Lucida, sans-serif !important;
}

#et_mobile_nav_menu .mobile_nav.opened .mobile_menu_bar:before {
    font-family: ‘Montserrat’, Helvetica, Arial, Lucida, sans-serif !important;
}

Unfortunately, there’s not a way to export our sample recipe along with our content.xml. Here’s a snapshot of our demo recipe to use as a guide, but it should be fairly self-explanatory how to add your own recipes. If you have any questions, please refer to the Recipe Card plugin page for more details: https://wordpress.org/plugins/recipe-card/

In some newer versions of Divi, the original “span” used to display the header is removed when the module is saved. If you update to the latest version of Divi, we’ve fixed this already, but if you’d rather just implement the change, here’s how.

Just go to Appearance > Editor > style.css and scroll until you get to the Menu section. Copy and paste the attached section in place of what you have. Just be sure not to remove anything other than this section in the css. And as we always recommend, be sure to save a backup of your stylesheet before making this change, just in case!

—

.fw-menu h3 {
 font-family: 'mustacheregular', Helvetica, Arial, Lucida, sans-serif;
 font-size: 60px;
 line-height: 0;
 margin: 20px 0 40px;
}

.fw-menu h3:before,
.fw-menu h3:after {
 background-color: #dfa91f; /* Set your left & right border colors here */
 content: "";
 display: inline-block;
 height: 2px;
 position: relative;
 vertical-align: middle;
 width: 50%;
}
.fw-menu h3:before {
 right: 0.5em;
 margin-left: -50%;
}
.fw-menu h3:after {
 left: 0.5em;
 margin-right: -50%;
}

.fw-menu .one_half strong {
 display: block;
}

.fw-menu .et_pb_column {
 border-right: 0!important;
}

If you’re seeing this, then you’re likely not using a shopping cart. This is an easy fix though, just go to Appearance > Editor > style.css and search for the following class. Either remove it altogether or comment it out like so: /* Code Here */

@media only screen and (min-width: 981px) {
#top-menu > li:nth-last-child(2) {
padding-right: 0;
}
}

We’ve fixed this in a recently released version of Rise & Shine, but you can also fix this by going to Plugins > Editor > Divi Login > login-styles.css. Just modify the following lines to fix the problem. You’re simply adding !important to the 2 styles listed below:

—

.login label, .login #nav a, .login #backtoblog a {
 color: #fff !important;
 text-transform: uppercase;
 }

.login form {
 margin-top: 20px;
 margin-left: 0;
 padding: 0;
 background: transparent !important;
 -webkit-box-shadow: none;
 box-shadow: none;
 }

By default, the max height of the menu is set to 2000px. If you would like to increase the height of the menu, simply go to Appearance > Editor > menus.css and search for the class .fw-menu.open. Increase the max-height selector to whatever px height you’d like and hit save. You’re good to go!