version 2.2.1 vega pro check out the pro version at https ... · pdf filevega 5. after the...
TRANSCRIPT
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