Elegance WordPress Theme


Make sure that you have the latest version of Wordpress installed. Click to WordPress install guide. After you download the .zip package from ThemeForest, unzip it. You'll see a file elegance.zip, which is the main file that needed to upload and install.

  • Install Via FTP

    Extract the elegance.zip and upload the extracted elegance folder to the /wp-content/themes/ directory on your FTP server. Go to Appearance > Themes and activate Elegance theme.

  • Install Via Admin Panel

    Go to Appearance > Themes and click on the Add New link at the top. Then click Upload Theme and click Choose File, then select elegance.zip and click install now. Go to Appearance > Themes and activate Elegance theme.

  • Install Plugins

    After installing Elegance, you'll see a notification in the top of the page that says the theme needs some plugins to function properly. Elegance theme requires follow plugins (all are free and available on WordPress.org). Elegance is working perfectly with these plugins. It automatically adds more styles to them to make the design match the theme.

    Go to Appearance > Install Plugins. You'll be redirect to a page where all needed plugins are listed. Just click on Install below each plugin's name. After installing, if it's required to activate the plugin, just activate.

  • XML Demo Content

    After installing the theme, you can import the XML data file (located in the XML Demo Content folder of the original zip file), which will populate your theme with dummy posts, categories, tags, and menus. For more information about how to import Wordpress XML data, click here and scroll down to the Wordpress section.

    If you are new to WordPress and have problems with setting up the theme you might want to import the demo content file that comes with the theme. The following actions will import some dummy posts and pages from the live preview.

    • Go to Tools > Import.
    • Select WordPress from the list.
    • If you haven't installed the WordPress import plugin, a popup window will appears and ask you to install it. Just click Install Now. When the installation progress is completed, click Activate Plugin & Run Importer. If you have installed this plugin, skip to next step.
    • Click Browse and select xml_demo_content.xml file from the download package.
    • Click Upload file and import.
    • When you are asked to import author, you can create new author or import to existing author. You also should check the checkbox Download and import file attachments.
  • Widget Demo Content

    Widget Importer & Exporter is useful for moving widgets from one WordPress site to another, backing up widgets and for theme developers to provide users with sample widgets.

    • Go to Tools > Widget Importer & Exporter.
    • Click to Choose File from Import Widgets and select widget-demo-content.wie file from the download package.
    • Click to Import Widgets.
  • Child Theme

    A child theme is a theme that inherits the functionality and styling of another theme, called the parent theme. Child themes are the recommended way of modifying an existing theme. There are a few reasons why you would want to use a child theme:

    • If you modify a theme directly and it is updated, then your modifications may be lost. By using a child theme you will ensure that your modifications are preserved.
    • Using a child theme can speed up development time.
    • Using a child theme is a great way to learn about WordPress theme development.

    If you want to customize your theme, We do recommend to use a child theme and edit it instead of editing your core theme files directly. In your downloaded package from ThemeForest, we've included a sample child-theme with minimal functionalities which you can simply install it on your theme and activate it as a child theme. You should extract the child theme .zip archive file and put it in this directory:


    once you activate this child theme from your WordPress admin, you can copy any files from Elegance parent theme into this new directory and edit it to make your own changes on it. This way, you can customize Elegance without changing the theme core files. And now, you can enjoy upgrading your theme to the latest versions without worring of loosing your changes.

  • Manually Updating

    From time to time, a theme update will be released that either fixes a bug and/or adds new features to the theme. You can update the theme in one of two ways:

    Download the latest version of the theme. You can upload the new /elegance folder (located in the elegance.zip file) via FTP and overwrite the old files. Updating the theme will overwrite any changes you made to any of the core files (index.php, style.css, header.php, etc), however, you will not lose any changes you made to the theme options, menus, widgets, etc.

  • Automatic Updating


    This plugin can install WordPress themes and plugins purchased from ThemeForest & CodeCanyon by connecting with the Envato Market API using a secure OAuth personal token. Once your themes & plugins are installed WordPress will periodically check for updates, so keeping your items up to date is as simple as a few clicks.

    You can add a global token to connect all your items from your account, and/or connect directly with a specific item using a singe-use token & item ID. When the global token and single-use token are set for the same item, the single-use token will be used to communicate with the API.

    You can update the automatic update of way:

    • Go to Envato Market.
    • Click to generate a personal token. Update
    • Create token code from the opening page.
    • After, copy the created code.
    • Write created code in this field. Update
    • Click to Save Changes button.


  • Create Home

    After install demo content, you'll see a page Home 1, Home 2 or Home 3. This pages will be used as the homepage of the website. To set it as homepage, please go to Settings \ Reading, under Front page displays, please chose A static page (select below) and select Home 1, Home 2 or Home 3 for Front page.


  • Edit Home

    Go to Pages > All Pages. Select your home page. Click the edit button. Click to information page builder.


