RSW. Responsive Fullscreen WordPress Theme

Transcription

1 RSW Responsive Fullscreen WordPress Theme

2 Thank you for purchasing this theme. This document covers the installation and Setting up of the theme. Please read through this Help Guide if you experience any difficulties. If you have a more general question relating to the theme, please visit the item dicussions at themeforest to post your questions.

3 Table of Contents Links 4 Important Notes 5 Uploading RSW via FTP to Wordpress 6 Building the Menus 8 - Enable Descriptions 8 Building the Menus 9 - Adding more items 11 Building the Menus 12 - Activating the menu 12 Social Header icons 13 Setting up Logo 14 Setting up a Default Background 15 Overlay Patten 16 Fullscreen Slideshow with/without Audio 17 Adding Music to Fullscreen Slideshow 21 Setting up Fullscreen Video function 22 Fullscreen HTML5 Video 23 Fullscreen Vimeo Video 24 Fullscreen Youtube / FLV Video 25 Selecting Fullscreen page as Homepage 26 Fullscreen Slideshow Settings 27 News Box 28 Portfolio Showcase ( Step 1 of 2) 30 Portfolio Showcase ( Step 2 of 2 ) 32 Portfolio Drag & Drop Sorter 34 Custom Post Formats Standard Post Aside post Link post Audio post Quote post Image post Video post Gallery post 43 Blog list Template 47 Contact Form Template 48 Fullwidth Template 49 Multiple Sidebars 51 Shortcodes GUI 53 Shortcode Slideshows 54 Custom widgets 56 Twitter widget 57 Gallery widget 58 Recent and Popular Posts 59 Portfolio Related 60 Social Widget 61 Flickr Widget 62

4 Links Icons used from (Selected icons Included) MEDIA USED IN THE THEME DEMO Music by DanoSongs.com Supersized (INCLUDED no need to install) Videos by Blender Foundation JPlayer (INCLUDED no need to install) FlexSlider (INCLUDED no need to install) Pretty Photo (INCLUDED no need to install) 4

5 Important Notes RECOMMENDED IMAGE SIZES Fullscreen : 1080px or more Fullwidth : 930px Width Post images : 650px Width 5

6 Uploading RSW via FTP to Wordpress 1. Download the zipped theme pack to your local computer from themeforest and extract the ZIP file contents to a folder on your local computer. 2. Using an FTP client to access your host web server. 3. Upload the Theme files in the extracted folder called rsw (its inside the extracted rsw-packed ) to wp-content/themes directory provided by WordPress. Please make sure you re uploading the files from the extracted rsw zip. 4. Visit Administration > Appearance > Themes, under the Manage Themes tab, under the Available Themes, if necessary navigate to the page displaying that Theme, then click the Activate link to make the Theme, the Current Theme. Once Activated you ll get the RSW theme options in the sidebar. 6

7 7

8 Building the Menus - Enable Descriptions 1 2 Click Menus Clicking will display Menu Builder Screen. Screen Options Click Screen Options. This tab is displayed on the top right corner of the browser window. 3 Enable Descriptions Check Enable Descriptions Tab. 8

9 Building the Menus - Create Menu 1 Enter a Name Enter an name for your Menu and Click Create Menu tab 2 Create Menu 9

10 Building the Menus - Create an Item 2 Title Fill Title 3 Description Fill description 1 Create Home Button From Custom Links box, enter URL and Label. Click Add to Menu 10

11 Building the Menus - Adding more items 2 1 Indenting Indenting the items creates sub menus for the Photo Menu Create more item Pages, Categories or Custom Post Types can be added easily by selecting and clicking Add to Menu 11

12 Building the Menus - Activating the menu Choose your Menu Selecting this options will populate your menu. NOTE: Refer to Official Wordpress Menu Guide 12

13 Social Header icons 1 2 Social Widget Social icons The Social widget can be found in the Widgets list area in The social icons can be generated by wp-admin. populating your social links in the input fields. NOTE: Drag and drop the Social widget to Social Header Widget area are and activate your social links. 13

14 Theme Options - Setting up Logo 2 Click Upload 1 To setup logo, login to Wordpress Admin and Click Theme Options and click the General Tab as shown below. Click upload and select your logo image to upload. Once uploaded click Use this image as shown on the right handside image. Make sure you ve selected Full image for the image size. 3 Once uploaded - Click Use this image 14

