VEGA Version 2.2.1

01/27/2017

Vega Pro

Check out the pro version at

https://www.lyrathemes.com/vega-pro

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

VEGA

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:

● https://codex.wordpress.org/Installing_WordPress

● https://codex.wordpress.org/Installing_WordPress_in_Your_Language

● http://www.wpbeginner.com/how-to-install-wordpress/

● https://www.siteground.com/tutorials/wordpress/wordpress-installation.htm

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

VEGA

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 https://filezilla-project.org/.

3

VEGA

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

http://www.lyrathemes.com/preview/?theme=vega.

1. Download the demo data from

https://www.lyrathemes.com/sample-data/vega-sample-data.zip.

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

https://codex.wordpress.org/Importing_Content#WordPress Import the XML file from the

zip file you just downloaded.

4. Next, you will need to install and activate this plugin:

https://wordpress.org/plugins/customizer-export-import/

4

VEGA

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

VEGA

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

VEGA

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 email 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

VEGA

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

VEGA

Read More: For more information on how to create menus, please read

https://codex.wordpress.org/WordPress_Menu_User_Guide

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

http://yourdomain.com/#cta 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

VEGA

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

VEGA

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

https://codex.wordpress.org/Settings_Reading_Screen#Reading_Settings

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 http://www.lyrathemes.com/preview/?theme=vega 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

VEGA

● 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

VEGA

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

VEGA

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

VEGA

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

VEGA

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 http://fontawesome.io/icons/) 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

VEGA

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

VEGA

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

https://en.support.wordpress.com/more-tag/) 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

VEGA

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

VEGA

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

VEGA

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

VEGA

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

VEGA

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

VEGA

Footer Navigation

A single-level navigation can be specified for the footer (location “Footer Menu”) which will

display under the footer widgets.

24