venezia child theme for divi

Welcome to The Design Space.

On this page you will find everything you need to install your child theme.

If you haven’t already, join the big friendly Facebook community of like-minded people in The Design Space Lounge where we all share inspiration and expertise, and get help when we’re stuck on something.

If you have any technical problems with installation itself, please do submit a ticket.

01.

INSTALLING & USING Divi

In this section we will help you get started with the Divi parent theme, from installation through finding your way around and getting further information and help. The Divi documentation from Elegant Themes is impressive and very easy to follow.

If you haven't used Divi at all before, we recommend starting right here.

Divi Documentation and Support Forums

Elegant Themes has comprehensive Divi Theme Documentation, with sections on Basics, Modules, Library, Theme and Module Customizers and Additional Features.

If you don't find what you need there, check out their Divi Support Forum in the members area, where you can open a ticket if you haven't find the answer you're looking for.

Keep an eye on the Elegant Themes blog with its Divi Resources tag.

Divi Nation is the podcast to tune in to for curious interesting and downright brilliant Divi talk.

There is also the very fabulous Divi Theme Users Facebook group which you can join to see and take part in knowledge sharing and discussion.

InstallING Divi

Here's the official Divi installation video by Elegant Themes.

Divi basics
  • If you haven't used Divi before we highly recommend you watch this video by Elegant Themes, which introduces the Divi Builder and will help you understand the basic principles of the Divi page builder.
  • Working with Divi Builder is impressively intuitive, so you may well find you can just get stuck in and learn as you go, but if you would like a little more guidance then the Divi Basics section of the Elegant Themes Divi Documentation area has excellent walkthroughs that will give you a thorough overview.

02.

INSTALLING YOUR CHILD THEME USING THE INSTALLER PLUGIN

Our one-step install creates a perfect replica of the demo site, complete with pages, posts, images, menus and more.

Note: Because the demo data includes all of those things, please check the boxes to indicate which parts of the demo site you wish to install.

1. GET THE DOWNLOAD AND UNZIP IT
  • Your download can be found in your Account Area under Downloads. Click DOWNLOAD and the zip file will download to your computer.
  • The file is called UNZIPME - NAME OF YOUR THEME KIT.zip. Use your computer's search function with your template name if you don't know where it went, but it's probably in your Downloads area.
  • Now unzip the file - as you can see from the name we have given to the download file, this is a step that is often missed in the excitement.

To unzip on a Mac it's Right click > Open or double click. On a PC Right click > Extract. Some computers are set to auto unzip on download, in which case jump straight to look at your files.

Inside the unzipped folder, you will find the installable theme zip file (name of your theme-installer.zip) , an instructions file that links to this area and any additional plugins and design files included with your product.

2. UPLOAD THE THEME INSTALLER PLUGIN TO THE PLUGINS AREA

If you have previously purchased themes from the The Design Space Co this next step will be very different to how you have installed your themes in the past. Your new theme is no longer uploaded as a theme but now as a plugin.

 

  • In the dashboard area of your website, hover over the Plugins item in the left hand menu then select Add New.
  • Once the Add Plugins page has loaded click on the Upload Plugin button towards the top of the page.
  • Now locate the name of your theme-installer.zip file and click the Install Now button.
  • There may be a slight delay as the plugin is uploaded but once the process has finished you will be presented with the below screen. Click on the Activate Plugin button.
  • On activating the plugin a new menu item called name of your theme Installer will be added towards the bottom of the left hand dashboard menu. Click on it to continue to the next theme setup step.
  • The below screen should now appear which allows you to choose what data and templates you would like to include in your installation. Click on the toggles to turn options on and off as you work down the screen. If you are not sure just leave all the toggle options as they are and keep scrolling until you reach the bottom of the page.
  • When you are happy with all your toggle settings and get to the bottom of the page, click on the Begin Site Import! button to move to the next stage of the installation.
  • The black progress bar will move towards 100% as the theme and all it's accompanying files are uploaded. Once this process is finished you will see the below scree. Well done, you've successfully installed your new theme.

Special features of venezia

FONTS, PLUGINS & INSTAGRAM

Visit our demo site here.

The free Google fonts used are Lato, Rosarivo, and Pinyon ScriptYou can download all Google fonts here.

NAVIGATION LINKS TO EDIT

  • On the home and landing pages there are URLs in various buttons
  • The links here are in text modules…

  • …and you will find their URLs in the Text tab of the Content in the text module settings.

  • The portfolio and gallery pages have gallery URLs in the call to action modules. Note that on our demo we have not included page links for the gallery pages in our top menu.
  • Further URLs are found in buttons on the about and info pages.

ALT HOME LANDING PAGE

  • To have the header and footer areas hidden for the landing page as on our demo, go to the Page Attributes area and choose Blank Page from the Template dropdown.

BLOG SETTINGS

  • For the blog page, create a menu BLOG CATEGORIES including your post categories, and assign it in the settings of the blog category menu module.
  • For our demo blog posts we have chosen the elegant Full Width option for the Divi Post Settings > Page Layout which you will find on the right when looking at the post in the back end.

PERSONALISE YOUR CHILD THEME

We know it can be daunting to take the first steps towards making a template your own, especially if you're not overly familiar with using Divi or WordPress. We've included the areas we find most people want help with when starting out with personalising their site.

WORDPRESS Settings AREA

On the dashboard, go to Settings and take a look around the settings areas.  There are a couple of things you will want to get configured right away.

Go to Settings > Reading. 

  • In the Front page displays area select A static page.  Set the Front page to be HOME or whatever other crazy name you've given the page you want people to land on first.
  • If you are planning to use the theme's included blog layout (rather than let WordPress autogenerate the blog page) leave the Posts page as -Select- and click the blue Save Changes button before you move on.

Go to Settings > Permalinks. 

  • Select Post name as your permalink setting - we find this one works best for most sites.  Save Changes before you leave.

Divi Theme Options

Go to Divi > Theme Options and have a look around.

  • Most of what you need for now will be in the General Settings tab.
  • This is where you set your Logo image, enter your social media Profile URLs and select your Colour Pickers Default Palette.
  • You can also add your social media links here
Divi Theme Customizer

Go to Divi > Theme Customizer

  • The sidebar on the left gives you access to global settings for all sorts of aspects of your site. On the right is your site, so you can see the effect of any changes you make in real time.
  • Work through the tabs, methodically changing colours, fonts and any other controls to reflect your brand.
  • To update your Favicon image, go to Site Identity > Site Icon area. Just make sure the file is 512px x 512px and is a png or jpg!
  • One you will want to get to is Footer > Bottom Bar > EDIT FOOTER CREDITS (unless of course you want us to take the credit in perpetuity for your website in all its glory).

  • The controls in the bottom left corner are super handy for taking a look at how your site will appear on different device screens.
  • Click on the blue Save & Publish button at the top left when you're happy with any changes you make in here
WorkING with links
  • Most of our templates contain navigation links that use URLs.
  • When you install your template they are set up to link to our demo site. You will need to edit the URLs to link to your own content.
  • You'll know if you missed a URL link edit when you click a link in your site and find yourself feeling puzzled and looking at our demo site again!
  • In the Special Features section you will find some pointers on where to look for URLs that will require editing for your template.
  • Links may be to pages, posts or external links. You'll find the URL in the settings for the module that has the link.
  • Scrolling links (the ones that take you to a particular place on a page) have #whatever at the end of the URL. You should leave that #ending untouched because it works with a CSS ID anchor we have included.
  • You can also make your own scrolling links by inserting the anchor word of your choice in the CSS ID setting for a section, row or module.
WorkING with images

Our recommended image sizes (longest side) are:

  • Full width images: 1920px
  • Gallery images :1200px
  • Blog post images and images for central content: 1080px

Go to Media > Media Library.  You will see the images that came with the download - they are there as place holders only and won't be needed once you've got your own fabulous images uploaded.  It's really easy to upload your own image files by clicking Add New and using drag and drop or Select Files according to preference.

  • Go ahead and upload some of your own images so that you can use them to start making your theme your own.
  • To change an image displayed by a module go to its settings and edit Image URL,  Background Image URL or the Gallery associated with the module.
  • To change an image displayed by a widget (in sidebar and footer areas) go to Appearance > Widgets and edit settings for the widget.
  • For a little more help with images head to our Further Learning area, or for a lot more help, sign up for our SiteSchool course.
WorkING with fonts

There are a whole lot of ways to work with fonts in Divi, but let's keep it as simple as possible.

  • There is a large selection of native fonts that come along with Divi, which represent about 2/3 of the free Google Fonts selection. These are the fonts that appear on drop-down selection lists for fonts within Divi Builder.
  • Custom fonts, not native to Divi, may be free or paid-for downloads. Google FontsFont Squirrel and Creative Market are all good sources.  It is good practice to use only fonts which you have a license to use for the web.
  • In the Special Features section we include a list of the fonts used in the demo for your template. Wherever possible we use Google fonts, which are free to download and use. Any non-native fonts you want to use will need to be installed as custom fonts.

