OneSixty Themes Fade Theme

Transcription

1 OneSixty Themes Fade Theme Documentation v Installing Theme 1.1 Installation Process 1.2 Theme Activation 2. Setting up Home and Blog Page 2.1 Homepage 2.2 Blog Page 3. Admin panel usage 4. Home Parallax Slider 4.1 Add New Slide 4.2 Slide Order 4.3 Slider Settings 5. Topline 6. Header / Menu & Logo 7. Footer 8. Call 2 Action 9. Sidebars 10. Page Templates 11. Page Headers 12. Visual composer (page builder) 13. Portfolio 13.1 Add new Portfolio item 13.2 Categories 13.3 Setup your Portfolio page 13.4 Portfolio settings 14. Client grid 15. Social media icons 16. Shortcodes (panel) 17. Widgets 18. CSS3 Animations: apply to content 19. Video tutorials

2 1. Installing Theme 1.1 Installation process First unzip the downloaded file from themeforest where you will find the main theme zip file called fade theme.zip. There are 2 ways of installing this theme. 1. Unzip the fade theme.zip file and copy the fade folder into wp content/themes/ (on your computer when running the site locally, or via FTP when running the site online) 2. Login to your wordpress backend and go to > appearance > themes > install themes (tab) > upload. And then select the fade theme.zip file. Wordpress will do the rest. 1.2 Theme activation When you activate this theme, it will give you some options (standard roots theme options). This is very useful on the first time when you activate this theme. If you start building your website and switch themes in the process, then we advise not to choose yes in any of the options when reactivating the Fade theme as this might change settings you had before. 1.3 First time options save To activate all the default Theme settings, you need to save the options before you start. This will write all settings in the Wordpress database. Then refresh the Theme Options panel to see all the settings.

3 2. Setting up Home and Blog Page After installing the theme, it is important to set up your home and blog page first. The following steps are basic standard Wordpress options. 2.1 Homepage First create a new page. This will be your home page. The name is not important as the title will not show when the home slider is activated. You can choose any page template you like. Then in Wordpress go to > settings > reading > and set up the page you created. If the homepage does not show the slider yet, then check the home slider settings in the Theme Options panel (appearance > theme options). 2.2 Blog page Just like the homepage setup, create an empty page. Name this weblog, blog or anything you like to call it. Then go to settings > reading > and select that page under posts page. This page will automatically show the blog style page layout. If you rather want a full width blog page. Then go to the Theme Options panel and select Full width under Blog settings.

4 3. Admin Panel Usage This Theme can be managed for most part via the Theme Options panel, which can be found under Appearance > Theme Options. The Options Panel is mostly self explanatory. Each feature comes with its little description of what it will do. We advise to start with clicking on the Save Options button first, as this will read & write all the default style settings. Then do a quick refresh of the page to see all the defaults.

5 4. Home Parallax Slider One of the main Theme features is the custom developed full width Parallax Slider on the Homepage. It uses a basic fade in and out transition and is not capable of slide in/out or other effects. This is due to the fact that it is a parallax slider. More options will be added in the future, so make sure you watch the theme download page. 4.1 Add New Slide From the Wordpress dashboard, you will find a new menu button called Home Slider. Here you can see your slides, add new ones or delete slides. Click add new to create a new slide. You can enter a title (which will not display) and you see 3 meta options below: These options will display on your slide. If you do not fill these out, they will not be displayed. To add the slide itself, just upload a featured image (on the right side). Make sure this image is big enough to fill a full width screen and you need enough height to fill the parallax scrolling margin. 4.2 Slide Order Slides will automatically be ordered by date. The first one you will add, will show as first on the homepage. To change this order, just simply modify the date of the Slide. (edit slide > published on > edit).

6 4.3 Slider Settings There are several settings you can manage via the Theme Options panel. Menu > Appearance > Theme Options > Home Slider

7 5. Topline Fade Theme has an optional top line which will automatically scroll up. The topline can be turned off completely. All topline settings can be found in the Theme options panel. Menu > Appearance > Theme Options > Topline

8 6. Header / menu & logo The header section contains the main logo on the left and the menu on the right. Almost everything in the header is configurable. Size, colors, fonts, logo and much more. All settings can be found in the Theme Options panel (appearance > Theme options) The logo will be automatically sized (displayed) according to the menu height. If you wish to use a larger or smaller logo, just fiddle around with the menu height. Or push the logo.

9 7. Footer Fade Theme allows you to full style your Footer. In the Theme Options panel (appearance > Theme Options) you can find the basic style settings. If you wish to use a background color. Then select no pattern image and a color. The footer content can be managed via the Widget section. (appearance > widgets) Simply expand the column and drag widgets into them.

