1. Setting up the front page
2. Setting up posts Image Thumbnails
3. Setting up posts Video Thumbnails (PRO)
4. Setting up a Blog Page
5. Setting up a contact page (PRO)
6. Setting up Individual Background Image (PRO)
7. Setting up page individual page header (PRO)
8. Setting up the Menu
9. Setting up the Beautiful Gallery
10. Styling the Theme
11. Widgets (PRO)
12. Shortcodes (PRO)
13. Theme Support

Back

## 1. Setting up the front page

When you select “Your Latest Posts” from Settings> Reading you will be able to display 8 frontpage elements on your site’s frontpage. They are:
i. Slider
ii. Blocks
iii. Welcome Text
iv. Frontpage Posts
v. Location Map
vi. Call to Action
vii. Frontpage Widgets Area

### i. Setting up the slider

From Asteria Theme Options> Slider click the “+ Add New” button to add new slides. For each slide you should set:

a.Image: Select/Upload Slide image by clicking the “Upload Image” button. If you are using the “Full Width” mode, make sure the slider images have at least 1600px of width. If set to fixed, the slider images should have minimum width of 1200px. If your images are bigger, you can resize and crop them online using this application: http://pixlr.com/editor/. There’s also a video tutorial on youtube on how to resize and crop your images and save them: https://www.youtube.com/watch?v=WmFjvNlm1E4
b. Title: Write a title of your slide. This is optional; if you don’t want to display the title of the slide you should keep this empty.
c. Description: If you want to display a little subtext under the title of the slide you should use this field. You can use HTML tags.
d. Url: If you want your slide image and title to contain a link, you should put it here.
e. Slide Text layout: Select how you want to display the text of the slider.

By default the slider displays 3 default slides, if you want to remove the slider from your frontpage, set the slider type to “Disable Slider”. If you want to display sliders in your static pages, use the slider shortcode that comes with theme. See Shortcodes Section for details.

### ii. Setting up the blocks

To setup the blocks, Go to Asteria Options> Frontpage and click the arrow button beside the text “Blocks” and blocks settings options will appear. You can setup or hide each block individually. You can display up to 4 blocks. Each block has followings options:
b. Block Title: Title of the block.
c. Block Icon: You can select which icon to display from this option. To hide the icon, select “No icon” from the list.
d. Block Content: Write your block content here. You can also add html and images in your block content.
Note: You can hide each block by clearing the "Title" field and "Description" field. When these 2 fields are empty, the block is will not be shown on frontpage.

### iii. Setting up Welcome Text

To setup welcome text, Go to Asteria Options> Frontpage and click the arrow button beside the text “Welcome Text” and welcome text settings options will appear. You can write you welcome text and also what color the background of the welcome text area should be.

### v. Frontpage Posts

To display posts on front page, click the arrow button beside the “Frontpage Posts” text. Now setup your posts:
a. Title & Description: You can display some text before your posts (Optional).
b. Layout: Select how you want your posts to appear.
c. Display posts from a category: By default, the posts appear form all categories and the number of posts per page is set from Settings> Reading. But if you want to display posts from a selected category and a selected number of posts, you should turn this option on.
d. Category Name: If you turn on the above option you will have to select the category of your frontpage posts.
e. Number of Posts: You can only set the number of frontpage posts if you turn on the option “Display posts from a selected category” from above. If you haven’t, you can set the number of posts from Settings> Reading.

### vi. Location Map

If you want to display your company location in a map, you can do that from this section. To setup the map, you should set the following settings:
a. Title & Description: You can display some text before your posts (Optional).
b. Latitude and Longitude: to display your location in the map, you will have to find your location’s latitude and longitude. To know your location’s lat/long, use this website: http://www.doogal.co.uk/LatLong.php after determining your lat/long, you should put the lat/long in this field separating them with a comma. Eg: 53.359286 , -2.040904
c. Map Bubble Text: You can display a text, your location details, etc when someone hovers over your map’s pointer. You can use HTML in this field.

### vii. Call to Action

If you want to get your visitor’s attention and urge your site’s viewers of a sales promotion message to take an immediate action you should use this Element. To setup a call to action banner, you should fill these settings:
a. Call to Action Text: You can write the message you want your viewers to follow in this section.
b. Button Text: Text to display in the button.
c. Button Link: when viewers click the button, they should be taken to this link.
d. Background Color: The color of the background can be set here.
e. Button Color: The color of the button’s background can be set here.
f. Button Text Color: You can set the button’s text color from this option.