Theme Options

Elegance comes with custom Theme Options to allow you to set up many of the theme features without touching the code. To edit the Theme Options, click to Theme Options from the menu.

You can find theme options here ; Appearance > Customize


  • Create Page

    Go to Pages > Add New.


  • Edit Page

    Go to Pages > All Pages. Select your page. Click the edit button. Click the Backend Editor button. You can the create content with widgets.


  • Page Settings

    You can easily change settings of page. You can set this page from panel.

  • Page Builder: Visual Composer

    Thanks to these unique features, you can manage your WordPress site content easily without spending hours and hours to keep your site up to date. Moreover – now you can build your own WordPress site without coding and getting into shortcodes which is a truly unique experience you have been waiting for. Thanks to regular updates of Visual Composer the amount of premium class features is growing making Visual Composer an ultimate must-have tool for any WordPress site owner, designer or developer. Discover capabilities behind Visual Composer – drag and drop page builder.

    All Visual Composer Tutorials

  • Page Builder Elements

    These extra widgets comes with the theme. You can create page easily with this widgets.



  • Create Post

    Go to Posts > Add New. Posts are entries that display in reverse order on your home page. Posts usually have comments fields beneath them and are included in your site's RSS feed.


    Post Excerpt

    You can enter the post excerpt. The WordPress Excerpt is an optional summary or description of a post; in short, a post summary.



  • Edit Posts

    Go to Posts > All Posts. Select your post. Click the edit button.

  • Post Layout Settings

    You can easily change settings of post. You can set this post from panel.

  • Categories

    WordPress categories are a very convenient way to organize your posts. You can have parent and child categories making hierarchical arrangement of your posts possible. In addition to that, one post can be into more than one category. This gives you a lot of flexibility to show exactly the posts you want, exactly the way you want them in widgets, menus or directly in your WordPress theme.

    Create Category

    Go to Posts > Categories page. You can create or update the category from this page.

    Edit & Customize Category

    Go to Posts > Categories page. Click on the category you want to edit. You can update the category design styles or other settings from this panel.



WordPress Widgets add content and features to your Sidebars. Examples are the default widgets that come with WordPress; for Categories, Tag Cloud, Search, etc. Plugins will often add their own widgets. To activate the widgets, go to Appearance > Widgets and click and drag a widget from the Available Widgets section and drop it into of the General Sidebar or Shop Sidebar widget areas. We have built into the theme widgets: Elegance Theme: Latest Posts, Recent Tweets and Facebook Page Plugin.

  • Elegance Theme: Sidebar Latest Posts:
    • Widget Title: You can enter the widget title.
    • Post Count: You can enter the post count.
    • Category: You can select the category.
    • Offset: You can enter the offset number. Number of post to displace or pass over.
    • Exclude Posts: You can enter the exclude posts id. Separate post with commas.
    • Post Image: You can make visible the post image.
    • Post Information: You can make visible the information.
    • Read More: You can make visible the read more button.
  • WordPress Widgets: Click to all WordPress widget documentation.
  • WooCommerce Widgets: There are several great widgets bundled into WooCommerce which allow you to display all sorts of information in your theme widgetized areas. Click to WooCommerce widget documentation.


