Beautiful Watercolor version 1.6.24 by dtbaker

Buy Now

Admin Demo

Get Support

item_preview

Live Backend Demo

Do you need to test out a theme feature in the admin backend? Need to see how the installer works before running it on your own website? Feel free to test everything here:

Theme Installation

Please watch this instructional video showing how to install this WordPress theme and setup default content:

Below are the step by step instructions:

  1. Purchase the theme from ThemeForest.net
  2. After purchasing go to your Downloads page ( http://themeforest.net/downloads )
  3. Click on the Download button and choose the Installable WordPress file option and save this ZIP file to your desktop.
  4. Login to WordPress Dashboard.
  5. Go to Appearance > Themes > Install Themes
  6. Click the Upload tab
  7. Choose the downloaded ZIP file from your desktop and click upload
  8. Choose the ‘Activate’ option after upload
  9. Follow the Setup Wizard prompts (see video for example)
  10. (if you need to run the setup wizard again please go to Appearance > Setup Wizard)

Here is a screenshot showing step by step instructions for downloading and installing the WordPress theme:

download_screenshot

Child Theme Customizations (optional)

Sample Child Theme Available for download here: beautiful-watercolor-child.zip

Responsive Layout

This theme is enabled with responsive CSS layouts so that it displays nicely on mobile devices. If you wish to disable this responsive feature please go to Appearance > Customize > Page Layout

responsive-and-google-fonts

Customizing Theme Colors, Fonts and Other Options

Customization is done easily via the Appearance > Customize menu. Here you can change colors and font styles for the ensite website, and preview them before they go live.

Most of the settings are under the “Typography” menu.

Advanced Customization: if you need assistance with advanced customizations then please hire someone from Envato Studio (look in the WordPress category)

Create a photo gallery or simple image slider

Here are instructions on creating the fancy gallery with 3 images (as seen on the home page of the demo).

  1. Create a new page in WordPress
  2. Click the “Add Media” button at the top
  3. Choose “Create Gallery” on the left
  4. Select (or upload) your gallery images (the ideal image size is 160px by 140px)
  5. Click the “Create New Gallery” button
  6. Change “Link To” as “Media File”
  7. Change “Image Size” to “Thumbnail”
  8. Change the “Gallery Type” to one of the desired options.
  9. Click the “Insert Gallery” button
  10. Save the page and view it to check it works.

Setup the Contact Page

(not required if you have setup default content as above)

  1. Make sure the Contact Form 7 plugin is installed
  2. Login as admin and choose “Contacts” menu on the left.
  3. Open the default “Contact Form 1” and make any changes as neccessary.
  4. Copy the shortcode (it will look something like [[contact-form-7 title=”Contact form 1″]] )
  5. Create a new page called “Contact”, type the words “Please fill in the form below to contact us” and paste in the shortcode from before.
  6. Save the page and check the contact form works (ie: do you receive an email from it?)
  7. Click edit page again and add a map using the google map shortcode (more details below under shortcode)

Setup the Main Menu

(not required if you have setup default content as above)

Go to Appearance > Menu and follow the standard WordPress menu creation process.
Detailed instructions on creating a menu are located on the WordPress website here: http://codex.wordpress.org/WordPress_Menu_User_Guide

Installing the online shop (WooCommerce)

  1. If you wish to sell products please install WooCommerce (this should happen during the installation wizard)
  2. Go to WooCommerce > Settings and configure your preferences
  3. Further details about installing and using WooCommerce are available here:
    http://docs.woothemes.com/document/woocommerce/
  4. Further help and support for using WooCommerce is available here:
    http://www.woothemes.com/woocommerce/

Background Images / Colors

Note: some graphical elements have been designed to only work with the default background image. So a change of background image may cause some inside design elements to not look nice. Additional graphical modifications may need to be made after changing the default background.

  1. If you wish to change the default background image:
  2. Go to Appearance > Background
  3. Go to “Choose an Image from your Computer” and choose the background image you would like to use.
  4. Adjust the colors and background settings to suit your needs.

Insert Styled Image

This theme comes with a really cool and unique styled image selector. When inserting an image to a page/post you have the option to choose the image style. See this video for an example:

Columns

Adding columns to your page is very easy. Simply edit the page/post and click the “Columns” button. See this video for an example:

Columns can also be styled, choose the style from the drop down list.

Included Widgets

Widget Decorations

You can change the background color of any Widget within this theme using the easy drop down menu in Appearance > Widgets.
Hint: use the “default” background option for footer widgets.

Changing widget backgrounds can be done like in this video:

Widgets Positions / Sidebars

The Widgets and Sidebars in this theme are handled by the “Widget Area Manager” plugin.
To view all available widget areas (header/sidebar/footer) please see the demo.

You can change the position of some of the widget areas using the “Left/Right Column”, “Header” and “Footer” menu items displayed in the admin bar:

widget-header-left-right-sidebar-control

Here is a video showing changing the position of the sidebar widgets:

Translations

Please try installing the free plugin called Loco Translate. Once installed go to the Loco Translate menu, then choose Themes, then choose the theme, then click "New Language" and follow the prompts.

Alternatively, the WordPress POT file for this theme is available in the /languages/ folder of the theme zip file. Instructions on translating WordPress themes with POT file are available here: https://poedit.net/wordpress

Photoshop Files

Photoshop files are available from this special URL after purchasing this theme: http://dtbaker.net/files/envato/resources/. Please login with your Envato account to access the latest version of the purchased resources.

Fonts:

The fonts used are from google fonts online library.

Artwork:

The flowers and watercolour designs have been hand painted by our in-house artist. The artwork can be used as part of your branding on business cards, stationary, online presence, emails and alike. The artwork can not be removed from the design to be sold separately.

Photos:

The photos used in the design are under a royalty free, public domain licence and can be used by you for free. (released free of copyrights under Creative Commons CC0. You may download, modify, distribute, and use them royalty-free for anything you like, even in commercial applications. Attribution is not required.) They were sourced from here: https://pixabay.com/

Icons:

  1. To change the icons used in the example, download and install the font awesome font here (https://fortawesome.github.io/Font-Awesome/).
  2. Go to the "cheat sheet" page,
  3. find the icon you want to use,
  4. highlight the icon on the screen,
  5. right-click and copy it.
  6. Open photoshop,
  7. go to the the correct layer, for example the social icons.
  8. select the text tool and paste your icon. It should then appear.
  9. If you only see a square or nothing at all make sure the font on that layer is selected as "font Awesome".

Changing the logo:

Short version:

I have used a masking technique to create the textured look of the logo, here's how to change the text.

  1. Go to the "logo text" folder in Layers. (logo groups>logo text)
  2. Remove the mask on the folder
  3. Hide the texture & colour layer
  4. Change the text
  5. Add back the blank mask to the logo text folder
  6. Select the font layer, Hold control on your keyboard and click on the "T" on the text layer your company name is on. A selection will appear.
  7. Inverse the selection
  8. Apply the selection the the mask

 

Detailed version:

I have used a masking technique to create the textured look of the logo, here's how to change the text.

  1. Go to the "logo text" folder in Layers. (logo groups>logo text)
  2. You will see a black square on the layer, that's a mask, right click on it and select "delete layer mask".
  3. It looks messy now, that's ok, lets turn off the mess by hiding the colour and texture layers (click the eyes)
  4. Now the font is clearly visible, use the "type tool" to change the word beautiful to your company name.
  5. now click on the "logo text" folder, we are putting the mask back.
  6. Click "add layer mask"at the bottom of the layers pallet. A white square should appear.
  7. Turn back on the colour & texture layers so the mess reappears.
  8. Hold control on your keyboard and click on the "T" on the text layer your company name is on. A selection will appear.
  9. Go to "Select" in the top menu >Inverse
  10. Return to your white square and fill the selection with a black colour (hold alt and hit backspace).
  11. Your logo should now have the same effect as the original.
  12. You may need to make the colour & texture layers wider if you have a long name, you can adjust them at any time without removing the mask.

Changing the logo colour:

  1. Go to the "logo text" folder in Layers. (logo groups>logo text)
  2. Click on the "colour" layer
  3. Draw a rough square selection over your logo
  4. Fill it with the colour of your choice.
    NOTE: a "layer style" colour overlay wont work as we are using a layer blending technique. The colour has to be directly on the layer.

Advanced Editing

Please consider using a Child Theme for any changes. This will help stop theme updates overwriting your customisations.

Changelog

Here is a list of theme changes: