Documentation for Lefkada – Legacy

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