Copyright 2019 All Rights Reserved
logo

Introduction

Item Name: Asche Complete Coming Soon and Maintenance WordPress Plugin

Item Version: 2.0.5

Author: UIClan

Twitter: UIClan On Twitter

Hello! Welcome to Asche Coming Soon Plugin documentation. First of all, we convey our sincere gratitude for visiting our site. We want to assure you that development of "Asche" is a continuous process and you will find the plugin is updated regularly with more and more wonderful demos, layouts, elements and features.

We shall remain thankful to you in providing "Free Lifetime Updates of the Plugin and Continuous Support", if you purchase a plugin license or if you have already done so.

We have compiled here the whole documentation. This documentation is to help you in understanding each feature of the plugin. Please go through the document carefully and you will realize how easy and effective it is to use the plugin on your newly created "Almost Ready" to launch website.

General

This section contains list of all plugin related requirements and configuration, general installation instructions, file structure etc.

Plugin Requirements

To install and use Asche on your site, your site must fulfill some basic requirements. These are very simple and most probably your WordPress powered website is compatible with the plugin. We also highly recommend to regularly check for updates for WordPress and VC.

4.5+
WordPress Version

Note: Requirements

The above mentioned versions are recommended for smooth working of "Asche" on your site. The plugin will mostly work with older versions as well.

Browser Support

We support the latest versions of the following browsers and platforms. On Windows, we support Internet Explorer 11+. More specific support information is provided below.

  • Chrome

  • Safari

  • Opera

  • FireFox

  • IE 11+

Getting Started

To get started you need to download the plugin package from Codecanyon "Downloads" section.

When you purchase "Asche" on Codecanyon, you need to download the plugin files from the downloads section of your Envato account. Navigate to your downloads tab on Codecanyon and find Asche - Complete Coming Soon and Maintenance WordPress Plugin. If you bought it recently, it should be on the top. Next, click the download button to see the two options. The "All files & documentation" contain the whole plugin package and has other files like license and documentation. The "Installable WordPress file only" consists of just the installable WordPress plugin zip file asche.zip.

Support

We provide support for "Asche" customers using our advanced and secured ticketing system. To use our system you need to send an email using the contact form on our Envato profile page. Kindly mention the purchase code for verification. If you have a website issue, provide the website url and admin credentials.

License Terms

Asche can be purchased using the "Regular Licensing" or "Extended Licensing" option. The prices for the same are mentioned on the product description page on Codecanyon.

The license and billing are controlled by Envato and you can read more about them on the Envato license terms page. We do not control any sale or the licensing of the plugin. If you want to know more about the license you can contact us or Envato directly for clarification.

Regular License Terms Extended License Terms

License FAQs

  • Do I need to purchase second license if I want to use the plugin on more than one site?

    Yes. Every license of Asche entitles you to use the plugin on a single site. If you wish to use the plugin on more than one complete website, you need to purchase a second license of the plugin.

  • Can I use the plugin on a development / test site?

    Yes. You can use Asche plugin on as many test sites as you want. You can use the plugin to build your site on a development environment, then move it to the live site. Just remember, you will need separate license for each of your live sites.

  • Can I use the plugin for client work?

    Yes. Each license of the plugin allows you to use it for a single end client. That means if you have 10 clients you will need 10 separate license of the plugin for all of them.

  • Can I use the plugin in Multi site?

    Depends. If you are the sole owner of all the subsites that are created using WordPress, then you can use the plugin on all the sites. But if you have a membership site where the subsite owners are outside of your company, you need to have separate license for each of the subsites.

  • Where can I learn more about license terms?

    If you have further queries about Asche and it's licensing terms, you can contact us directly from our profile page.

Installation

You can install the plugin either by using WordPress or via FTP. The asche.zip file that you find in the plugin download package is what you need to upload to your site.