15 Theme Options - Setting up a Default Backgrounds Full size Background image Upload and click Use this Image from the uploader to activate a background. Remember to select the Full image option when choosing the image size. 4 5 Click Use This Image to set the image. Make sure Full Size is selected. 6 For Slideshows using Fullscreen Post 15

16 Theme Options - Overlay Patten Overlay pattern Select any of the overlay pattern for the background image. 16

17 Fullscreen Slideshow with/without Audio Click the Upload icon This brings up the uploader popup where you can add multiple images by drag and dropping the files. 4 17

18 5 Save Changes Save Changes and Proceed where you can Add Titles and Captions 18

19 6 Show / Hide image options 7 Title 8 Description 9 Save Changes Once you add Title and Description to each slide proceed to Save all Changes. 19

20 10 Drag and Drop the slides to Order them Once you add Title and Description to each slide proceed to Save all Changes. 20

21 Adding Music to Fullscreen Slideshow 11 Select Slideshow Type 12 Fill all image formats for best crossbrowser playability OGA/OGG audio format native playback is supported in Firefox, Opera and Chrome MP3 audio format native playback is supported in Safari,Chrome and IE 13 21

22 Setting up Fullscreen Video function 1. For the fullscreen video to function it s required to download JWPlayer. Don t include the Viral - video sharing plugin with the player when downloading. The file list of the downloaded zip file are Please download JWPlayer from the following URL 2. Copy the above files from the zip folder to your themes folder in /JS/JWPLAYER/ ( The JS/JWPLAYER folder is already created. You just need to copy the files to it. No other changes are required ) 22

23 Fullscreen HTML5 Video Select Fullscreen Video 4 Enter Video URL Check out Native HTML5 Video Formats to Browser from the following URL

24 Fullscreen Vimeo Video Select Fullscreen Video 4 Enter VIMEO Video ID 5 24

25 Fullscreen Youtube / FLV Video Select Fullscreen Video 4 Enter Youtube video url 5 25

26 Theme Options - Selecting Fullscreen page as Homepage Select homepage fullscreen page and Save! 26

27 Theme Options - Fullscreen Slideshow Settings 1 2 Toggle switches and Sliders make it easy to setup the slideshow screen as you prefer 3 27

28 Theme Options - News Box 3 News Box can be enable or disabled from theme options. 1 You can select the Newsbox Title and Select a posts category to pull the posts from / or select posts from the Portfolio. 2 28

29 Creating the Portfolio Sections 29

30 Portfolio Showcase ( Step 1 of 2) Goto WP-Admin > Portfolio List > And build your Portfolio by clicking Add New Step Click Set Featured image and upload. 4 Drag and drop an image file 5 Click use Featured image 6 Image displayed once an image is attached 30

31 7 Sidebar Choice Sidebar choice for this item Description Description to appear under the thumbnails Custom Thumbnail A custom thumbnail instead of the featured image used in the Page Video URL Video URL for the lightbox Link To Link to another URL (optional) Background setting Background setting for the Portfolio details page. 8 Portfolio Header type Portfolio header type. You can choose to display an image, slideshow or video embed Slideshow height Slideshow height Video Embed code Video embed code used for video header option 9 31

32 Portfolio Showcase ( Step 2 of 2 ) Goto WP-Admin > Pages > Add New Step Set Page Temaplte to Portfolio Choose your Portfolio Settings. 4 32

33 5 Background Settings 7 6 NOTE: Once published this page will populate your portfolio items. Featured Image Upload and set your Featured Image 33

34 Portfolio Drag & Drop Sorter 1 2 Drag n Drop to rearrange the Portfolio Slides 34

35 Custom Post Formats RSW theme can build you custom post formats. Post formats can be chosen from the Post Edit screen. The list appears as the below screen shot. When you select a post format additional options will relating the the chosen post format. These extra options are available for Gallery. Link, Image, Quote, Video and Audio. 8 Custom post formats 1 35

36 1. Standard Post Fill contents 3 Choose Standard Post Format 5 Featured Image Upload and set your Featured Image 6 Select Sidebar and background settings 7 36

37 2. Aside post An Aside is a cusom post format which doesn t have a title. Very useful for small notes and such. No additional options. 37

38 3. Link post Linked post can be linked anywhere. 38

39 4. Audio post Audio post formats can generate an audio player for your post. 39

40 5. Quote post Display quotes as posts 40