### viii. Frontpage Widgets Area

You can select your widgets from Appearance> Widgets. These widgets will be displayed only on frontpage. You can display any widgets you want here.

### Frontpage Elements Position

You can change the order of the frontpage elements from this section. Simply drag and drop each element and re-order their position.
Back

### 2. Setting up posts Image Thumbnails

To setup post thumbnails, you should use the "Featured image" option of wordpress. While editing the post, on the right, notice there is a "Featured Image" box. Add your post thumbnail image from here. For best visual appearance, the minimium dimension of the thumbnails should be 350px x 235px

Back

### 3. Setting up posts Video Thumbnails (PRO)

To setup video thumbnails, while editing the posts notice there is a box on right that says "Asteria Video Thumbnail". Add your youtube video link here to display it as a thumbnail of the post. You can display your youtube videos as thumbnails. Your viewers can play the video directly from the front page without going to the main post.

Back

### 3. Setting up a Blog Page

If you want to set up a blog page, you should use the "Blog page Template" that comes with the theme. To setup a blog page, follow these steps:

- Step 1: First mark all the posts with a category called "blog" or something.
- Step 2: Then create a new page and Give it a title. While in the post editor page, notice there is a box on right called "Page Attributes". From this box, you can select multiple page templates. Select "Blog Page Template" from the dropdown list and save the page.
- Step 3: Then Go to Appearance> Asteria options> Misc. and select the category "blog" for "Display Blog Posts from a selected Category" option.
- Step 4: Now view the created page, and you will see the page is displaying all the posts from your specified category.

Back

### 5. Setting up a contact page (PRO)

In Asteria, you can setup a contact page without any plugin. Just create a new page and select the "Contact Page" template from "Page Attributes" box and you are good to go. By default the contact page email address is set to your admin email address. You can change that from Appearance> Asteria Options> Miscellaneous.

Back

### 6. Setting up Individual Background Image (PRO)

In Asteria you can use different background color or images on different pages/posts. While editing the post/page notice on right there is a settings box called "Asteria Background per page". You can set the background color/image from this options box.

Back

### 7. Setting up page individual page header (PRO)

With Asteria you can use different page header for different pages. Each pages of your site can have different image. You can setup different page headers while editing the page. In page editor, notice there is a box on right that says "Asteria Page header" Under this you can either select a different image as your page header. Make sure the width of the image is at-least 1200px. If you are using the "Full Width" mode from the theme options page, then the image should be at-least 1600px wide.

Back

### 9. Setting up the Beautiful Gallery

With Asteria you can setup beautiful galleries without any plugins. Example

To set up a gallery, follow these steps:

- Create a New post, page and click the Add Media button. A new window will popup.
- Click the Create Gallery button from left. Now upload your photos or choose from existing photos by clicking the “Media Library” link.
- After selecting the images click the Create new Album button.
- Now on the right make sure you select: Link to: Media File
- Then click the Insert Gallery button from bottom. That’s it!

Note: To disable this feature, Go to Appearance> Asteria Options> Miscellaneous Settings and turn off the Beautify My Galleries option.

Back

### 10. Styling the Theme

With Asteria you can change the color of every elements and text.

- a. Setting up a logo: By default the theme displays a text logo. You can change the font, size and color of the logo from Appearance> Asteria Options> Typography. If you want to display an image logo, you can also do that from Asteria Options> Basic.
- b. Changing the background color/image: You change the background color or add an image as background from Appearance> backgrounds.
- c. Changing the Elements Color: To change the color of each element, Go to Appearance> Customize. You can change the colors from "Asteria Element Colors" and "Asteria Text Colors".

Back

### 11. Widgets (PRO)

Asteria comes with 15 Custom Widgets. You can add them to your widget areas from Appearance> Widgets. The widgets are

1. Biography Widget - A widget to display site owner's biodata, occupation and image.
2. Countdown Widget - A widget to display countdown to your event or anything.
3. Custom 125 x 125 ad Widget - To display custom 125 x 125px ads.
4. Custom 160 x 600 ad Widget - To display custom 160 x 600px ads.
5. Custom 250 x 250 ad Widget - To display custom 250 x 250px ads.
6. Facbook Likebox Widget – A widget to display the profiles of those who liked your facebook page.
7. Featured Posts Widget – A widget to display posts from a selected category.
8. Flickr Photostream Widget – A widget to display flickr images from any flickr album.
9. Google Plus Followers Widget – A widget to display your google plus followers.
10. Image Widget – An image widget to display image.
11. Pinterest Pinboard Widget – A widget to display pinterest images from your pinterest profile.
12. Popular Posts Widget – Displays popular posts of your site. The popularity of the posts is based on comment counts.
13. Random Posts Widget – Displays random posts.
14. Recent Posts Widget – Displays recent posts with style. Forget about the generic recent widget that comes with wordpress.
15. Twitter Follower Widget – A widget to display followers from your twitter account.