Download Asche from Codecanyon

  • 1

    Visit the "Downloads" page.

    After you have purchased the plugin you need to download the plugin package from the downloads page. For that go to "Downloads" tab from your account screen.
  • 2

    Select the download package.

    Once there, you need to select the type of package you want to download. You can download the whole package that has everything like license files, documentation and the plugin file or only the "Installable WordPress File Only" package.
  • 3

    Download the package.

    Once you have selected, the download will begin automatically. Based on your selection and your internet speed, the download will take some time.
  • 4

    Once the downlaod is complete, extract the plugin package.

    The downloaded package then needs to be extracted using an appropriate application. For Windows users, we recommend 7-zip which is a free software to extract the contents of the package. For MacOS, you can use the inbuilt extractor.

WordPress Dashboard Installation

Install From The Admin Dashboard (RECOMMENDED).

  • 1

    Go to Plugins > Add New.

  • 2

    Click the Upload button.

  • 3

    Upload Asche

    Navigate to find the "asche.zip" file on your computer and click "Install Now". Alternatively if you have downloaded the "Installable WordPress file only" upload the dowbloaded zip file as is without extracting and then click "Install Now".
  • 4

    Activate the plugin

    Activate the newly installed plugin in the next screen.

Note: Important Steps While Installing Plugin

Remember, you need to upload the asche.zip file on your site. Do not try to attempt to upload the asche uncompressed folder.

Also, the plugin is multisite compatible and can be activated on individual sites or network wide as is done on the main demo site.

How To Update Asche

There are basically four easy steps to update your plugin.

  • 1

    Go to Plugins > Installed Plugins.

  • 2

    Deactivate Asche

  • 3

    Delete the plugin

  • 4

    Upload the new version.

    The process is exactly similar to what you did when installing the plugin. Follow the steps in the Installation section.

Note: Important Steps Before Updating Plugin

No matter which method you use to update Asche (or any other plugin), here are some of the most important steps that you should take.

1. Before you update, check update notes.
2. Make a backup of your database - VERY IMPORTANT.

Elements

Asche comes with 10 pre-packed shortcodes.

All of them are extensively customizable and can be applied by the use of the Shortcode generator. These shortcodes are generated to add content to the frontend of the page, all from the plugin's option page.

  • Button
  • Text
  • Single Image
  • Heading
  • Countdown
  • Subscribe
  • Modal
  • Contact Form
  • Helper
  • Helper Inner

The present documentation displays the overall shortcode settings for each individual shortcode. Important notes and tips are also being mentioned wherever felt necessary.

Button

text The button text
size Choose from five sizes - extra-small, small, medium(default), large, extra-large.
shape Choose from square(default), round, pill and circle.
style Choose from default, hollow(empty to background fill), hollowed(background fill to empty), fill(borderless and empty to filled) and frame(borderless and empty to only bordered).
full Choose if button is full width.
icon Choose icon. Leave for only text.
icon_pos Choose if icon will be placed left or right of text.
color Default text color.
hover_color Hover text color.
bg Default background color.
hover_bg Hover background color.
class Additional helper classes.
border_width Border width for button. Default is 1px.
margin_top Margin top of button. This can be also set using helper classes.
margin_bottom Margin bottom of button. This can be also set using helper classes.
margin_left Margin left of button. This can be also set using helper classes.
margin_right Margin right of button. This can be also set using helper classes.
url_type Choose if url type is link or modal.
blank For link type url, check if link will open in new tab or not.
link Provide the url for link type.
modal_id The unique modal id for modal type. This should be the id of the modal that you set in the "miscellaneous" tab.
family Font family. Add this font in the "typography" section or use one from the preselected familied in the "typography" section.
variant Font variant.
font_size Font size. This changes the size of the button also as size of the button depends on the font size.
line_height Line height of the button text and icon.
letter_spacing Spacing between letters. Example 1px.
word_spacing Word spcaing between words. Example 3px.
padding If you want to have a different padding than the default one, then provide the padding in an appropriate format. Example "10px" for all sides 10px; "15px 10px" for vertical 15px and horizontal 10px; etc.

Text

class Additional helper classes.
wrapper_tag Choose the wrapper tag for the text from div, span, p, h1, h2, h3, h4, h5, h6.
text_align Choose if text is aligned left, right or center.
color The color of text.

Pointer Events

Texts are not selectable by default. This is done with the purpose of maintaining hover effects on background. However, buttons, links etc are completely accessible.