Elegance supports two custom menu sections: Main Navigation.

  • Create A Menu

    To set up the menus, go to Appearance > Menus. Here, you can create a new menu by clicking the create a new menu link, give the menu a name, and click Save Menu button. You will then see a Manage Location tab appear at the top of the screen. Select your newly created menu from the dropdown list of the menu location you would like to set up and click Save Changes. You are now able to create a custom link, page or category and add it to your new menu by clicking the Add to Menu button. For more information on how to use the WordPress custom menu feature, click here.

    First, edit menu links. Example:

    After, Set the menu locations:

    • Home 1 - Menu: Main Navigation
    • Home 2 - Menu: Alternative Menu Slot 1
    • Home 3 - Menu: Alternative Menu Slot 2


They have been introduced for creating macros to be used in a post's content. Shortcodes in WordPress are little bits of code that allow you to do various things with little effort.

  • Column

    Example column width and column shortcode: size="1" → column width: 100%, size="2" → column width: 50% or size="4" → column width: 25%

    [columns size="1"]Lorem ipsum dolor sit amet.[/columns]
    [columns size="2"]Lorem ipsum dolor sit amet.[/columns]
    [columns size="3"]Lorem ipsum dolor sit amet.[/columns]
    [columns size="4"]Lorem ipsum dolor sit amet.[/columns]
    [columns size="5"]Lorem ipsum dolor sit amet.[/columns]
    [columns size="6"]Lorem ipsum dolor sit amet.[/columns]
    [columns size="7"]Lorem ipsum dolor sit amet.[/columns]
    [columns size="8"]Lorem ipsum dolor sit amet.[/columns]
    [columns size="9"]Lorem ipsum dolor sit amet.[/columns]
    [columns size="10"]Lorem ipsum dolor sit amet.[/columns]
    [columns size="11"]Lorem ipsum dolor sit amet.[/columns]
    [columns size="12"]Lorem ipsum dolor sit amet.[/columns]
  • Row

  • Blockquote



  • Theme Translation

    Elegance comes translation-ready with .pot file ready for translation. These files are located in the /languages folder of the main theme folder. Once you have translated the files, simply save them with the name of your language code (i.e. es_ES.po and es_ES.mo for Spanish) and place them back in the /languages folder.

    If you want to translate Elegance into your language, you can download elegance.pot file from languages folder of your theme directory and translate it with a program such as Poedit. Then rename it to your language code (such as de_DE.po/de_DE.mo or fr_FR.po/fr_FR.mo or ...) and upload it in your theme languages directory.Then simply change the language of your wordpress by changing WPLANG parameter in your wp-config.php file (This file is in your website root directory).

    For example if you have translated your theme in Spanish and you want to change the language of your website to Spanish, update this line in wp-config.php as below:

    1. define('WPLANG', 'es_ES');

    There are so many tutorials about this issue on the net so you can google it if you are not familiar with customizing wordpress config file.

    Poedit Download

  • WPML

    WPML makes it easy to build multilingual sites and run them. It’s powerful enough for corporate sites, yet simple for blogs. WPML is a plugin for WordPress. Simply put, plugins extend the functionality of the basic WordPress CMS. In our case, WPML makes WordPress run multilingual.

    WPML Official Site


  • WooCommerce

    WooCommerce is a powerful, extendable eCommerce plugin that helps you sell anything. Beautifully. WooCommerce is a free eCommerce plugin that allows you to sell anything, beautifully. Built to integrate seamlessly with WordPress, WooCommerce is the world’s favorite eCommerce solution that gives both store owners and developers complete control.

    Plugin Official Page Plugin Official Website All WooCommerce Tutorial

    WooCommerce Overview

    Installing WooCommerce

  • Animation Effects

    Animate is a bunch of cool, fun, and cross-browser animations for you to use in your projects. Great for emphasis, home pages, sliders, and general just-add-water-awesomeness.

    Add the class animate to the element you want to animate. You may also want to include the class infinite for an infinite loop. Finally you need to add one of the following classes:

    • anim-bounce
    • anim-flash
    • anim-pulse
    • anim-rubberBand
    • anim-shake
    • anim-headShake
    • anim-swing
    • anim-tada
    • anim-wobble
    • anim-jello
    • anim-bounceIn
    • anim-bounceInDown
    • anim-bounceInLeft
    • anim-bounceInRight
    • anim-bounceInUp
    • anim-bounceOut
    • anim-bounceOutDown
    • anim-bounceOutLeft
    • anim-bounceOutRight
    • anim-bounceOutUp
    • anim-fadeIn
    • anim-fadeInDown
    • anim-fadeInDownBig
    • anim-fadeInLeft
    • anim-fadeInLeftBig
    • anim-fadeInRight
    • anim-fadeInRightBig
    • anim-fadeInUp
    • anim-fadeInUpBig
    • anim-fadeOut
    • anim-fadeOutDown
    • anim-fadeOutDownBig
    • anim-fadeOutLeft
    • anim-fadeOutLeftBig
    • anim-fadeOutRight
    • anim-fadeOutRightBig
    • anim-fadeOutUp
    • anim-fadeOutUpBig
    • anim-flipInX
    • anim-flipInY
    • anim-flipOutX
    • anim-flipOutY
    • anim-lightSpeedIn
    • anim-lightSpeedOut
    • anim-rotateIn
    • anim-rotateInDownLeft
    • anim-rotateInDownRight
    • anim-rotateInUpLeft
    • anim-rotateInUpRight
    • anim-rotateOut
    • anim-rotateOutDownLeft
    • anim-rotateOutDownRight
    • anim-rotateOutUpLeft
    • anim-rotateOutUpRight
    • anim-hinge
    • anim-rollIn
    • anim-rollOut
    • anim-zoomIn
    • anim-zoomInDown
    • anim-zoomInLeft
    • anim-zoomInRight
    • anim-zoomInUp
    • anim-zoomOut
    • anim-zoomOutDown
    • anim-zoomOutLeft
    • anim-zoomOutRight
    • anim-zoomOutUp
    • anim-slideInDown
    • anim-slideInLeft
    • anim-slideInRight
    • anim-slideInUp
    • anim-slideOutDown
    • anim-slideOutLeft
    • anim-slideOutRight
    • anim-slideOutUp

    Check out all the animations here!

    Example Usage of Effect


    Duration of Effect

    You can change the duration of your animations, add a delay or change the number of times that it plays:

    • Example: animate anim-fadeIn animate-delay-timecode
    • Example: animate anim-fadeIn animate-delay-0-10
    • Example: animate anim-fadeIn animate-delay-0-50
    • Example: animate anim-fadeIn animate-delay-1
    • Example: animate anim-fadeIn animate-delay-2
    • Example: animate anim-fadeIn animate-delay-2-50
    .animate-delay-0 {
    	-webkit-animation-delay: 0s;
    	animation-delay: 0s;
    .animate-delay-0-05 {
    	-webkit-animation-delay: 0.05s;
    	animation-delay: 0.05s;
    .animate-delay-0-10 {
    	-webkit-animation-delay: 0.10s;
    	animation-delay: 0.10s;
    .animate-delay-0-15 {
    	-webkit-animation-delay: 0.15s;
    	animation-delay: 0.15s;
    .animate-delay-0-20 {
    	-webkit-animation-delay: 0.20s;
    	animation-delay: 0.20s;	
    .animate-delay-0-25 {
    	-webkit-animation-delay: 0.25s;
    	animation-delay: 0.25s;
    .animate-delay-0-30 {
    	-webkit-animation-delay: 0.30s;
    	animation-delay: 0.30s;
    .animate-delay-0-35 {
    	-webkit-animation-delay: 0.35s;
    	animation-delay: 0.35s;
    .animate-delay-0-40 {
    	-webkit-animation-delay: 0.40s;
    	animation-delay: 0.40s;
    .animate-delay-0-45 {
    	-webkit-animation-delay: 0.45s;
    	animation-delay: 0.45s;
    .animate-delay-0-50 {
    	-webkit-animation-delay: 0.50s;
    	animation-delay: 0.50s;
    .animate-delay-0-55 {
    	-webkit-animation-delay: 0.55s;
    	animation-delay: 0.55s;
    .animate-delay-0-60 {
    	-webkit-animation-delay: 0.60s;
    	animation-delay: 0.60s;
    .animate-delay-0-65 {
    	-webkit-animation-delay: 0.65s;
    	animation-delay: 0.65s;
    .animate-delay-0-70 {
    	-webkit-animation-delay: 0.70s;
    	animation-delay: 0.70s;
    .animate-delay-0-75 {
    	-webkit-animation-delay: 0.75s;
    	animation-delay: 0.75s;
    .animate-delay-0-80 {
    	-webkit-animation-delay: 0.80s;
    	animation-delay: 0.80s;
    .animate-delay-0-85 {
    	-webkit-animation-delay: 0.85s;
    	animation-delay: 0.85s;
    .animate-delay-0-90 {
    	-webkit-animation-delay: 0.90s;
    	animation-delay: 0.90s;
    .animate-delay-0-95 {
    	-webkit-animation-delay: 0.95s;
    	animation-delay: 0.95s;
    .animate-delay-1 {
    	-webkit-animation-delay: 1s;
    	animation-delay: 1s;
    .animate-delay-1-05 {
    	-webkit-animation-delay: 1.05s;
    	animation-delay: 1.05s;
    .animate-delay-1-10 {
    	-webkit-animation-delay: 1.10s;
    	animation-delay: 1.10s;
    .animate-delay-1-15 {
    	-webkit-animation-delay: 1.15s;
    	animation-delay: 1.15s;
    .animate-delay-1-20 {
    	-webkit-animation-delay: 1.20s;
    	animation-delay: 1.20s;
    .animate-delay-1-25 {
    	-webkit-animation-delay: 1.25s;
    	animation-delay: 1.25s;
    .animate-delay-1-30 {
    	-webkit-animation-delay: 1.30s;
    	animation-delay: 1.30s;
    .animate-delay-1-35 {
    	-webkit-animation-delay: 1.35s;
    	animation-delay: 1.35s;
    .animate-delay-1-40 {
    	-webkit-animation-delay: 1.40s;
    	animation-delay: 1.40s;
    .animate-delay-1-45 {
    	-webkit-animation-delay: 1.45s;
    	animation-delay: 1.45s;
    .animate-delay-1-50 {
    	-webkit-animation-delay: 1.50s;
    	animation-delay: 1.50s;
    .animate-delay-1-55 {
    	-webkit-animation-delay: 1.55s;
    	animation-delay: 1.55s;
    .animate-delay-1-60 {
    	-webkit-animation-delay: 1.60s;
    	animation-delay: 1.60s;
    .animate-delay-1-65 {
    	-webkit-animation-delay: 1.65s;
    	animation-delay: 1.65s;
    .animate-delay-1-70 {
    	-webkit-animation-delay: 1.70s;
    	animation-delay: 1.70s;
    .animate-delay-1-75 {
    	-webkit-animation-delay: 1.75s;
    	animation-delay: 1.75s;
    .animate-delay-1-80 {
    	-webkit-animation-delay: 1.80s;
    	animation-delay: 1.80s;
    .animate-delay-1-85 {
    	-webkit-animation-delay: 1.85s;
    	animation-delay: 1.85s;
    .animate-delay-1-90 {
    	-webkit-animation-delay: 1.90s;
    	animation-delay: 1.90s;
    .animate-delay-1-95 {
    	-webkit-animation-delay: 1.95s;
    	animation-delay: 1.95s;
    .animate-delay-2 {
    	-webkit-animation-delay: 2s;
    	animation-delay: 2s;
    .animate-delay-2-05 {
    	-webkit-animation-delay: 2.05s;
    	animation-delay: 2.05s;
    .animate-delay-2-10 {
    	-webkit-animation-delay: 2.10s;
    	animation-delay: 2.10s;
    .animate-delay-2-15 {
    	-webkit-animation-delay: 2.15s;
    	animation-delay: 2.15s;
    .animate-delay-2-20 {
    	-webkit-animation-delay: 2.20s;
    	animation-delay: 2.20s;
    .animate-delay-2-25 {
    	-webkit-animation-delay: 2.25s;
    	animation-delay: 2.25s;
    .animate-delay-2-30 {
    	-webkit-animation-delay: 2.30s;
    	animation-delay: 2.30s;
    .animate-delay-2-35 {
    	-webkit-animation-delay: 2.35s;
    	animation-delay: 2.35s;
    .animate-delay-2-40 {
    	-webkit-animation-delay: 2.40s;
    	animation-delay: 2.40s;
    .animate-delay-2-45 {
    	-webkit-animation-delay: 2.45s;
    	animation-delay: 2.45s;
    .animate-delay-2-50 {
    	-webkit-animation-delay: 2.50s;
    	animation-delay: 2.50s;
    .animate-delay-2-55 {
    	-webkit-animation-delay: 2.55s;
    	animation-delay: 2.55s;
    .animate-delay-2-60 {
    	-webkit-animation-delay: 2.60s;
    	animation-delay: 2.60s;
    .animate-delay-2-65 {
    	-webkit-animation-delay: 2.65s;
    	animation-delay: 2.65s;
    .animate-delay-2-70 {
    	-webkit-animation-delay: 2.70s;
    	animation-delay: 2.70s;
    .animate-delay-2-75 {
    	-webkit-animation-delay: 2.75s;
    	animation-delay: 2.75s;
    .animate-delay-2-80 {
    	-webkit-animation-delay: 2.80s;
    	animation-delay: 2.80s;
    .animate-delay-2-85 {
    	-webkit-animation-delay: 2.85s;
    	animation-delay: 2.85s;
    .animate-delay-2-90 {
    	-webkit-animation-delay: 2.90s;
    	animation-delay: 2.90s;
    .animate-delay-2-95 {
    	-webkit-animation-delay: 2.95s;
    	animation-delay: 2.95s;
    .animate-delay-3 {
    	-webkit-animation-delay: 3s;
    	animation-delay: 3s;
    .animate-delay-3-05 {
    	-webkit-animation-delay: 3.05s;
    	animation-delay: 3.05s;
    .animate-delay-3-10 {
    	-webkit-animation-delay: 3.10s;
    	animation-delay: 3.10s;
    .animate-delay-3-15 {
    	-webkit-animation-delay: 3.15s;
    	animation-delay: 3.15s;
    .animate-delay-3-20 {
    	-webkit-animation-delay: 3.20s;
    	animation-delay: 3.20s;
    .animate-delay-3-25 {
    	-webkit-animation-delay: 3.25s;
    	animation-delay: 3.25s;
    .animate-delay-3-30 {
    	-webkit-animation-delay: 3.30s;
    	animation-delay: 3.30s;
    .animate-delay-3-35 {
    	-webkit-animation-delay: 3.35s;
    	animation-delay: 3.35s;
    .animate-delay-3-40 {
    	-webkit-animation-delay: 3.40s;
    	animation-delay: 3.40s;
    .animate-delay-3-45 {
    	-webkit-animation-delay: 3.45s;
    	animation-delay: 3.45s;
    .animate-delay-3-50 {
    	-webkit-animation-delay: 3.50s;
    	animation-delay: 3.50s;
    .animate-delay-3-55 {
    	-webkit-animation-delay: 3.55s;
    	animation-delay: 3.55s;
    .animate-delay-3-60 {
    	-webkit-animation-delay: 3.60s;
    	animation-delay: 3.60s;
    .animate-delay-3-65 {
    	-webkit-animation-delay: 3.65s;
    	animation-delay: 3.65s;
    .animate-delay-3-70 {
    	-webkit-animation-delay: 3.70s;
    	animation-delay: 3.70s;
    .animate-delay-3-75 {
    	-webkit-animation-delay: 3.75s;
    	animation-delay: 3.75s;
    .animate-delay-3-80 {
    	-webkit-animation-delay: 3.80s;
    	animation-delay: 3.80s;
    .animate-delay-3-85 {
    	-webkit-animation-delay: 3.85s;
    	animation-delay: 3.85s;
    .animate-delay-3-90 {
    	-webkit-animation-delay: 3.90s;
    	animation-delay: 3.90s;
    .animate-delay-3-95 {
    	-webkit-animation-delay: 3.95s;
    	animation-delay: 3.95s;
    .animate-delay-4 {
    	-webkit-animation-delay: 4s;
    	animation-delay: 4s;
    .animate-delay-4-05 {
    	-webkit-animation-delay: 4.05s;
    	animation-delay: 4.05s;
    .animate-delay-4-10 {
    	-webkit-animation-delay: 4.10s;
    	animation-delay: 4.10s;
    .animate-delay-4-15 {
    	-webkit-animation-delay: 4.15s;
    	animation-delay: 4.15s;
    .animate-delay-4-20 {
    	-webkit-animation-delay: 4.20s;
    	animation-delay: 4.20s;
    .animate-delay-4-25 {
    	-webkit-animation-delay: 4.25s;
    	animation-delay: 4.25s;
    .animate-delay-4-30 {
    	-webkit-animation-delay: 4.30s;
    	animation-delay: 4.30s;
    .animate-delay-4-35 {
    	-webkit-animation-delay: 4.35s;
    	animation-delay: 4.35s;
    .animate-delay-4-40 {
    	-webkit-animation-delay: 4.40s;
    	animation-delay: 4.40s;
    .animate-delay-4-45 {
    	-webkit-animation-delay: 4.45s;
    	animation-delay: 4.45s;
    .animate-delay-4-50 {
    	-webkit-animation-delay: 4.50s;
    	animation-delay: 4.50s;
    .animate-delay-4-55 {
    	-webkit-animation-delay: 4.55s;
    	animation-delay: 4.55s;
    .animate-delay-4-60 {
    	-webkit-animation-delay: 4.60s;
    	animation-delay: 4.60s;
    .animate-delay-4-65 {
    	-webkit-animation-delay: 4.65s;
    	animation-delay: 4.65s;
    .animate-delay-4-70 {
    	-webkit-animation-delay: 4.70s;
    	animation-delay: 4.70s;
    .animate-delay-4-75 {
    	-webkit-animation-delay: 4.75s;
    	animation-delay: 4.75s;
    .animate-delay-4-80 {
    	-webkit-animation-delay: 4.80s;
    	animation-delay: 4.80s;
    .animate-delay-4-85 {
    	-webkit-animation-delay: 4.85s;
    	animation-delay: 4.85s;
    .animate-delay-4-90 {
    	-webkit-animation-delay: 4.90s;
    	animation-delay: 4.90s;
    .animate-delay-4-95 {
    	-webkit-animation-delay: 4.95s;
    	animation-delay: 4.95s;
    .animate-delay-5 {
    	-webkit-animation-delay: 5s;
    	animation-delay: 5s;


  • Theme CSS Classes

    .bgfixed Background attachment: fixed

    Bootstrap requires a containing element to wrap site contents and house our grid system. You may choose one of two containers to use in your projects. Note that, due to padding and more, neither container is nestable. Use .container for a responsive fixed width container.


    Use .container-fluid for a full width container, spanning the entire width of your viewport.

    .backgroundtopright Row or column background position: top right
    .backgroundtopleft Row or column background position: top left
    .backgroundtopcenter Row or column background position: top center
    .backgroundbottomright Row or column background position: bottom right
    .backgroundbottomleft Row or column background position: bottom left
    .backgroundbottomcenter Row or column background position: bottom center
    .backgroundcenterright Row or column background position: center right
    .backgroundcenterleft Row or column background position: center left

    Row or column background position: center center

  • Icons

    Font Awesome is a font and icon toolkit based on CSS and LESS. Example usage:

    • Icon code HTML code: <i class="fa fa-envira"></i> → Icon name: envira
    • Icon code HTML code: <i class="fa fa-spinner"></i> → Icon name: spinner
    • Icon code HTML code: <i class="fa fa-battery-full"></i> → Icon name: battery-full

    Click To All Icon List


When creating or editing a WordPress page or blog post, you can easily add images at any time using the WordPress Media Uploader tool. Elegance supports featured images. Elegance utilizes WordPress built-in Featured Image feature to handle image management. To set the featured image for a post, go to Posts > Add New (or edit an existing post) and click the Upload/Insert icon above the main text box. From here, choose a file and upload it. Once it is uploaded, click Use as featured image located near the bottom of the Add Media window. Then click Save all changes, close the Add Media window and you're good to go!

  • Regenerate Images

    Regenerate Thumbnails allows you to regenerate the thumbnails for your image attachments. This is very handy if you've changed any of your thumbnail dimensions (via Settings -> Media) after previously uploading images or have changed to a theme with different featured post image dimensions.

    Plugin Download


You can create a support ticket to PixelPerfect Theme themes. Our support team will respond within 24 - 48 hours ticket support. We dont work weekends. Our technical support team will respond within working hours to ticket.