DOCUMENTATION. Table of content : GETTING STARTED. First Step. Theme Installation. Theme License. Importing Demo Data.

Transcription

1 DOCUMENTATION Table of content : GETTING STARTED First Step Theme Installation Theme License Importing Demo Data Setting Up Menu GENERAL SETTINGS Stretched or boxed layout Header Variations Logo Settings Favicon RTL support Custom code Sidebar and Footer bar Footer note / copyright BLOG SETTINGS Show full width on archive Default thumbnail images Other blog settings

2 ADVANCED SETTINGS Stripe bar Option Social Profiles Optin form Contact Slider Featured post slider Testimonial Slider Homepage call to action Lightbox 1st visit Woo commerce sidebar Pricing Table Options STYLING SETTINGS TYPOGRAPHY TRANSLATION MOBILE SETTINGS BACKUP SETTINGS POST META Subtitle Editor Rating Full width Affiliate option PAGE META & TEMPLATES Category display Archive variations Portfolio excerpt Css and script input Page templates

3 COLUMN EDITOR SHORTCODE Icon shortcode Button shortcode Tabs shortcode Info box shortcode Custom border shortcode Slider shortcode Collapse / toggle shortcode Pricing table shortcode Carousel photo shortcode Ajax portfolio shortcode Gallery custom url shortcode Lightbox shortcode Rating block shortcode Java script link shortcode Countdown timer shortcode Iframe wrap Shortcode Container Shortcode Maps Shortcode Top rated list Shortcode Contact info Shortcode Optin form Shortcode Testimonial Slider Shortcode Divider Shortcode HOW TO GET SUPPORT

4 GETTING STARTED First Step If you are new to wordpress we recommend you to check out this links to get you started with wordpress Theme Installation To install ElegantBiz v2 Log into your WordPress backend Navigate to Appearance > Themes Click Install Themes Click Upload Now you just need to find the "newelegantbiz.zip" that you have downloaded and hit Install now. Theme License After purchasing the newelegantbiz, you will be granted an access to the member area locate your license and copy it to the theme settings => license

5 Importing Demo Data To import demo data first go to the member area and download the demo data xml file. After that Go to your wordpress installation s dashboard => tools and click import Choose import from wordpress Click choose file and find the xml file you downloaded from the member area. In some cases you will be prompted to install the importer plugin. Go ahead and install Aside the demo data, you can also import the theme settings from the theme demo. Find the theme settings in the member area and copy the script Go to theme settings => backup settings Paste the script inside the box and click import options Don t forget to save settings after you finish *If you encounter any un- proportional images it means that the images uploaded aren t being resized properly. You can use the Regenerate Thumbnails plugin to resize the images.

6 Setting Up Menu The newelegantbiz comes with 3 set of menus Main menu Footer menu Mobile menu To setup those menus go to appearance => menus and chose the menu to edit The menus also comes with additional icons to choose from To choose the icon to use, click the click here to show icons button and choose the button from popup and click use selected icon. Make use the icon color option to give the icon a color.

7 GENERAL SETTINGS Elegantbiz v2 comes with theme settings that you can customize, the first set are the general settings, in here you can customize site layout, change header layout, insert a logo and favicon, set RTL support, insert custom head code, insert custom footer code, change sidebar position. Set footer /bottom bar layout, set the footer text. Stretched or boxed layout The first setting in the general settings section are the site layout. If you click the view settings the options will be showed. The first option is the boxed / stretch layout. The second option is the shadow. If you choose the boxed layout you can use the shadow option to choose between various shadow. The other options are for setting up the space, radius, background color / background image. If you choose to have a big background image please select cover as the image setting or pattern if you choose to have a patter/repeatable image.

8 Header Variations After you click the view settings button for the header variation the header variation option will appear. you can choose between the 3 header variation. Header variation 1 Header variation 2 Header variation 3 Next are the header background image. You can upload your image or input the image url directly into the text area. After that please specify is the image is supposed to be cover image(not repeated) or a pattern(repeated). If you use the header variation 2 or 3, you will have a top bar section which you can specify the color in the next option. Next if you use the header variation 2, you will have an ads section which you can use an image ads or ppc ads. There are 3 ads options first is the image you use for the image ads, the second one is for the link that user will go to when they click the image.

9 The third one is for ppc ads, you can fill in the ads script here, for best performance please use responsive ads(google adsense). Logo Settings For best performance, please provide two logos, first logo is for the regular device, and the second one is 2x bigger than the first one to be displayed on the device that support retina display. You should also specify the width and height of the logo in pixel (ie.100px) to be calculated by the theme. Favicon Upload your.ico file in the favicon option or provide the url in the text box area.

10 RTL support If you want to use Right to Left language, you can enable the RTL support. This switch is for the front end only, to use RTL in the backend you can search for RTL plugin in the wordpress repository. Custom code ElegantBiz v2 comes with custom code box that you can use to insert custom code to the theme. In the general setting you can insert codes in the header and footer section of the theme. The custom head code will be placed before the closing <head> tag. And the custom footer code will be placed befor the closing <body> tag.

11 Sidebar and Footer bar The sidebar layout option enable you to switch between the right sidebar and left sidebar while the bottom bar layout enable you to switch between various bottom bar layout. Footer note / copyright The last option in the general settings is the foot note option that usually used to display the copyright of the website BLOG SETTINGS Show full width on archive The first 3 set of options in the blog settings is to set the archive pages (blog, category, archive and search result). The first option is to set the pages to display the sidebar(or not). The second option is to set which layout you want to show as the archive page. The ElegantBiz v2 comes with 5 different archive variations: Full Content, Excerpt without thumbnail,excerpt with small thumbnail, Excerpt with large thumbnail, Portfolio 2 column, Portfolio 3 column or Portfolio 4 column.

12 The third option is to hide or show the excerpt. This option will only work for Portfolio 2 column, Portfolio 3 column and Portfolio 4 column. Default thumbnail images The next options is to set the default thumbnail images that will be shown if you didn t setup a featured images in a post and the post has no images attached. There are two default images to be set up the small thumbnail and the medium/large thumbnail to better display the blog/archive pages. For best performance please use images with minimum width of 600px and minimum height of 355px for medium image, and 150px width, 150px height for small thumbnail. Other blog settings The next options are switches to display the features in the blog post. The options are:

13 ADVANCED SETTINGS Some of the feature settings are available in the advanced settings the options are: Stripe bar Option If you choose to enable the stripe bar (pop up at the top of the site), set the switch on and you will be prompted with the stripe bar options that include the message, link and anchor tag inputs.

14 Social Profiles If you choose to view the settings of the social profiles, the inputs to put the link to your social profiles will appear. Fill in the input to display the icon that you want and empty the inputs for the icons that you want to hide. The social profiles icons are displayed in various places. Header, Sidebar, Footer Bar, Content area (contact shortcode).

15 Optin Form Code settings After clicking the view setting switch you ll find the options for optin form, The first two input field of the optin form code settings is for inserting your title and subtitle that will be displayed above your optin form in front end The third setting is the field to put your auto responder script. The next option is the input field to put your optin footer text, it will be displayed below the optin form in the front end. The optin from settings have some style option that you can play with, these options comes next in the optin form setting. The first one is for changing the background color of the optin form box, and the second one is to adjust the button color. Next we got the border style, you can set the border style to be rounded or plain old box with sharp corner. After that we got the option to upload your custom button for the optin form.

16 Contact Settings If you click the view settings under contact settings, you will be displayed with some input fields, the first one is your telephone number to be displayed in the contact info widget, shortcode and also the main header. The second field is for your google maps url. To get the url you must copy the embed code of your google maps and get the script after src like if your embed code is like this You ll copy this blocked url The next option is the input field, this will be displayed in the widget and this will also be the that will be send to by the contact form The last two option is for inserting your address and your other contact like Blackberry messenger pin etc

17 Slider Options The slider option will be displayed if you switch it on. The first option is to insert your background image. This background image will only be seen if you uses slider type 2 in the next option The slider type 1 is for displaying a big image slider

18 While the slider type 2 is for the slider that used small image. The next option will be the slider items, if you click on the title the slider item option will be prompted The option inside each slider items are the title, image url, link(that user will go to when clicking the image or the slider button) and description. At the bottom of the slider you ll see a red cross that can be clicked if you want to remove the currently open slider item

19 Under the slider items you ll find a button to add more slide items and a field to add the thirdparty shortcode(revslider) Homepage featured post slider If you chose to switch the featured post slider on you ll be prompted with two fields the first one is choose how many post should be displayed in the featured post slider, The second one is the category option, you can find all of your post category in the field, you can choose to display a category or you can choose to display all category

