Made by Pe Themes
Cygni Interactive Portfolio Showcase Theme
Theme Documentation v2.0
01. Getting Started

First of all, Thank you so much for purchasing this template and for being our customer. You are awesome!
You are entitled to get free lifetime updates to this product + exceptional support from the author directly.

This documentation is to help you regarding each step of customization.
Please go through the documentation carefully to understand how this template is made and how to edit this properly.

When you purchase Cygni from Themeforest, you need to login your account and download theme files from Themeforest. Please make sure you downloaded All file & Documentation option.


What is included?


After you downloaded theme files you will find inside it;

01. Demo Content - Contains exported .xml files
02. Documentation
- Contains Cygni theme documentation
03. cygni.zip - Theme file for WordPress installation, if you want to install your theme manually (with FTP) you must unzip this file.
04. cygni-child.zip - Child Theme file for WordPress installation, if you want to install your theme manually (with FTP) you must unzip this file.

02. Installation
1. Theme installation

There's two way for install themes on WordPress, you can select which one is good for you.

Theme Installation via WordPress Admin;

Step 1: Login your WordPress admin dashboard

Step 2: Navigate to Appearance > Themes

Step 3: Click on Upload Theme

Step 4: Click on chose file, select "cygni.zip" and click Install Now.

Step 5: After upload is finished, click on Cygni to Activate

Theme Installation Manual (via FTP);

Step 1: Login to your hosting server via FTP client.

Step 2: Go to the folder /wp-content/themes

Step 3: Upload "cygni.zip" extracted content

Step 4: Login your WordPress admin dashboard Upload Theme

Step 5: Navigate to Appearance > Themes

Step 6: Click on Cygni to Activate

After you install and activate Cygni, you need to setup some couple of things to use it best condition. Please follow these documentation.

2. Install plug-ins

Every theme needs some plug-ins and with Cygni, you can install necessary plugins with only one click. Please follow these steps below;

Step 1: After you activate Cygni, you will see a sub-menu named "İnstall Plugins" inside of Appearance menu.

Step 2: Click on İnstall Plugins

Step 3: Install and activate all plug-ins

3. Demo Content

Cygni demo content can be install with two ways;


3.1. One Click Demo Import


If you want to install demo content automatically with one click demo importer which is strongly recommended by us, please follow these steps below;

Step 1: After you activate the theme and install plugins, there'll be a submenu ("Import Demo Data") appears below "Appearance" menu on WordPress Admin Dashboard click on it.

Step 2: Select which demo you want to install and click "import" button below it.

Step 3: Just wait a couple of minutes and everything will be done.

After the installation is done all pages, portfolios. posts will be imported correctly, menus and pages will be setted.


3.2. Manual Demo Import


If you want to install demo content manualy please follow these steps below;

After you download theme files you will see a folder named "Demo Content", this folder contains an .xml file "cygni.xml" , to install demo content follow these steps:

Step 1: Navigate Tools > Import in your WordPress admin dashboard.

Step 2: Click on WordPress > Install Now

Step 3: After plugin installation complete click on Run Importer

Step 4: Click on Choose File and choose .xml file you want to import.

Step 5: Click on Choose File and choose cygni.xml file.

Step 6: Click on Upload file and import.


IMPORTANT NOTICE: Images and videos in demo website are not included with your purchase from ThemeForest, there are just for demo website. So after you install demo content images and videos will not be there.

After you install .xml file you still need to do some couple of things please continue follow these guide.

4. Menus

If you install demo content with one click demo import method this setting will be done automatically.

After you install ml you need to setup navigation menu. Follow these very easy steps below:

Step 1: Navigate Appearance > Menus in your WordPress admin dashboard

Step 2: You will see a menu named Main Menu created

Step 3: Scroll to bottom of the page

Step 4: Click Primary Menu checkbox

Step 5: Click on Save Menu

5. Setting-up Pages

If you install demo content with one click demo import method this setting will be done automatically.

After you install demo .xml you need to setup home page. Follow these very easy steps below:

Step 1: Navigate Settings > Reading in your WordPress admin dashboard