Single Image

img_url Provide the url of the image, the image can be uploaded from the media library or an external url can be provided.
align Choose if the image will be left, center or right aligned.
class Additional helper classes.

Heading

wrapper_tag Choose the wrapper tag for the text from div, span, p, h1, h2, h3, h4, h5, h6.
family Provide the font family. The family needs to be added in the typography section of the options page.
variant The appropriate font variant or weight.
font_size The font size in px/em.
line_height Font line height in px/em or unitless value.
letter_spacing Provide a letter spacing like 2px or leave empty for no letter spacing.
word_spacing Provide a word spacing like 5px or leave empty for no word spacing.
font_color The font color.
class Additional helper classes.

Countdown

finaldate REQUIRED. Provide the final date for the timer.
style Choose between textual style or cards type style.
format Provide the format for textual style. A default format string is provided.
periods Choose which periods to show for the cards type style. Options are weeks, days, hours, minutes and seconds.
class Additional helper classes.
family The font family for the countdown. This includes both text as well as number.
variant The font variant.
font_size The font size of the text as well as number part.
line_height The line height of the countdown.
font_color Default color the countdown texts and numbers.
text_transform choose if you want the text to be uppercase, capitalise or lowercase.
num_family This is font family for only the numbers. Set this to override the default font family or the one set by the family option of the countdown.
num_variant Override font weight and style for the timer numbers.
num_font_size Font size of only the numbers.
num_line_height Line height for only the numbers.
num_font_color Different font color for the number than set for the whole countdown.
bg Background of the each cards in style 2.
border_radius Border roundness for style 2.
border_width Provide a positive value for border width. Example 2px;
border_style Choose if the border style is solid, dotted, dashed.
border_color Provide the border color.

Subscribe

style Choose from 4 styles - basic, inside, separate, minimal.
block Check if the button and the input fields are block items and the button is placed below the input field.
width Provide a custom width for the subscribe box. By default it is 100% and cover the whole width of the container.
placeholder_text The default placeholder text of the field.
border_radius Provide a value in px/ems of the roundness of the input field.
class Additional classes for the subscribe box.
color Text color of the input field.
placeholder_color Text color of the default placeholder text.
bg background color of the input field.
border_width Border width of the input field. Example 2px.
border_color Border color of the input field. Require a non-zero value for the input field.
hover_border_color Border color when hovered over the input field.
btn_text The text of the button.
btn_shape Choose from square, round, pill and circle.
btn_full Check if button will be full width. This requires the block option to be checked.
btn_icon_pos Choose if the button icon will be before or after the text.
btn_icon Select the button icon.
btn_width The width of the button in case it is a block button.
btn_color Default text color of button.
btn_bg Default background color of the button.
btn_hover_color Hover color when the button is hovered.
btn_hover_bg Hover background color of the button when it is hovered.

Modal

modal_id Provide the unique modal id for the modal. This should be unique to the modal and the page.
content Add content to the modal body.

Modal Element Location

The modal element is not available in the shortcode generator. This is because the modal cannot be just added anywhere in the page. To add modals to the page, you need to create them in the "Miscellaneous" section of the options page.

Contact Form

mail_to REQUIRED. Provide the email of the receiver.
layout Choose from 3 layouts - all vertical, all horizontal except subject and message fields, and all horizontal except message field.
size Choose from small, medium(default) and large sizes.
no_subject Choose if the subject field would be omitted or not.
family Font family for the contact form.
variant Font weight and style for the contact form fields.
bg Background color of the fields.
color Text color of the fields.
focus_bg Background when a field is focussed.
focus_color Text color when a field is focussed.
border_width Border width of input fields.
border_color Border color if border width is provided.
border_radius Roundness of the fields.
focus_border_color Border color when a field is focussed.
placeholder_color Default color of the placeholder text.
class Additional helper classes.

Helper