20 Testimonial Slider There are two options for the testimonial slider, the testimonial it self and inputs to fill in url where you store all of your testimonial. You can add several testimonials by clicking add new testimonial button. To fill in the testimonial click the title (default testi 1), you will be prompted with the inputs to fill in the name and testimonial.

21 Homepage call to action The call to action section will be displayed in home page only. The option prompted after clicking the view settings switch is for the title, description, button anchor tag, and the url to the preferred page or site. Lightbox 1 st visit If you switch the lightbox 1 st visit option on, you will be prompted with the settings for the lightbox which contain the inputs for the title, content, delay before the lightbox appear, and the cookie in which the lightbox will re appear for that same user. The delay is set in seconds while the cookie is set in hours.

22 Woo commerce sidebar If you use woocommerce plugin, you can hide / show the sidebar in the woocommerce page with this switch. Pricing Table Options Click the view settings for the pricing table options and you will be prompted with option to select the color scheme and the width of the pricing table. You can leave the width inputs empty to get the default width. STYLING SETTINGS Most of the options in the styling settings is for adjusting colors of the theme. Colors that can be customize here are: Theme color skin => to adjust the basic color use for the background of the content area. Header color => used for adjusting the header color gradient, the first color is the top color and the second one is the bottom gradient color. Theme color palette => is a helper to adjust all of the option below the palettes. You ll notice the colors below the palette will change when you click one of the color palette.

23 Theme gradient color => adjusting the color used by most of the colors of the theme if it doesn t customize individually. Pricing table color => default (theme gradient color) used to adjust the header of the pricing table. Read more button => default (theme gradient color) used to adjust the read more(continue reading) button in the archive view. Visit site button => default (theme gradient color) used to adjust the visit site button. Next are the options to change the color of the main menu. Including the background, active state, hover state and the main text color. The last option in the styling settings are the custom css box where you can put your own css code.it will be override the default css settings. TYPOGRAPHY In the typography settings. You will find the entire font used in the theme. You can customize the font family, size, style and color. You can also use google font that will override the default font. The font you can customize in this settings are, body font, heading 1 - heading 6, title link(archive view) regular and hover state. And content font, regular and hover state link.

24 TRANSLATION The translation settings is used for changing the default text of the theme for ease of use, you ll find the translation settings are divided into several section that represent where the text appear, MOBILE SETTINGS When you enable the mobile settings( switch on ), your visitor that use mobile device will find your front page a little different, It will display mobile optimize template rather than a responsive website. There are some component that you can display in your mobile layout, menus, social profiles, video, call button, optin form, search form. The menu component can be adjust to display grid or list view.

25 To enable what component to display, drag the component from the disable side to the enable side and vice versa. The last option of the mobile settings is the text input for the video component. You can insert a video embed script such as the one used by youtube. BACKUP SETTINGS The last settings in the theme settings is the backup settings that you can use to backup all of your theme settings. There are two types of backup, first is the on site backup that means you can store the settings in the database, just click the backup settings to backup and restore to set it back. The second one is the off site backup, just copy the script inside the text box to a txt file to backup and paste it back and press import to restore it. Don t forget to click the save all changes button after you finish.

26 POST META In the post meta there are 4 option that you can play with. Subtitle This option if filled in will give a subtitle to your post title in the single view. Editor Rating This option will give your post a rating that will be displayed in several places like top rating widget, post thumbnail and top rated shortcode. This option is useful for review sites. Full width The next option is the checklist to enable or enable the sidebar for the current post only.

27 Affiliate option If you are building an affiliate site, the last option will be very useful. When filled, the input will generate a visit site button directly in the blog/archive view beside the continue reading button. PAGE META & TEMPLATES Just like in the post Meta, there are also option to display subtitle and full width to be enabled in the current post only. Category display If you chose to use blog/portfolio template the category section enable you to show only a specific category (ie. Portfolio category). Type only the category ID as listed below the option. If you choose to display more than one category separate the category ID with a comma.

28 Archive variations Just like the archive variations in the theme settings, this option enable you choose between various archive variations. The difference between this option with the one in the theme settings is this option only work in this specific page. And not the default blog/archive view, and this option also only work if you choose the blog/portfolio template. Portfolio excerpt If you choose the portfolio 2,3 or 4 in the archive variations, this option enable you to either show or hide the excerpt and only display the thumbnail of the post. Css and script input If you choose to display the blank at all page template, you ll need these inputs to fill in your custom css and script into the page. The script and css will only be used in this specific page.

