VEGA Version /27/2017

Size: px

Start display at page:

Download "VEGA Version /27/2017"

David Fisher
6 years ago
Views:

1 Version /27/2017 Vega Pro Check out the pro version at INSTALLING WORDPRESS INSTALLING THE THEME Using the Administration Panel Using cpanel Manually Using FTP INSTALLING DEMO DATA EXAMPLE / DEMO MODE Disable Demo Mode SITE IDENTITY COLORS TOP MENU BAR Top Left Top Right - Social Media Links MAIN MENU Creating a Scrolling Menu / One-Page Menu Item HEADER IMAGE FRONT PAGE Setting Your Front Page Front Page Options FRONT PAGE HEADER Image Banner (Parallax) (Default) Full Screen Image (Parallax) As-is Simple Responsive Image Banner (No Parallax) FRONT PAGE - CTA SECTION FRONT PAGE - CTA SECTION #2 FRONT PAGE - ICON COLUMNS FRONT PAGE - OPEN CONTENT FRONT PAGE - LATEST POSTS BLOG FEED Layout More Options Blog Page Banner BLOG POST Post Title Post Banner PAGES Page Title Page Banner ADVANCED SETTINGS SIDEBAR

2 FOOTER Footer Widgets Footer Navigation INSTALLING WORDPRESS This documentation assumes that you have Wordpress installed. You would either be installing WordPress on your computer (localhost) or on a hosting account. Please refer to the following links for any help regarding the installation: INSTALLING THE THEME The theme you just downloaded comes as a zip file. See below for some ways you can install your new theme - they are listed easiest-first! Using the Administration Panel 1. Log in to the WordPress Administration Panel - for example by going to yourdomain.com/wp-admin 2. Click Appearance, then Themes. 3. Click Add New. 4. Option 1: Use the Upload Theme link at the top to upload a zipped copy of the theme that you have previously downloaded to your computer. Option 2: Search the theme name Vega on the Themes > Add New page and click Install for Vega. 2

