Search Results

About Lefkada

Lefkada is a business WordPress theme based on the new WordPress Block Editor features.

Image Sizes

The minimum recommended image sizes for Lefkada are:

• Post thumbnail:850×478
• Item thumbnail: 615x346px
• Media Item tall: 615px unlimited in height
• Large Item image: 1260x709px
• Article Image: 510x510px

Fonts Used

We are using Rubik. This is a free Google Font you can easily change from theme Typography settings under Customize→Global→Typography

Logo Size

We are using 347x86px (2x image for retina screens), while you can really use any image size you wish.

Getting Started

After installing the theme you will be redirected to this welcome screen. Here you can install both required and recommended plugins. While recommended plugins are optional for the theme to function, consider installing them if you want the full sample content to be imported.

Required Plugins

Here you will need to install and activate the theme-specific plugin required by the theme. This will create Custom Post Types as well as various Widgets and Shortcodes. Some hosting providers block automatic installation of plugins. This means you will need to install the plugin manually as you would normally do. This plugin is located inside the /plugins/ folder in your theme archive.

Must have plugins

Under the Recommended Plugins tab you will find a list of supported plugins that are needed for the theme’s functionality. It is recommended to install and activate them before importing your sample content.

• Gutenbee: A free block collection that delivers high-end page designs and advanced capabilities. This plugin is used as a basic block builder everywhere in the theme. Please have a look at the plugin’s documentation before proceeding
• MaxSlider : Use this plugin to help you create custom sliders and use them anywhere you wish.
• One Click Import : Use this plugin to help you import your content with just one click.

All the above are mandatory while these:

• WPForms use this plugin to create a contact form, then copy the shortcode it gives you and paste it in an empty page.

plugins are complementary.

Installing Sample Content

To automate the process of importing and for a better experience we have included native support for One Click Import Plugin. From the Sample Content tab, you can click the Get Started button to navigate to the sample content import screen.

You can always find the import page under Appearance → Import Demo Data.

You can install it in the Recommended Plugins tab (2) or manually from From your WordPress dashboard

• • 1. Visit Plugins → Add New,
    2. Search for ‘One Click Demo Import’ and install the plugin,
    3. Activate ‘One Click Demo Import’ from your Plugins page.

Click on the Import Demo Data button and you are done!

Sometimes altering and editing sample content may go wrong. If you need a fresh start you can reset your WordPress installation using any popular reset Plugin. Beware: this will erase all the data you have and not just the sample content.

Then head over to the Colors subsection. Here you can

1. Add your background color
2. Add a background image (This will work as a fallback in mobile if you are using a video)
3. Change the background size, location, and attachment
4. Enable a parallax effect
5. Add your background video URL from any third party service supported by WordPress
6. or Upload your own video image (mp4, etc)
7. Add an overlay color for your hero. Opaque colors will result in the hero content not to show up. So use transparency
8. Add a primary (title) color
9. Add a secondary (subtitle)color
10. Select your button background
11. Select your button text color
12. Select your button border-color

Main content is generated using basic Gutenbee blocks, like the Heading, Column, Image, Icon Box and Quote block.  Check more on using these blocks here

Creating a Page Builder Landing Page

Create a new page and navigate to the Page Settings section. Under the Content Area tab and under the Layout subsection select the Page Builder Full Width or the Page builder Contained option. The contained template will respect your Global settings under Customize→Global→Layout Inner Width value.

If this is your homepage select it as a static frontpage from Settings→Reading.

Creating a Full width page

To add new posts to your blog, go to Pages → Add new and navigate to Content Area→Layout and under the Layout dropdown select the Fullwidth or Fullwidth Narrow option.

Creating Global Sections

Global Sections are small layout sections. Lets replicate the sections found in our demo.

Basic Global Layout: Call to action

Create a new Global Section from Global Section→Add New. Then create a new block section with any content of your preference. Then head over to Global Section Settings and

1. Select the exact position your content will appear. We offer various places you can render your content.
2. Select where you want (pages) this section to appear
3. Select some pages you need to exclude it from rendering

You can get a shortcode of this section

1. Using the ID
2. Using the slug

These shortcodes can be placed wherever you want. Even inside an HTML simple widget or the shortcode block.

Adding a new page

To add new posts to your blog, go to Pages > Add new and proceed to:

1. Add a title to your page
2. Enter the content in the editor
3. Upload a featured image by clicking “Set featured image” on the Featured Image panel
4. Disable or enable comments on the page
5. Change the page attributes and set a parent page
6. Change the theme’s page settings

Page Settings

This is the main settings panel which you can use to alter your page functionality and looks. Here you can alter your page to behave as a listing page for all custom post types or a listing page for children pages when the one editing is a parent to them. Let’s check all Tabs one by one to identify their functionality.

1. Here you can bypass all Top Bar Customizers settings
2. Differentiate a page header from the default one you created in Customizer
3. Change the Hero content and styling for specific page
4. Change the Page type and enchant its layout functionality from Content Area
5. Change the Footer section properties for a certain page
6. Change the Footer Credits section properties for a certain page

While All tabs are mimicking the Customizer behavior but for the page you are creating, under the Content Area tabs we have a set of special options for each page.

Page→Top Bar

This will Control the top bar layout of that particular page. If settings stay intact, customizer ones will be imported

1. Show or not the Top Bar for that page
2. Change the Top bar visibility

In the same section you can control the top bar content, again for this particular page.

1. Add content (shortcodes or HTML).
2. Add content on the left top bar area.
3. Add content on the right top bar area.

In the next tab you can change the Top bar colors for that page

1. Change the background color.
2. Change the border color.
3. Change the text color.
4. change the link color.
5. change the hover color of the link.

Page→Header

Here you can control the Header Layout

1. Change the Header type of the page
2. Change the Header padding of the page
3. Change the menu layout for that page
4. Change the menu padding

While, you can also add content before or next to the main menu, for that page only.

Also you can

1. Add Content like text or shortcodes before the header
2. Add Shortcodes or HTML in the main header area
3. Add a main menu
4. Add a Main menu that will appear on the right side when a Menu split is selected.

Finally, you can change all header Colors like

1. All Header area colors
2. All Logo colors
3. All Menu colors
4. All Sub menu colors

Page→Hero

Here you can control the Hero layout of the page. Leaving these settings untouched will automatically inherit all your Customizer settings under Customize→Hero

1. Choose to show the hero or not
2. Change the Hero height
3. Change the horizontal alignment of your text
4. change the vertical alignment of your text

Next, you can change the Hero Content, like:

1. Add a shortcode before the hero section
2. Add a title
3. Add a subtitle
4. Add a callout button text
5. Add a URL for your button

Along, you can change the colors or the background of the Hero section.

1. Add a background color
2. Select an image and change its position settings
3. Add an overlay color for your background image
4. Select the title text color
5. Select the subtitle text color
6. Select the button background color

Finally you can set the Hero typography settings

1. Change the title text font and font style.
2. Select the HTML tag for this element.
3. Select a secondary text font.
4. Select a secondary text HTML tag.

Page→Content Area

Here you can control the main content area Layout

1. Change the Page default layout
2. Show its title or not

Also you can

1. Set a shortcode to show before your main page content

Page→Footer

This is the main layout section for the page footer

You can select whether you can

1. Show or hide the footer

While you can also add some content before the main page footer area

1. Add some text or shortcode before the footer.

Also you can change all page footer colors, for that specific page

1. Change the Footer background
2. Add a Footer image and select its settings
3. Change the Footer Widgets colors

Page→Footer Credits

You can change the Layout of the page Footer credits

1. Showing or not the credits area

You can control the content before the page Footer Credits section:

1. Add a shortcode or text there

Finally, you can change the Footer Credits Color for this page

1. Change the background color of your Credits footer section for a specific page
2. Change the text color for the Credits footer section for a specific page
3. Change the like color for the Credits footer section for a specific page
4. Change the link hover color for the Credits footer section for a specific page
5. Change the border color for the Credits footer section for a specific page

Creating a Boat page

This is the main Boat page which can actually be any page, which can be categorized as a child page under the main parent one.

The behavior and creation is the same as a normal WordPress page, while the key ingredient is the content which consists of several blocks created using Gutenbee and the native Block Editor. You can add a custom hero image or video as described in the main Page section here

Let’s create a Simple page from Pages→Add New. Then proceed to add  a Gutenbee Container block with three columns and for each column add your content using two or more Gutenbee Heading blocks.

Then, add a custom paragraph block with a Gutenbee image block

While this is the main content, you can actually get creative and use as many blocks you like from our Gutenbee collection. Remember each boat page you  create must be the child of a parent page. You can easily do this from your Page Attributes:

This way you can easily create a navigation menu for each page using the Page Children Menu Widget

Widgets

We have handcrafted some custom widgets to help you better display your content. You will find them under Appearance→Customize →Widgets or Appearance→Widgets

Theme-Contact

Using this widget you can create a contact box including a title a map and various complementary elements with icons that will help you add more information like telephone etc about your business.

1. Add a title for your Contact widget.
2. Add a map code (iframe).
3. Add a contact title
4. Create new complementary elements.
5. Add an icon code (from fontawesome.io) and some text along.

Theme-Tabular Data

This widget allows you to create a small Schedule table with extra contextual information.

1. Add a title for your widget
2. Add some complementary text. You can use HTML tags also if you wish.
3. Add a new item
4. Add your item Label.
5. Add the item value
6. Remove the item

Theme (home)-Latest Posts

This widget is built to help you display your latest posts in your home widget area.

1. Add a title.
2. Add a subtitle.
3. Select the category your need to display the latests posts from.
4. Show random posts instead.
5. Change the post number.
6. Adjust the number of columns for your content.
7. Show carousel like widget with your posts.

Theme-Callout

This is a simple Callout widget, that will allow you to add a text with a button in any sidebar you want.

1. Add a widget title
2. Add a Title for your Callout widget.
3. Add a Subtitle for your Callout widget.
4. Select a Button text
5. Select a button URL.

Theme-Buttons

This widget will help you render a list of buttons.

1. Select the Widget Title.
2. Add a new button.
3. Add the button title.
4. Add a button subtitle.
5. Add a button icon.
6. Add a button link.
7. Remove the button.

Theme-Page Children Menu

When you have a parent page, in any of its children that this widget is present it will create a menu linking to other children of the same parent page.

1. Widget Title
2. Hierarchy settings.

Theme-Social Icons

This widget displays your site’s social icons. In order to set them up, you need to visit Appearance→ Customize → Social → Content and provide the appropriate URLs where desired.

Theme(home)-Post Type Items

This widget is built to help you display any post you wish in your Homepage Widget area.

1. Add a title.
2. Add a subtitle
3. Select the post type.
4. Select the output columns.
5. Add the Item you wish to output.
6. Select the Item from the drop-down menu.

Theme-Callout

This will allow you to display a Hero Callout specially designed for your frontpage sidebar.

1. Add a title for your widget.
2. Add the main title.
3. Add some text
4. Select your button text
5. Select a URL for you button

Shortcodes

You can use these shortcodes in any HTML/shortcode reserved area:

[site-socials]

This shortcode will display the site’s social icons. You can edit these icons from Customize→Socials→Content

[site-search]

Displays a search icon which, when clicked, drops down a search form from the top of the page.

[site-title]

Displays the site title.

[site-tagline]

Displays the site tagline.

[custom-menu name="Menu name"]

Displays the *top level items* of a menu. Inside the name=”” parameter there should be the *name* of a user-created menu, not its slug. e.g. [custom-menu name=”Main Menu”]

[minicart-button]
This will display the mini cart button if Woocommerce is enabled.

Hooks

Hooks will allow you to add extra functionality to various areas inside the theme. For example, you might need to add a simple ad banner or text after each post, or after your header! Hooks will help you achieve this.

Check this WordPress Hooks API guide to make yourself familiar with Hooks (actions/filters etc).

Examples if you don’t want to use Global Layout post type

add_action( 'lefkada_head_mast_before', 'lefkada_custom_script_before_header' );

function lefkada_custom_script_before_header() {   
 // Your PHP goes here
}

add_action( 'lefkada_after_header', 'lefkada_custom_html_after_header' );
function lefkada_custom_html_after_header() { ?>      
<!-- Your HTML goes here -->
<?php }

Still have questions or problems setting up your CSSIgniter Theme? We will be happy to help you out! Please visit our support Hub 

About Vigour WordPress theme

Vigour is a powerful Gym / Yoga / Studio theme.

Image Sizes

