Installation and Setup

It is a good practice to backup your install completely before installing new plugins.

Take a moment to review the WordPress version requirements and server requirements before installation, or you may encounter issues when using Elementary.

To use this plugin, you need to be running WordPress on a self-hosted site. In other words, Elementary cannot be installed in the free WordPress.com sites.

  • Installing Elementary plugin

    1. Download the plugin from the `My Account` page in our website.
    2. Go to your site and Log into your WordPress Admin panel.
    3. Go to: Plugins > Add New.
    4. Now click on Upload Plugin.
    5. Then on the next screen, Click Choose File and choose the .zip file of the Elementary Plugin that you’ve just downloaded from our site.
    6. Click Install Now and WordPress completes the installation.
    7. After you see “Plugin installed successfully”, Click Activate Plugin.
    8. Thats it, you are now ready to use ‘Elementary‘ plugin.

  • Configuring the License

    Your license key grants you access to plugin updates and support. If your license key is deactivated or expired, your plugin will still work properly but you will not receive automatic updates.

    To configure the license,

    1. Go to `My Account` page in our website. Click on `View Licenses`.
    2. In the next page, click on `Manage Sites`.
    3. In the next page, enter your website’s address where you’ll be using the Elementary plugin. Then click `Add Site`.
    4. Now, Obtain the license key for your copy of Elementary from the `My Account` page in our website. The license key can also be found in the mail that we sent you during the time of your purchase.
    5. Go to your site and Log into your WordPress Admin panel.
    6. Go to: Plugins > Elementary License.
    7. In the `Elementary License Key Settings` page, enter the License Key in the text box.
    8. Click `Activate License`.
    9. The status of your license key will be displayed below.

  • Setting up data

    Elementary works out of the box with data already created on your WordPress website. So, go ahead and add some new content. It could be posts, pages or custom post types like WooCommerce, sliders, etc.

  • Uninstalling Elementary

    If you deactivate and delete the plugin from the WordPress Admin, you are deleting all the Elementary Settings and Options. The Elements created using the plugin are safe, just in case you choose to come back.

Using Elementary plugin

  • Basics

    1. You may notice that there’s a new menu in the WordPress Dashboard called `Elements`. From the WordPress Dashboard go to Elements > Add New Element.
      Elements Menu
    2. Here, enter the name of your element and click Customize this Element button. (yes, that green button!)
      Element Editor
    3. In a new tab, the `Element Customization` screen opens.
    4. You’ll be welcomed by the `Choose Element` pop up window.
      Choose Element Pop Up
    5. Currently we offer 7 different types of Elements to choose from.
    6. Choose any element by clicking on it. Lets try the `pin-card` now. Shall we?
    7. You can now see the Editor Tools appear.

  • Editor Tools

    1. Add content-settings:

      Lets go ahead and fill in the content settings.

      1. First, let us choose from the available post-types.
        1. On choosing `Any`, all the post-types will be selected.
        2. You could also choose to include or exclude any post-type.
      2. Then, choose between `field` or `taxonomy`. Lets first try `taxonomy`.
      3. Now, in the next dropdown, all available taxonomies under the chosen post-types are listed.
        1. Again, on choosing `Any`, all the taxonomies will be selected.
        2. You could also choose to include or exclude any taxonomy.
      4. Then, in the next dropdown is listed all available terms belonging to the chosen taxonomies.
        1. As you’d have caught up already, on choosing `Any`, all the terms will be selected.
        2. You could also choose to include or exclude any term.

        Editor Tools

      5. You could further choose to limit the posts based on date. This step is completely optional.
        1. When the default value of `Any` is selected, all the posts are included to create our element, irrespective of the date in which they were published.
        2. When `Before / After` is selected, you get to decide the before & after date of publishing to be included.
        3. When `On` is selected, you get to choose a particular date. Only posts published on that date will be included.
        4. When `Last` is selected, you get to specify the number of days. Only posts that were published in that interval will be included.
      6. Then, choose how to sort your content / query.
      7. Then, choose the fields.
        1. I’m sure you’d have noticed that the `Text` fields have an additional Incrementor added to them.
        2. Use that to limit the number of characters that have to be displayed.

        Editor Tools showing the Fields Selection

      8. Once the fields are chosen, you will see the value changes in the preview.
    2. Change Display Mode:
      1. Now, let us try switching the `display-mode` from the top-bar – Choose Collection.
      2. You will see that the preview displays 10 posts fulfilling the chosen conditions.
    3. Change Number Of Posts:
      1. You can change the number of posts to display from the `Collection Settings`.
        Collection Settings
      2. You’ll find it labelled `Posts Per Page`.
      3. Once you limit the number of posts in a displayed in a page, a neat pagination will be added at the bottom.
      4. Use it to navigate to the other pages.
      5. Thinking if there’re too many pages displayed? Well, that can be limited by choosing the `Max Num Of Posts`.
      6. Was that simple? Now, lets try editing the CSS of ‘Atom’ or ‘Elements’.
    4. Styling your Element:
      1. To style your element, go to the ‘Style Settings’ tab.
      2. By default the css changes your make are applied to the highlighted ‘atom’ or the element itself, in the above screenshot it is the element itself. ( pin-card )
      3. Go on and change the color, width, padding, etc.
        Style Settings
      4. Lets see how to edit other atoms.
    5. Selecting atoms:
      1. You can not only style the overall element, but also customize the individual Atoms that make up an Element.
      2. To select an atom, just click on the label near it.
      3. If the labels are not visible yet, Click on the `editorShowtoolTipShow` toggle button.
      4. When in Collection view, selecting the atom of the first element and changing css will apply changes to the specific atom in all the elements.
      5. Let’s see how to change the color of the ‘title’.
      6. Choose the atom corresponding to the title field – `text1` in this case.
        Styling the Atoms
      7. Make some style changes. May be change the background-color?
      8. Now you’ll see that the CSS changes made will be applied only to this atom.
    6. Full Width Preview:

      Are the `Editor Tools` obstructing you from having a nice, full width preview? We’ve felt that too. Well, click on the `editorShowtoolTipShow` toggle button to show / hide the Editor Tools Area.

    7. Wrapping up:
      1. Once all customizations have been made to your heart’s content, Click on the `Save` button present at the top right corner of the page.
      2. Once the element is saved, its time to see in action, the magic you’ve created.
      3. You can display the elements created now in the pages via Shortcode.

Displaying the Elements

  • Elementary Shortcode

    1. Go to the WordPress Dashboard and click on the menu item `Elements`.
    2. You’ll see the name of the Element you just created listed in this page.
    3. A `Shortcode` column is also present.
      Elementary Shortcode
    4. Copy the shortcode corresponding to the element you wish.
    5. Create a new Page. You may also choose to add the Element in an existing page.
    6. Paste the shortcode in the page and Save it.
      Adding the Elementary Shortcode to Page
    7. View the page in the front-end of your website. You’ll find the element added to it.

Technical Stuff

  • WordPress Version

    Elementary will always work on the latest version of WordPress, which is often feature rich and more stable. But we understand that it not possible for everyone to run the latest version of WordPress. So, we provide backward compatibility upto WordPress 3.8

    We highly recommend upgrading WordPress to the latest version.

  • Server Requirements

    Listed below are the minimum server requirements needed for the smooth functioning of Elementary.

    1. PHP 5.3 or greater
    2. MySQL 5.0 or greater
    3. The mod_rewrite Apache module (for permalinks)