3 5. After the theme is installed, go to Appearance and then Themes. A live preview of any Theme (using your blog's content) can be seen by clicking Live Preview. Click Activate to activate your newly installed theme. Using cpanel If your host offers the cpanel control panel, you can use the following instructions to install the theme. 1. In cpanel File Manager, navigate to your Themes folder. If your WordPress is installed in the document root folder of your web server you would navigate to " public_html/wp-content/themes " and if you have WordPress installed in a sub-folder called wordpress, you would navigate to " public_html/wordpress/wp-content/themes ". 2. Once you've navigated to the Themes folder in cpanel File Manager, click on Upload file(s) and upload that theme.zip file that you downloaded. 3. Once the.zip file is uploaded, click on the name of that file in cpanel, then in the panel to the right, click on " Extract File Contents ", and that.zip file will be uncompressed. 4. Now log in to the WordPress Administration Panel - for example by going to yourdomain.com/wp-admin 5. Go to Appearance and then Themes. A live preview of any Theme (using your blog's content) can be seen by clicking Live Preview. Click Activate to activate your newly installed theme. Manually Using FTP You would need an FTP client in order to install the theme via FTP. FileZilla is a free FTP solution that can be downloaded from 3

4 1. Extract the zip file for the theme that you downloaded. This will create a folder containing all the theme files on your computer. 2. Use your FTP client to connect to your web hosting server. You will need the server address (such as ftp.yourdomain.com), a username and a password. 3. If your WordPress is installed in the document root folder of your web server you would navigate to " public_html/wp-content/themes " and if you have WordPress installed in a sub-folder called wordpress, you would navigate to " public_html/wordpress/wp-content/themes ". 4. Upload the theme folder into the wp-content/themes folder. So your newly uploaded theme would be in wp-content/themes/juliet. 5. Go to Appearance and then Themes. A live preview of any Theme (using your blog's content) can be seen by clicking Live Preview. Click Activate to activate your newly installed theme. INSTALLING DEMO DATA You can install the data and settings shown on our demo site at 1. Download the demo data from 2. You will have two files in the zip file: vega.wordpress.*.xml and vega-export.dat. The XML provides the WordPress import data (all posts, pages, menus, etc.) and the DAT file gives you a way to import our Customize settings. 3. Now go to Tools > Import and click on WordPress. Read more about this here Import the XML file from the zip file you just downloaded. 4. Next, you will need to install and activate this plugin: 4

Select A static page. Select the Welcome to Vega Pro page as the Front Page and the Blog page as the Posts page. 7.

5 5. Go to Appearance > Customize. Scroll down to the last option called Export/Import. Now import the DAT file here. 6. Now go to Static Front Page (just above the Export/Import section in the Customizer) or go to Settings > Reading. Select A static page. Select the Welcome to Vega Pro page as the Front Page and the Blog page as the Posts page. 7. Go to Appearance > Menus or go to the Menus section in the Customizer. Here you need to assign the Header menu to the Header Menu and the Footer to the Footer Menu. 5

6 EXAMPLE / DEMO MODE Appearance > Customize > General Setup After installing the theme, you can view your website to get a general idea of how the theme home page is laid out. The content you see right after a fresh installation and activation will most likely be a blog feed of your posts. In order to take a look at an example/demo one page setup, using random demo content, lifted from your pages and posts, you can turn on the demo content setting under Appearance > Customize > General Setup. Launch the Customizer by going to Appearance - Customize. You should look around and explore the options and once you re comfortable and have an idea of where each feature is, you can disable the Demo Mode and start customizing the website. Disable Demo Mode In Customize, go to General Setup. Here, you can set Enable Demo? to No to disable the demo mode. SITE IDENTITY Appearance > Site Identity Appearance > Logo Options Upload your logo and favicon in the Site Identity section. If you do not have a logo, choose No for Show Image Logo? under Logo Options. Enter the text to display as your branding / logo under Text Logo. COLORS Appearance > Customize > Colors 6

7 You can choose from one of the pre-built color schemes: Orange (Default), Blue, or Green. Pro Feature: Or you can set the color scheme to Custom and then select your own colors. You can also select the two fonts that are used on the theme. TOP MENU BAR Appearance > Menus The top menu bar supports two menus. The left menu can be used to show some contact information such as an address and phone number. The right menu is specifically for use with social media links. Top Left Create a new menu and assign it to the Top Left location. Top Right - Social Media Links For the social media menu, create Custom Links with your social media links and assign them to a menu. Assign the menu to the Top Right - Social location. The links will automatically show social media icons based on the social media link URL. 7

8 MAIN MENU The top menu is capable of displaying menu items down to 3 levels. On smaller screens (such as mobile phones and some tablets in portrait mode) the navigation will collapse into a button that can be clicked to drop down the navigation items. 8

9 Read More: For more information on how to create menus, please read Creating a Scrolling Menu / One-Page Menu Item You can also specify certain menu items to link to any of the front page sections. When the user clicks on such a menu item, the page will smoothly scroll down to that page section. The user can then click the up arrow (near the bottom right of the screen) to go back to the top of the page. This creates a one page effect where most of the essential information is displayed on a single page and it makes easy for the users to get all the required information without navigating away from the main page. Follow these steps to create a single page menu item: 1. After creating your menu, add a Custom Link item to it. 2. Specify the URL as an absolute URL to the page section, such as or /#cta, where cta is the ID for the section you want the link to scroll down to. Each section ID can be specified under the respective section settings. 3. Enter the Link Text or Navigation Label. 4. Important: Enter page-scroll in the CSS Classes field. If you cannot see the CSS Classes field for the link, please click Screen Options in the top right and check mark CSS Classes under Show advanced menu properties. 9

10 HEADER IMAGE Appearance > Customize > Header Image You can specify a Header Image for the theme. This default custom Header Image displays as: The banner on the front page when Front Page Header is set to Image Banner (Default) but no image has been specifically uploaded for the Front Page Image Banner. The header image for the blog feed page (if the Blog Feed Banner has been set to Custom Header ). The header image for all pages (if the Page Banner has been set to Custom Header ). The header image for all posts (if the Post Banner has been set to Custom Header ). 10

11 FRONT PAGE Appearance > Customize > Front Page Setting Your Front Page You have two options for your front page - you can display your blog posts on the main page or you can have a static page display as the front page. Under Appearance > Customize, scroll down to the Static Front Page option and select Your latest posts or A static page and then select the page you d like to show as the front page. You can also reach this option by going to Settings > Reading (note that this method is not a part of the Customizer but rather the main WordPress administration panel - if you have the Customizer open, please close it before going to Settings > Reading ). Read More: More information on this topic can be found at If using the static front page option, you can set up your home page as a one-page website as well. See above Header Menu for more details on that. Tip: Our demo at uses a static front page with all the front page sections turned on. Front Page Options In the Front Page section, you should choose how to display the front page header area, and then select which front page sections to display. You will have the following options to choose from - by default, all the sections are turned on (set to Yes ): Main Content Area 11

12 Call to Action Call to Action #2 4 Icon Columns Open Content Latest Posts Pro Feature: Featured Pages (with images), Testimonials, Team, and Partners/Logos are included with the pro version. Featured Pages (with images): This is a more flexible featured page section that can display up to 4 items. For each featured page, you can upload an image, specify a heading, enter a description, and specify a link. Testimonials: A carousel of up to 5 testimonials can be displayed using this section. Each testimonials is specified by entering the company name, client name, testimonial text, and an image. Team: Up to 4 team members can be specified here. Each team member has the following fields: an image, name, position, URL, and up to two social media links. Logos: Up to 6 images (logos) can be specified here. Any section set to No will not show up on the front page. Tip: If you want to display a simple static page as the front page with no extra sections, simply choose to display the static page as the front page under Reading > Settings and then set all the sections except the Main Content Area to No. 12

Tip: You can control the order of the front page sections by setting their order in Front Page - Row Positions. Enter numbers for each of the sections.

13 Tip: You can control the order of the front page sections by setting their order in Front Page - Row Positions. Enter numbers for each of the sections. The sections will be sorted from the lowest number to the highest. FRONT PAGE HEADER Appearance > Customize > Front Page This is where you decide how you want to show the website header. You can choose the display type in this section and then specify further details under Front Page - Banner. Here is a quick summary of all the options: Image Banner (Parallax) (Default) The Image Banner is the default setting. This is a medium sized header-like banner - with parallax effects - at the top of the page. In order to upload the image you want to show as the Image Banner, go to Front Page - Banner. If you do not upload an image banner, the theme will try to load the Header Image as the banner. You can specify the Header Image in the Header Image section. 13

14 Full Screen Image (Parallax) Choose this option to show a full screen image banner with parallax effects. This banner will always span the entire width and height of the visible browser window. In order to specify which image you want to show as the Full Screen Image, go to Front Page - Banner. As-is Simple Responsive Image Banner (No Parallax) Choose this option to show your image in its entirety - the image will be loaded as is without trying to fit it into the front page banner container background. The image will be responsive, so it will resize according to the screen size. There will be no parallax effect on this banner. Pro Feature: The pro version has the option to display video banners: Video Banner Full Screen Video The pro version has a comprehensive slider which can be displayed in full screen or normal banner format: Image/Video Slideshow Full Screen Image/Video Slideshow 14

15 FRONT PAGE - CTA SECTION Appearance > Customize > Front Page - CTA Section This section is displayed if it is set to display under Front Page. Choose the page from the list of pages from which the content will be displayed in this section. Choose whether or not to show a parallax image in the background, and upload a background image if you enable parallax. Please note: If you have uploaded a background image but have disabled parallax, then this section will still show the image as a background without any effects. You can also enter the ID for this section that can be used to set up the page as a one-page website ( scroll down to section feature). Make sure the ID has no special characters and no spaces. Select the overlay color using the color picker to change the default black overlay on the background image for this section. If you remove the overlay color altogether, none will be applied. If you remove the background image and choose a color - then this section will have a solid background color with no image. FRONT PAGE - CTA SECTION #2 Appearance > Customize > Front Page - CTA Section #2 This is another section designated for some Call to Action content. It works exactly the same as the first CTA section. See above. Tip: Since these CTA sections are created using content from the page you select, you can display almost anything in these sections. You can use shortcodes to display a contact form, a gallery, images, embedded videos, etc. 15

16 FRONT PAGE - ICON COLUMNS Appearance > Customize > Front Page - Icon Columns A maximum of 4 columns can be displayed here. You can choose how many to show (between 1-4) under Appearance > Customize > Front Page - Icon Columns > General. Each column is set up of a Font Awesome icon, a page excerpt and its link. You can enter any Font Awesome class (see ) and then select a page to display and link to for that column. You can also enter the ID for this section that can be used to set up the page as a one-page website ( scroll down to section feature). Make sure the ID has no special characters and no spaces. You can use the color picker to change the background color of this section. FRONT PAGE - OPEN CONTENT Appearance > Customize > Front Page - Open Content This section allows you to select any page to create your own content, quite similar to the CTA section. Enter the content you want to show here into a new page, and then select it here. You can also enter the ID for this section that can be used to set up the page as a one-page website ( scroll down to section feature). Make sure the ID has no special characters and no spaces. You can use the color picker to change the background color of this section. 16

17 Tip: Since this sections is created using content from the page you select, you can display almost anything in these sections. You can use shortcodes to display a contact form, a gallery, images, embedded videos, etc. FRONT PAGE - LATEST POSTS Appearance > Customize > Front Page - Latest Posts Up to 3 posts can be shown here. You can choose how many to show (between 1-3). You can also enter the ID for this section that can be used to set up the page as a one-page website ( scroll down to section feature). Make sure the ID has no special characters and no spaces. You can use the color picker to change the background color of this section. BLOG FEED Appearance > Customize > Blog Feed Layout Whether you are displaying your latest blog posts on the front page or you have a page to show your blog posts - the blog feed display is controlled via this section. Small Image Left, Excerpt Right: This shows a the featured image of the post in small size to the left of the post, and the post excerpt to the right of the image. 17

com/more-tag/ ) you can control how much content is visible in the blog feed and the user can click more to view the

18 Large Image Top, Full Content Below: Choosing this will show the full size featured image at the top and the full post content at the bottom. If you use the more tag (see ) you can control how much content is visible in the blog feed and the user can click more to view the complete post. No Image, Excerpt: This is especially useful if you won t be having images for each of your posts. This option shows just the post excerpt in the blog feed. 18

19 Pro Feature: You can choose not to display a sidebar on your Blog Feed page. If you choose not to display a sidebar, the blog layout will be shown in a grid, with 2 posts in each row. More Options You can control the display of your blog feed even further by choosing whether to display the meta information, such as the date, author, and category for the posts. You can also choose to hide the Read More and Comments buttons. If you have animations enabled under General Setup, you can choose to disable them for the blog page only. 19

Blog Page Banner You have two options for the blog page banner - you can choose to hide the banner and or show the Custom Header as the blog page banner image.

20 Blog Page Banner You have two options for the blog page banner - you can choose to hide the banner and or show the Custom Header as the blog page banner image. BLOG POST Appearance > Customize > Blog Post You can control the display of your posts here by choosing whether to display a sidebar or not and how to display the post banner. Post Title You can choose how to display the post title / heading. It can be shown in the top banner, right before the content starts, or in both places (default). 20

Post Banner You can choose to display the featured image of the post as the banner, the Header Image (Custom Header) as the banner, or disable the banner completely.

21 Post Banner You can choose to display the featured image of the post as the banner, the Header Image (Custom Header) as the banner, or disable the banner completely. Tip: If you want a separate banner image for each post, choose Featured Image as the Post Banner. Otherwise, you can set the Custom Header (Header Image) as the Post Banner and it will be consistent across all posts. PAGES Appearance > Customize > Pages You can control the display of your pages here by choosing whether to display a sidebar or not and how to display the page banner. 21

22 Page Title You can choose how to display the page title / heading. It can be shown in the top banner, right before the content starts, or in both places (default). Pro Feature: A Full Width page template is available for overriding the sidebar so any page can be displayed as a full width page if needed. Page Banner You can choose to display the featured image of the page as the banner, the Header Image (Custom Header) as the banner, or disable the banner completely. Tip: If you want a separate banner image for each page, choose Featured Image as the Page Banner. Otherwise, you can set the Custom Header (Header Image) as the Page Banner and it will be consistent across all pages. 22

23 ADVANCED SETTINGS Appearance > Customize > Advanced Settings This section is mainly used to enter any custom CSS code that you may want to use to alter the display of the theme in any way. Please note: if you re using the latest version of WordPress (4.7+) - this section will not be displayed. SIDEBAR There are three main sidebars available. The Default Sidebar shows across the theme (posts, pages, blog feed) and it can be set up by going to Appearance > Widgets and specifying your widgets for the Default Sidebar widget area. The Posts Sidebar and Pages Sidebar display just on posts and pages respectively. FOOTER Footer Widgets There is a secondary footer available in this theme if you want to display more information across the bottom of the page. Simply use the Footer Col 1 to Footer Col 4 widgets under Appearance > Widgets to populate the content for the footer columns. Tip: If you want to show just 2 columns in the footer area, just populate two of the widget areas and the theme will automatically adjust to display just two equal columns! So you can control how many columns you want to show and are not restricted to using all 4 columns. 23

24 Footer Navigation A single-level navigation can be specified for the footer (location Footer Menu ) which will display under the footer widgets. 24

JULIET Version /14/2016

JULIET Version /14/2016 Version 1.0 08/14/2016 Juliet Pro Check out the pro version at https://www.lyrathemes.com/juliet-pro INSTALLING WORDPRESS INSTALLING THE THEME Using the Administration Panel Using cpanel Manually Using