Modified on: Mon, 18 Jan, 2016 at 8:52 AM

GENERAL INFORMATION

Thank you for purchasing Amour for Divi. 

Divi is a premium WordPress theme by elegantthemes.com.  Divi is features a beautiful interface, is fully responsive and features a drag-and-drop page builder allowing you to create unlimited custom page layouts.  If you do not already own Divi, click here to purchase:  DIVI THEME

Please use this guide to assist you in customizing the design. Please read all of the instructions and familiarize yourself with Divi by viewing their tutorials library here: DIVI LIBRARY

Please contact me at support@dawnaldermandesign.com or submit a ticket above if you have any questions, I am more than happy to assist you with any questions you may have. 

*PHOTOSHOP or PHOTOSHOP ELEMENTS is required to modify the PSD files. 

TIP: Images with a clear or transparent background must be saved as a png file to maintain transparency. All the PSD files are correctly sized for the design.

FONT INFORMATION

The logo in this design was created using a premium font.  If you wish to have your logo created with this font, you will need to purchase it and download it onto your computer.  Once you have purchased and installed the font you can open up the (Amour_Divi_Logo.psd) file and create your own logo.  You are not required to use this font for your logo, it is only optional.

PREMIUM FONT USED FOR LOGO:  BIRD SCRIPT

FREE GOOGLE FONTS:

Crimson Text

Italianno

SLIDER GALLERIES

The slider galleries in the demo design for both the Master Slider and the built in Divi Gallery Slider use a PSD template with clipping masks to create the slides for the gallery pages.  It is important that you create you images all exactly the same height and width for smooth transitions.  The gallery image container for the demo design is sized exactly: 1080px wide by 719px tall.  The PSD template to create your images in named (Amour_Slide_Gallery_Template.psd).  When creating your images, be sure to use the “Save for Web” under file in Photoshop, select JPEG Medium, check Convert to sRGB, save and then upload into your gallery page(s).

DIVI BUILDER OVERVIEW

View more on their Youtube Channel & Join the Divi Facebook Group.