41 6. Image post You can display image post either as a standalone image or activated with a lightbox. Additional option 41

42 7. Video post Additional options Video post formats can generate a video player for your post. 42

43 8. Gallery post Gallery post can display a slideshow gallery in the post head. You can populate slideshow images by uploading them as image attachments Click the Upload icon This brings up the uploader popup where you can add multiple images by drag and dropping the files. 43

44 6 Save Changes Save Changes and Proceed where you can Add Titles and Captions 44

45 7 Drag and Drop the slides to Order them Once you add Title and Description to each slide proceed to Save all Changes. 8 45

46 Creating a Blog Page 46

47 Blog list Template Goto WP-Admin > Pages > Add New NOTE: Once published this page using the bloglist template will populate your posts Choose Template Blog list 47

48 Contact Form Template Choose Template Contact Template NOTE: Make sure you fill the Contact section in Theme options with field names and address 48

49 Fullwidth Template Choose Template Fullwidth Template 49

50 Applying Sidebars 50

51 Multiple Sidebars 1 2 Activate Sidebars by entering a Name for it You can activate sidebars on demand by giving the sidebars a name. Active sidebars are listed in the Widgets area. Sidebar 1 to 20 Choice of Sidebar option is found in all Post and Page editing screen. 51

52 Shortcodes Generator 52

53 Shortcodes GUI The feature of Generating Shortcodes through the Post and Page editor makes it a breeze to apply Shortcodes. There is no longer need to memorize or refer to any of them. Clicking each shortcode button gives you a Pop-up with the configurations required to generate them right into the editor. Complex text layouts can be generated using the Columns Shortcode. Buttons Typography Notices Videos Thumbnails Slideshows Picture Frame Seperators NOTE: For the Shortcode GUI to be visible you ll need to be in the Post or Page editor in Visual mode. Columns and Column Layout Generators Post and Page Lists Toggles, Tabs and Accordions NOTE: The Thumbnails and Slideshow shortcodes require image attachments in the post or page it s generated in. Just upload Multiple images to the post or page and click save - no need to insert the image to the contents area manually. Once the shortcode is generated it ll pick the attached images and display them. 53

54 Shortcode Slideshows 1) Goto WP ADMIN > PAGE > ADD NEW 2) Fill the TITLE (important for Gallery setup) and CONTENTS 3) Upload your IMAGES 4) Press Save All ( As shown in below screenshot ) 5) Publish! 3 1 Click the Upload icon This brings up the uploader popup where you can add multiple images by drag and dropping the files. 2 4 Click Slideshows 6 5 Generated shortcode 54

55 Custom Widgets 55

56 Custom widgets 56

57 Twitter widget Title Enter title Username Username to fetch tweets from Avatar Toggle twitter username avatar Number of feeds Number of feeds to display 57

58 Gallery widget Note: Gallery widget supports both in the Sidebar and Footer. It will style respectively for both areas. List Choice Populate using Page Attachments or use Category to fill the slots Select Page Choose a Page if List choice is Page Select Category Choose a Page if List choice is Page Select Category Choose a Category if List Choice is Category Click Action Link Portfolio image using Direct link or Lightbox Image Order Generate Random images or Sequencial Limit Number of Images to Display 58

59 Recent and Popular Posts Posts to Display Number of Posts to Display Description Length Number of Characters to display from Excerpt Select Category Select Categories to Generate the Recent Posts from 59

60 Portfolio Related Related Portfolio You can create a custom sidebar for Portfolio items and place this widget to see a list of related portfolio items to the one displayed. Portfolio Type lister Widget shows list of all work types/categories created in the Portfolio 60

61 Social Widget Icon Size Icon size, 16px or 32px Effect when mouse hovered on icon Select type of effect when mouse is hovered on icon How to open the Link How to open the link. In a new tab or existing one. Contact text Contact information field. Social Website link When you fill the URL link - the icon corresponding to the website will appear in the widget area. 61

62 Flickr Widget Flickr ID Fill in the Flickr ID. You can use idgettr link to find it easily. Number of Photos to show Set number of images to show Image Order Select Random or Latest for image ordering 62

63 end. 63

64 Once again, Thank you for purchasing this theme. I d be glad to help you if you have any questions relating to this theme. If you have a more general question relating to the theme, you might consider visiting the item discussions at ThemeForest for theme or send a direct to me via my profile.