SkyTower - Property and Real Estate WordPress Theme
- Subsolar Designs
- Official Site
Thank you for purchasing our Theme. If you have any questions that are beyond the scope of this help file, please feel free to contact us via the Support tab of the Theme on ThemeForest. If you are happy with the Theme, you can rate it. This will help us a lot! Thank you so much!
Unzip the downloaded package. You can install the Theme in one of the following ways:
- FTP - copy the non-zipped folder in the /wp-content/themes/ directory in the WordPress installation of your server.
- Upload - Go to Appearance > Themes in the Admin Dashboard, click the Add New button, then Upload Theme and choose the zipped file with the theme.
If you get a style.css not found error, make sure you are uploading the correct file. It's important to know that the file you have to install is the one inside the downloaded package.
After that go to Appearance > Themes and click Activate on the Theme. After the activation a warning about the plugins that are required will be shown at the top:
Click on Begin Installing Plugins. After that, make sure you also Activate the plugins.
Notice: After you install and activate the SkyTower Functionalities and Advanced Custom Fields PRO plugins, you can go to Appearance > Theme Settings and click the Save Changes button so that the initial options and styles are saved and applied.
SkyTower Content Shortcodes are powered by the awesome Elementor Page Builder. It gives you the option to arrange and create the Pages in your website just as you like. You can check their website on how to Get Started or you can also watch this video which shows how to arrange a Page:
The coupons and deals in the theme are handled by the WooCommerce Plugin. Upon installing and activating the plugin, you will be asked to set it up.
The Deals and Coupons inside the Theme are created as WooCommerce Products.
Note: If you are new to WooCommerce you can follow their detailed guide on how to set it up here.
1 Click Demo Install
You can install the initial demo content so you get your site up and running faster than ever. After doing the steps above, click on Appearance > Import Demo Data and click the Import Demo Data button.
Important! After you import this demo, you will have to manually go to Appearance > Theme Settings and press Update. This way the initial default settings will be used by the theme.
It will create some sample posts, images, navigation menu and pages built the way it is shown in the online demo.
Notice: If you receive a timeout error or it takes way too much time (more than 10 minutes) to install check your server timeout settings. Please configure it and increase the server execution time. If you don't know how, contacting your hosting provider is strongly encouraged. Thanks for the understanding.
If you receive a Page Not Found error when navigating the site, make sure the permalinks are correct. Go to Settings > Permalinks and select the Post Name option and click Save Changes.
Navigate to Appearance > Theme Settings in the Admin Sidebar.
The options here are very clear:
Here you can add a logo or title for the Navigation. You can also specify the Footer type - its Background Type, Text and Text Color. The footer widgets can be added via the Appearance > Widgets menu where they can be put into four Footer Columns.
The Google API Key field is for the proper usage of the Google Maps throughout the theme.
The Mailchimp API Key and Mailchimp List ID are used in the Mailchimp Widgets in the theme.
Here you can change the Main Colors and the Fonts of the theme.
Notice: The selected colors and fonts WILL NOT overwrite the Default Fonts and Colors used in the default Elementor Widgets - those that come with the plugin. They are adjusted from the Elementor Settings - you can follow their detailed guide on how to set them up here.
Setting Up the Menu
To customize the navigation menu go to Appearance > Menus and customize it as you'll normally do on a WordPress site.
Don't forget to check the Theme Location at the bottom of the page to select where you want it to be displayed.
If you want to add additional pages to the menu like Products click on Screen Options in the upper right corner of the page and check the types that you want to appear as items for the menu navigation. Her eyou can also enable advanced menu properties like Link Target and Title Attribute.
When you are done, click Save Menu.
Setting Up the Header and Footer
The theme comes with the Elementor – Header, Footer & Blocks plugin (make sure you have it installed and activated as described in Installing Theme) that allows you to easily create headers and footers using the Elementor builder.
Adding one is done via Appearance > Header Footer Builder. Click the Add New button in the upper part of the screen and then the type of template you want to create. After adding the title and content using the Edit with Elementor button, click Publish.
When creating a new page, a button above the content editor Edit With Elementor will show the builder.
Clicking the button will open the Elementor Editor. There you can drag an element from the sidebar that will be added to the page flow. Clicking the element after it is inserted will open its options.
Here you can find a video that shows the features of the Elementor Page Builder. The video shows some of the default Elementor Widgets that come with the plugin and ways on how to create and adjust your page.
When you click to edit a page from the Admin Dashboard, you can find additional Page Options like Hide Title and Transparent Navigation:
Page Builder Widgets
The theme adds multiple Elementor Widgets that are created and styled specifically for the purpose of the theme.
For each widget you can adjust its options and content in the Content Tab in the Elementor Sidebar and it's styling in the Style Tab. Most of the widgets are self-explanatory. Here is a list with details of the more specific widgets:
The Poster is a very flexible widget that can be customized in various layots. It could be used as a Call To Action element or an element that shows a promotion or some advertisment. The widget consists of an Image, Content and a Button. In the Content Tab you can adjust the Skin or layout - this changes the position of the image in the element. An image as well as an overlay image can be added, which can also change on hover. Depending on the layout, in the Style Tab you can adjust the image width, height, box height. You can also add border to the content or box, adjust the content text color and background color, add padding, change the button colors and add hover effects to the image and content.
The theme comes with Elementor Templates that you can use per page basis. To Import them for later use in your theme, go to Templates > Saved Templates and click Import Templates in the upper part of that page. Choose the *.zip file found in the /elementor-templates folder that you can find in the theme package you downloaded.
You can them use them when you insert an Elementor Section in a page. You can find the imported templates in the My Templates tab of the popup window. You can watch more in the following video:
The theme uses the Contact Form 7 plugin for the Contact Form. The plugin is one of the recommended plugins that was installed in the first step. You can read more about the plugin here.
The shortcode for the Contact Form can be found in the Contact Tab on the left on the Admin Panel, and then add new or use an already created form.
The style of the Contact Form in the demo is the default one from the plugin. The code is in the Form tab when you edit the Contact Form:
<div class="row"> <div class="col-sm-6"><label> Your Name* [text* your-name] </label></div> <div class="col-sm-6"><label> Your Email* [email* your-email] </label></div> <div class="col-sm-12"><label> Subject [text your-subject] </label></div> <div class="col-sm-12"><label> Your Message [textarea your-message 40x2] </label></div> </div> [submit "Send"]
When creating a new Page, you can select the Shortcode Elementor Widget and add the contact form shortcode there.
Also packed with the theme is the Slider Revolution plugin. It will provide you with beautiful and modern sliders or page headers. The package of the theme comes with a couple of pre-defined sliders that you can use. They are found in the rev-slider-templates folder. After installing the plugin, you can go to Slider Revolution in the sidebar of the admin dashboard and select Manual Import. After that, import all the slider_export.txt from each of the sub directories of the rev-slider-templates folder. You can read more about the plugin here.
The Single Page and Single Property sliders can be used as a header image of your pages or properties. By clicking on the little arrow of the slider and then Embed, yo ucan see the text shortcode of the slider.
After copying it by selecting the text and copy or by clicking on the clipboard icon, you can then paste it when creating a page/property.
You can see the field when you select a Slider Revolution for the Header Type when creating a new page/property.
Make sure you walso add a Featured Image for your page/property. It will be the image used by the slider when viewing the page.
The theme comes with the iPanorama 360 Lite plugin for creating panorama sections. The plugin is one of the recommended plugins that was installed in the first step. You can read more about the plugin here.
Click Add New to create a new panorama for your site.
After that go to the Scenes tab and click the little plus icon in the upper left to create a new scene. Without one, ou will not have any 360 image to look at. Use the Imge field to upload your photo. To position it properly you can click on the icon button below Camera start position to select your starting angle.
Important! Make sure that the type of scene is set to sphere if you want the default 3D view.
Or you can just click on the Load As button in the upper right and import the ipanorama_config.json file that comes with the theme. It consist of the configurations but doesn't include an image.
Click on Save and after that check the Shortceode tab to copy the text Standart shortcode that you are going to use similarly to the Contact Form one above.
Go to Pages > Add New, write the page title and select Blog from the Template dropdown on the right. Here you have the options to Show Search Field.
Then click the Publish button.
Make sure that the page is NOT selected in the Post Page menu in Settings > Reading in the WordPress Admin Dashboard.
Click Save Changes.
Go to Appearance > Widgets. There you can find multiple places where you can put Widgets.
The Main Sidebar is used in the Blog and Blog Posts.
The Shop Sidebar is used in the Shop Page as well as the Search Product Pages and Archive (Product Categories) Pages.
There are also Three Footer Columns where you can put widgets. No matter how many columns you choose to put widgets in, they always take the full footer width.
Tips, Tricks & FAQ
Using a Child Theme.
A child theme is a theme that inherits the functionality of another theme, called the parent theme. Child themes allow you to modify, or add to the functionality of that parent theme. A child theme is the best, safest, and easiest way to modify an existing theme, whether you want to make a few tiny changes or extensive changes. Instead of modifying the theme files directly, you can create a child theme and override within. You can find more information here.
The Theme comes with an already created child theme ( skytower-child ). If you create customizations, it's recommended to use that instead of the parent theme.
It seems like Google Maps is not working. What should I do?
Google have changed their Google Maps policies and now an API Key has to be present for Google Maps to work. Create one, go to Theme Settings > General Settings and enter your Google API Key. You can find more information here.
I can't seem to be able to allow users to register.
To enable user registrations, enable it from the WooCommerce settings panel found in WooCommerce > Settings > Account.
Can I translate the Theme to another language or change some of the text strings?
Yes, the Theme comes with a .pot file which contains all of the Theme's text strings. You can translate the theme by using a program like POEdit or a plugin like Loco Translate or WPML.
When I enter a Product or another page, it gives me 404 Not Found.
Go to the Admin Dashboard > Settings > Permalinks, click on Post Name and after that Save Changes at the bottom.