display_mobile Choose display type in mobile screens.
display_desktop Choose display type on large desktop screens.
height_mobile Height in mobile screens. Require mobile display to be either block or inline-block.
height_desktop Heigh on large desktop screens. Require desktop display to be either block or inline-block.
margin_mobile Margin in mobile screens. Provide a proper margin in css format.
margin_desktop Margin on large desktop screens. Provide a proper margin in css format.
width_mobile Width in mobile screens. Require mobile display to be either block or inline-block.
width_desktop With on large desktop screens. Require desktop display to be either block or inline-block.
align_mobile Align content left, center or right in mobile screens.
align_desktop Align content left, center or right on large desktop screens.
class Additional helper classes. Do not use the "helper" class as it is also used in the shortcode.

Property Override

Setting desktop properties, set the element style to be available on mobile screens also. So to override the properties set for desktop in mobile devices, set the corresponding mobile properties. If however, you want the property to remain on mobile screens also then leave the mobile properties.

Helper Inner

Helper Inner Access and Properties

The helper inner is basically a helper element only with the exception that the name of the element is manually required to be updated from "helper" to "helper_inner". A helper inner element has exactly the same properties and attributes of the helper element. It is provided so that you can use the helper_inner element inside the helper element as a child shortcode.

Effects

There are 12 background effects.

These add an extra level of flair to your full page coming soon pages and are very easy to customize and modify the properties. Every single one of them is mentioned here in details.

  • Waterpipe
  • Dotted Canvas
  • Mobing Background
  • Particles
  • Rain
  • Rainbow Squares
  • Flat Surface Shader
  • Long Shadow
  • Sea Waves
  • Gravity Points
  • Parallax Stars
  • Falling Confetti

The present documentation provides the settings for each individual effect, if applicable. Important notes and tips are also being mentioned wherever felt necessary.

Waterpipe

Waterpipe.js provided by dragdropsite.js. The default setting json is provided below.

Visit Generator 
{
    "bgColorInner": "#2b2b2b",
    "bgColorOuter": "#000000",
    "gradientEnd": "#f5883b",
    "gradientStart": "#ff5500",
    "lineWidth": 1,
    "numCircles": 1,
    "radiusSize": 100,
    "smokeOpacity": 0.05
}

For the demos provided at the link, copy the following json files and paste them in the textarea if you choose waterpipe as the effect in Asche Plugin Options.

{
    "bgColorInner": "#ffffff",
    "bgColorOuter": "#cccccc",
    "gradientEnd": "#7a7a7a",
    "gradientStart": "#000000",
    "lineWidth": 2,
    "numCircles": 1,
    "radiusSize": 100,
    "smokeOpacity": 0.10
}
{
    "bgColorInner": "#2b2b2b",
    "bgColorOuter": "#000000",
    "gradientEnd": "#6b71e3",
    "gradientStart": "#fa05fa",
    "lineWidth": 1.5,
    "numCircles": 1,
    "radiusSize": 100,
    "smokeOpacity": 0.05
}
{
    "bgColorInner": "#2b2b2b",
    "bgColorOuter": "#000000",
    "gradientEnd": "#7d7d7d",
    "gradientStart": "#e0e0e0",
    "lineWidth": 1.2,
    "numCircles": 1,
    "radiusSize": 100,
    "smokeOpacity": 0.05
}
{
    "bgColorInner": "#ffffff",
    "bgColorOuter": "#ffffff",
    "gradientEnd": "#404040",
    "gradientStart": "#000000",
    "lineWidth": 3,
    "numCircles": 1,
    "radiusSize": 100,
    "smokeOpacity": 0.05
}
{
    "bgColorInner": "#292929",
    "bgColorOuter": "#000000",
    "gradientEnd": "#001eff",
    "gradientStart": "#51ff00",
    "lineWidth": 1.5,
    "numCircles": 1,
    "radiusSize": 100,
    "smokeOpacity": 0.05
}
{
    "bgColorInner": "#400000",
    "bgColorOuter": "#000000",
    "gradientEnd": "#400000",
    "gradientStart": "#ff0000",
    "lineWidth": 1.5,
    "numCircles": 1,
    "radiusSize": 100,
    "smokeOpacity": 10
}
{
    "bgColorInner": "#ffffff",
    "bgColorOuter": "#000000",
    "gradientEnd": "#000000",
    "gradientStart": "#000000",
    "lineWidth": 2.2,
    "numCircles": 1,
    "radiusSize": 100,
    "smokeOpacity": 10
}
{
    "bgColorInner": "#ffffff",
    "bgColorOuter": "#ffffff",
    "gradientEnd": "#696969",
    "gradientStart": "#636363",
    "lineWidth": 1,
    "numCircles": 1,
    "radiusSize": 100,
    "smokeOpacity": 0.05
}
{
    "bgColorInner": "#3b003b",
    "bgColorOuter": "#630063",
    "gradientEnd": "#cccc00",
    "gradientStart": "#ffff00",
    "lineWidth": 1,
    "numCircles": 1,
    "radiusSize": 100,
    "smokeOpacity": 0.05
}
{
    "bgColorInner": "#ffffff",
    "bgColorOuter": "#ebebeb",
    "gradientEnd": "#012e82",
    "gradientStart": "#2600ff",
    "lineWidth": 1.5,
    "numCircles": 1,
    "radiusSize": 100,
    "smokeOpacity": 10
}
{
    "bgColorInner": "#4d4d4d",
    "bgColorOuter": "#000000",
    "gradientEnd": "#00c48d",
    "gradientStart": "#03ffea",
    "lineWidth": 1,
    "numCircles": 1,
    "radiusSize": 100,
    "smokeOpacity": 0.05
}