UPLOADING CUSTOM FONTS

  • Divi supports uploading of custom fonts and you can do this through any text module, via the font selector. Once uploaded the font will become available in all font selectors.
  • Note. Many WordPress installs natively block the upload of custom fonts (and other file types that aren't images). You can edit your WordPress functions.php file to temporarily allow font uploads. Once your font is uploaded, you should delete the script which might weaken your website security.

    This tutorial from Elegant Themes shows you how to do it. 

WorkING with CSS

Our child themes usually contain a small amount of custom code (CSS) to give your theme some finishing touches.

We have written the least possible code required and annotated it clearly so that you can update it easily if you need to. Importantly, changes you make to our CSS won't be affected when you update the Divi parent theme or your Design Space template.

Go to Appearance > Editor. In the Select theme to edit dropdown at top right select your theme.

  • CSS code looks a little intimidating, but it's really truly OK and not scary once you start to get familiar with the terminology.
  • We recommend that any additional CSS is entered below ours, for clarity.
  • If you would like to test a change in your browser without making it live, we recommend using Chrome Developer Tools or the FireFox browser extension Firebug.
  • For further help with CSS sign up for our SiteSchool course.
Social Media Integration
Here are some starting points for integrating our recommended social media tools, which are generally free plugins or free widgets.

MONARCH SOCIAL SHARE & FOLLOW PLUGIN

  • MONARCH is a plugin for social follow and share buttons that is included with your Elegant Themes membership. You can add share and follow buttons to pages, posts, sidebars and footer areas.
  • You will need to go into Tools > Monarch Settings to configure this plugin.

INSTAGRAM FEED

Showing your Instagram Feed is really easy. We recommend this free plugin.

Instagram Feed by Smash Balloon.

Tip: Make sure you have logged into Instagram in your browser, then follow the three simple steps and place the suggested shortcode [instagram_feed] in any text or code module, where you'd like your feed to appear.

You can also check out this blog post about How to Add An Instagram Feed to Your Website.

Divi Child Theme FAQs

Select your template to view font information, details of special features and a video tour of your template with Melissa.

Theme install style sheet message when I try to install my .zip

If you're seeing this Style Sheet Misssing message check when you tried to upload to the themes area, you need to upload the installer file to the Plugins area and delete the plugin after installation.

I get 'No Results Found' where I should have blog posts

First, make sure you have some blog posts and some categories assigned to them. Next, locate the blog module and in its General Settings select the post categories you would like displayed by the module.  Save & Exit, Update.

MY BLOG PAGE LAYOUT ISN'T SHOWING

Go to Settings > Reading and make sure that your Posts page is set to blank. If you have allocated Posts to your blog page, that will override your Divi page layout.

HOW BIG SHOULD My IMAGES BE?

Our recommended image sizes (longest side) are:

  • Full width images: 1920px
  • Gallery images :1200px
  • Blog post images and images for central content: 1080px

Go to Media > Media Library.  You will see the images that came with the download - they are there as place holders only and won't be needed once you've got your own fabulous images uploaded.  It's really easy to upload your own image files by clicking Add New and using drag and drop or Select Files according to preference.

  • Go ahead and upload some of your own images so that you can use them to start making your theme your own.
  • To change an image displayed by a module go to its settings and edit Image URL,  Background Image URL or the Gallery associated with the module.
  • To change an image displayed by a widget (in sidebar and footer areas) go to Appearance > Widgets and edit settings for the widget.
I STILL HAVE A QUESTION

If you've had a really good look on this page and you're still stuck, log a support ticket with us and we will help you.

Our Favourite Plugins for Divi

A round up of our recommended plugins.

INSTAGRAM FEED

Showing your Instagram Feed is really easy. We recommend this free plugin.

Instagram Feed by Smash Balloon.

Tip: Make sure you have logged into Instagram in your browser, then follow the three simple steps and place the suggested shortcode [instagram_feed] in any text or code module, where you'd like your feed to appear.

You can also check out this blog post about How to Add An Instagram Feed to Your Website.

WooCommerce / E Commerce Plugin

If you want to sell something through your site you're going to need an eCommerce plugin. WooCommerce is free to install, is easy to configure with PayPal or Stripe, and has an easy install process.

For templates where we use WooCommerce in our demo we prompt you to upload and activate it during the install steps, but it can be used with any of our Divi templates.

Divi has built-in WooCommerce integration and even has a shop module which you can insert into any page to display your products or product categories.

FIND OUT MORE 

Also, check out this blog post Using WooCommerce With Divi.

For further learning on using WooCommerce sign up for our SiteSchool course.

We aim to offer high quality support to our customers every step of the way.  If you have noticed an error on this page - maybe something that has gone out of date due to upgrades, or a typo - please let us know so that we can continue to be the best we can.