Step 2: There is two variation for homepage display.

Step 3: Click on A static page(select below) checkbox, and select an home page.

Step 4: Select Blog in Posts page select menu.

Step 5: Click on Save Changes.

03. Theme Settings

After you activate theme and install plugins there'll be a new menu item appears ("Cygni Options") on WordPress Admin Dashboard.
You can find all theme settings here let's take a look whats in it;

1. Global Options
CLICK TO VIEW

You can setup main layout settings in your website here this settings will be effect on whole website;

Site Layout: This settings is the skin which will be used on whole site.

Header Layout: You can select heder layout here, this setting will be change logo and menu views.

Menu Style: Cygni offers two type of navigation menu styles just pick which one you want.

Fullscreen Menu Layout: If you select "Fullscreen" on menu style setting, this settings will be change the layout of opened menu.

2. Fullscreen Menu
CLICK TO VIEW

If you using "classic" menu layout this settings will not have any effect on the site.

Left Widget Title: Enter a title for left-bottom widget it will be displated when nav menu has been opened.

Left Widget Content: Enter your content for left-bottom widget it will be displated when nav menu has been opened.

Scrolling Button Text: This will be displayed on 3rd column-bottom area.

Scrolling Button URL: You can enter an URL for scrolling text

Right Widget Title: Enter a title for right-top widget it will be displated when nav menu has been opened.

Right Widget Content: Enter your content for right-top widget it will be displated when nav menu has been opened.

3. Portfolio Settings
CLICK TO VIEW

You can setup smiliar portfolio setting here

Portfolio Slug: Cygni's portfolio post types are using 'project' slug for permalinks you can change that value in here. Note: After you change this setting maybe you need to update your permalinks once.

Next Project Caption: In single portfolio pages there's a section in bottom of the page navigating next proejct you can change caption here.

4. Blog Page

There's two sub settings tab below this tab;


4.1. Posts Page


CLICK TO VIEW

You can setup blog posts page here

Blog Page Title: Main title of the blog page.