29 Page templates Inside the page editor you ll find the option to choose between various page template under the attribute section Elegantbiz v2 enable you choose several page template for different task. Default template is the default page template(page.php) that you can use for your daily page building task. Blank template Is the template you can use if you want to build custom page (i.e sales page, landing page, squeeze page) Facebook template Is the template that you can use for building a facebook iframe page. Actually this template is similar to blank template, the different is only on the max width, it is optimized for facebook iframe page. Full container template Is like the default template but without the left and right content wrapper so your content will fill in the entire page. Blog / Portfolio template Is the template you use for building an archive (blog) or portfolio page.

30 COLUMN EDITOR Inside the page/post editor you ll find the column editor button If you click it, you ll be prompted with the column editor screen. To start editing click the add row button. To give the row a background color click the color button After the row show up, you ll have your first column that you can increase or decrease the width, open editor, give animation, and background color. To add another column click the add column button Icon shortcode SHORTCODE The icon shortcode button will prompt you a screen to choose between various icons. Once you click the icon you want to use, scroll down to see the option. The first option is to rather to display the icon as single icon or as icon for list item The scale option is to customize the size of the icon. The default size (scale 1) is set depend on where the icon is placed, if it is placed beside a paragraph then the paragraph font size will be the default. The type option enables you to choose between round / box background

31 The align option enables you to set the alignment of the icon. The spinning option enables you to make the icon to rotate clockwise If you fill in the link input, the icon will function as anchor tag for the link. And if you fill in the link input the next option will enable the link to open in new tab. The next options is an advance settings where you can specify the icon color, background css class and styles. After you choose the icon and fill in the input option click the insert in post to output the shortcode. Button shortcode The rest of the shortcodes are put under the shortcode icon in the page/post editor. After clicking the shortcode icon, a dropdown will appear showing you the list of the shortcodes available. The button shortcode is the first on the list. After you click the button shortcode from the list, a pop up will appear with options to customize the button shortcode.

32 As any other link, the button shortcode need an anchor text and link/url to go to. While the title and no follow link option can be added as needed. The size option can be set to xs(extra Small), sm(small), default(normal) or lg(large). The style option provide predefined color scheme, default(greyish), primary = blue, info = light blue, success = green, warning = yellow, danger = red, link = no style. If you don t want to use the predefined color scheme, you can input your own background and font color under the style options. but please input an ID in the id option below so the theme would recognize the button. For button that functioned as a lightbox trigger, choose yes in the lightbox link option. Choose block in the next option to make the button s width to the max(parent width). To open the link in the new window choose target _blank in the target option. The ID input is for giving your particular button an Id to be recognizable. The last option is the border color. The hex number you given to this input will also be used as the hover state background color of the button. Tabs shortcode After the button shortcode you ll find the tabs shortcode that will open up the tabs option upon click. After choosing how many items(tabs) that you want to use, specify the title of each items in the inputs that appear.

33 After clicking insert(the blue button at the bottom), you ll shortcode will appear in the editor, then you ll just have to fill in the content of the tabs. Info box shortcode The info box shortcode can be used for displaying text with custom background. The options for the infobox shortcode are the content of the infobox, predefined color scheme( just like the button color scheme), the option to show close(x) button, border, background and font color. Those last three options will override the color style option. Custom border shortcode In the custom border shortcode, you ll find three options. The border width, border style, and border color. these styles will only work for text inside this shortcode.

34 Slider shortcode If you want to show the default slider in the content area or in pages / posts outside the home page, this shortcode will come in handy. There are only three options in the pop up for this shortcode, Selector which to choose how many item/slider that you need, the width and the height of the slider. After selecting how many items you ll be prompted with inputs asking to be filled with the title of each of the slide item. After clicking insert you can go ahead edit the content goes here text with the content of your slide. Collapse / toggle shortcode Just like the tabs shortcode, you ll be having inputs to choose how many items and the inputs for the title of the items.

