This document covers the installation and use of this theme and reveals answers to common problems and issues - I encourage you to read this document if you are experiencing any difficulties.
To install this theme you must have a working version of WordPress already installed. For information in regard to installing the WordPress platform, please see the WordPress Codex - https://codex.wordpress.org/Installing_WordPress
First, unzip the zip archive you downloaded from themeforest on your computer. Search the file named celestino.zip. Open this archive and upload the celestino folder to your server via ftp to the /themes/ directory on your Wordpress installation. (wp-content > themes)
Go to your Wordpress admin, and in the Appearance-panel, choose Add New Themes. Click Add new. Upload the celestino.zip. Do not upload the zip archive you downloaded from themeforest. Upload only the celestino.zip file. If you have a "missing stylesheet" issue you are uploading the wrong file!
Installing WordPress https://codex.wordpress.org/Installing_WordPress
Once you have uploaded the theme, activate your theme in Appearance > Themes.
Using Themes https://codex.wordpress.org/Using_Themes
You can install sample content by importing our live preview settings, that you can find in our support forum.
You can also import all images we used for our live preview (except the images taken by Fotolia with a regular license, we can't redistribuite them)
In Celestino > Theme options > General tab you can set the basic settings of the theme:
You can use a footer with centered-align text or with text on the right/left side.
In our demo we are using the 2 columns footer.
The footer can be customized in Celestino > Theme options > General > Footer.
In Celestino > Theme options > Colors you can set the colors for all theme sections and elements: like backgrounds, borders and so on. You can also upload a background image and set the color for the sections, header and footer.
In Celestino > Theme options > Typography you can set the theme typography: set the font and the font size for slogan, titles, paragraphs and so on! Choose from Web safe fonts and 200+ Google fonts.
In this theme is available a Header sidebar, that you can find in Appearance > Widgets.
In our demo we are using two widgets: Last tweets and Text with the following content:
On each page, below the page content, there is a Page settings table that allows you to set interesting settings on the page.
In settings tab you're able to configure if you'd like to show page title or breadcrumbs, additional slogan or subslogan and the layout type choosing from (left sidebar, right sidebar, no sidebar). If you select a layout with sidebar, you will be able also to choose the sidebar to use. Sidebars can be created in Celestino > Sidebars and configured in Appearence > Widgets.
SEO tab allows you to choose a page title, description and keywords.
Header tab enables you to select a slider or a static image for the page.
Body background tab can be used to select background image or background color for the page. This means you can select different background settings for each page of your site!
To start with Celestino Theme you have to create a new page for your home page.
It's important that Wordpress is set up to display a static page as home page. You can set this in Settings > Reading. Choose 'static page' and select the page you created for the home in the select menu.
Each home page makes use of Home template so, before you customize the page, you need to select that template from the right side menu. The image below shows the right way to choose the template.
Note: for a correct representation of our home pages, it is highly recommended to activate HTML editor instead of Visual Editor like on the image below.
If you don't see the Custom fields in your edit page, you need to enable them:
After you can Add, Delete or Update the custom fields
The code contained in content editor is the following:
In Page Settings I used the following settings:
The code contained in content editor is the following:
In Page Settings I used the following settings:
The code contained in content editor is the following:
In Page Settings I used the following settings:
The code contained in content editor is the following:
In Page Settings I used the following settings:
The code contained in content editor is the following:
In Page Settings I used the following settings:
In Page Settings I used the following settings:
The code contained in content editor is the following:
In Page Settings I have used the following settings:
The code contained in content editor is the following:
In Page Settings I have used the following settings:
In Page Settings I have used the following settings:
You can use this page to show yourself or your team! On the left side of your wordpress panel, find the "Accordions" panel. Click on "add new" to add a new accordion.
Select the name you want to use for this accordion and click on the Publish button on the right side. Now click on the tab "Add/Edit Item" and add the items you need.
With the button "Add item" you can add one or more images of your team and then you will be able to configure them.
Now create a new page and enter this shortcode in the editor to have your "team" page:
To add the social icons, in the editor, under the description, use the social icons shortcode:
You can use this page to show your services. On the left side of your wordpress panel, find the "Services" panel. Click on "Add New" to add a new services.
Enter the text and the info for the service:
Now create a new page and click on the "Shortcode" button:
Click on "Section" tab and then on "Services" icon. A new window will be opened.
Choose how many items you want to display, an optional title and description and the other settings before you click on "Insert shortcode" button.
A new shortcode will be added to your content area:
You do not need to enter any content on this page. This will be your blog index page, and will list your blog posts in chronological order. You can create your posts in Posts > Add New.
You can customize the layout and appearance of the blog page in Celestino > Theme options > Blog > Settings:
NOTE: In Appearance > Widget you can find the preset sidebar for the blog page. Drag and drop the widgets in the Blog sidebar to customize the sidebar of your blog.
With Portfolio post types you are able to create infinite portfolios, image galleries and videos. On the left side of your wordpress panel, find the "Portfolio" panel. Click on "Add New" to add a new portfolio.
Select the name you want to use for this portfolio, the type of Portfolio (Big Image, Three Columns, etc.) and click on the Publish button on the right side. A new tab will be opened with default settings for the created portfolio.
In this tab you are able to configure the following settings (Note: some settings may be different for different portfolio types):
Once you have configured the portfolio settings, click on the tab "Add/Edit Item" and add the items you need.
Now you can configure the item details:
For each project item you can configure the following fields:
Create a new page and click on the "Shortcode" button:
Click on "Post Types" tab and then on "Portfolio" icon. A new window will be opened.
Choose the portfolio you'd like to insert and then click on "Insert shortcode" button.
A new shortcode will be added to your content area:
Now create a new shortcode by clicking on the "Shortcode" button:
Click on "Post types" tab and then on "Testimonials" icon. A new window will be opened.
Choose how many items you want to display (leave -1 to show all) and click on "Insert shortcode" button.
A new shortcode will be added to your content area:
In this theme you can create unlimited contact forms.
Note: With the installation you will find a default Contact Form with most used configuration.
Now create a new shortcode by clicking on the "Shortcode" button:
Click on "Post types" tab and then on "Contact Form" icon. A new window will be opened.
Choose the contact form you'd like to use and click on "Insert shortcode" button.
A new shortcode will be added to your content area:
There are three main types of sections:
Common steps to create a section are the following:
Now create a new shortcode by clicking on the "Shortcode" button:
Click on "Sections" tab and then select the section type you'd like to include. A new window will be opened.
Once you've selected the portfolio section you need to choose some settings for the section:
Once you've selected the blog section you need to choose some settings for the section:
The services section is explained above, under Setting up the services page.
On the left side of your Wordpress panel, find the "Slider" panel. Click on "Add New" to add a new slider.
Select the name you want to use for this slider, type of the slider (Layer, Elastic, etc.) and click on the Publish button on the right side. A new tab will be opened with default settings for the created slider.
In this tab you are able to configure the slider settings (Note: settings are diffrent for different slider types):
Once you have configured the slider settings, click on the tab "Add/Edit Item" and add the items you need.
Now you can configure the item details:
For each project item you can configure their fields. Each slider contains different fields.
Create a new page and go to Page Settings just below the page content.
Here you can choose the slider you'd like to use. If you select the Default slider the page will use the default slider configured in Celestino > Theme Options.
You can also decide to use a static image instead of a slider.
Another way to include sliders into Wordpress pages is to use shortcodes:
Click on the button "Shortcodes":
Click on "Post Types" tab and then on "Slider" icon. A new window will be opened.
Choose the slider you'd like to insert and then click on "Insert shortcode" button.
A new shortcode will be added to your content area:
This is a list of some shortcodes of this theme. Insert this code in the editor of your page.
In the support forum you can find a video tutorial that can help you to use the shortcodes. Follow this page to verify your purchase and access to the support forum!
Border (use it to separate the content with a border)
Space (use it to add some space between the elements)
Clear (use it after columns and icon boxes)
Call to action
Dropcap
Quote text
Highlight text
Styled lists
Symbols: Star / arrow / check / add / info
Success box
Arrow box
Alert box
Error box
Notice box
Info box
Custom buttons
Custom buttons with icon on the left
Big colorful buttons
Small colorful buttons
Tabs
Toggle
Price box
Table
YouTube video
Vimeo video
Dailymotion video
Yahoo video
BlipTV video
Veoh video
Viddler video
FlexSlider slideshow
Effects: fade / slide
Feed slider
url
- Feed Url, XML filenumber
- number of feeds you want to showspeed
- milliseconds to slide each feedtimeout
- number of milliseconds you want to show the current feedMembers only content - private content
role
- Who can see this content? Choose from administrator, editor, author, contributor, subscriber. message
- Message to display if the logged-on user does not have the necessary level to see the content. Optional. Example of the code:
To stylize your images, add lightbox effect and so on:
Recent posts
Popular posts
Google map
Social icons
Testimonial slider
Newsletter form
In this theme you'll find 5 preset sidebars:
The default sidebar is the preset sidebar that you can find in your pages when you set a page with "sidebar right or left" layout without to select a sidebar to assign. Put a widget in the default sidebar to display it on your page instead of the static wordpress sidebar with blogroll, search and so on.
You can also create unlimited sidebar:
14 custom widgets are provided with the theme. These are:
This theme is ready for localization via .po/.mo files, and works with the WPML plugin.
If you are not familiar with translating Wordpress themes, I recommend you reading this article: https://codex.wordpress.org/Translating_WordPress
This theme uses wp-nav-menu for building menus. You find this in Appearance > Menus.
For more info on how to setup your menu in WordPress see https://codex.wordpress.org/Appearance_Menus_SubPanel
When you add all pages to your menu, you can drag/drop and order pages.
In this theme is available a header sidebar, that you can find in Appearance > Widgets.
In our demo we are using a "quote" widget to add a quote and its author.