Dotted Canvas

Dots Color This is the color for the dots overlay. You need to provide a hex color and not an rgb or rgba format color.

Dots Color Format

Dots should have a hex color format

Hex color code format: #fafcfd, #ced.

Moving Background

No specific options.

Particles

Particles.js provided by Vincent Garreau [https://github.com/VincentGarreau/particles.js]. The default setting json is provided below.

Visit Generator 
{"particles":{"number":{"value":80,"density":{"enable":true,"value_area":800}},"color":{"value":"#ffffff"},"shape":{"type":"circle","stroke":{"width":0,"color":"#000000"},"polygon":{"nb_sides":5},"image":{"src":"img/github.svg","width":100,"height":100}},"opacity":{"value":0.5,"random":false,"anim":{"enable":false,"speed":1,"opacity_min":0.1,"sync":false}},"size":{"value":3,"random":true,"anim":{"enable":false,"speed":40,"size_min":0.1,"sync":false}},"line_linked":{"enable":true,"distance":150,"color":"#ffffff","opacity":0.4,"width":1},"move":{"enable":true,"speed":6,"direction":"none","random":false,"straight":false,"out_mode":"out","bounce":false,"attract":{"enable":false,"rotateX":600,"rotateY":1200}}},"interactivity":{"detect_on":"canvas","events":{"onhover":{"enable":true,"mode":"repulse"},"onclick":{"enable":true,"mode":"push"},"resize":true},"modes":{"grab":{"distance":400,"line_linked":{"opacity":1}},"bubble":{"distance":400,"size":40,"duration":2,"opacity":8,"speed":3},"repulse":{"distance":200,"duration":0.4},"push":{"particles_nb":4},"remove":{"particles_nb":2}}},"retina_detect":true}

Minify Code

Once you download the json code from the generator, it is recommended to minify the code. Minify implies removing all whitespaces and new line characters. For that purpose you can use any free online json minifier tool. Once such good example is JSON MINIFY by CLEANCSS.COM.

Rain

Rainyday.js provided by maroslaw [https://github.com/maroslaw/rainyday.js].

Style Choose between heavy and light rain.
Background Image Required. Provide the background image for the rain. This can be the background image provided in the image background type option.

Rainbow Squares

Direction Choose from which direction the squares will move inside the browser. Options are top, bottom, left and right.

Flat Surface Shader

Triangles provided by Maksim Surguy [https://github.com/msurguy/triangles].

Visit Generator
Ambient Color The ambient is the overall color of the triangles.
Diffuse Color Diffuse color is the alternate color and also the color for the triangles when hovered. It diffuses into the ambient color and one goes away from the current pointer position.

Sea Waves

No specific options.

Long Shadow

No specific options.

Gravity Points

No specific options.

Parallax Stars

No specific options.

Falling Confetti

No specific options.