The minimum recommended image sizes for Vigour are:

• • Post thumbnail: 816x459px
  • Item thumbnail: 615x346px
  • Media Item tall: 615px unlimited in height
  • Large Item image: 1260×709,
  • Article Image: 510x510px
  • Hero image: 1700x956px

WooCommerce

• Thumbnail Square: 750x750px
• Single Product:560x560px
• Gallery Product:150x150px

Fonts Used

We are using IBM Plex Serif and Poppins. These are Google Fonts that you can find and test there
You can change fonts from Customize→Global→Typography.

Getting Started

After installing the theme you will be redirected to this welcome screen. Here you can install both required and recommended plugins. While recommended plugins are optional for the theme to function, consider installing them if you want the full sample content to be imported.

Required Plugins

Here you will need to install and activate the theme-specific plugin required by the theme. This will create Custom Post Types as well as various Widgets and Shortcodes. Some hosting providers block the automatic installation of plugins. This means you will need to install the plugin manually as you would normally do. This plugin is located inside the /plugins/ folder in your theme archive.

Must have plugins

Under the Recommended Plugins tab you will find a list of supported plugins that are needed for the theme’s functionality. It is recommended to install and activate them before importing your sample content.

• WooCommerce: To enable eCommerce functionality for your website
• GutenBee: A free set of awesome Gutenberg blocks and advanced capabilities.
• MaxSlider : Use this plugin to help you create custom sliders and use them anywhere you wish shortcodes.
• One Click Import : Use this plugin to help you import your content with just one click.
• Category Order and Taxonomy Terms Order : Use this plugin to help you order your taxonomies via drag and drop

All the above are mandatory while these:

• WPForms use this plugin to create a contact form, then copy the shortcode it gives you and paste it in an empty page.

plugins are complementary.

Installing Sample Content

To automate the process of importing and for a better experience we have included native support for One Click Import Plugin. From the Sample Content tab, you can click the Get Started button to navigate to the sample content import screen.

You can always find the import page under Appearance → Import Demo Data.

You can install it in the Recommended Plugins tab (2) or manually from From your WordPress dashboard

• • 1. Visit Plugins →Add New,
    2. Search for ‘One Click Demo Import’ and install the plugin,
    3. Activate ‘One Click Demo Import’ from your Plugins page.

Click on the Import Demo Data button and you are done!

Sometimes altering and editing sample content may go wrong. If you need a fresh start you can reset your WordPress installation using any popular reset Plugin. Beware: this will erase all data you have and not just the sample content.

Customizing Your Theme

All theme’s customizations and settings can be done via WordPress’s built-in Customizer. If you haven’t used it or want to learn more about it, please read this article.

Go to Appearance → Customize and you will see this:

Let’s take a look at the options each tab gives you.

Global

Global section will allow you to control the layout, colors, and typography that will apply everywhere in the theme:

Global→Layout

Let’s have a look at each option this section provides:

1. Apply a full width or boxed container for all content.
2. Control the inner full content width.
3. Control the content width from (1 to 12). For example, 8 means that your content width will have the 8/12 of your Inner Site Width while the other will be reserved for the sidebar.
4. Change the sidebar width. 5 means that your content width will have the 5/12 of your Inner Site Width while the other will be reserved for the main content.

When selecting a Boxed layout you will get this screen:

1. You can switch layouts anytime you wish.
2. Control the outer width of your main content.
3. Control the inner width of your main content.

Global → Colors

This section will allow you to change the background color / image as well as all your basic theme elements, like your links, forms, headings, buttons colors:

1. Change the body background color.
2. Add or remove background image.
3. Control the background location and size.
4. When using a boxed layout you can select the inner background color.
5. Select the boxed layout background image.
6. Also you can control the boxed background image location and size.

Typography

Customizing your fonts is included natively in the theme:

1. Enable the use of Google Fonts. Not checking this option will give you web safe font controls for your main body text.
2. Change the main font family you need to use.
3. Change your settings depending on the visitor viewport. This gives you the advantage of having different font sizes for Desktop, Tablet and mobile devices.
4. Change the font size and line height.
5. Change the text type and your letter spacing.

Top Bar

Top Bar section will allow you to control the area before your main header. This area contains various elements, like search, social icons and placeholders via shortcodes as well as informatory text.

You can control its layout, content, colors and typography directly via the customizer.

Top Bar → Layout

In this section you can:

1. Show / hide the top bar.
2. Change the top bar visibility in mobile devices.
3. Change the padding of the top bar in desktop, tablet, mobile.
4. Arrange the top and bottom distance of the top bar. The chain button will allow you to change these values equally.

Top Bar → Content

Here you can control what the top bar will actually have as content:

1. Control the Left Content area, using various shortcodes or text.
2. Control the Right Content area again using shortcodes or text.

You can find all theme’s shortcodes here.

Top Bar → Colors

Here you can control all related colors of each element that renders in the top bar.

Top Bar → Typography

Controlling typography is quite simple as well. In this section you can:

1. Change the main font family you need to use.
2. Change the font size and Line height.
3. Change the text type (uppercase, lowercase) and your letter spacing.
4. Change your settings depending on the visitor viewport. This gives you the advantage of having different font sizes for Desktop, Tablet and mobile devices.

Header

Here you can control the basic Layout, Content, Colors and Typography of your header. You can also control if you need your header to stick to the top when scrolling.

Header → Layout

Here you can control the basic structure of your header area.

In detail you can:

1. Control the header type. Normal means the header will not cover the hero, while being transparent will do! (Even if you don’t have transparency setup from your Header Colors section)
2. Make the header cover the full width of the screen.
3. Change the Header top and bottom padding and lock these values to behave the same.
4. Change the padding section in any device type.

Header → Content

While your header actually has the main menu attached you can add any text/shortcode you wish before or after the main menu. Add a social icon shortcode for example.

Header → Colors

Here you can control all header colors. Pay special attention to transparency control when using the Transparent header type.

Header→Sticky Colors

Here you can control the colors for your sticky header.

Header→Typography

Here you can control the Main Menu Font style.

Also in the same section, you can change (if you are using a text logo):

1. The text Logo font family and style.
2. The tagline font family and style.

Site Identity

Here you can change the logo and favicon as well as the title and description. Use the appropriate fields to add your information, show or hide your site title and subtitle and upload your logo and site icon images.

1. Select an image Logo.
2. Select an alternate logo that will appear either when your header is sticky with different background color, or when your header has the transparent type selected. This extra field will ensure maximum contrast in any case.
3. Limit the size logo in half (you will need to use a 2x image) for retina devices.
4. Add your site title.
5. Add your site tagline.
6. Show/hide your site title.
7. Show/hide your tagline.

For your main site icon, you can select any image you want as long as it’s 512x512px in width and height and it’s square.

Hero

This is the basic section before the contents of your page and you can control the Layout, Content colors and typography of this particular section.

Hero→Layout

Here you can:

1. Show or hide the hero section
2. Change the section visibility depending on the device viewport size.
3. Change the hero height,
4. Control the hero height in desktop/mobile/tablet
5. Change the hero padding and lock the proportions in order to change them in tandem.
6. Control the hero padding in desktop/mobile/tablet
7. Control the horizontal alignment of your hero content.
8. Control the vertical alignment of your hero content.

Hero→Colors

Here you can:

1. Add a background color.
2. Add a background image and control your image settings and position.
3. Use an overlay background color for your image to increase the contrast for your content.
4. Change the primary text color.
5. Change the secondary text color.

Hero→Content

This is the basic Hero content section:

1. Have a global title for the entire site
2. Have a global subtitle for the entire site
3. Change the title in category/tag archives
4. Change the subtitle in category/tag archives

Hero→Typography

Here you can control:

1. Your primary title heading type. This can be any suggested HTML tag
2. Change the primary text font family and settings
3. Change the primary text settings in mobile, desktop, tablet viewport
4. Your subtitle HTML tag
5. Change the secondary text font family and settings
6. Change the secondary text settings in mobile, desktop, tablet viewport

Blog

This tab allows you to customize your blog and post options.

Blog→Layout

Here you can change your single post and archive (category and tags) looks.

1. Change the main blog page Layout.
2. Change your archive layout type.
3. Change the pagination method.
4. Change the Related post columns.

Blog→Content

Here you can control which elements you want to show/hide in your Single Post pages and Archives:

For Archives:

1. Change the excerpt length in words
2. Show or hide the featured image
3. Show or hide the post title
4. Show or hide the post meta
5. Show or hide the content
6. Show or hide the Read more button

While in Single Posts you can:

1. Show or hide featured images.
2. Show or hide the title.
3. Show or hide meta information.
4. Show tags.
5. show post pagination.
6. Show the author box.
7. Show related posts.
8. Show comments.

Blog→Typography

Here you can change your Archive typography:

1. Change the archive heading HTML tag.
2. Change the post title font family
3. Change the font size and other settings in different viewports
4. Change the post meta font family and settings
5. Change the font size and other settings in different viewports

Same applies in single post typography:

Here you can:

1. Change the post heading HTML tag
2. Change the Font family and settings of the post title
3. Change the post meta font family and settings
4. Change the font size in various viewports

Sidebar

Here you can change your sidebar options.

Sidebar→Layout

Under the Layout section you can:

1. Change the Sidebar padding in any possible viewport
2. Change the widget padding in both mobile/desktop/tablet.
3. Change the widget title padding
4. Change the widget bottom margin.

Sidebar→Colors

Here you can customize all sidebar and widget colors.

Sidebar→Typography

1. Change the sidebar widget text family and settings.
2. Change the sidebar widget text size in Desktop/Mobile/Tablet.
3. Change the sidebar widget title font family and settings.
4. Change the sidebar widget title font size in Desktop/Mobile/Tablet

Footer

Footer section also has a fully customizable layout, color, and typography section:

Footer→Layout

Here you can:

1. Show or hide the footer area
2. Select the footer visibility in Mobile devices
3. Select the footer columns you need
4. Make the footer full width
5. Change the Footer padding
6. Change the Footer padding in all possible viewports
7. Change the Footer widget titles padding and
8. Change the Footer widget titles padding in Mobile devices.

Footer→Colors

Here you can change most of the footer and footer contents colors. While in general, you can:

1. Add a background color.
2. Set a background image and customize its appearance.
3. Select your Footer Widgets colors

Footer → Typography

1. Change the title font
2. Change text options for the type of device
3. Change the main text font
4. change text options for the type of device

Footer Credits

After the main footer area, we have reserved a Footer Credits section you can add your copyright text or any content you wish via shortcodes.

Footer Credits→Layout

Here you can

1. Show or hide the footer credits
2. Change credit visibility in mobile devices

Footer Credits→Content

Currently, there are two areas you can use to add your content. Both support HTML elements.

Footer Credits→Colors

Here you can control all Footer Credits colors.

Footer Credits→Typography

This section gives you the option to change the credits text style.

1. Change the Font family and font settings of the Footer credits section
2. Control all font settings in any possible viewport.

Social

In this section You can add your Social Network URLs. These icons will be displayed in the Theme-Social Icons Widget automatically and wherever the Social Icon shortcode appears

Here you can add your social network URL and change your icon colors

Social→Layout

1. Select if you wish to open your links in new tabs
2. Change the font size
3. Change the icon size

Social→Colors

Change the Social icon and background colors

Social→Content

Add you social networks in the content area.

Utilities

This section provides control over the Lightbox (gallery popup) and the Back to top button.

Utilities→Lightbox

Here you can switch the theme Lightbox off, if you need to use a third party one, or simply nothing.

Utilities→Back to top button

This section will help you

1. Enable the back to top button
2. Change the button visibility
3. Change the button position and
4. Change the button position in various viewports
5. Select its background color
6. Change its icon color

Menus

Here you can create and assign menus to the theme. To learn more about menu creation check out the Codex’s menu user guide here.

If you want to add a custom button next to your menu, you will need to add the nav-button class to the menu element you want to highlight

