Skip to content

eStar Documentation

Thank you for using eStar theme for your website. We hope you like it! In this documentation, we will show you how to install and setup the basic demo for your website. This takes you only 5 minutes to have the website ready!

#Installation

Installing eStar is straight-forward and is the same as all normal WordPress theme. We have written a very detailed guide on how to download and install a WordPress theme, please follow the instruction in that article.

#Recommended Plugins

After installing the theme, you’ll see a notification box in your admin asking to install some plugins. These plugins are optional and are recommended by the theme to add more features.

eStar recommends the following plugins:

  • eRocket: a custom plugin written by us to add custom widgets and social sharing buttons for posts.
  • Meta Box: a custom plugin written by us to add options for pages and posts such as layout or header.

If you plan to sell things on your website, eStar recommends WooCommerce, the most popular e-commerce plugin for WordPress.

You can ignore these plugins if you want, but we highly recommend them to make the customization easier. These plugins are well-coded, work perfectly with the theme and don’t slow down your website.

#Demo Content

In case you want to quickly start with the theme, you can import the demo content.

First, please download the demo content, unzip it. Then go to Tools → Import to start importing the content.

#Setup

#Header

Custom Logo:

You can add a custom logo by going to Customize → Header and uploading your own logo image. There is an option for you to hide the site title and tagline if you want.

Navigation:

The main navigation appears at the top right of every page of your website. On tablet and mobile devices, it will be hidden behind a toggle button. To set it up, simply create a new menu via Customize → Menus and assign it to the Header location.

Search Button:

In Customizer → Header, there’s an option to show the search button in the header. You can use this option to toggle the search button if needed.

Cart Icon:

The cart icon is automatically added to the header if you install WooCommerce on the website. It’s a must-have element so there is no options to hide it.

Sticky Header:

By default, the header is sticky, which means it stays on the top of the screen when you scroll down. If you don’t want that, you can disable it in Customize → Header.

#Homepage

Creating a Static Homepage

When you first activate eStar, your homepage will display posts in a traditional blog format. To set up your homepage, follow these steps:

  1. Create a page.
  2. Go to Customize → Homepage Settings and set Your homepage displays to A static page.
  3. Select the page you created in step one as the Homepage, and, if you plan to have a blog as well, choose another page as the Posts page to display your blog posts.

Homepage Content

The homepage in the demo is built with Gutenberg. eStar is optimized for Gutenberg and you can use all blocks to build your content easily and quickly.

These are the blocks used on the homepage:

  • Cover block: for the hero area
  • Media text block: for the features with images area
  • Paragraph block
  • Columns block: for the features grid, testimonials and clients area
  • Gallery block
  • Recent posts block

We recommend importing our demo content to have these blocks setup as the demo. Then you can modifying them to suit your needs. You can also try and play with Gutenberg blocks yourself.

#Footer

Footer Widgets

The theme has a widget area in the footer. Go to Customize → Widgets and add your widgets to the Footer sidebar.

In the demo, we use the following widgets:

  • Contact info: from eRocket plugin
  • Custom menu
  • Gallery
  • Recent posts: from eRocket plugin

Footer Copyright Text

To change the footer copyright text, please go to Customize → Footer and enter your custom text.

Go To Top Button

eStar has a Go to top button. If you don’t want it, you can disable it in Customize → Footer.

#Layout

eStar comes with several options for you to customize the layout for archive pages, single posts and single pages.

#Archive

Please go to Customize → Archive and you’ll see the following options:

  • Layout: the sidebar position. You can display sidebar on the left, right or don’t show it at all.
  • Content Layout: how to display posts on your archive pages. These are the options:
    • List (horizontal): posts are displayed as a list with image on the left, text on the right
    • List (vertical): posts are displayed as a list with image on the top, text on the bottom
    • Grid: posts are displayed in a grid (like the demo)
    • Grid (card): posts are displayed in a grid but each posts is styled as a card
  • Content Display: whether you want to display full post content (truncated by the more tag) or only post excerpt
  • Excerpt Length and Continue Reading Text are self-explained.

#Posts and Pages

Please go to Customize → Post (or Page) and you’ll see the following options:

  • Layout: the sidebar position. You can display sidebar on the left, right or don’t show it at all.
  • Thumbnail Position: how and where to show post thumbnail. These are the options:
    • As Post Header Background: display post thumbnail full-width as a background and show post title, post details on the top of it.
    • Before Post Header: display post thumbnail before the post header (like the demo).
    • After Post Header: display post thumbnail after the post header
    • Do Not Display: don’t show post thumbnail on single posts
  • Header Alignment: the alignment for the post title and post details text
  • Header Height: if you want to customize the height of the post header when the post thumbnail is displayed as a background, you can enter a number (px) here.

#Fonts

eStar allows you to customize fonts for almost necessary elements such as body text, headings and site title. You can customize font family (the theme supports all Google Fonts), font size, line height and so on.

Please go to Customize → Fonts to select the options for each options.

#Colors

eStar allows you to customize colors in the theme. To make the changes are consistent everywhere, we offer options for some colors only. They’ll be outputted on the front end using CSS variables and the changes will be applied site-wide.

Scroll To Top