Blog Page Caption: Caption for blog page title (leave it empty if you don't want to display it).

Blog Page Background Text: Will be displayed and animated on back of the blog page.

Blog Page Sidebar: Sidebar visibility for blog posts page.

4.2. Single Post Page


CLICK TO VIEW

You can setup single post page here

Sidebar: Single post page sidebar visibility.

Post Thumnnail: Single post thumbnail visibility.

Post Meta: Single post date and category visibility.

Posts Navigation: Next/Prev posts section visibility.

Prev Post Text: "Prevous Post" caption.

Next Post Text: "Next Post" caption.

5. Loader/Transitions

There's two sub settings tab below this tab;


5.1. Page Loader


CLICK TO VIEW

Page Loader:You can enable/disable page loader here.

Counter Font Size:You can change page loading counter font size here.

5.2. Page Transitions


CLICK TO VIEW

AJAX Transitions: You can enable/disable AJAX page transition animations here.

Loading Text: Enter your loading animation text here.

Loading Text Font Size: Loading animation text font size.

6. Footer
CLICK TO VIEW

Top Bars: Top bars visibility.

Footer Layout: Footer layout is changing automatically based on site layout but you can select spesific layout here.

Footer Background Color: Custom background color for footer.

Headline Text: Will be displated on top side of the footer.

Copyright Text: Copyright text for bottom-right area.

7. Typography
CLICK TO VIEW

Custom typography settings.

8. Colors
CLICK TO VIEW

Custom color settings.

04. Portfolio Showcases

In Cygni, all portfolio showcase layouts are included in Elementor Page Builder these are just like other page build elements in Elementor.
For create a showcase page please follow these steps below;

Step 1: Navigate "Pages -> Add New" on your WordPress Admin Dashboard.

Step 2: Add a title for this page.

Step 3: Click on "Edit With Elementor" button and start Elementor Page Builder.


Step 4: After Elementor opened, click on new section button.


Step 5: Select 1 column section structure.


Step 6: After you select section structure, section settings will be appears on left of the screen, select "Content Width" to "Fullwidth".

Step 7: Click on the column icon (will be on top-left when you mousover section) and go to column settings.

Step 8: Go to "Advanced" tab and set all column paddings to "0".

Step 9: Select showcase layout which you wantö drag and drop it into the column you created.

Now, you created a showcase page, let's have some more informations about showcase layouts.

1. Big Slider

One of the showcase layouts from Cygni, you can find this below "Cygni Showcase Layouts" tab in Elementor elements.
As all showcase layouts this layout has it's own settings let's take a look into it;

CLICK TO VIEW
A. Portfolios

Exclude Projects: Showcase layout will automatically detect all portfolio items and included them itself, you can enter project ID's here which belong you dont want to display in this showcase.

Max Number of Slides: Number of maximum portfolio items to display.

Order By: Select an order for the projects, if you select "Custom" you must set every project an order number in it's own editing page.

Order: You can select an order type for the order..

CLICK TO VIEW
B. Project Elements

Metas: Project metas visibility.

Select Metas: Select which metas will bi visible.

Year: Project year visibility.

Category: Project category visibility.

Excerpt: Project excerpt visibility.

CLICK TO VIEW
C. Slider Settings

Arrows: Slider arrows visibility.

Numbers: Slide numbers visibility.

Autoplay Duration: Slider autoplay speed from (ms).

Project Button Text: Project button text.

2. Horizontal

One of the showcase layouts from Cygni, you can find this below "Cygni Showcase Layouts" tab in Elementor elements.
As all showcase layouts this layout has it's own settings let's take a look into it;

CLICK TO VIEW
A. Portfolios

Exclude Projects: Showcase layout will automatically detect all portfolio items and included them itself, you can enter project ID's here which belong you dont want to display in this showcase.

Max Number of Slides: Number of maximum portfolio items to display.

Order By: Select an order for the projects, if you select "Custom" you must set every project an order number in it's own editing page.

Order: You can select an order type for the order..

CLICK TO VIEW
B. Project Elements

Year: Project year visibility.

CLICK TO VIEW
C. Slider Settings

Arrows: Slider arrows visibility.

Numbers: Slide numbers visibility.

Project Button Text: Project button text.

3. List Carousel

One of the showcase layouts from Cygni, you can find this below "Cygni Showcase Layouts" tab in Elementor elements.
As all showcase layouts this layout has it's own settings let's take a look into it;

CLICK TO VIEW
A. Portfolios

Exclude Projects: Showcase layout will automatically detect all portfolio items and included them itself, you can enter project ID's here which belong you dont want to display in this showcase.

Max Number of Slides: Number of maximum portfolio items to display.

Order By: Select an order for the projects, if you select "Custom" you must set every project an order number in it's own editing page.

Order: You can select an order type for the order..

CLICK TO VIEW
B. Project Elements

Metas: Project metas visibility.

Select Metas: Select which metas will bi visible.

CLICK TO VIEW
C. Slider Settings

Arrows: Slider arrows visibility.

Numbers: Slide numbers visibility.

4. Wall

One of the showcase layouts from Cygni, you can find this below "Cygni Showcase Layouts" tab in Elementor elements.
As all showcase layouts this layout has it's own settings let's take a look into it;

CLICK TO VIEW
A. Portfolios

Exclude Projects: Showcase layout will automatically detect all portfolio items and included them itself, you can enter project ID's here which belong you dont want to display in this showcase.

Max Number of Slides: Number of maximum portfolio items to display.

Order By: Select an order for the projects, if you select "Custom" you must set every project an order number in it's own editing page.

Order: You can select an order type for the order..

CLICK TO VIEW
B. Project Elements

Year: Project year visibility.

Category: Project categroy visibility.

Image: Project image visibility.

Plus Button: Plus button visibility.

Plus Button Text: Plus button text.

5. Vertical

One of the showcase layouts from Cygni, you can find this below "Cygni Showcase Layouts" tab in Elementor elements.
As all showcase layouts this layout has it's own settings let's take a look into it;

CLICK TO VIEW
A. Portfolios

Exclude Projects: Showcase layout will automatically detect all portfolio items and included them itself, you can enter project ID's here which belong you dont want to display in this showcase.

Max Number of Slides: Number of maximum portfolio items to display.

Order By: Select an order for the projects, if you select "Custom" you must set every project an order number in it's own editing page.

Order: You can select an order type for the order..

CLICK TO VIEW
B. Project Elements

Category: Project category visibility.

6. Detailed

One of the showcase layouts from Cygni, you can find this below "Cygni Showcase Layouts" tab in Elementor elements.
As all showcase layouts this layout has it's own settings let's take a look into it;

CLICK TO VIEW
A. Portfolios

Exclude Projects: Showcase layout will automatically detect all portfolio items and included them itself, you can enter project ID's here which belong you dont want to display in this showcase.

Max Number of Slides: Number of maximum portfolio items to display.

Order By: Select an order for the projects, if you select "Custom" you must set every project an order number in it's own editing page.

Order: You can select an order type for the order..

CLICK TO VIEW
B. Project Elements

Metas: Project metas visibility.

Select Metas: Select which metas will bi visible.

Year: Project year visibility.

Category: Project category visibility.

Excerpt: Project excerpt visibility.

CLICK TO VIEW
C. Slider Settings

Arrows: Slider arrows visibility.

Numbers: Slide numbers visibility.

Dots: Slider dots visibility.

Plus Button: Plus button visibility.

Plus Button Text: Text for plus button.

Plus Button: URL for plus button.

Project Button Text: Project button text.

7. Grid

One of the showcase layouts from Cygni, you can find this below "Cygni Showcase Layouts" tab in Elementor elements.
As all showcase layouts this layout has it's own settings let's take a look into it;

CLICK TO VIEW
A. Portfolios

Exclude Projects: Showcase layout will automatically detect all portfolio items and included them itself, you can enter project ID's here which belong you dont want to display in this showcase.

Max Number of Slides: Number of maximum portfolio items to display.

Order By: Select an order for the projects, if you select "Custom" you must set every project an order number in it's own editing page.

Order: You can select an order type for the order..

05. Portfolios

Cygni's portfolio post types are just like the other WordPress post and page types but there's some more features about it.
Let's see what are these extra features;


1. Portfolio Metas
You can enter your project metas, summary, excerpt and year here. These values will be used on several showcase layout pages and single project page.

2. Spesific Showcase Images
One of the different thing in Cygni, is that section, as you know all WordPress posts and pages using Featured Image for archive pages. For Cygni portfolios you can select spesific images or videos for spesific showcase pages, for example; if you enable "Big Slider" spesification and upload an image here, this project will be displayed with the image you uploaded here, not with its featured image.

3. Showcase Orders
As you remember, theres an order selection for showcase layouts and if you select the order of a showcase layout to "Custom" you must select an order index for te project.

CLICK TO VIEW

4. Project Settings
You can select some spesific settings for the project such as;

CLICK TO VIEW

4. Featured Video
An URL area for featured video of the project.

CLICK TO VIEW
06. Page Builder

Every page in Cygni created with Elementor Page Builder . Elementor Page Builder is very easy to create and edit page builder, working with drag and drop so you can create/edit pages easily.


CLICK TO VIEW

In Elementor Builder you will see some tabs named;


Basic - Basic Elementor page building elements.

Pro - Elementor Pro page building elements.

General - General Elementor page building elements.

Site - Site elements, requaries pro licence for Elementor.

Woocommerce - Woocommerce elements, requaries pro licence for Elementor.

Cygni Showcase Layouts - Cygni's showcase layout elements.

Cygni Content Elements - Some content elements specialized for Cygni.

WordPress - Basic WordPress shortcodes.


You can find more information about Elementor widgets here; https://elementor.com/widgets/


07. Widgets

Cygni is a widget ready theme for whole website. And there's two widget area included on footer.
You can edit these widgets from "Appearance -> Widgets" on your WordPress Admin Dashboard.


Footer Widget Left

Footer Widget Right