You can enable the CSS Classes section from Screen Options (More info here http://www.cssigniter.com/docs/article/screen-options/).

WooCommerce

In this tab, you can change the number of products on the shop listing page and control your WooCommerce Settings.

Under the Product Catalog section you can:

1. Choose what you want to render in the main shop page.
2. Choose what you want to display in the category pages
3. Change the default product sorting
4. Change products per row
5. Select how many rows of products you need per page
6. Change the sidebar location
7. Show or hide, categories
8. Show or hide star ratings
9. Show or hide hero sections in category/tag listings.

You can also change your Single Product layout from the Single Product Section. Here you can control if you need to have a sidebar or not in your products.

Widgets

Through this tab, you can add widgets to the theme’s sidebars. The theme features several widgetized areas to provide you maximum flexibility when displaying your content. You can see all of them from Appearance→Widgets.

Homepage Settings

Use this tab to make the Home page your static front page so you can take advantage of the homepage template we have created for you. Here you can also set the Blog page to be your default posts page.

Additional CSS

In this tab, we host the custom CSS panel which you can use to insert styles for elements not covered in the rest of the tabs.

Creating the Front Page

Go ahead and create a new page then Select from Page Settings the Page Builder Contained Layout! Then save the page and select it as a static front page from Settings→Reading.  While as a page builder serves the new WordPress editor along with our Gutenbee plugin.

Now, in order to add the Slider first create a Slider using MaxSlider plugin  and then add its shortcode to your Page Settings box under Content–>Content Area as shown below.

Frontpage Content

You can recreate the Frontpage using Gutenbee custom blocks.First there is a Gutenbee container with two columns https://prnt.sc/sljx5b. One column has an image while the other has a simple Gutenbee title and Gutenbee paragraph block Next there is the Gutenbee post type block (We have selected the Classes custom post type to show up)
After that we have yet a Gutenbee container block with two columns again. One with a Gutenbee paragraph and one with a Gutenbee image. After that there a Gutenbee Custom type block with testimonial custom post type selected. Then there is a simple video block and finally a GutenBee Post Types block with the latest posts. Before all blocks there is a plain Gutenbee title block.

Creating a Schedule page

Create a new page like described here and then navigate to Content Area→Layout and under the Layout dropdown select the Full Width option.
The Schedule page can become any page using the [timetable] shortcode. This shortcode will display your weekly schedule:

[timetable]

Adding a new Class

Navigate to Class→Add New and here you can control your trainers for each class

1. Add a Class name
2. Add some content or edit the service using your favorite page builder or the default WordPress one
3. Organize your Classes using categories.
4. Set a basic Featured image

In your Classes, you can assign certain trainers (which will add in a next section) from Class Settings→Classes.

1. Here you add a trainer for your class(more that one).
2. Select the trainer from the dropdown.

Adding a Time Slot for a Class

Time Slots is the basic taxonomy for your Sessions. Using Time Slots is quite easy, but you will need to have a parent category (Day for example) to group all your smaller slots (hours).

1. Day 1 is the parent category which holds smaller time fragments
2. Hours behave like children or the Day 1 category

In order to add a child category, you will need to edit the category and select a parent one like shown below

Creating the Classes Listing Page

First Create a new page as described here then navigate to Content Area→Layout and under the Layout dropdown select the Classes Listing option.

1. Select the page Layout
2. Show or hide the page title
3. Show or not the sidebar in the Listing page
4. Select a category that will be the base for your items. Leaving this blank will fetch all of them.
5. Change the grid loading effect
6. Change the grid spacing
7. Change the number of columns for your list
8. Use a masonry effect for different image sizes.
9. Use category filtering. This will display all categories as filter options and will also show all your listings
10. Change the items per page,-1 will show them all, while not having anything here will default to the Settings→Reading Post to show option.

Adding a new Trainer

Speaker items are Custom post types that represent your Session speakers and you can add from Trainer →Add New. Don’t forget to add a featured image for your Trainer since it will be used as the main image in all theme listings related to Trainers.

Trainer settings consist of seven main customization tabs. These are exactly the same options as Pages but with certain functionality to match the post type. These tabs have the same behavior as the Page settings.

Adding Trainer Categories

Trainers have a custom taxonomy to help you organize them according to your preference. By default, you can control the page look that your archive will inherit when rendering

Creating a Trainer Page

Create a new page as described here then navigate to Content Area→Layout and under the Layout dropdown select the Trainers Listing option.

1. Select the page Layout
2. Show or hide the page title
3. Show or not the sidebar
4. Select a category that will be the base for your items. Leaving this blank will fetch all of them.
5. Change the grid loading effect
6. Change the grid spacing
7. Change the number of columns for your list
8. Use a masonry effect for different image sizes.
9. Use category filtering. This will display all categories as filter options and will also show all your listings
10. Change the items per page,-1 will show them all, while not having anything here will default to the Settings→Reading Post to show option.

Creating a Testimonial Page

Create a new page as described here then navigate to Content Area→Layout and under the Layout dropdown select the Testimonial Listing option.

You can control:

1. Testimonial Listing
2. Show / Hide the the title
3. The columns you need to display your testimonials
4. How many testimonials you want to display

Simple Testimonial

To add a Testimonial navigate to Testimonial→Add New and here you can create a new Testimonial item. Don’t forget to set a basic Featured image that will be used in your Testimonial listings.

In Testimonials, you can add citations under the Testimonial Settings module (1).

Creating a Pricing Plan

To add new posts to your blog, go to Pricing Plans → Add new and under Plan Settings

1. Select a reference name of your pricing plan(only visible to you)
2. Select the display name of the plan
3. Add the actual price (you can add any currency you want there).
4. Choose a category for your Plan
5. Publish/Update your Plan

All these items will be rendered using the [pricelist] shortcode

Create a Pricing Plan page

You can use any page to render your pricing plan just by adding the

[pricelist]

shortcode, which will fetch automatically all data needed from your Pricing Plans Section

Creating a Full-width page

To add new posts to your blog, go to Pages → Add new and navigate to Content Area→Layout and under the Layout dropdown select the Fullwidth or Fullwidth Narrow option.

Adding Products

Earlier we saw how we can install WooCommerce. Let’s take a brief look at creating products. Start by going to Products > Add Product.

1. First, we need to fill in the product title,
2. Add the product’s description,
3. In the Product Data metabox you will fill all the required product info, such as price, inventory, tax and shipping information and more,
4. Fill in a short product description
5. Add product gallery images to upload additional photos for the product,
6. Click Set Product Image to add the product’s featured image
7. Add Tags to your product to make filtering easier
8. Add categories for your product

This is a brief overview of adding products to your site, the product post type is a complex one, if you haven’t worked with it before please consider reading the official documentation on how to add and manage products here.

Setup the shop page

Once you install and activate WooCommerce all the default pages will be created, including the shop listing page. To make sure this was properly configured go to WooCommerce > Settings > Products > Display and check if the Shop page is selected in the Shop Page dropdown.

If the drop-down is empty, locate the Shop page and select it. If you can’t find a page named Shop, just go to Pages > Add New create one and then set it as your shop page. Add this page to your menu to give your visitors access to the product listing.

Creating Global Sections

Global Sections are small layout sections. Let’s replicate the sections found in our demo.

Basic Global Layout: Call to action

Create a new Global Section from Global Section→Add New. Then create an Elementor section with any content of your preference. Then head over to Global Section Settings and

1. Select the exact position your content will appear. We offer various places you can render your content. For a visual guide have a look here or add this ?show_hooks on your site URL when logged in.
2. Select where you want (pages) this section to appear
3. Select some pages you need to exclude it from rendering

You can get a shortcode of this section

1. Using the ID
2. Using the slug

These shortcodes can be placed wherever you want. Even inside an HTML simple widget.

Adding a new page

To add new posts to your blog, go to Pages > Add new and proceed to:

1. Add a title to your page
2. Enter the content in the editor
3. Change the page settings
4. Upload a featured image by clicking “Set featured image” on the Featured Image panel
5. once finished clicking the Publish button to publish the post

Page Settings

This is the main settings panel which you can use to alter your page functionality and looks. Here you can alter your page to behave as a listing page for all custom post types or a listing page for children pages when the one editing is a parent to them. Lets check all Tabs one by one to identify their functionality.

1. Here you can bypass all Top Bar Customizers settings
2. Differentiate a page header from the default one you created in Customizer
3. Change the Hero content and styling for specific page
4. Change the Page type and enchant its layout functionality from Content Area
5. Change the Footer section properties for a certain page
6. Change the Footer Credits section properties for a certain page

While All tabs are mimicking the Customizer behavior but for the page you are creating, under the Content Area tabs we have a set of special options for each page.

Page→Top Bar

This will Control the top bar layout of that particular page. If settings stay intact, customizer ones will be imported

1. Show or not the Top Bar for that page
2. Change the Top bar visibility

In the same section, you can control the top bar content, again for this particular page.

1. Add content (shortcodes or HTML).
2. Add content on the left top bar area.
3. Add content on the right top bar area.

In the next tab, you can change the Top bar colors for that page

1. Change the background color.
2. Change the border color.
3. Change the text color.
4. change the link color.
5. change the hover color of the link.

Page→Header

Here you can control the Header Layout

1. Change the Header type of the page
2. Change the Header padding of the page
3. Change the menu layout for that page
4. Change the menu padding

While, you can also add content before or next to the main menu, for that page only.

Also, you can

1. Add Content like text or shortcodes before the header
2. Add Shortcodes or HTML in the main header area
3. Add the main menu
4. Add the Main menu that will appear on the right side when a Menu split is selected.

Finally, you can change all header Colors like

1. All Header area colors
2. All Logo colors
3. All Menu colors
4. All Sub menu colors

Page→Hero

Here you can control the Hero layout of the page. Leaving these settings untouched will automatically inherit all your Customizer settings under Customize→Hero

1. Choose to show the hero or not
2. Change the Hero height
3. Change the horizontal alignment of your text
4. change the vertical alignment of your text

Next, you can change the Hero Content, like:

1. Add a shortcode before the hero section
2. Add a title
3. Add a subtitle
4. Add a callout button text
5. Add a URL for your button

Along, you can change the colors or the background of the Hero section.

1. Add a background color
2. Select an image and change its position settings
3. Add an overlay color for your background image
4. Select the title text color
5. Select the subtitle text color
6. Select the button background color

Finally, you can set the Hero typography settings

1. Change the title text font and font style.
2. Select the HTML tag for this element.
3. Select a secondary text font.
4. Select a secondary text HTML tag.

Page→Content Area

Here you can control the main content area Layout

1. Change the Page default layout
2. Show its title or not

You can

1. Set a shortcode to show before your main page content

Page→Footer

This is the main layout section for the page footer

You can select whether you can

1. Show or hide the footer

While you can also add some content before the main page footer area

1. Add some text or shortcode before the footer.

You can change all page footer colors, for that specific page

1. Change the Footer background
2. Add a Footer image and select its settings
3. Change the Footer Widgets colors

Page→Footer Credits

You can change the Layout of the page Footer credits

1. Showing or not the credits area

You can control the content before the page Footer Credits section

1. Add a shortcode or text there

Finally, you can change the Footer Credits Color for this page

1. Change the background color of your Credits footer section for a specific page
2. Change the text color for the Credits footer section for a specific page
3. Change the like color for the Credits footer section for a specific page
4. Change the link hover color for the Credits footer section for a specific page
5. Change the border color for the Credits footer section for a specific page

Creating a page for your posts

To set up your blog page you can go to Pages → Add New and create a page named Blog. Then navigate to Settings → Reading and set that page as your posts page.

Now you can add that page to your menu to give your visitors easy access to all your posts.

Here you can control via its Page Settings section how the hero behaves in the blog page but it will also affect the hero section of the following pages: Categories, tags, author archives & date archives. If you don’t change anything on this page, Customizer settings will be respected.

Handling Hero images in Categories / Tags

You can change in each category your Hero background image and title to your preference, from Posts→Categories and Posts→Tags under the Hero section. If no Hero image is selected, the category/tag will default to the Blog page values, and if no blog page settings exist then it will inherit the Customizer→Hero values.

Lets have a quick look at how to change the Hero background for every category. First, navigate to Posts→Categories and add a new or edit the category you need to change. Then scroll down to this screen:

1. You can set your taxonomy title
2. Change your taxonomy subtitle
3. Select a background color
4. Upload a background image for your hero
5. Change the background image settings

Following this section, there is a color selection for every aspect of the taxonomy hero

while scrolling more you will get this

1. You can change the primary text font (title)
2. The primary font HTML tag
3. The secondary text font
4. The secondary font HTML tag

These settings are the same for Tag archives also.

Widgets

We have handcrafted some custom widgets to help you better display your content. You will find them under Appearance→Customize →Widgets or Appearance→Widgets

Theme-Contact

Using this widget you can create a contact box including a title a map and various complementary elements with icons that will help you add more information like telephone etc about your business.

1. Add a title for your Contact widget.
2. Add a map code (iframe).
3. Add a contact title
4. Create new complementary elements.
5. Add an icon code (from fontawesome.io) and some text along.

Theme-Tabular Data

This widget allows you to create a small Schedule table with extra contextual information.

1. Add a title for your widget
2. Add some complementary text. You can use HTML tags also if you wish.
3. Add a new item
4. Add your item Label.
5. Add the item value
6. Remove the item

Theme (home)-Latest Posts

This widget is built to help you display your latest posts in your home widget area.

1. Add a title.
2. Add a subtitle.
3. Select the category you need to display the latest posts from.
4. Show random posts instead.
5. Change the post number.
6. Adjust the number of columns for your content.
7. Show carousel-like widget with your posts.

Theme-Callout

This is a simple Callout widget, that will allow you to add a text with a button in any sidebar you want.

1. Add a widget title
2. Add a Title for your Callout widget.
3. Add a Subtitle for your Callout widget.
4. Select a Button text
5. Select a button URL.

Theme-Buttons

This widget will help you render a list of buttons.

1. Select the Widget Title.
2. Add a new button.
3. Add the button title.
4. Add a button subtitle.
5. Add a button icon.
6. Add a button link.
7. Remove the button.

Theme-Page Children Menu

When you have a parent page, in any of its children that this widget is present it will create a menu linking to other children of the same parent page.

1. Widget Title
2. Hierarchy settings.

Theme-Social Icons

This widget displays your site’s social icons. In order to set them up, you need to visit Appearance→ Customize → Social → Content and provide the appropriate URLs where desired.

Theme(home)-Post Type Items

This widget is built to help you display any post you wish in your Homepage Widget area.

1. Add a title.
2. Add a subtitle
3. Select the post type.
4. Select the output columns.
5. Add the Item you wish to output.
6. Select the Item from the drop-down menu.

Theme (home) – Text

This will allow you to display a Hero Callout specially designed for your frontpage sidebar.

1. Add a title for your widget.
2. Add the main title.
3. Add some text
4. Select your button text
5. Select a URL for you button

Shortcodes

You can use these shortcodes in any HTML/shortcode reserved area:

[site-socials]

This shortcode will display the site’s social icons. You can edit these icons from Customize→Socials→Content

[site-search]

Displays a search icon which, when clicked, drops down a searchform from the top of the page.

[site-title]

Displays the site title.

[site-tagline]

Displays the site tagline.

[custom-menu name="Menu name"]

Displays the *top level items* of a menu. Inside the name=”” parameter there should be the *name* of a user-created menu, not its slug. e.g. [custom-menu name=”Main Menu”]

[minicart-button]

Displays a cart button which, when clicked, expands into a minicart. Please note, this shortcode is only available when the WooCommerce plugin is activated.

[menu-items]

Theme Specific Shortcodes

Creating a Timetable for your Classes step by step

Lets start by creating some Time slots for our Classes. Navigate to Classes→Time Slots and create a new item that we will call Day 1 (since it will behave as our first day for this class). Then create some child Time slots for our Day 1 item that will have a time format, so even if they are not actually time objects they will look like 8:00, 9:00, 10:00 etc. Then create some Trainers from Trainers→Add New.  Finally, create some class items and select for each a Time Slot (from the Day 1 parent taxonomy), and add a Trainer. After creating a series of Classes, we can easily display our content as a conference table using the [timetable] shortcode on any page we want to.

Elementor Widgets

Vigour comes with custom Elementor widgets which have the same functionality as its widgets, making landing pages easier to create.

Main Element

This is your Swiss knife when using Elementor plugin. With Vigours Element you can render all your content from all custom post types and their taxonomies(if any) as well as manually get any part of your content using a search keyword. Let’s have a quick look

1. Select in how many columns your content will render
2. Select the main source type for your content. Notice, you can select a manual mode, where you will get the source based on you search criteria
3. Filter your source content by author.
4. Select a category. If blank all categories will be shown.
5. Filter by tags.
6. Exclude posts you dont want to show
7. Select how many posts you want to show
8. Select the offset of the rendered posts (2 for example, will leave the first two).
9. Select the order by value (Date, etc)
10. Select the order of your results (descending etc)

Class Element

This Element will let you display any Sponsor category your wish in any location inside Elementor page builder.

1. Select one or all Sponsor Categories
2. Select the number of columns they will be rendered
3. Link sponsors to their external URLs

Schedule Element

With this element, you can easily add your schedule menu by simply selecting its Time Slot.

Gutenbee Blocks

Gutenbee is a set of blocks you can use as a plugin in any theme you wish. Vigour supports this plugin natively so check all blocks and how to use them.

Hooks

Hooks will allow you to add extra functionality to various areas inside the theme. For example, you might need to add a simple ad banner or text after each post, or after your header! Hooks will help you achieve this.

Check this WordPress Hooks API guide to make yourself familiar with Hooks (actions/filters etc).

Here are all theme hooks

Examples if you dont want to use Global Layout post type

add_action( 'projektor_head_mast_before', 'projektor_custom_script_before_header' );

function projektor_custom_script_before_header() {   
 // Your PHP goes here
}

add_action( 'projektor_after_header', 'projektor_custom_html_after_header' );
function projektor_custom_html_after_header() { ?>      
<!-- Your HTML goes here -->
<?php }

Still have questions or problems setting up your CSSIgniter Theme? We will be happy to help you out! Please visit our support Hub 

About Korina

Korina is a WordPress theme for restaurants and cafes!

Image Sizes

The minimum recommended image sizes for Korina are:

• Post thumbnail: 960×542
• Item thumbnail: 615x346px
• Media Item tall: 615px unlimited in height
• Large Item image: 1260x709px
• Article Image: 510x510px
• Small Square Image: 200x200px
• Hero image: 1700x956px

Fonts Used

We are using Cormorant Garamond and Poppins. These are Google Fonts that you can find and test here

Getting Started

After installing the theme you will be redirected to this welcome screen. Here you can install both required and recommended plugins. While recommended plugins are optional for the theme to function, consider installing them if you want the full sample content to be imported.

Required Plugins

Here you will need to install and activate the theme specific plugin required by the theme. This will create Custom Post Types as well as various Widgets and Shortcodes. Some hosting providers block automatic installation of plugins. This means you will need to install the plugin manually as you would normally do. This plugin is located inside the /plugins/ folder in your theme archive.

Must have plugins

Under the Recommended Plugins tab you will find a list of supported plugins that are needed for the theme’s functionality. It is recommended to install and activate them before importing your sample content.

• Elementor: A free page builder that delivers high-end page designs and advanced capabilities.
• MaxSlider : Use this plugin to help you create custom sliders and use them anywhere you wish shortcodes.
• One Click Import : Use this plugin to help you import your content with just one click.

All the above are mandatory while these:

• WPForms use this plugin to create a contact form, then copy the shortcode it gives you and paste it in an empty page.
• WP Instagram Widget: Use the latest version of this plugin to help you display your Instagram feed in any of the theme’s sidebars.

plugins are complementary.

Installing Sample Content

To automate the process of importing and for a better experience we have included native support for One Click Import Plugin. From the Sample Content tab, you can click the Get Started button to navigate to the sample content import screen.

You can always find the import page under Appearance → Import Demo Data.

You can install it in the Recommended Plugins tab (2) or manually from From your WordPress dashboard

• • 1. Visit Plugins → Add New,
    2. Search for ‘One Click Demo Import’ and install the plugin,
    3. Activate ‘One Click Demo Import’ from your Plugins page.

Click on the Import Demo Data button and you are done!

Sometimes altering and editing sample content may go wrong. If you need a fresh start you can reset your WordPress installation using any popular reset Plugin. Beware: this will erase all data you have and not just the sample content.

Customizing Your Theme

All theme’s customizations and settings can be done via WordPress’s built-in Customizer. If you haven’t used it or want to learn more about it, please read this article.

Go to Appearance → Customize and you will see this:

Let’s take a look at the options each tab gives you.

Global

Global section will allow you to control the layout, colors and typography that will apply everywhere in the theme:

Global→Layout

Let’s have a look at each option this section provides:

1. Apply a full width or boxed container for all content.
2. Control the inner full content width.
3. Control the content width from (1 to 12).For example 8 means that your content width will have the 8/12 of your Inner Site Width while the other will be reserved for the sidebar.
4. The sidebar width.For example 5 means that your content width will have the 5/12 of your Inner Site Width while the other will be reserved for the main content.

When selecting a Boxed layout you will get this screen:

1. You can switch layouts anytime you wish.
2. Control the outer width of your main content.
3. Control the inner width of your main content.

Global → Colors

This section will allow you to change the background color / image as well as all your basic theme elements, like your links, forms, headings, buttons colors:

1. Show the global fixed border
2. Change the fixed border color
3. Change the body background color.
4. Add or remove background image.
5. Select the Accent color
6. Select the main text color
7. Select the border color

Under this section you can change your Heading, Forms and Link colors also!

Typography

Customizing your fonts is included natively in Korina:

1. Enable the use of Google Fonts. Not checking this option will give you web safe font controls for your main body text.
2. Change the main font family you need to use.
3. Change your settings depending on the visitor viewport. This gives you the advantage of having different font sizes for Desktop, Tablet and mobile devices.
4. Change the font size and Line height.
5. Change the text type and your letter spacing.

Top Bar

Top Bar section will allow you to control the area before your main header. This area contains various elements, like search, social icons and placeholders via shortcodes as well as informatory text.

You can control its layout, content, colors and typography directly via the customizer.

Top Bar → Layout

In this section you can:

1. Show / hide the top bar.
2. Change the top bar visibility in mobile devices.
3. Change the padding of the top bar in desktop, tablet, mobile.
4. Arrange the top and bottom distance of the top bar. The chain button will allow you to change these values equally.

Top Bar → Content

Here you can control what the top bar will actually have as content:

1. Control the Left Content area, using various shortcodes or text.
2. Control the Right Content area again using shortcodes or text.

You can find all theme’s shortcodes here.

Top Bar → Colors

Here you can control all related colors of each element that renders in the top bar.

Top Bar → Typography

Controlling typography is quite simple as well. In this section you can:

1. Change the main font family you need to use.
2. Change the font size and Line height.
3. Change the text type (uppercase, lowercase) and your letter spacing.
4. Change your settings depending on the visitor viewport. This gives you the advantage of having different font sizes for Desktop, Tablet and mobile devices.

Header

Here you can control the basic Layout, Content, Colors and Typography of your header. You can also control if you need your header to stick to the top when scrolling.

Header → Layout

Here you can control the basic structure of your header area.

In detail you can:

1. Control the header type. Normal means the header will not cover the hero, while being transparent will do! (Even if you don’t have transparency setup from your Header Colors section)
2. Make the header cover the full width of the screen.
3. Change the Header top and bottom padding and lock these values to behave the same.
4. Change the padding section in any device type.

Header → Content

While your header actually has the main menu attached you can add any text/shortcode you wish before or after the main menu. Add a social icon shortcode for example.

Header → Colors

Here you can control all header colors. Pay special attention to the transparency control when using the Transparent header type.

Header→Sticky Colors

Here you can control the colors for your sticky header.

Header→Typography

Here you can control the Main Menu Font style.

1. Change the main menu font family and settings
2. Change the submenu font family and settings

Also in the same section you can change (if you are using a text logo):

1. The text Logo font family and style.
2. The tagline font family and style.

Site Identity

Here you can change the logo and favicon as well as the title and description. Use the appropriate fields to add your information, show or hide your site title and subtitle and upload your logo and site icon images.

1. Select an image Logo.
2. Select an alternate logo that will appear either when your header is sticky with different background color, or when your header has the transparent type selected. This extra field will ensure maximum contrast in any case.
3. Limit the size logo in half (you will need to use a 2x image) for retina devices.
4. Add you site title.
5. Add you site tagline.
6. Show/hide your site title.
7. Show/hide your tagline.

For your main site icon you can select any image you want as long as it’s 512x512px in width and height and it’s square.

Hero

This is the basic section before the contents of your page and you can control the Layout, Content colors and typography of this particular section.

Hero→Layout

Here you can:

1. Show or hide the hero section
2. Change the section visibility depending on the device viewport size.
3. Change the hero height,
4. Control the hero height in desktop/mobile/tablet
5. Change the hero padding and lock the proportions in order to change them in tandem.
6. Control the hero padding in desktop/mobile/tablet
7. Control the horizontal alignment of your hero content.
8. Control the vertical alignment of your hero content.

Hero→Colors

Here you can:

1. Add a background color.
2. Add a background image and control your image settings and position.
3. Use an overlay background color for your image to increase the contrast for your content.
4. Change the primary text color.
5. Change the secondary text color.

Hero→Content

This is the basic Hero content section:

1. Have a global title for the entire site
2. Have a global subtitle for the entire site
3. Change the title in category/tag archives
4. Change the subtitle in category/tag archives

Hero→Typography

Here you can control:

1. Your primary title heading type. This can be any suggested HTML tag
2. Change the primary text font family and settings
3. Change the primary text settings in mobile, desktop, tablet viewport
4. Your subtitle HTML tag
5. Change the secondary text font family and settings
6. Change the secondary text settings in mobile, desktop, tablet viewport

Blog

This tab allows you to customize your blog and post options.

Blog→Layout

Here you can change your single post and archive (category and tags) looks.

1. Change the main blog page Layout.
2. Change your archive layout type.
3. Change the pagination method.
4. Change the Related post columns.

Blog→Content

Here you can control which elements you want to show/hide in your Single Post pages and Archives:

For Archives:

1. Change the excerpt length in words
2. Show or hide the featured image
3. Show or hide the post title
4. Show or hide the post meta
5. Show of hide the content
6. Show or hide the Read more button

While in Single Posts you can:

1. Show or hide featured images.
2. Show or hide the title.
3. Show or hide meta information.
4. Show tags.
5. show post pagination.
6. Show the author box.
7. Show related posts.
8. Show comments.

Blog→Typography

Here you can change your Archive typography:

1. Change the archive heading HTML tag.
2. Change the post title font family
3. Change the font size and other settings in different viewports
4. Change the post meta font family and settings
5. Change the font size and other settings in different viewports

Same applies in single post typography:

Here you can:

1. Change the post heading HTML tag
2. Change the Font family and settings of the post title
3. Change the post meta font family and settings
4. Change the font size in various viewports

Sidebar

Here you can change your sidebar options.

Sidebar→Layout

Under the Layout section you can:

1. Change the Sidebar padding in any possible viewport
2. Change the widget padding in both mobile/desktop/tablet.
3. Change the widget title padding
4. Change the widget bottom margin.

Sidebar→Colors

Here you can customize all sidebar and widget colors.

Sidebar→Typography

1. Change the sidebar widget text family and settings.
2. Change the sidebar widget text size in Desktop/Mobile/Tablet.
3. Change the sidebar widget title font family and settings.
4. Change the sidebar widget title font size in Desktop/Mobile/Tablet

Footer

Footer section also has a full customizable layout, color and typography section:

Footer→Layout

Here you can:

1. Show or hide the footer area
2. Select the footer visibility in Mobile devices
3. Select the footer columns you need
4. Make the footer full width
5. Change the Footer padding
6. Change the Footer padding in all possible viewports
7. Change the Footer widget titles padding and
8. Change the Footer widget titles padding in Mobile devices.

Footer→Colors

Here you can change most of the footer and footer contents colors. While in general you can:

1. Add a background color.
2. Set a background image and customize its appearance.

Footer → Typography

1. Change the title font
2. Change text options for the type of device
3. Change the main text font
4. change text options for for the type of device

Footer Credits

After the main footer area we have reserved a Footer Credits section you can add you copyright text or any content you wish via shortcodes.

Footer Credits→Layout

Here you can

1. Show or hide the footer credits
2. Change the credit visibility in mobile devices

Footer Credits→Content

Currently there are two areas you can use to add your content. Both these support some HTML elements.

1. Add your text/shortcode in the Left content area.
2. Add your text/shortcode in the Right content area.

Footer Credits→Colors

Here you can control all Footer Credits colors.

Footer Credits→Typography

This section gives you the option to change the credits text style.

1. Change the Font family and font settings of the Footer credits section
2. Control all font settings in any possible viewport.

Social

In this section You can add your Social Network URLs. These icons will be displayed in the Theme-Social Icons Widget automatically and wherever the Social Icon shortcode appears

Here you can add your social network URL and change your icon colors

Social→Layout

1. Select if you wish to open your links in new tabs
2. Change the font size
3. Change the icon size

Social→Colors

Change the Social icon and background colors

Social→Content

Add you social networks in the content area.

Utilities

This section provides control over the Lightbox (gallery popup) and the Back to top button.

Utilities→Lightbox

Here you can switch the theme Lightbox off, if you need to use a third party one, or simply nothing.

Utilities→Back to top button

This section will help you

1. Enable the back to top button
2. Change the button visibility
3. Change the button position and
4. Change the button position in various viewports
5. Select its background color
6. Change its icon color

Menus

Here you can create and assign menus to the theme. To learn more about menu creation check out the Codex’s menu user guide here.

Widgets

Through this tab you can add widgets to the theme’s sidebars. The theme features eight widgetized areas to provide you maximum flexibility when displaying your content.

Homepage Settings

Use this tab to make the Home page your static front page so you can take advantage of the homepage template we have created for you. Here you can also set the Blog page to be your default posts page.

Additional CSS

In this tab we host the custom CSS panel which you can use to insert styles for elements not covered in the rest of the tabs.

Creating the Front Page

Navigate to Content Area→Layout and under the Layout dropdown select the Full width.

Then open in the Content Area the Content tab and set a MaxSlider Shortcode.

Then select this page as a static frontpage from Settings→Reading.

Frontpage consists of three Media and text Blocks and one Quote Block. The title of each block holds a special class theme-animated-title which is responsible for each animation

All buttons in the frontpage also have a special class is-style-outline

Animations in Frontpage (And in any page in general) in Korina are handled via a special Animations tab

Here you can enable

1. Content animations on page scroll
2. Title fade animation when the theme-text-animate class is present.

Creating a Page Builder Landing Page

Create a new page as described here and navigate to Content Area→Layout and under the Layout dropdown select the Full Width Page builder option.

If this is your homepage select it as a static frontpage from Settings→Reading.

Creating a Menu Listing Page

Create a new page like described here and then navigate to Content Area→Layout and under the Layout dropdown select the Full width Narrow  option.

Then add a title and some content along with three menu item shortcodes. Menu Item shortcodes have two arguments, the one is the category slug and the other is the column layout.

Adding a new Menu Item

Adding a new Menu Item can be done from Menu Items→Add New and here you can

1. Select your menu item title
2. Add a description for your menu item
3. Select its price (you can add the currency before the numeric value)
4. Select a featured image
5. Select a Menu category

Creating a Full width page

To add new posts to your blog, go to Pages → Add new and navigate to Content Area→Layout and under the Layout dropdown select the Fullwidth or Fullwidth Narrow option.

Creating Global Sections

Global Sections are small layout sections. Lets replicate the sections found in our demo.

Basic Global Layout: Call to action

Create a new Global Section from Global Section→Add New. Then create an Elementor section with any content of your preference. Then head over to Global Section Settings and

1. Select the exact position your content will appear. We offer various places you can render your content. For a visual guide have a look here or add this ?show_hooks on your site URL when logged in.
2. Select where you want (pages) this section to appear
3. Select some pages you need to exclude it from rendering

You can get a shortcode of this section

1. Using the ID
2. Using the slug

These shortcodes can placed wherever you want. Even inside a HTML simple widget.

Adding a new page

To add new posts to your blog, go to Pages > Add new and proceed to:

1. Add a title to your page
2. Enter the content in the editor
3. Change the page settings
4. Upload a featured image by clicking “Set featured image” on the Featured Image panel
5. once finished clicking the Publish button to publish the post

Page Settings

This is the main settings panel which you can use to alter your page functionality and looks. Here you can alter your page to behave as a listing page for all custom post types or a listing page for children pages when the one editing is a parent to them. Lets check all Tabs one by one to identify their functionality.

1. Here you can bypass all Top Bar Customizers settings
2. Differentiate a page header from the default one you created in Customizer
3. Change the Hero content and styling for specific page
4. Change the Page type and enchant its layout functionality from Content Area
5. Change the Footer section properties for a certain page
6. Change the Footer Credits section properties for a certain page

While All tabs are mimicking the Customizer behaviour but for the page you are creating, under the Content Area tabs we have a set of special options for each page.

Page→Top Bar

This will Control the top bar layour of that particular page. If settings stay intact, customizer ones will be imported

1. Show or not the Top Bar for that page
2. Change the Top bar visibility

In the same section you can control the top bar content, again for this particular page.

1. Add content (shortcodes or HTML).
2. Add content on the left top bar area.
3. Add content on the right top bar area.

In the next tab you can change the Top bar colors for that page

1. Change the background color.
2. Change the border color.
3. Change the text color.
4. change the link color.
5. change the hover color of the link.

Page→Header

Here you can control the Header Layout

1. Change the Header type of the page
2. Change the Header padding of the page
3. Change the menu layout for that page
4. Change the menu padding

While, you can also add content before or next to the main menu, for that page only.

Also you can

1. Add Content like text or shortcodes before the header
2. Add Shortcodes or HTML in the main header area
3. Add a main menu
4. Add a Main menu that will appear on the right side when a Menu split is selected.

Finally, you can change all header Colors like

1. All Header area colors
2. All Logo colors
3. All Menu colors
4. All Sub menu colors

Page→Hero

Here you can control the Hero layout of the page. Leaving these settings untouched will automatically inherit all your Customizer settings under Customize→Hero

1. Choose to show the hero or not
2. Change the Hero height
3. Change the horizontal alignment of your text
4. change the vertical alignment of your text

Next, you can change the Hero Content, like:

1. Add a shortcode before the hero section
2. Add a title
3. Add a subtitle
4. Add a callout button text
5. Add a URL for your button

Along, you can change the colors or the background of the Hero section.

1. Add a background color
2. Select an image and change its position settings
3. Add an overlay color for your background image
4. Select the title text color
5. Select the subtitle text color
6. Select the button background color

Finally you can set the Hero typography settings

1. Change the title text font and font style.
2. Select the HTML tag for this element.
3. Select a secondary text font.
4. Select a secondary text HTML tag.

Page→Content Area

Here you can control the main content area Layout

1. Change the Page default layout
2. Show its title or not

Also you can

1. Set a shortcode to show before your main page content

Page→Footer

This is the main layout section for the page footer

You can select whether you can

1. Show or hide the footer

While you can also add some content before the main page footer area

1. Add some text or shortcode before the footer.

Also you can change all page footer colors, for that specific page

1. Change the Footer background
2. Add a Footer image and select its settings
3. Change the Footer Widgets colors

Page→Footer Credits

You can change the Layout of the page Footer credits

1. Showing or not the credits area

Also you can control the content before the page Footer Credits section

1. Add a shortcode or text there

Finally you can change the Footer Credits Color for this page

1. Change the background color of your Credits footer section for a specific page
2. Change the text color for the Credits footer section for a specific page
3. Change the like color for the Credits footer section for a specific page
4. Change the link hover color for the Credits footer section for a specific page
5. Change the border color for the Credits footer section for a specific page

Creating a page for your posts

To setup your blog page you can go to Pages → Add New and create a page named Blog. Then navigate to Settings → Reading and set that page as your posts page.

Now you can add that page to your menu to give your visitors easy access to all your posts.

In this page you can control via its Page Settings section how the hero behaves in the blog page but it will also affect the hero section of the following pages: Categories, tags, author archives & date archives. If you don’t change anything in this page, Customizer settings will be respected.

Handling Hero images in Categories / Tags

You can change in each category your Hero background image and title to your preference, from Posts→Categories and Posts→Tags under the Hero section. If no Hero image is selected, the category/tag will default to the Blog page values, and if no blog page settings exist then it will inherit the Customizer→Hero values.

Lets have a quick look at how to change the Hero background for every category. First navigate to Posts→Categories and add a new or edit the category you need to change. Then scroll down to this screen:

1. You can set your taxonomy title
2. Change your taxonomy subtitle
3. Select a background color
4. Upload a background image for your hero
5. Change the background image settings

Following this section there is a color selection for every aspect of the taxonomy hero

while scrolling more you will get this

1. You can change the primary text font (title)
2. The primary font HTML tag
3. The secondary text font
4. The secondary font HTML tag

These settings are the same for Tag archives also.

Widgets

We have handcrafted some custom widgets to help you better display your content. You will find them under Appearance→Customize →Widgets or Appearance→Widgets

Theme-Contact

Using this widget you can create a contact box including a title a map and various complementary elements with icons that will help you add more information like telephone etc about your business.

1. Add a title for your Contact widget.
2. Add a map code (iframe).
3. Add a contact title
4. Create new complementary elements.
5. Add an icon code (from fontawesome.io) and some text along.

Theme-Tabular Data

This widget allows you to create a small Schedule table with extra contextual information.

1. Add a title for your widget
2. Add some complementary text. You can use HTML tags also if you wish.
3. Add a new item
4. Add your item Label.
5. Add the item value
6. Remove the item

Theme(home)-Instagram

This will allow you to display your Instagram Account in your Front Page or Pre-Footer sidebar. The WP Instagram Widget must be installed and activated in order this Widget to appear

1. Add a title for your Instagram Widget.
2. Add your Instagram Account.
3. Add a number of photos you wish to display.
4. Select the Instagram Photo size.
5. Select whether you need your images to open in the current window or open in a new tab.
6. Change the link text.

Theme (home)-Latest Posts

This widget is built to help you display your latest posts in your home widget area.

1. Add a title.
2. Add a subtitle.
3. Select the category your need to display the latests posts from.
4. Show random posts instead.
5. Change the post number.
6. Adjust the number of columns for your content.
7. Show carousel like widget with your posts.

Theme-Callout

This is a simple Callout widget, that will allow you to add a text with a button in any sidebar you want.

1. Add a widget title
2. Add a Title for your Callout widget.
3. Add a Subtitle for your Callout widget.
4. Select a Button text
5. Select a button URL.

Theme-Buttons

This widget will help you render a list of buttons.

1. Select the Widget Title.
2. Add a new button.
3. Add the button title.
4. Add a button subtitle.
5. Add a button icon.
6. Add a button link.
7. Remove the button.

Theme-Page Children Menu

When you have a parent page, in any of its children that this widget is present it will create a menu linking to other children of the same parent page.

1. Widget Title
2. Hierarchy settings.

Theme-Social Icons

This widget displays your site’s social icons. In order to set them up, you need to visit Appearance→ Customize → Social → Content and provide the appropriate URLs where desired.

Theme(home)-Post Type Items

This widget is built to help you display any post you wish in your Homepage Widget area.

1. Add a title.
2. Add a subtitle
3. Select the post type.
4. Select the output columns.
5. Add the Item you wish to output.
6. Select the Item from the drop-down menu.

Theme-Callout

This will allow you to display a Hero Callout specially designed for your frontpage sidebar.

1. Add a title for your widget.
2. Add the main title.
3. Add some text
4. Select your button text
5. Select a URL for you button

Shortcodes

You can use these shortcodes in any HTML/shortcode reserved area:

[site-socials]

This shortcode will display the site’s social icons. You can edit these icons from Customize→Socials→Content

[site-search]

Displays a search icon which, when clicked, drops down a searchform from the top of the page.

[site-title]

Displays the site title.

[site-tagline]

Displays the site tagline.

[custom-menu name="Menu name"]

Displays the *top level items* of a menu. Inside the name=”” parameter there should be the *name* of a user-created menu, not its slug. e.g. [custom-menu name=”Main Menu”]

[minicart-button]

Displays a cart button which, when clicked, expands into a minicart. Please note, this shortcode is only available when the WooCommerce plugin is activated.

[menu-items category="category_slug" columns="2" subcategories="sub_category_slug" heading="Your Heading text" h="Heading order (1,2,3 etc)"]

Elementor Widgets

Convert comes with custom Elementor widgets which have the same functionality as its widgets, making landing pages easier to create.

Korina Element

This is your Swiss knife when using Elementor plugin. With Korina Element you can render all your content from all custom post types and their taxonomies(if any) as well as manually get any part of your content using a search keyword. Let’s have a quick look

1. Select in how many columns your content will render
2. Select the main source type for your content. Notice, you can select a manual mode, where you will get the source based on you search criteria
3. Filter your source content by author.
4. Select a category. If blank all categories will be shown.
5. Filter by tags.
6. Exclude posts you dont want to show
7. Select how many posts you want to show
8. Select the offset of the rendered posts (2 for example, will leave the first two).
9. Select the order by a value (Date, etc)
10. Select the order of your results (descending etc)

Korina Menu Element

Using this element You can

1. Select the menu category you want to render
2. Select the column number
3. Show or not the category headings
4. Change heading type for titles

Hooks

Hooks will allow you to add extra functionality at various areas inside the theme. For example, you might need to add a simple ad banner or text after each post, or after your header! Hooks will help you achieve this.

Check this WordPress Hooks API guide to make yourself familiar with Hooks (actions/filters etc).

Examples if you dont want to use Global Layout post type

add_action( 'Korina_head_mast_before', 'Korina_custom_script_before_header' );

function Korina_custom_script_before_header() {   
 // Your PHP goes here
}

add_action( 'Korina_after_header', 'Korina_custom_html_after_header' );
function Korina_custom_html_after_header() { ?>      
<!-- Your HTML goes here -->
<?php }

Still have questions or problems setting up your CSSIgniter Theme? We will be happy to help you out! Please visit our support Hub 

About Projektor WordPress theme

Projektor is a powerful Conference theme.

Image Sizes

The minimum recommended image sizes for Projektor are:

• Post thumbnail: 960x540px
• Item thumbnail: 615x346px
• Media Item tall: 615px unlimited in height
• Large Item image: 1290x709px
• Article Image: 510x510px
• Hero image: 1700x956px
• Small Square: 200x200px
• Sidebar Sponsor:420px width and unlimited in height

Fonts Used

We are using Roboto Condensed and Zilla Slab. These are Google Fonts that you can find and test there
To change to another Google Font follow this guide here or for third party fonts have a look here on how to install them.

Getting Started

After installing the theme you will be redirected to this welcome screen. Here you can install both required and recommended plugins. While recommended plugins are optional for the theme to function, consider installing them if you want the full sample content to be imported.

Required Plugins

Here you will need to install and activate the theme specific plugin required by the theme. This will create Custom Post Types as well as various Widgets and Shortcodes. Some hosting providers block automatic installation of plugins. This means you will need to install the plugin manually as you would normally do. This plugin is located inside the /plugins/ folder in your theme archive.

Must have plugins

Under the Recommended Plugins tab you will find a list of supported plugins that are needed for the theme’s functionality. It is recommended to install and activate them before importing your sample content.

• WooCommerce: To enable eCommerce functionality for your website
• Elementor: A free page builder that delivers high-end page designs and advanced capabilities.
• MaxSlider : Use this plugin to help you create custom sliders and use them anywhere you wish shortcodes.
• One Click Import : Use this plugin to help you import your content with just one click.

All the above are mandatory while these:

• WPForms use this plugin to create a contact form, then copy the shortcode it gives you and paste it in an empty page.

plugins are complementary.

Installing Sample Content

To automate the process of importing and for a better experience we have included native support for One Click Import Plugin. From the Sample Content tab, you can click the Get Started button to navigate to the sample content import screen.

You can always find the import page under Appearance → Import Demo Data.

You can install it in the Recommended Plugins tab (2) or manually from From your WordPress dashboard

• • 1. Visit Plugins → Add New,
    2. Search for ‘One Click Demo Import’ and install the plugin,
    3. Activate ‘One Click Demo Import’ from your Plugins page.

Click on the Import Demo Data button and you are done!

Sometimes altering and editing sample content may go wrong. If you need a fresh start you can reset your WordPress installation using any popular reset Plugin. Beware: this will erase all data you have and not just the sample content.

Customizing Your Theme

All theme’s customizations and settings can be done via WordPress’s built-in Customizer. If you haven’t used it or want to learn more about it, please read this article.

Go to Appearance → Customize and you will see this:

Let’s take a look at the options each tab gives you.

Global

Global section will allow you to control the layout, colors and typography that will apply everywhere in the theme:

Global→Layout

Let’s have a look at each option this section provides:

1. Apply a full width or boxed container for all content.
2. Control the inner full content width.
3. Control the content width from (1 to 12).For example 8 means that your content width will have the 8/12 of your Inner Site Width while the other will be reserved for the sidebar.
4. The sidebar width.For example 5 means that your content width will have the 5/12 of your Inner Site Width while the other will be reserved for the main content.

When selecting a Boxed layout you will get this screen:

1. You can switch layouts anytime you wish.
2. Control the outer width of your main content.
3. Control the inner width of your main content.

Global → Colors

This section will allow you to change the background color / image as well as all your basic theme elements, like your links, forms, headings, buttons colors:

1. Change the body background color.
2. Add or remove background image.
3. Control the background location and size.
4. When using a boxed layout you can select the inner background color.
5. Select the boxed layout background image.
6. Also you can control the boxed background image location and size.

Typography

Customizing your fonts is included natively in Projektor:

1. Enable the use of Google Fonts. Not checking this option will give you web safe font controls for your main body text.
2. Change the main font family you need to use.
3. Change your settings depending on the visitor viewport. This gives you the advantage of having different font sizes for Desktop, Tablet and mobile devices.
4. Change the font size and Line height.
5. Change the text type and your letter spacing.

Top Bar

Top Bar section will allow you to control the area before your main header. This area contains various elements, like search, social icons and placeholders via shortcodes as well as informatory text.

You can control its layout, content, colors and typography directly via the customizer.

Top Bar → Layout

In this section you can:

1. Show / hide the top bar.
2. Change the top bar visibility in mobile devices.
3. Change the padding of the top bar in desktop, tablet, mobile.
4. Arrange the top and bottom distance of the top bar. The chain button will allow you to change these values equally.

Top Bar → Content

Here you can control what the top bar will actually have as content:

1. Control the Left Content area, using various shortcodes or text.
2. Control the Right Content area again using shortcodes or text.

You can find all theme’s shortcodes here.

Top Bar → Colors

Here you can control all related colors of each element that renders in the top bar.

Top Bar → Typography

Controlling typography is quite simple as well. In this section you can:

1. Change the main font family you need to use.
2. Change the font size and Line height.
3. Change the text type (uppercase, lowercase) and your letter spacing.
4. Change your settings depending on the visitor viewport. This gives you the advantage of having different font sizes for Desktop, Tablet and mobile devices.

Header

Here you can control the basic Layout, Content, Colors and Typography of your header. You can also control if you need your header to stick to the top when scrolling.

Header → Layout

Here you can control the basic structure of your header area.

In detail you can:

1. Control the header type. Normal means the header will not cover the hero, while being transparent will do! (Even if you don’t have transparency setup from your Header Colors section)
2. Make the header cover the full width of the screen.
3. Change the Header top and bottom padding and lock these values to behave the same.
4. Change the padding section in any device type.

Header → Content

While your header actually has the main menu attached you can add any text/shortcode you wish before or after the main menu. Add a social icon shortcode for example.

Header → Colors

Here you can control all header colors. Pay special attention to the transparency control when using the Transparent header type.

Header→Sticky Colors

Here you can control the colors for your sticky header.

Header→Typography

Here you can control the Main Menu Font style.

Also in the same section you can change (if you are using a text logo):

1. The text Logo font family and style.
2. The tagline font family and style.

Site Identity

Here you can change the logo and favicon as well as the title and description. Use the appropriate fields to add your information, show or hide your site title and subtitle and upload your logo and site icon images.

1. Select an image Logo.
2. Select an alternate logo that will appear either when your header is sticky with different background color, or when your header has the transparent type selected. This extra field will ensure maximum contrast in any case.
3. Limit the size logo in half (you will need to use a 2x image) for retina devices.
4. Add you site title.
5. Add you site tagline.
6. Show/hide your site title.
7. Show/hide your tagline.

For your main site icon you can select any image you want as long as it’s 512x512px in width and height and it’s square.

Hero

This is the basic section before the contents of your page and you can control the Layout, Content colors and typography of this particular section.

Hero→Layout

Here you can:

1. Show or hide the hero section
2. Change the section visibility depending on the device viewport size.
3. Change the hero height,
4. Control the hero height in desktop/mobile/tablet
5. Change the hero padding and lock the proportions in order to change them in tandem.
6. Control the hero padding in desktop/mobile/tablet
7. Control the horizontal alignment of your hero content.
8. Control the vertical alignment of your hero content.

Hero→Colors

Here you can:

1. Add a background color.
2. Add a background image and control your image settings and position.
3. Use an overlay background color for your image to increase the contrast for your content.
4. Change the primary text color.
5. Change the secondary text color.

Hero→Content

This is the basic Hero content section:

1. Have a global title for the entire site
2. Have a global subtitle for the entire site
3. Change the title in category/tag archives
4. Change the subtitle in category/tag archives

Hero→Typography

Here you can control:

1. Your primary title heading type. This can be any suggested HTML tag
2. Change the primary text font family and settings
3. Change the primary text settings in mobile, desktop, tablet viewport
4. Your subtitle HTML tag
5. Change the secondary text font family and settings
6. Change the secondary text settings in mobile, desktop, tablet viewport

Blog

This tab allows you to customize your blog and post options.

Blog→Layout

Here you can change your single post and archive (category and tags) looks.

1. Change the main blog page Layout.
2. Change your archive layout type.
3. Change the pagination method.
4. Change the Related post columns.

Blog→Content

Here you can control which elements you want to show/hide in your Single Post pages and Archives:

For Archives:

1. Change the excerpt length in words
2. Show or hide the featured image
3. Show or hide the post title
4. Show or hide the post meta
5. Show of hide the content
6. Show or hide the Read more button

While in Single Posts you can:

1. Show or hide featured images.
2. Show or hide the title.
3. Show or hide meta information.
4. Show tags.
5. show post pagination.
6. Show the author box.
7. Show related posts.
8. Show comments.

Blog→Typography

Here you can change your Archive typography:

1. Change the archive heading HTML tag.
2. Change the post title font family
3. Change the font size and other settings in different viewports
4. Change the post meta font family and settings
5. Change the font size and other settings in different viewports

Same applies in single post typography:

Here you can:

1. Change the post heading HTML tag
2. Change the Font family and settings of the post title
3. Change the post meta font family and settings
4. Change the font size in various viewports

Sidebar

Here you can change your sidebar options.

Sidebar→Layout

Under the Layout section you can:

1. Change the Sidebar padding in any possible viewport
2. Change the widget padding in both mobile/desktop/tablet.
3. Change the widget title padding
4. Change the widget bottom margin.

Sidebar→Colors

Here you can customize all sidebar and widget colors.

Sidebar→Typography

1. Change the sidebar widget text family and settings.
2. Change the sidebar widget text size in Desktop/Mobile/Tablet.
3. Change the sidebar widget title font family and settings.
4. Change the sidebar widget title font size in Desktop/Mobile/Tablet

Footer

Footer section also has a full customizable layout, color and typography section:

Footer→Layout

Here you can:

1. Show or hide the footer area
2. Select the footer visibility in Mobile devices
3. Select the footer columns you need
4. Make the footer full width
5. Change the Footer padding
6. Change the Footer padding in all possible viewports
7. Change the Footer widget titles padding and
8. Change the Footer widget titles padding in Mobile devices.

Footer→Colors

Here you can change most of the footer and footer contents colors. While in general you can:

1. Add a background color.
2. Set a background image and customize its appearance.
3. Select your Footer Widgets colors

Footer → Typography

1. Change the title font
2. Change text options for the type of device
3. Change the main text font
4. change text options for for the type of device

Footer Credits

After the main footer area we have reserved a Footer Credits section you can add you copyright text or any content you wish via shortcodes.

Footer Credits→Layout

Here you can

1. Show or hide the footer credits
2. Change the credit visibility in mobile devices

Footer Credits→Content

Currently there are two areas you can use to add your content. Both these support some HTML elements.

Footer Credits→Colors

Here you can control all Footer Credits colors.

Footer Credits→Typography

This section gives you the option to change the credits text style.

1. Change the Font family and font settings of the Footer credits section
2. Control all font settings in any possible viewport.

Social

In this section You can add your Social Network URLs. These icons will be displayed in the Theme-Social Icons Widget automatically and wherever the Social Icon shortcode appears

Here you can add your social network URL and change your icon colors

Social→Layout

1. Select if you wish to open your links in new tabs
2. Change the font size
3. Change the icon size

Social→Colors

Change the Social icon and background colors

Social→Content

Add you social networks in the content area.

Utilities

This section provides control over the Lightbox (gallery popup) and the Back to top button.

Utilities→Lightbox

Here you can switch the theme Lightbox off, if you need to use a third party one, or simply nothing.

Utilities→Back to top button

This section will help you

1. Enable the back to top button
2. Change the button visibility
3. Change the button position and
4. Change the button position in various viewports
5. Select its background color
6. Change its icon color

Menus

Here you can create and assign menus to the theme. To learn more about menu creation check out the Codex’s menu user guide here.

If you want to add a custom button next your menu, you will need to add the nav-button class to the menu element you want to highlight

You can enable the CSS Classes section from Screen Options (More info here http://www.cssigniter.com/docs/article/screen-options/).

WooCommerce

In this tab you can change the number of products on shop listing page and control your WooCommerce Settings.

Under the Product Catalog section you can:

1. Choose what you want to render in the main shop page.
2. Choose what you want to display in the category pages
3. Change the default product sorting
4. Change products per row
5. Select how many rows of products you need per page
6. Change the sidebar location
7. Show or hide, categories
8. Show or hide star ratings
9. Show or hide hero sections in category/tag listings.

You can also change your Single Product layout from the Single Product Section. Here you can control if you need to have a sidebar or not in your products.

Widgets

Through this tab you can add widgets to the theme’s sidebars. The theme features six widgetized areas to provide you maximum flexibility when displaying your content. You can see all of them from Appearance→Widgets.

Homepage Settings

Use this tab to make the Home page your static front page so you can take advantage of the homepage template we have created for you. Here you can also set the Blog page to be your default posts page.

Additional CSS

In this tab we host the custom CSS panel which you can use to insert styles for elements not covered in the rest of the tabs.

Creating a the Front Page

Go ahead and create a new page then Select from Page Settings the Widgetized Front page Layout! Then save the page and select it as a static frontpage from Settings→Reading. 

Now, in order to create the same hero background navigate to the your Page Settings box in your new frontpage, and first set the Hero banner dimensions from our Hero tab

1. Select to show the hero section,
2. Adjust the height to your preference.
3. Change the vertical / horizontal alignment of your text

Next, we are going to add the landing text of our hero section. So switch to the Content tab

1. Add a shortcode that will appear before any text
2. Select your title
3. Select a subtitle
4. Select a button text
5. Select a button URL

Finally, just add your background image and colors from the Color tab.

Here you can select

1. You hero background color if you dont want to have an image.
2. A background image
3. Enable or Disable the Parallax effect.

In many case you might need to have a Slider instead of a stating Hero. So, open in the Content Area the Content tab and set a MaxSlider Shortcode.

You can install MaxSlider like described here

Frontpage Content

Frontpage Template is a large widgetized content which can be controlled by adding Widgets (tagged with Home) into your Customize→Widgets→Frontpage Sidebar.

All widgets will fetch automatically your content from the backend Posts/ Pages /Sponsors etc and display them according to their settings. Our frontpage consists of these widgets

Remember you can recreate the Frontpage using Projekor’s build in Elementor Elements using the Page builder landing page following next.

Creating a Page Builder Landing Page

Create a new page as described here and navigate to Content Area→Layout and under the Layout dropdown select the Full Width Page builder option.

If this is your homepage select it as a static frontpage from Settings→Reading.

Check all available elements in Projektor you can use here

Creating a Schedule page

Create a new page like described here and then navigate to Content Area→Layout and under the Layout dropdown select the Full Width option.
The Schedule page can become any page using the [conference-day] shortcode while adding the shortcode multiple times can help you add more days with your Events. For example you can Call any time slot you want to render like this

[conference-day name="Day 1"]

where of course “Day 1” is your time slot.

A quick reference on how taxonomies of Sessions will render in when using the [conference-day] shortcode can be found in the image below:

1. These are the child categories of the Day 1 Time slot taxonomy. This can be mainly time or date, but you can really change it to any string you wish.
2. This is the basic track taxonomy the session will appear
3. This is the title of the Session
4. The main session talker.

Adding a new Session

Navigate to Sessions→Add New and here you can

1. Add a Session name
2. Add some content or edit the service using your favorite page builder
3. Change your Session settings.
4. Organize your Session via tracks taxonomy.
5. Add a Time Slot  for your Session.
6. Set a basic Featured image

While most of them are straight forward, we will have a look a the Session details which will help you customize each Session separately.

Service settings consists of seven main customization tabs. These are exactly the same options as Pages but with certain functionality to match the Session post type.

While most of these section are inherited from your Customizer settings we will focus on the Session Tab. Here you can

1. Change your Session status to header. This means it will have a special format and will appear in all Tracks.
2. Select a Speaker for your session.

Adding a Session track

Session Track is a special taxonomy which will help you organize your Sessions in columns.

Adding a Time Slot for a Session

Time Slots is the basic taxonomy for your Sessions. Using Time Slots is quite easy, but you will need to have a parent category (Day for example) to group all your smaller slots (hours).

1. Day 1 is the parent category which hold smaller time fragments
2. Hours behave as children or the Day 1 category

In order to add a child category, you will need to edit the category and select a parent one like shown below

Creating the Speakers Listing Page

First Create a new page as described here then navigate to Content Area→Layout and under the Layout dropdown select the Speakers Listing option.

1. Select the page Layout (Speakers Listing)
2. Show or hide the page title
3. Show or not the sidebar in the Listing page
4. Select a category that will be the base for your items. Leaving this blank will fetch all of them.
5. Change the grid loading effect
6. Change the grid spacing
7. Change the number of columns for your list
8. Use a masonry effect for different image sizes.
9. Use category filtering. This will display all categories as filter options and will also show all your listings
10. Change the items per page,-1 will show them all, while not having anything here will default to the Settings→Reading Post to show option.

Adding a new Speaker

Speaker items are Custom post types that represent your Session speakers and you can add from Speaker →Add New. Dont forget adding a featured image for your Speaker since it will be used as the main image in all theme listings related to Speakers.

Speaker settings consists of seven main customization tabs. These are exactly the same options as Pages but with certain functionality to match the post type. These tabs have the same behaviour as the Page settings except the Speaker Details tab which you can add your Speaker Role as an extra information field.

Adding Speaker Categories

Speakers has a custom taxonomy to help you organize them according to your preference. By default you can control the page look that your archive will inherit when rendering

Creating a Sponsors Page

Create a new page as described here then navigate to Content Area→Layout and under the Layout dropdown select the Team Members Listing option.

1. Select the page Layout
2. Show or hide the page title
3. Show or not the sidebar
4. Select a category that will be the base for your items. Leaving this blank will fetch all of them.
5. Change the grid loading effect
6. Change the grid spacing
7. Change the number of columns for your list
8. Use a masonry effect for different image sizes.
9. Use category filtering. This will display all categories as filter options and will also show all your listings
10. Change the items per page,-1 will show them all, while not having anything here will default to the Settings→Reading Post to show option.

Adding a new Sponsor Member

Adding a new Team member is relatively easy. Navigate to Sponsors→Add New and here you can create a new Spnsor item. Dont forget to set a basic Featured image.

Sponsor settings consists of seven main customization tabs. These are exactly the same options as Pages but with an extra tab that will provide a little bit more information on your Sponsors

Sponsor URL will lead to your Sponsor web site when not blank.

Creating a Testimonial Page

Create a new page as described here then navigate to Content Area→Layout and under the Layout dropdown select the Testimonial Listing option.

You can control:

1. Testimonial Listing
2. Show / Hide the the title
3. The columns you need to display your testimonials
4. How many testimonials you want to display

Simple Testimonial

To add a Testimonial navigate to Testimonial→Add New and here you can create a new Testimonial item. Dont forget to set a basic Featured image that will be used in your Testimonial listings.

In Testimonials you can add citation under the Testimonial Settings module (1).

Creating a Full width page

To add new posts to your blog, go to Pages → Add new and navigate to Content Area→Layout and under the Layout dropdown select the Fullwidth or Fullwidth Narrow option.

Adding Products

Earlier we saw how we can install WooCommerce. Let’s take a brief look at creating products. Start by going to Products > Add Product.

1. First we need to fill in the product title,
2. Add the product’s description,
3. In the Product Data metabox you will fill all the required product info, such as price, inventory, tax and shipping information and more,
4. Fill in a short product description
5. Add product gallery images to upload additional photos for the product,
6. Click Set Product Image to add the product’s featured image
7. Add Tags to your product to make filtering easier
8. Add categories for your product

This is a brief overview of adding products to your site, the product post type is a complex one, if you haven’t worked with it before please consider reading the official documentation on how to add and manage products here.

Setup the shop page

Once you install and activate WooCommerce all the default pages will be created, including the shop listing page. To make sure this was properly configured go to WooCommerce > Settings > Products > Display and check if the Shop page is selected in the Shop Page drop down.

If the drop-down is empty, locate the Shop page and select it. If you can’t find a page named Shop, just go to Pages > Add New create one and then set it as your shop page. Add this page to your menu to give your visitors access to the product listing.

Creating Global Sections

Global Sections are small layout sections. Lets replicate the sections found in our demo.

Basic Global Layout: Call to action

Create a new Global Section from Global Section→Add New. Then create an Elementor section with any content of your preference. Then head over to Global Section Settings and

1. Select the exact position your content will appear. We offer various places you can render your content. For a visual guide have a look here or add this ?show_hooks on your site URL when logged in.
2. Select where you want (pages) this section to appear
3. Select some pages you need to exclude it from rendering

You can get a shortcode of this section

1. Using the ID
2. Using the slug

These shortcodes can placed wherever you want. Even inside a HTML simple widget.

Adding a new page

To add new posts to your blog, go to Pages > Add new and proceed to:

1. Add a title to your page
2. Enter the content in the editor
3. Change the page settings
4. Upload a featured image by clicking “Set featured image” on the Featured Image panel
5. once finished clicking the Publish button to publish the post

Page Settings

This is the main settings panel which you can use to alter your page functionality and looks. Here you can alter your page to behave as a listing page for all custom post types or a listing page for children pages when the one editing is a parent to them. Lets check all Tabs one by one to identify their functionality.

1. Here you can bypass all Top Bar Customizers settings
2. Differentiate a page header from the default one you created in Customizer
3. Change the Hero content and styling for specific page
4. Change the Page type and enchant its layout functionality from Content Area
5. Change the Footer section properties for a certain page
6. Change the Footer Credits section properties for a certain page

While All tabs are mimicking the Customizer behaviour but for the page you are creating, under the Content Area tabs we have a set of special options for each page.

Page→Top Bar

This will Control the top bar layour of that particular page. If settings stay intact, customizer ones will be imported

1. Show or not the Top Bar for that page
2. Change the Top bar visibility

In the same section you can control the top bar content, again for this particular page.

1. Add content (shortcodes or HTML).
2. Add content on the left top bar area.
3. Add content on the right top bar area.

In the next tab you can change the Top bar colors for that page

1. Change the background color.
2. Change the border color.
3. Change the text color.
4. change the link color.
5. change the hover color of the link.

Page→Header

Here you can control the Header Layout

1. Change the Header type of the page
2. Change the Header padding of the page
3. Change the menu layout for that page
4. Change the menu padding

While, you can also add content before or next to the main menu, for that page only.

Also you can

1. Add Content like text or shortcodes before the header
2. Add Shortcodes or HTML in the main header area
3. Add a main menu
4. Add a Main menu that will appear on the right side when a Menu split is selected.

Finally, you can change all header Colors like

1. All Header area colors
2. All Logo colors
3. All Menu colors
4. All Sub menu colors

Page→Hero

Here you can control the Hero layout of the page. Leaving these settings untouched will automatically inherit all your Customizer settings under Customize→Hero

1. Choose to show the hero or not
2. Change the Hero height
3. Change the horizontal alignment of your text
4. change the vertical alignment of your text

Next, you can change the Hero Content, like:

1. Add a shortcode before the hero section
2. Add a title
3. Add a subtitle
4. Add a callout button text
5. Add a URL for your button

Along, you can change the colors or the background of the Hero section.

1. Add a background color
2. Select an image and change its position settings
3. Add an overlay color for your background image
4. Select the title text color
5. Select the subtitle text color
6. Select the button background color

Finally you can set the Hero typography settings

1. Change the title text font and font style.
2. Select the HTML tag for this element.
3. Select a secondary text font.
4. Select a secondary text HTML tag.

Page→Content Area

Here you can control the main content area Layout

1. Change the Page default layout
2. Show its title or not

Also you can

1. Set a shortcode to show before your main page content

Page→Footer

This is the main layout section for the page footer

You can select whether you can

1. Show or hide the footer

While you can also add some content before the main page footer area

1. Add some text or shortcode before the footer.

Also you can change all page footer colors, for that specific page

1. Change the Footer background
2. Add a Footer image and select its settings
3. Change the Footer Widgets colors

Page→Footer Credits

You can change the Layout of the page Footer credits

1. Showing or not the credits area

Also you can control the content before the page Footer Credits section

1. Add a shortcode or text there

Finally you can change the Footer Credits Color for this page

1. Change the background color of your Credits footer section for a specific page
2. Change the text color for the Credits footer section for a specific page
3. Change the like color for the Credits footer section for a specific page
4. Change the link hover color for the Credits footer section for a specific page
5. Change the border color for the Credits footer section for a specific page

Creating a page for your posts

To setup your blog page you can go to Pages → Add New and create a page named Blog. Then navigate to Settings → Reading and set that page as your posts page.

Now you can add that page to your menu to give your visitors easy access to all your posts.

In this page you can control via its Page Settings section how the hero behaves in the blog page but it will also affect the hero section of the following pages: Categories, tags, author archives & date archives. If you don’t change anything in this page, Customizer settings will be respected.

Handling Hero images in Categories / Tags

You can change in each category your Hero background image and title to your preference, from Posts→Categories and Posts→Tags under the Hero section. If no Hero image is selected, the category/tag will default to the Blog page values, and if no blog page settings exist then it will inherit the Customizer→Hero values.

Lets have a quick look at how to change the Hero background for every category. First navigate to Posts→Categories and add a new or edit the category you need to change. Then scroll down to this screen:

1. You can set your taxonomy title
2. Change your taxonomy subtitle
3. Select a background color
4. Upload a background image for your hero
5. Change the background image settings

Following this section there is a color selection for every aspect of the taxonomy hero

while scrolling more you will get this

1. You can change the primary text font (title)
2. The primary font HTML tag
3. The secondary text font
4. The secondary font HTML tag

These settings are the same for Tag archives also.

Widgets

We have handcrafted some custom widgets to help you better display your content. You will find them under Appearance→Customize →Widgets or Appearance→Widgets

Theme-Contact

Using this widget you can create a contact box including a title a map and various complementary elements with icons that will help you add more information like telephone etc about your business.

1. Add a title for your Contact widget.
2. Add a map code (iframe).
3. Add a contact title
4. Create new complementary elements.
5. Add an icon code (from fontawesome.io) and some text along.

Theme-Tabular Data

This widget allows you to create a small Schedule table with extra contextual information.

1. Add a title for your widget
2. Add some complementary text. You can use HTML tags also if you wish.
3. Add a new item
4. Add your item Label.
5. Add the item value
6. Remove the item

Theme(home)-Instagram

This will allow you to display your Instagram Account in your Front Page or Pre-Footer sidebar. The WP Instagram Widget must be installed and activated in order this Widget to appear

1. Add a title for your Instagram Widget.
2. Add your Instagram Account.
3. Add a number of photos you wish to display.
4. Select the Instagram Photo size.
5. Select whether you need your images to open in the current window or open in a new tab.
6. Change the link text.

Theme (home)-Latest Posts

This widget is built to help you display your latest posts in your home widget area.

1. Add a title.
2. Add a subtitle.
3. Select the category your need to display the latests posts from.
4. Show random posts instead.
5. Change the post number.
6. Adjust the number of columns for your content.
7. Show carousel like widget with your posts.

Theme (Home) – Sponsors

This widget will allow you to display a category of Sponsors in the frontpage widgetized area

1. Add a title for your widget
2. Add a subtitle
3. Select a category which will get the sponsors
4. Show random sponsors instead
5. Select how many sponsors will show
6. Select the number of output columns
7. Link Sponsors to their external URL

Theme – Sponsors

This is the same as the Theme (home) – Sponsors but with different styling in order to be used anywhere.

Theme-Callout

This is a simple Callout widget, that will allow you to add a text with a button in any sidebar you want.

1. Add a widget title
2. Add a Title for your Callout widget.
3. Add a Subtitle for your Callout widget.
4. Select a Button text
5. Select a button URL.

Theme-Buttons

This widget will help you render a list of buttons.

1. Select the Widget Title.
2. Add a new button.
3. Add the button title.
4. Add a button subtitle.
5. Add a button icon.
6. Add a button link.
7. Remove the button.

Theme-Page Children Menu

When you have a parent page, in any of its children that this widget is present it will create a menu linking to other children of the same parent page.

1. Widget Title
2. Hierarchy settings.

Theme-Social Icons

This widget displays your site’s social icons. In order to set them up, you need to visit Appearance→ Customize → Social → Content and provide the appropriate URLs where desired.

Theme(home)-Post Type Items

This widget is built to help you display any post you wish in your Homepage Widget area.

1. Add a title.
2. Add a subtitle
3. Select the post type.
4. Select the output columns.
5. Add the Item you wish to output.
6. Select the Item from the drop-down menu.

Theme (home) – Text

This will allow you to display a Hero Callout specially designed for your frontpage sidebar.

1. Add a title for your widget.
2. Add the main title.
3. Add some text
4. Select your button text
5. Select a URL for you button

Shortcodes

You can use these shortcodes in any HTML/shortcode reserved area:

[site-socials]

This shortcode will display the site’s social icons. You can edit these icons from Customize→Socials→Content

[site-search]

Displays a search icon which, when clicked, drops down a searchform from the top of the page.

[site-title]

Displays the site title.

[site-tagline]

Displays the site tagline.

[custom-menu name="Menu name"]

Displays the *top level items* of a menu. Inside the name=”” parameter there should be the *name* of a user-created menu, not its slug. e.g. [custom-menu name=”Main Menu”]

[minicart-button]

Displays a cart button which, when clicked, expands into a minicart. Please note, this shortcode is only available when the WooCommerce plugin is activated.

[menu-items]

[conference-sponsors]

[conference-day name="Workshops"]

name=”slug” // Accepts Time Slot category slug

Creating a Conference table step by step

Lets start by creating some Time slots for our Sessions. Navigate to Sessions→Time Slots and Create a new item which we will call Day 1 (since it will behave as our first conference day). Then create some child Time slots for our Day 1 item that will have a time format, so even if they are not actually time objects you they will look like 8:00, 9:00, 10:00 etc. Now lets create two new Track items for our Sessions. Track items are taxonomies and they can be created from Sessions→Tracks and can be used as , for example, our two main halls that will host the conference. Now that we have set our time and place, lets create some Speakers from Speakers→Add New. This will ensure that we will have for all our Sessions an active speaker. Finally, lets create some sessions and select for each a Time Slot (from the Day 1 parent taxonomy), a Track and a Speaker. After creating a series of Sessions, we can easily display our content as a conference table using the [conference-day name=”Day 1″] shortcode in any page we want to.

Elementor Widgets

Projektor comes with custom Elementor widgets which have the same functionality as its widgets, making landing pages easier to create.

Projektor Element

This is your Swiss knife when using Elementor plugin. With Projektor Element you can render all your content from all custom post types and their taxonomies(if any) as well as manually get any part of your content using a search keyword. Let’s have a quick look

1. Select in how many columns your content will render
2. Select the main source type for your content. Notice, you can select a manual mode, where you will get the source based on you search criteria
3. Filter your source content by author.
4. Select a category. If blank all categories will be shown.
5. Filter by tags.
6. Exclude posts you dont want to show
7. Select how many posts you want to show
8. Select the offset of the rendered posts (2 for example, will leave the first two).
9. Select the order by a value (Date, etc)
10. Select the order of your results (descending etc)

Projektor Sponsor Element

This Element will let you display any Sponsor category your wish in any location inside Elementor page builder.

1. Select one or all Sponsor Categories
2. Select the number of columns they will be rendered
3. Link sponsors to their external URLs

Projektor Schedule Element

With this element you can easily add your schedule menu by simply selecting its Time Slot.

Hooks

Hooks will allow you to add extra functionality at various areas inside the theme. For example, you might need to add a simple ad banner or text after each post, or after your header! Hooks will help you achieve this.

Check this WordPress Hooks API guide to make yourself familiar with Hooks (actions/filters etc).

Here are all theme hooks

Examples if you dont want to use Global Layout post type

add_action( 'projektor_head_mast_before', 'projektor_custom_script_before_header' );

function projektor_custom_script_before_header() {   
 // Your PHP goes here
}

add_action( 'projektor_after_header', 'projektor_custom_html_after_header' );
function projektor_custom_html_after_header() { ?>      
<!-- Your HTML goes here -->
<?php }

Still have questions or problems setting up your CSSIgniter Theme? We will be happy to help you out! Please visit our support Hub