Introduction & Installation
Introduction
Introducing Beauty, a premium WordPress theme. With its light and clean design it's a smart choice for beauty salons, hair salons, wellness centers and similar businesses. Beauty has everything you need to take your company to the next level, but most of all it's extremely easy to set up and use: your new website we'll be ready in no time! Scroll down to read more about Beauty and discover all its great features.
Installation
I assume you already have a fresh copy of WordPress installed on your server.
Download the theme zip file
The first thing you will need to do is to download the theme installation zip file.
If you bought the theme on our ProteusThemes Shop, you should have received an email with the list of themes you have access to. You can click on the theme link with file name ending: -installable.zip or you can login to your account and download the installable zip file from there.
If you bought the theme on ThemeForest, then you have to download the installable WordPress files only zip file from the ThemeForest download section.
Install the theme
You can install the Beauty WP Theme in two different ways:
- Upload a zip file - preferred method
When you are logged in your WordPress dashboard go to Appearance → Themes → Add New → Upload Theme and select the theme installation zip file you downloaded from our Shop or from the ThemeForest and click Install Now button. - FTP upload
Unzip the contents of the theme installation zip file and upload the extracted folder to your server towp-content/themes/folder using a FTP client.
Once your theme is on the server, activate it by clicking the Activate button below the preview image in Appearance → Themes
Congratulations! Now the Beauty WP Theme is installed.
Registration and Updates
Open Appearance > Theme Registration after activating the theme. Use the license key from your ProteusThemes account, or the purchase code from your ThemeForest download, according to the instructions on the registration page.
Register before using One Click Demo Import. In the ProteusThemes shop version, registration also unlocks the theme's Customizer options. The ThemeForest version does not apply that Customizer restriction, but still requires registration for demo import.
Automatic updates: After registration, the theme can notify you when updates are available. For a ThemeForest purchase, also generate and verify the Envato token requested on the registration page to enable automatic updates. This is separate from your purchase code.
If an available update is not showing, open Dashboard > Updates and click Check Again.
Manual updates: Follow our manual theme update guide to install a newer version yourself.
Customize the Appearance
You can fully customize the appearance of the Beauty WP Theme. Go to Appearance → Themes and click on the Customize button:
The new window appears and you can now customize the appearance of your theme — upload your custom logo, change the base colors, enable/disable theme features, add custom CSS or JavaScript, etc.
Demo Content
Before importing, activate the required plugins and the plugins used by your chosen demo, then complete theme registration.
One Click Demo Install
You can import demo content from our demo site (with blurred licensed images) with a single click of a button. Go to Appearance → Import Demo Data and click on the import button.
When setting up a content with your new theme, put special focus on the page speed optimization, especially on the image optimization process. This way you can save on your bandwidth, reduce the bounce rate on your website, and make your users happy. Our themes are created with the speed in mind but large, non-optimized images can and will ruin this experience.
Import XML File
If you want to import the demo content the old-fashioned way, you can get a fresh copy of the XML file on our server at this URL: https://artifacts.proteusthemes.com/xml-exports/beauty-latest.xml. Don't forget to activate all required plugins before importing demo data. To import the demo data go to Tools → Import, click on WordPress (install the WordPress Importer plugin if not already installed) and upload/import the previously saved xml file (don't forget to enable the Download and import file attachments checkbox to also import the images).
Demo Widgets
After you import the demo content, you can also import widgets the old-fashioned way. The file for widget import is also located on our server: https://artifacts.proteusthemes.com/json-widgets/beauty.json. Rename this file to beauty.wie (mind the file extension) and use it in the plugin Widget Importer & Exporter. Go to Tools → Widget Import/Export and import the file.
After import setup
After you have imported the demo data and widgets, you should also setup these things:
- In Settings > Reading, choose A static page and select the homepage and posts page.
- In Appearance > Menus, assign your menus to the theme's available menu locations.
- In Appearance > Widgets, select the appropriate menu in each imported Navigation Menu widget.
- Use Appearance > Customize to set your logo, colors and other appearance options.
These steps are especially useful after a manual XML and widget import. If the demo importer has already assigned pages or menus, check those selections rather than repeating the import.
If the import URLs are unavailable, download the demo files from the store where you bought the theme:
- ProteusThemes shop: sign in to your account and download the theme's extras ZIP.
- ThemeForest: download the All files & documentation ZIP and open its extras folder.
Use content.xml for the content import and widgets.json for the widget import described above.
Header
Top Bar
On both the left and right side of top there are widget areas. You can put next widgets on Top Left or Top Right widget area: Icon Box, Social Icons, Custom Menu or Text widget.
Logo
The logo can be changed in our Theme Options - Appearance → Customize → Theme Options → Logo.
Favicon
Since WordPress version 4.3, the favicon setting can be found in Appearance → Customize → Site Identity, where you have to set the Site Icon option.
Header Widgets
The Header Right widget area is always available. Header Left appears only when Appearance > Customize > [PT] Theme Options > Header > Header layout is set to Logo in the center. Both areas can work with Buttons (Text widget), Icon Box, Social Icons or Search widget.
Icon Box
With widget Icon Box you can put any kind of title with small text and image in the header. In our demo we use this widget for contact information which we think is very important for customers.
In this widget you can choose Title, Text and Icon from Font Awesome. You can also choose a link for the whole box. If you leave that field empty the Icon Box will not be click-able.
We give you few Icons to choose from but you can actually use any icon from Font Awesome 4 icons. Just paste the icon title in the Icon field and that's it. How cool is that?
More than one Icon Box widget can be used in the Header.
Main Menu
Main Menu can be set in wp-admin → Appearance → Menus. Theme locations for Main Menu is called Main Menu.
Navigation Widgets
Area next to the main menu which can be used for Social Icons or other smaller widgets.
Pages
wp-admin → Pages is the area where you will spend most of your time when building a site. We added a few tools in that process so you can create your pages easier and faster.
Page Templates
You can choose between 3 different Templates - Default Template, Front Page with Slider and Front Page With Layer/Revolution Slider.
Default Template: Just a default template for simple layouts and Page Builder. First you must choose the Page Builder option under the title and you are ready to go. You can add our widgets here, choose different visual styles and much more. More about that in the next chapter.
Front Page with Slider: This is a unique template which adds an option for a slider in the page options. It can be used with Page Builder. More about that in the Slider chapter.
Front Page with Layer/Revolution Slider: We don't include these two slider plugins with the theme but we make sure they work nicely, since we know our customers want to use them. When you activate this template there is a new Page Slider meta box in which you can put ID/alias from Layer/Revolution Slider.
Page Builder
Page Builder is a very powerful tool for making pages. Here is one example of how it looks:
You can make any kind of grid with adding new rows and inside them you put widgets. When you are finished with adding widgets you can also move whole rows up and down.
For more information on how to use Page Builder please visit Page Builder by SiteOrigin documentation page.
For a step-by-step guide to adding rows and widgets, read SiteOrigin's Building a Page tutorial.
Page Builder Row Style
Let's take a look at how we can style Page Builder rows.
To start off we have to click on "Edit Row" for the row that we want to style as shown on the image above. An "Edit Row" window will open, and on the right, there are three setting tabs: Attributes, Layout and Design. Here you can customize different things for this particular row.
In the Layout tab you can set the Bottom Margin, Padding and change the Row Layout to Full Width. In the Design tab you can set the Background Color, Background Image and other things.
To achieve the same design for the testimonial widget as on our demo page you have to click on Layout tab and set the Bottom Margin to 60px, Padding to 60px and the Row Layout to Full Width. Then click on the Design tab and set the Background Color to #f2f2f2.
Page Builder Widget Style
In this theme we added 1 new widget style. You can now set a nice box around the widget. This option can be choosed for all widgets in the page builder under the tab Design.
Page Builder Widgets
You can use almost any widget in the Page Builder. Let's take a look at few not so straight forward ones.
SiteOrigin Editor Widget
SiteOrigin Editor will create you the same editor environment as a normal WordPress editor does. You can use this widget if you want normal text editing options. SiteOrigin Editor Widget is part of Site Origin Widgets Bundle.
Call to Action Widget
How do I add a button? With our custom shortcodes. You can find instructions in the Buttons section.
Featured Page Widget
Featured Page is a really simple widget that we use in Page Builder. All you have to do is to select the page and one of the two layouts we made for you.
But how do I change the image and text on the Front Page?
The image on the Front Page is just the normal Featured Image of the selected page. You can change that in the sidebar of every single page. Text can be changed in the Excerpt field which can be found at the end of the page settings. If the excerpt field is not there, you must click on the Screen Option (at the top of the page) and check Excerpt. For more info please take a look at the screenshot below.
Post Tiles Widget
Post tiles is our new widget made specifically for Beauty theme. It will show your posts in gorgeous grid with date, title, excerpt and image.
In the backend you will find 6 different predefined layouts which you can choose. You can also stack one or more Post Tiles widgets one under another. This is why setting for "Start with post number" will come in handy.
Open Position Widget
Open Position is the perfect widget for listing your Jobs. This widget is very easy to use, with clear fields. If you want to use the collapse option with the widget you will need to insert Read More tag as seen below. This tag will hide everything beneath it and will add a collapsible Read More link.
X (Twitter) Timeline
You can embed a public X profile or list in a sidebar or a Page Builder row using a WordPress Custom HTML widget.
- Open X Publish and enter the profile or list URL you want to display.
- Choose the embedded timeline, adjust the available display options, and copy the generated code.
- Add a Custom HTML widget to the sidebar or Page Builder row, paste the code, and save the widget and page.
Only public posts can appear in a timeline. See X's timeline embedding guide for the current options and requirements.
Slider
Building a Theme slider has never been easier.
You can create a Theme slider on any page you want. The only thing you must do is choose the page template Front Page With Slider (you can use this template even if it's not for the front page). After you select this page template there will be a new meta box at the bottom of the page which is called Front page slider. Now add your pictures, your text and your slider will be ready to go. This is an example from one of our themes:
Please take a look at this slider dimensions article for the recommended size of the slider images for this theme.
ProteusThemes Options
You can find all Theme Options in the Customizer: Appearance → Customize. This is a live preview editor for your page.
Here you can change:
- Logo
- Header
- Navigation
- Page Header Area
- Theme Layout & Colors
- Shop
- Footer
- Custom Code
- And Much More ...
Shortcodes
Buttons
Add a button with [button]Your Text[/button]. Customize it with style, href, target, fa, corners, class.
Text: Change the text between the opening and closing shortcode.
Example: [button]New Text[/button]
Style: Choose primary, secondary, danger, success, info.
Example: [button style="primary"]Your Text[/button]
Href: Set the button's destination URL.
Example: [button href="https://www.proteusthemes.com"]Your Text[/button]
Target: Use _self for the same tab or _blank for a new tab.
Example: [button href="https://www.proteusthemes.com" target="_blank"]Your Text[/button]
Font Awesome icon: Add an icon before the text.
Example: [button fa="fa-phone"]Your Text[/button]
Corners: Give the button rounded corners.
Example: [button corners="rounded"]Your Text[/button]
Full width: Stretch the button to fill its container.
Example: [button class="btn-block"]Your Text[/button]
Class: Add extra CSS classes to the button.
Example: [button class="btn-lg"]Your Text[/button]
Icons - Font Awesome
Shortcode for Font Awesome is very similar to the buttons shortcode. It looks like this: [fa]
The attributes are icon, href, target and color.
Icon: You can use any Font Awesome 4 icon. To set the selected icon, just get the title of the icon, for example "fa-phone".
Example: [fa icon="fa-phone"]
Href: You can add URL to the icon.
Example: [fa href="https://www.proteusthemes.com"]
Target: You can choose if you want to open the link in the same - "_self" or new - "_blank" window.
Example: [fa target="_blank"]
Color: You can set a custom color to your icon.
Example: [fa color="#ff00ff"]
So a Font Awesome icon shortcode with a home icon, linking to a page and opening in a new window/tab would look like this:
[fa icon="fa-home" href="https://www.proteusthemes.com" target="_blank"]
Gallery
Special types of gallery were added to Beauty in version v1.2.0. It is using the default WP gallery functionality, but we've implemented two special styles for the Beauty theme - you want your gallery to look beautiful after all, right?
The gallery is easy to add. There are two ways.
First way is to insert the [gallery] shortcode directly. You can find detailed instructions on official shortcode documentation. The only thing you should additionally add is the type attribute. You can set it to two values: beauty-gallery or beauty-gallery-bigger, like so: [gallery ids="123,337,341,452,652" type="beauty-gallery-bigger"].
The second way is to create a gallery within the WP media modal window. The process is the same as described on official page, except that on Step 4 you'll be also able to select the gallery type:
You can select two different gallery types:
- Beauty Gallery - tiled gallery, all images are of the same width/height.
- Beauty Gallery (bigger first picture) - same as above, but the first picture in the gallery will be double in size.
Plugins
We also use and support some of the best plugins for WordPress.
Required and Recommended Plugins
You can install and activate these plugins by going to wp-admin → Appearance → Install Plugins.
The list of required and recommended plugins used in this theme:
These groups match the required and recommended labels in the theme's plugin installer. Install recommended plugins when you need their features.
Required plugins
- ProteusThemes Support (bundled with the theme)
- Advanced Custom Fields
- ACF Repeater Field (bundled with the theme)
- ProteusThemes Shortcodes (installed from the developer's download)
- Tabs Widget for Page Builder
- Page Builder by SiteOrigin
- One Click Demo Import
- SiteOrigin Widgets Bundle
- Breadcrumb NavXT
- Custom Sidebars
- Classic Editor
- Classic Widgets
Recommended plugins
- ClevrBot (installed from the developer's download)
- Bookly - Responsive Appointment Booking Tool (Lite Version)
- Contact Form 7
- WooCommerce - excelling eCommerce
Contact Form 7
We use Contact Form 7 for our Contact Us page. This is the code from our demo:
<div class="row">
<div class="col-12 col-lg-4">
[text* your-name class:form-control placeholder "First Name *"]
</div>
<div class="col-12 col-lg-4">
[text* last-name class:form-control placeholder "Last Name *"]
</div>
</div>
<div class="row">
<div class="col-12 col-lg-4">
[email* your-email class:form-control placeholder "E-mail *"]
</div>
<div class="col-12 col-lg-4">
[tel telephone class:form-control placeholder "Telephone"]
</div>
</div>
<div class="row">
<div class="col-12 col-lg-4">
[text your-subject class:form-control placeholder "Service"]
</div>
<div class="col-12 col-lg-4">
[text date class:form-control placeholder "Date"]
</div>
</div>
<div class="row">
<div class="col-12">
[textarea your-message class:form-control placeholder "Message"]
<div class="wpcf7-notice">Fields with * are required.</div>
[submit class:btn class:btn-primary "SEND MESSAGE"]
</div>
</div>
After that just place the plugin's shortcode into your Contact Us page.
WooCommerce
Activate WooCommerce to add a store to your site. Follow its onboarding steps, then use WooCommerce > Settings to configure your store, shipping, taxes and payments.
If your chosen theme demo includes products, activate WooCommerce before you import that demo so its product data can be imported.
Optional sample products
For a test store, WooCommerce supplies a sample_products.csv file in the plugin's sample-data folder. Download the WooCommerce plugin ZIP and extract that file, then open Products > All Products and use the product import button. Select the CSV, review the column mapping, and run the importer.
Alternatively, use Tools > Import > WordPress to import sample-data/sample_products.xml from the same plugin ZIP. Select Download and import file attachments if you also want the sample images. See the WooCommerce sample-data guide for both methods.
Shop sidebar
Open Appearance > Widgets to add the available product widgets to Shop Sidebar. WooCommerce must be active for this sidebar to appear.
For product management and store configuration, see the WooCommerce documentation.
WPBakery Page Builder
WPBakery Page Builder (formerly Visual Composer) is supported for this theme. (Note: We do not bundle this plugin with the theme).
We have converted our widgets to the WPBakery Page Builder content elements, so you can use them in the VC editor. You can add them to your site from the Add new Element menu. Our elements are marked with our ProteusThemes icon, so they are easy to spot.
Templates for WPBakery Page Builder
We've also made it very easy to create our original demo page layout templates with WPBakery Page Builder. You can choose from these pre made templates: Home Page, About Us, Contact Us, and Our Services. To recreate the theme Home Page you need to:
- Create a new page and set the page template to Front Page with Slider and set the slider images below the editor.
- In the WPBakery Page Builder editor click on Templates icon, click on Default Templates tab and then select Home Page template:
- Publish/update the page.
Nested WPBakery Page Builder Elements
Some of our WPBakery Page Builder elements are nested elements. That means that once you select the element you will have to add its child element in order to achieve the desired result.
Let's take Social Icons as an example of the nested element. When you select the Social Icons element in the VC editor a window will pop up with just a simple option to open links in a new tab and a "container" will be displayed in the editor.
Now you have to click the + icon and add a Social Icon element, edit its settings (that will actually add a social icon to the page). With this method you can add as many social Icons as you want. And that's why we use nested elements.
Other nested elements are: Accordion, Testimonials and Pricing List. They all work on the same principle, they enable you to add multiple accordion items, testimonials and so on...
Missing elements
In our Beauty theme we are using the Tabs widget for Page Builder plugin, which allows us to create advanced tabs with Page Builder by SiteOrigin editor. The Tabs WPBakery Page Builder element is not as flexible and so we were not able to implement the design that we want. That's why there are no tabs in the WPBakery Page Builder version of our home page template.
In our Beauty demo page we are using SiteOrigin Google Maps widget which has the ability to use custom map styles. WPBakery Page Builder does not have such element (which would allow custom map styles), that's why the maps on our WPBakery Page Builder templates have the default look. You could install a WPBakery Page Builder addon, which enables the Google maps styles and use our custom style:
[{"featureType":"all","elementType":"labels.text.fill","stylers":[{"saturation":36},{"color":"#000000"},{"lightness":40}]},{"featureType":"all","elementType":"labels.text.stroke","stylers":[{"visibility":"on"},{"color":"#000000"},{"lightness":16}]},{"featureType":"all","elementType":"labels.icon","stylers":[{"visibility":"off"}]},{"featureType":"administrative","elementType":"geometry.fill","stylers":[{"color":"#000000"},{"lightness":20}]},{"featureType":"administrative","elementType":"geometry.stroke","stylers":[{"color":"#000000"},{"lightness":17},{"weight":1.2}]},{"featureType":"landscape","elementType":"geometry","stylers":[{"color":"#000000"},{"lightness":20}]},{"featureType":"poi","elementType":"geometry","stylers":[{"color":"#000000"},{"lightness":21}]},{"featureType":"road.highway","elementType":"geometry.fill","stylers":[{"color":"#000000"},{"lightness":17}]},{"featureType":"road.highway","elementType":"geometry.stroke","stylers":[{"color":"#000000"},{"lightness":29},{"weight":0.2}]},{"featureType":"road.arterial","elementType":"geometry","stylers":[{"color":"#000000"},{"lightness":18}]},{"featureType":"road.local","elementType":"geometry","stylers":[{"color":"#000000"},{"lightness":16}]},{"featureType":"transit","elementType":"geometry","stylers":[{"color":"#000000"},{"lightness":19}]},{"featureType":"water","elementType":"geometry","stylers":[{"color":"#000000"},{"lightness":17}]}]
Breadcrumb NavXT
The breadcrumbs in this theme are powered by the Breadcrumb NavXT plugin.
All the settings for breadcrumbs can be found in Settings → Breadcrumb NavXT. Here you can define a separator (which should be empty by default for our themes), breadcrumb hierarchies for different pages (pages, custom post types, taxonomy, ...) and set other breadcrumbs related things.
Default Product Breadcrumbs
Let's take a look at how to setup the default breadcrumbs used on this theme for the Products custom post type. Go to Settings → Breadcrumb NavXT and click on the Post Types tab. Scroll down to the Product section, and set the Product Root Page to Shop page and since we set the root page, we can also disable (uncheck) the Product Archive Display checkbox. Don't forget to save the settings.
Bookly
Bookly is a great easy-to-use and easy-to-manage booking tool for service providers. Plugin supports wide range of services, provided by business and individuals service providers offering reservations through websites.
In Beauty theme we use free version of Bookly plugin but you can also buy premium version of plugin if you need more features.
Footer
Last but not least there is our footer area. The footer area is divided into:
Footer Widgets
Footer Widgets is the place where you can add the last things to your page. You can add widgets in the Appearance → Widgets → Footer. There are also few options for that area in Appearance → Customize → Theme Options → Footer. Use Footer widgets layout to choose the number of footer widget columns and their widths, and adjust the colors in the same section.
Middle Footer
Middle Footer area is place for your additinoal information like social icons, supported credit cards, copyrights or some text. Custom text for left or right of middle footer can be added in live customizer Appearance → Customize → Theme Options → Footer. In that area you will also find Back to Top button which can be turned off in the same place in customizer.
Bottom Footer
The Bottom Footer area is the place for copyrights or some custom text. The single centered bottom-footer text can be added in live customizer Appearance → Customize → Theme Options → Footer.
Translations
Manual translation
We have an article with a video on how to translate our themes.
WPML for Multilingual sites
This theme officially supports WPML. Head over to the WPML website, buy the subscription, then install the main plugin — likely the OTGS Installer Plugin. When prompted to download, install, and activate specific WPML plugins, make sure to install and activate these:
- WPML Multilingual CMS
- String Translation
- Media Translation
WPML’s setup wizard will also prompt you to install other plugins if it thinks you need them. For example, if this theme includes a WooCommerce-based site, WPML will prompt you to install WooCommerce Multilingual & Multicurrency. Install whatever WPML suggests installing.
Extras
Demo Images
All images used in Beauty WP can be found on Shutterstock.
Customizations
If you need advanced customizations for this theme, we can do that. See our Theme Customization page for details.
Changelog
Support
If you need more help after all, you can write to us.
Before you write, send us a site report. It shows us your WordPress, PHP, theme and plugin versions, server settings and recent PHP errors, so we can troubleshoot without asking for a login. The ProteusThemes Support plugin that creates it is installed with the theme:
- Register the theme. Sending a report needs your registration.
- Open Tools > ProteusThemes Support, review the report and click Send site report.
- Write to us and include this site's URL in your request.
Nothing is sent until you click the button, and the report does not give us access to your site. If sending fails, click Copy site report and paste the report into your request. Read more about site reports.