INSTALLING AND SETTING UP THE DESIGN

  1. You must have Divi installed inside of your WordPress Site.

  2. Unzip the (

    Amour Child Theme for Divi.zip

    ), you will find the 

    (

    Amour_Child_Theme_1.0.zip

    ), this is the zip file that needs to be uploaded inside of the Themes area in WordPress.

  3. To install your new design log into your WordPress Site and install the zip file (Amour_Child_Theme_1.0.zip) via Appearance -> Themes

  4. Install the required and recommended Plugins.  Import the Amour Design Layouts for Divi here: WordPress Dashboard -> Tools -> Import -> WordPress.  Upload the xml file named (amour.wordpress.2015-9-20.xml).

  5. If you install the demo content, all of the pages from the demo design will be added and you can modify or delete these pages.  If you choose not to install the demo content you will need to create your pages and load the layouts from the Divi Library inside of the page or post editor using the Divi Builder.

  6. Create your pages using the Load Layout link in the page builder.  At minimum create your Home and Blog page, the other pages can be created once the 

    initial

     set up is complete. 

  7. Create the Home Page, by going to the pages area of WordPress, clicking add new, name the page “Home“, click “Use Page Builder“, 

     select “

    Load From Library

    “, select “

    Add From Library

     choose “

    Amour Home Page Grid Layout

    “, this will create your home page just like the home page on the demo site, this is an Essential Grid called Amour, the grid images are pulled from your most recent blog posts and the images that appear are the featured images selected for each post.  You will need to have at least 6 posts created for your home page grid to appear like the demo site.  Your page will be blank and not appear correctly until you have installed and uploaded the Essential Grid Data.

    Please see #14 Below on how to add the Essential Grid Data.

  8. Create Blog Page, by going to the pages area of WordPress, clicking add new, name the page “Blog“, click “Use Page Builder“, select “Load Layout“, choose “Amour Blog Layout“, this will create your home page just like the home page on the demo site. The blog page contains a module called Sidebar Right, in the demo set up it contains a “Text Widget” with custom coding for the search bar, a “Text Widget” with social media links,  “Archives Widget” and “Categories Widget” you can add these widgets by going here: Appearance -> Widgets -> Sidebar Right. This module in the demo uses the Sticky Menu or Anything Plugin, See #15 for information on how to set this option up. Below is the custom code that you will place inside of a Text Widget for your search bar just like the one on the demo site (

    IMPORTANT:: you will need to change the blue link in the following line of code to your own url: form action=”

    http://yoursiteurl.com

    ):

     

     

    <form action="http://yoursiteurl.com" method="get" accept-charset="utf-8"><input type="text" name="s" value=""  class="search-input"size="16" placeholder="search our blog"><input type="submit" class="search-submit" value="Search" ></form>

      Below is the custom code that you will place inside of a Text Widget for your social media links just like the one on the demo site (of course you will need to replace the URL between the quotes to link to your personal social media accounts): 

    <a href="http://www.instagram.com">instagram</a> |  <a href="http://www.pinterest.com">pinterest</a>  | <a href="http://www.facebook.com">facebook</a>

     

  9. Set the Static Home Page via Settings -> Reading.  Select “Home” for the static home page.  Leave the blog page BLANK, this design has a custom blog layout page.  You will chose the custom blog layout page in the menu area.

  10. Next you will upload your logo and make a couple of setting changes to the Divi Theme Options Panel here Appearance -> Divi Theme Options This is where you will upload your logo, favicon and set you social media links in the footer/header.  Included is a PSD file for sizing your logo to fit the design. There are many basic options that can be set here.  If you intend to use hot links, be sure to enable the smooth scrolling option. Below you will find a screen shot of the Amour General Settings.Divi_Options_‹_Amour_—_WordPress.png

  11. Next you will want to visit the WordPress Customizer Appearance -> Customize. Please make sure you have installed the Plugin called (Customizer Export/Import) this will allow you to import the customizer settings including colors and typography settings Appearance -> Customize -> Export/Import. Import and upload the file named (amour-export.dat).  NOTE: You also need to have the plugin called (Easy Google Fonts) installed in order to have the fonts used in this design, if you want to use any of the fonts in the design on your computer you will need to download and install them onto your system via GOOGLE FONTS. Here you will be able to set basic color, fonts, inline logo with menu, logo above menu, or vertical menu.  Amour is using the vertical menu option.  If you change the menu to anything other than vertical, you will need to make a change to the Essential Grid settings and a line of CSS, see Editing Custom Css Below.

  12. Next you will want to set up your menu.  You will need to have some pages created before you can add your menu items.  You can create menus that hyperlink to different areas within a page, link directly to a page or posts, or an outside URL.  Set up your menu items here Appearance -> Menus. View the installation guide video above for a visual of how to set up your menu items.  You can set up your menu now if you have all of your pages created, if you create more pages after setting up your menu, you will need to return to the menu area and add/remove any pages that you create after the initial set up.

  13. Edit the custom CSS, see Editing Custom Css Below.

  14. Essential Grid setup.  We have included the settings for the essential grid set up for this design.  Once you have Essential Grid installed you need to click on Ess. Grid -> Import-Export and import the file named (ess_grid_amour.json).

  15. Master Slider Setup.  We have included the setting for the slideshow using the master slider.  Once you have the master slider installed you need to click on Master Slider-> Import/Export and import the file named (Amour-master-slider-05-31-2015.json).

  16. Final Tiles Setup.  There is no way to export the settings, so you will need to manually add these here Final Tiles Gallery -> Add Gallery.   See the table below for settings.  With Final Tiles you can only add up to 20 images per gallery, if you want to have more you will need to upgrade to the Pro Version.  NOTE: This is a really cool lightbox, but the orientation of your images will change based on the settings, size of your images, number of images, etc.  Your grid may not end up looking like the demo grid, you will just need to play with the settings below to get the look you want.

    GENERAL

    WIDTH
    100%

    MARGIN
    5PX

    IMAGE SIZE FACTOR
    69%

    TILE MIN WIDTH
    274PX

    SIZE OF GRID
    95

    ALLOW IMAGE ENLARGEMENT
    ON

    LINKS & LIGHT BOX

    LIGHTBOX & LINK
    NO LINK

    BLANK
    OFF

    ENABLE TWITTER ICON
    OFF

    ENABLE FACEBOOK ICON
    OFF

    ENABLE GOOGLE ICON
    OFF

    ENABLE PINTEREST ICON
    OFF

    COLOR OF SOCIAL MEDIA
    DEFAULT

    CAPTIONS

    WORDPRESS CAPTION FIELD
    DONT USE CAPTION

    OTHER SETTINGS DEFAULT NOT USING

    HOVER EFFECTS

    ONLY AVAILABLE WITH PRO VERSION

    STYLE

    BORDER SIZE
    0PX

    BORDER RADIUS
    0PX

    BORDER COLOR
    #FFF

    SHADOW SIZE
    0PX

    SHADOW COLOR
    #FFF

    CUSTOMIZATIONS

    NONE

  17. Sticky Menu or Anything is a great free plugin.  We used it to stick the (CSS ID) #blogright (Sidebar Right Module) on the Blog Page, click here to see the plugin in action.  You can stick just about anything by using a module CSS ID.  Keep in mind however that you can only use the sticky on one element per page, it will not work if you try to add more.

  18. jQuery Pin It Button (Optional)  We have included this free plugin for a pinit button and created a custom pinit button.  If you install this plugin you will need to go into the plugin settings under Settings -> jQuery Pin It Button, and upload the custom pinit button.  PSD file for pinit button named (Amour_Divi_PINIT.psd)

EDITING THE CUSTOM CSS

Editing the Custom CSS.  If you love the design how it is, with the fonts, color, etc. you will likely not need to edit the custom css.  However if you change your fonts or colors there are several places that have been customized that require you to manually input color or font names into the CSS area.  We have created a duplicate of the custom css for this design in a text document included in your design file download, that way if you mess up or delete something you can start over with the original CSS for the design.  You will find the CSS for this design by visiting Appearance -> Editor choose Amour and select Stylesheet (style.css).  Much of this document may look really scary and intimidating, but do not worry, if you are unfamiliar with CSS and want to change your colors and fonts, then you will only be making simple changes to those specific lines of code.  If you know what you are doing with custom CSS, feel free to add your own.

To change the font name, look for a line of code similar to this, you will need to know your color hex code and the Google Font Name:  For example if you are changing your front from Crimson Text to Radley, you will find all of the instances of Crimson Text in the custom CSS and replace it with the new font Radley.  You only want to replace the actual name, not the other characters or areas in the code, so ‘Crimson Text’ will be come ‘Radley’.  The same rule applies to color, letter-spacing, font size, etc.  You can look up basic CSS CODE HERE.

 

#top-menu a{
    color: #333333;
    font-family: 'Crimson Text';
    font-style: none;
    letter-spacing: 2px;
    font-size: 12px;
    text-transform: uppercase;
}

**If you want to change the menu on the site from vertical to top or top centered you will need to remove this line of code from the custom css area.  This line of code is necessary if you are using Essential Grid on the Portfolio page full width, it adds padding, without this padding it will not appear centered on mobile. If you decide to change your menu from vertical you will need to use the Essential Grid Layout called Portfolio for Top Navigation, this layout does not have the extra padding that is required if you use the vertical navigation menu.

REMOVE THIS LINE OF CODE:

 

/*ADDS LEFT PADDING TO ESSENTIAL GRID (FULLWIDTH) ON PORTFOLIO PAGE MOBILE*/
 @media only screen and (max-width: 981px) { /* mobiles, etc */
.portfolio div#esg-grid-2-1.esg-grid.esg-layout-even.esg-container {
     padding-left: 0% !important;
}}

 

PLUGINS

Essential Grid WordPress Plugin (Required)


Essential Grid is a premium plugin included with this design.  We use this amazing plugin on many different areas of the site.  We use the Essential Grid on the Home page, About Page, Portfolio Page, Blog Page and Sidebar Column.  You can link to recent posts or pages within your site.  With Essential Grid your layout options are truly limitless.  While the plugin is included with the design if you want future updates and full support it is advisable that you purchase your own license.

http://essential.themepunch.com/

Instagram Feed (Optional)


Instagram Feed is a clean flexible solution for displaying one of the fasted growing social media platforms.  You will need to set up Instagram feed with your own unique instagram token and id, just follow the detailed instruction included with this plugin.

Smash Balloon Social Photo Feed

Final Tiles Gallery (Optional)

This is a great lightbox gallery with many options for interesting layouts.  

While the build in Gallery for Divi works just great, Master Slider features a touch swipe navigation for tablet and mobile.  

http://www.final-tiles-gallery.com/wordpress/

Master Slider (Optional)


While the built in Gallery for Divi works just great, Master Slider features a touch swipe navigation for tablet and mobile.  This is the free version, they also offer a pro version with many more features.

http://www.masterslider.com/wordpress/free/

Sticky Menu or Anything (Optional)


Sticky Menu or Anything is a great free plugin.  We used it to stick the (CSS ID) #blogright sidebar on the blog page, Click Here to see the plugin in action.  You can stick just about anything by using a module CSS ID.  Keep in mind however that you can only use the sticky on one element per page, it will not work if you try to add more.

Sticky Menu & Sticky Header

Easy Google Fonts (Required)

Google Fonts is a light free plugin that allows you to use Google Fonts on your site very easily.

Easy Google Fonts

jQuery Pin It Button (Optional)

We have included this free plugin for a pinit button and created a custom pinit button.  If you install this plugin you will need to go into the plugin settings under Settings -> jQuery Pin It Button, and upload the custom pinit button.

No Image Link (Optional)

Defaults the Image Link option when adding a photo to ‘none’.

No Image Link

Woocommerce (Optional)


This design includes custom styling for Woocommerce a very popular ecommerce plugin for WordPress.  Divi and Woocommerce work perfectly together and Divi has even created some custom modules specifically for this plugin.  Please view the brief video below if you are interested in setting up an ecommerce site using Divi and Woocommerce.

http://www.woothemes.com/woocommerce/


Leave a Reply

Your email address will not be published.