35 Pricing table shortcode You ll find the pricing table shortcode menu under the misc dropdown in the shorcode icon. In the options you ll only be prompted with how many items and the inputs to fill in the title. The rest of the option will directly placed inside the editor. [pricing_table] [pricing_column title="price 1" width="280px" price="$" popular="no" recurring="monthly"] [pricing_row]feature 1[/pricing_row] [pricing_footer]buy Now[/pricing_footer] [/pricing_column] [pricing_column title="price 2" width="280px" price="$" popular="no" recurring="monthly"] [pricing_row]feature 1[/pricing_row] [pricing_footer]buy Now[/pricing_footer] [/pricing_column] [/pricing_table] If you want to add another table just copy from [pricing_column ] to [/pricing_column]

36 Carousel photo shortcode To better make use of the carousel photo shorcode, please use image wider then 600px and higher then 355px. In the carousel photo s popup you ll find the option for displaying the carousel as in 3 or 4 column, title of the carousel photo, url where you put all of your photo. The last option Post ID is for retrieving images attached to a post. Let s say all of your image are attached in the hello world post, then to retrieve the images from that post you can specify the hello world post id. Ajax portfolio shortcode *To better make use of the ajax portfolio shorcode, please use image wider then 600px and higher then 355px. The ajax portfolio shortcode is used to retrieve images from your published post. The options for this shortcode are categories name which you can specify if you don t want to display your latest posts. Number of columns to display, and navigations position Gallery custom url shortcode This shortcode is used If you wan t to show gallery from various url (inside and outside of your website). In the options you can specify how many images that you want to show and its position. You must also specify the image s width and height to be calculated. In the item inputs, please specify the image s url. The width and height in pixel (100px or 200px etc)

37 Lightbox shortcode The lightbox shortcode option anly enable you to give the id of the lightbox to be called if the trigger (button) is clicked. This id corresponds with the button shortcode. You can later on edit the content goes here text in the editor. Rating block shortcode This shortcode enables you to put some ratings in a post/ page.

38 This shortcode s option contains title, block positions and three default names and ratings. You can add another criteria in the editor Java script link shortcode This shortcode is made specifically if you want to hide a link destination from your user. The options for this shortcode is just the anchor text and the destination url input. Countdown timer shortcode *the countdown shortcode uses the GMT 0 for it s time standard The countdown timer is placed under misc in the shortcode menu. The options include text(content) to be placed above the timer, the color style (dark / light), time destination (month, date, year, time), Finish message that will appear after the countdown reach zero, and finish url that your user will be redirected to after the countdown is reaching zero.

39 Date format is using two digits (01 or 30) Year format is four digits (2014) Time format is hour:minute (15:30) Iframe wrap Shortcode If you have an iframe code such as youtube video or an iframe page, please use the iframe wrap to display it properly in the responsive mode. The iframe wrap shortcode will prevent your iframe from jumping from it s place. Container Shortcode If you want to use the full width page template and set your content at the center of the page with balanced left and right margin, please use this shortcode. It will treat your content with a container so it will flow right at the center of the page. Maps Shortcode Under the widget menu of the shortcode button you ll find the maps shortcode options.

40 Please provide a new link to googlemap address if you don t want to display the default map( in theme settings ). Or leave it blank to display the default map. Top rated list Shortcode To display the top rated list in the content area you can use this shortcode. The option for this shortcode is only a selector of which you can specify how many post that you want to display. Contact info Shortcode This shortcode will generate your contact info details (set in the theme settings) inside the content area. Optin form Shortcode This shortcode will generate the optin form that has been set in the theme settings. The option in the shortcode pop up screen is for adding different auto responder script then the one you inserted in theme settings, if you leave this field blank, the default optin form that has been set in the theme settings will be used.

41 The second option is to set the optin form alignment. Testimonial Slider Shortcode The option for the testimonial slider shortcode is only the input to fill in the title of the testimonial slider. Divider Shortcode For dividing your content we provide 3 shorcodes line, big line and a row break. This shortcode is to give a line / space below / above your content.

42 HOW TO GET SUPPORT In the member area, we provide two ways for you to get support. The first one is the support ticket that allows you to post questions/suggestions that contain sensitive data such as admin user and password and the second one is the support forum where you can post more general questions. Even though we are doing our best to answer all tickets as fast and as clearly as possible, you might find that we have limitations that s why we provide the support forums where you and fellow users can help each other s and also browse for solutions or ideas. Member area login: Support ticket : ticket/ Support forum :