10 8. Call 2 Action The call 2 action bar displayed on top of the footer is an optional element that can be turned on and off via the Theme Options panel (appearance > Theme Options). The styling of this Call 2 Action bar is also done via the Theme Options panel. If you wish to use just a background color. Select no pattern and a color. The button will only be displayed when having a text. The button color is defined by the Main theme color. The text color is defined by the Headers color (general settings)

11 9. Sidebars Fade theme sidebars can be managed via the standard Wordpress methods (appearance > widgets). To show the right sidebar on a page, you must select the right sidebar template. Watch this video tutorial: Open a page > edit > on the right Appearance > Widgets Another method to show sidebars on your page (on the left for example) you can use the Visual Composer > add element > widgetised sidebars

12 10. Page Templates Fade Theme comes with a few out of the box page templates. Edit / create page > page attributes > page template Default Template: full width page Page Right Sidebar: page with right sidebar. Widgets > Right Sidebar Portfolio Template: will display the portfolio items. Widgets > Portfolio Sidebar Contact Template: will display the Google Map banner. Widgets > Contact Sidebar The Visual Composer allows you to create your own page templates and the possibilities are endless. You can save and reuse these page template.

13 11. Page Headers Fade Theme offers 2 types of page headers. A title page header with custom backgrounds and featured image page headers with parallax scrolling. You can adjust all page header settings (such as patterns, colors and sizes) in the Theme Options panel (appearance > Theme Options) Set a featured image + optional page title and subtitle. You can use the custom title on non parallax featured image headers too. The subtitle will not be displayed.

14 12. Visual Composer Fade Theme comes with the WP Bakery Visual Composer plugin. This plugin allows you to manage your content very easily. Watch this video howto: Many shortcodes are already embedded in this page builder. Just create your desired layout and add the elements you need.

15 13. Portfolio The Fade Theme holds a separate Portfolio module. In this chapter we walk you through the process of managing your portfolio page and items. We also created a video to help you out. Watch it here: Add new Portfolio item On the left side of the Wordpress Dashboard you will find a new item call Portfolio. Choose add new. Just like a blog post or page you can add content to your liking here. The featured image will be displayed in the Portfolio overview and on top of the portfolio single page. You can however decide to not show the featured image on the portfolio single page via the displayed meta box settings. These fields will be displayed like this: Portfolio sidebar Portfolio overview page

16 13.2 Categories You can create categories for your portfolio. Items can then be added to one or more of these categories. The categories will be displayed on the overview page as filters and on the right side of a single portfolio item page. Add a new portfolio item or edit an existing one. On the right side you will see Project Categories displayed.

17 13.3 Setup your Portfolio page To create a Portfolio overview page > Pages > add new Choose the Portfolio template on the right (page attributes) and save the page Portfolio settings Go to appearance > Theme Options > Portfolio

18 14 Client grid Fade Theme comes with a built in Clients plugin. On the left side of the menu you will find a new item called My Clients. Here you can upload your clients and categorise them. Images are uploaded via the featured image section. To add a grid or carousel to a page, simply click the My Clients icon in the editor. Then select the desired options for your client grid

19 15. Social media icons On the top and bottom you will find the most common social media icons. You can manage these via the Theme Options panel (appearance > Theme Options > Social media icons) By default the fields are empty. You can also turn off the icons completely for the topline and footer. Make sure you use in the link!

20 16. Shortcodes (panel) Fade Theme holds up to 50 shortcodes which most of them are embedded into the Visual Composer by simply adding the elements (read chapter 12.) There is also a popup shortcode panel which will explain the available Fade shortcodes in detail.you will find the shortcode icon in the editor (purple icon) We created some video s on how to use the shortcodes from the panel. Icons: Dropcaps: t8jlu Portfolio/blog teaser grid: More will follow.

21 17. Widgets Fade Theme comes with 2 additional widgets. A contact info widget and a recent post widget which can be used for all post types including portfolio items. Go to appearance > widgets and drag these into the desired sidebars. The recent posts widget allows you to show any post type with all the desired settings. You can show the date, excerpt and the thumbnail. The thumbnail is completely configurable to the desired size.

22 18. CSS3 Animations The Visual Composer allows you to animate any type of content that you might have created. It is very easy to use. Go to a page > make sure you use the visual composer here and add an element. (text block for example). Edit the content of this text block and scroll down. You will find a CSS animation option. This also work on images and other elements. 19. Video tutorials We created a special channel with video tutorials on youtube to show you how easy it is to use the Fade Theme to create your websites. More will be added soon. fkovzaa?feature=watch