Back

### 12. Shortcodes (PRO)

Asteria comes with 29 amazing easy to use shortcodes with inline documentation helper. You can use these shortcodes in your posts, pages and also in your text widget.

1. Success box Shortcode
2. Info box Shortcode
3. Warning box Shortcode
4. Error box Shortcode
5. Quote Shortcode
6. Divider Shortcode
7. Table Shortcode
8. 2 columns text Shortcode
9. 3 columns text Shortcode
10. 4 columns text Shortcode
11. Facebook Like button Shortcode
12. Tweet button Shortcode
13. Pinterest button Shortcode
14. Google + button Shortcode
15. Slider Shortcode
16. List type 1 shortcode
17. List type 2 Shortcode
18. List type 3 Shortcode
19. List type 4 Shortcode
20. List type 5 Shortcode
21. Responsive Youtube video Shortcode
22. Responsive Vimeo video Shortcode
23. Tabs Shortcode
24. Toggle Shortcode
25. Button Shortcode
26. Call to Action Shortcode
27. Iframe Shortcode
28. Countdown Timer Shortcode
29. Featured Image Shortcode

1. Success Box Shortcode
   Display Your content in a greenish message box. Great for displaying success messages. Example
   Usage: Wrap your text with [success][/success]
2. Info Box Shortcode
   Display Your content in a bluish message box. Great for displaying info messages. Example
   Usage: Wrap your text with [info][/info]
3. Warning Box Shortcode
   Display your content in an orange message box. Great for displaying warning message. Example
   Usage: Wrap your text with [warning][/warning]
4. Alert Box Shortcode
   Display your content in a red message box. Great for displaying alert message. Example
   Usage: Wrap your text with [alert][/alert]
5. Quote Shortcode
   Display your quote with a beautiful quote icon. Example
   Usage: Wrap your text with [qoute][/quote]
6. Divider Shortcode
   Use this shortcode to display a borderline or divider to divide your post. Example
   Usage: [divider style="solid" color="#eeeeee" width="1px"]
   parameters:
   style= solid, dashed, dotted, double, groove, ridge, inset, outset, none
   color= any hex color values.
   Width = any number of width in pixel. e.g: 5px
7. Table Shortcode
   Use this shortcode to display a table. Example
   Usage: [table cols="names,age,occupation" data="Jhon,25,Blogger,Sara,20,Model"]
8. 2 columns text Shortcode
   Use this shortcode to display text in 2 columns. Example
   Usage:
   [col2] your text that you want to display in 1st column [/col2]
   [col2] your text that you want to display in 2nd column [/col2]
9. 3 columns text Shortcode
   Use this shortcode to display text in 3 columns. Example
   Usage:
   [col3] your text that you want to display in 1st column [/col3]
   [col3] your text that you want to display in 2nd column [/col3]
   [col3] your text that you want to display in 3rd column [/col3]
10. 4 columns text Shortcode
    Use this shortcode to display text in 4 columns. Example
    Usage:
    [col4]your text that you want to display in 1st column[/col4]
    [col4]your text that you want to display in 2nd column[/col4]
    [col4]your text that you want to display in 3rd column[/col4]
    [col4]your text that you want to display in 4th column[/col4]
11. Facebook Like button Shortcode
    Display a facebook like button anywhere you want. Example
    Usage: [fblike]
12. Tweet button Shortcode
    Display a Twitter Tweet button anywhere in the post. Example
    usage: [tweet]
13. Pinterest button Shortcode
    Display a Pinterest Pin it button anywhere in the post. Example
    Usage: [pinit]
14. Google + button Shortcode
    Display a Google plus shortcode button anywhere in your post. Example
    Usage: [gplus]
15. Slider Shortcode
    Display a slider anywhere in your post. Example
    Usage: to add a slider in your post, follow these steps:
    a. Click the “Slider Shortcode” button. This will be added to the post editor:
    [slider effect="random" pausetime="3000" autoplay="true" navigation="true"][/slider]
    b. Put your cursor right before this [/slider]
    a. Click the “Add Media” button and upload your images. Then hold the ctrl button from your keyboard and select the images that you want to display in your slider. Now click “Insert into Post” button.
    b. That’s all! You have successfully added a Slider in your post. You can change the parameters of your slider if you want to customizr the slider.
    parameters:
    effect= random, sliceDown, sliceDownLeft, sliceUp, sliceUpLeft, sliceUpDown, sliceUpDownLeft, fold, fade, slideInRight, slideInLeft, boxRandom, boxRain, boxRainReverse, boxRainGrow, boxRainGrowReverse
    Pausetime= in milliseconds. Eg: 3000
    autoplay= true/false
    navigation= true/false
16. List type 1 Shortcode
    Instead of typical circle list style you can display your lists with beautiful style. Example
    Usage: [list1]<li>item1</li><li>item2</li><li>item3</li>[/list1]
17. List type 2 Shortcode
    Instead of typical circle list style you can display your lists with beautiful style. Example
    Usage: [list2]<li>item1</li><li>item2</li><li>item3</li>[/list2]
18. List type 3 Shortcode
    Instead of typical circle list style you can display your lists with beautiful style. Example
    Usage: [list3]<li>item1</li><li>item2</li><li>item3</li>[/list3]
19. List type 4 Shortcode
    Instead of typical circle list style you can display your lists with beautiful style. Example
    Usage: [list4]<li>item1</li><li>item2</li><li>item3</li>[/list4]
20. List type 5 Shortcode
    Instead of typical circle list style you can display your lists with beautiful style. Example
    Usage: [list5]<li>item1</li><li>item2</li><li>item3</li>[/list5]
21. Responsive Youtube video Shortcode
    With this shortcode you can display youtube videos that are responsive to the screen size.
    Usage:
    [youtube width="100%" height="100%" autoplay="false"]your youtube video link[/youtube]
22. Responsive Vimeo video Shortcode
    With this shortcode you can display Vimeo videos that are responsive to the screen size.
    Usage: [vimeo width="600" height="365" autoplay="false"]your vimeo video link[/vimeo]
23. Tabs Shortcode
    With this shortcode you can display your content in beautiful tabs. Example
    Usage:
    [tabs titles="Tab One, Tab Two"]
    [tab]Tab one content[/tab]
    [tab]tab two content[/tab]
    [/tabs]
    Note: To use html inside you tabs, switch to “Text” mode of the editor.
24. Toggle Shortcode
    With this shortcode you can display your content with show/Hide button.Example
    Usage: [toggle title="Spoiler alert"]Your content which is by default hidden.[/toggle]
    parameter:
    title= “your show/hide buttons text.”
25. Link Button Shortcode
    You can display colorful buttons with this shortcode. Example
    Usage:
    [button background_color="#eb5c49" text_color="#ffffff" url="http://www.google.com" ][/button]
    parameters:
    background_color = any hex color value
    text_color = any hex color value
    url = link of the button
26. Call to Action Shortcode
    If you want to get your visitor’s attention and urge your site’s viewers of a sales promotion message to take an immediate action you should use this Element. Example
    Usage: [callaction url="http://www.google.com" background_color="#2dcb73" text_color="#ffffff" button_text="A Simple Button" button_background_color="#e64429" button_text_color="#ffffff"]Your Call to Action Text Message[/callaction]
    parameters:
    url= url of the button
    background_color = any hex color value.
    text_color= any hex color value
    button text = Text that you want to display inside the button
    button_background_color = any hex color value.
    button_text_color = any hex color value.
27. Iframe Shortcode
    With this shortcode, you can display any websites you want in your post using iframe.Example
    Usage: [iframe url="http://www.beemp3.com" width="100%" height="500" frameborder="0"]
    parameters:
    url= the webpage that you want to show inside you iframe.
    width = width in percent.
    height = height in number
    frameborder = any numeric number.
28. Countdown Content Shortcode
    Countdown shortcode will hide your selected text and show it automatically on a certain date.
    Usage: [countdown date="21" month="9" year="2015"]Your content that will be hidden and will be shown after the countdown ends.[/countdown]
29. Featured Image
    Displays the featured image of the post, if set any.
    Usage: [featimage align="left"]
    parameters:
    align: left, right, center

Back

### 12. Theme Support

Theme support of the free version is provided here:
http://www.towfiqi.com/forums/forum/asteria-lite
Theme Support for the premium version is provided here:
http://www.towfiqi.com/forums/forum/asteria-pro