Elementor is Free, you don’t need to purchase a Pro version. If you want to use WPBakery, just switch option and save.

Installation

• If you are installing Kentha for the first time, Elementor is already the default editor.
• If you are updating  from a previous version of Kentha that uses WPBakery, your default composer will still be WPBakery, and you won’t be asked to install Elementor, unless you switch editor manually.

How to choose your editor:

1. Click on the Kentha admin page
2. Set your preferred editor, then click Save
3. Click “Go to Kentha Plugins” and install any required plugin.

Once Elementor and the Kentha Elementor plugin are installed, you will find the Elementor demos available at the demos page.

1. Click Pages > add new and set a title
   
2. Select the page template “Page Visual Composer”
   
3. Click Save Draft or Publish
4. Click Edit with Elementor
   

This theme adds a lot of custom widgets to the Elementor Builder. All of the widgets previously available in WPBakery have been added to Elementor.

A page that was previously built with WPBakery cannot be translated into a “Elementor page” (there is no conversion software for this). If your home page was built in WPBakery and you want to switch editor, you will need to manually rebuild it.

Our documentation covers any custom functionality added to the Elementor builder in the next pages.

For every basic usage information, please refer to the official Elementor documentation

Navigator options

To better use Elementor on the Kentha theme, is recommended to make use of the Navigator panel:

1. Right click in a Elementor content
2. Click “Navigator”
3. Optionally drag it to the edge so it will become a fixed column
4. Once available, you can right click on a section, to highlight its settings, modify backgrounds and margins.
   
5. Click Edit Section to access the section settings
   

Opening Navigator to modify sections:

Editing section paddings and backgrounds

1. Click Edit Section
2. Click Advanced
3. Click the Chain icon to unlink the top, bottom, left and right sizes and set custom parameters
4. Add the padding. We suggest for desktop, 120px top and bottom.
   
5. Optionally, click the small device responsive icon to set different parameters for mobile (this can be done after your page is done)
   

Section slideshow backgrounds

In some Kentha demo pages, background sliders are built completely in Elementor.

To edit or create a background slideshow:

1. Right click a section and click Edit section
2. Click Style
3. Select the Slideshow background type

More information

For more information about Elementor sections and backgrounds, please find an official tutorial at this page:
https://elementor.com/blog/website-background-images/

Official Elementor documentation

Homepage

Custom Elementor widgets

This theme adds 30 custom Elementor widgets to the editor.

The available widgets are depending on the active plugins.

• Radio station widgets require the KenthaRadio plugin.
• WooCommerce widgets are available only with WooCommerce installed.
• Contact Form 7 widget is available only with the plugin Contact Form 7 installed.

Each widget is explained in a specific page of the manual.

This widget for elementor can display an animated 3d element with multiple layers of images.

The button can link to a custom URL or play a selected release from the archive.

To add a 3D header:

1. Edit the page with Elementor
2. Add a section.
3. Using the navigator (right click > navigator on the page) edit the section
   
   
4. Make sure to set the section “Full Width”
   
5. Look for the widget 3D header
   
6. It is normal that it appears as a full screen empty screen
7. Set a button function. You can set it as link page, play album (requires an existing album) or play radio (requires KenthaRadio and a radio channel)
8. Optionally customize appearance, position and colors of the button.
   
9. If selecting Play Album, you will need to select an album. If selecting Play Radio, you will need to choose an existing radio channel. Otherwise the button will not appear.
10. If selecting Play Album, the album cover will automatically be extracted from the archive.
11. In the Background section, you can set one or more layers of decorative images. We recommend using transparent PNGs. Please make sure you don’t make it too heavy, or your page performance may be poor.
    The number of the background is based on the 3D depth of the layer.
    

Preset images and templates

Kentha comes with a useful serie of images for your 3D headers, included in the product folders.

Performance issues and fixes

If the performance appears degraded, it’s possibly caused by obsolete browser settings.

1. Go to the Chrome settings
2. Click advanced at the bottom of the page
3. Enable the Hardware Acceleration

To add an accordion element to your page using Elementor:

1. Edit the page with Elementor
2. Look for Accordion among the widgets
3. Add it to the page
4. Click add item
5. Set a title and content
6. Repeat for each item
7. Accordion items are not meant to contain shortcodes

This widget adds a blog posts list of items (or grid) and has 4 possible design modes:

1. Default: a large blog design that uses the whole width
2. Split: image is on the left
3. Cards: interactive cards
4. Masonry

To add a blog archive element to your page using Elementor:

1. Edit the page with Elementor
2. Look for Blog among the widgets
3. Add it to the page
4. Set the design
5. Optionally set a category to filter the results.
6. Offset: how many results to skip from the first, useful to avoid duplicates

Default

Split

Masonry

Cards

To add a button element to your page using Elementor:

1. Edit the page with Elementor
2. Look for Button among the widgets and make sure to use the custom button from kentha (color icon)
3. Add it to the page
4. Function: choose among link or play album
5. Button label: the text
6. Link: available if the Link function is selected
7. Album: available if Play Album is selected
8. Style: start from a default style for the Kentha buttons
9. Size: size of the texts
10. Padding: set custom paddings. You can use the Responsive icon to change values for a mobile device

After choosing Play Album, you can set which album to play on click. All of the tracks will be added to the playlist and it will start to play once clicked

Colors and Colors hover:

• Background: set the button background
• Text
• Border type: set a type and optionally width and color
  

Display the tracks of a selected chart.

If no chart is selected, it will display the latest published chart from the archive.

• Select chart: optionally choose one chart from the archive
• Number of tracks: set the max amount of songs to display. If less than the total, a link will point to the full page
• Show title and cover: adds a title and image above the tracks
• Style: 2 options available: compact and default. The compact version does not have voting options.

Once you created a form, edit a page with Elementor, and add the Contact Form 7 widget to the page.

This will display the form.

To edit the form, always use the native Contact Form 7 form editor.

Docs

The featured event can display one or more events in a large format. If the event has a future date, it will display also a countdown.

You can choose a specific event by title, display multiple events, filter them by category, or simply display the first upcoming event using the Hide Past Events parameter.

Set a background to the featured event:

1. Edit the section
2. Edit the section Styles
   
3. Set the background with Elementor. We suggest using  the size Cover
   
4. Optionally set an overlay to increase legibility
   

Display a list of events in the upcoming order

The flex gallery is different from a standard gallery with fixed thumbnails: the fixed dimension is the height and it uses CSS flex to display a size of pictures as close as possible to the chosen height, while the amount of items per row can change depending on the width of the gallery.

To add pictures to your gallery, click on the + icon, and select the pictures from the archive, or upload new ones. Make sure to upload web-optimized images (JPG about 75% quality with weight below 200Kb) for good page performance.

If you don’t like how it works or prefere a more classic type of gallery (with a fixed number of items per row), you may want to use another Gallery widget instead from Elementor.

Depending on the pictures and on the size of the thumbnails, you may want to test different Heights to find the best visualization settings.

Using the responsivity icon , you can change the size for the mobile devices.

This widget created a custom slider of images, with optional text, link and button label.

Its role is to easilyadd a simple slideshow of attractive banners, without too many options to choose from.

You can set custom design settings as font size, height and margins.

Display a custom playlist of tracks. It allows to manually add tracks and mp3 files without creating an album release.

1. Edit the page with Elementor
2. look for Playlist
3. Add the playlist to the page
4. Using the Add Item button, create a new element for each track you want to add
   
5. Set a cover
6. Click Choose/Upload file to add an MP3 sample
   
7. Click Upload Files and upload your mp3 track
   
8. Set the track title and artist
9. Optionally set a link for the album
10. Optionally set a purchase link. To allow download of a track, set the MP3 URL of the file you want people to download. To force download, link a zip version of the track or album.
11. Select the icon (download or cart)
12. Repeat for any track you want

Styling the playlist

You can style the container column to add backgrounds, paddings and colors, to create the perfect playlist for your website.

The post card grid can display normal news blog posts or custom post types like releases, podcasts and more.

Is possible to set a custom number of columns for desktop and tablet. On mobile, the amount is 1 and can’t be changed.

The post custom carousel displays a carousel of any custom post type.

You can customize the query parameters and certain display options.

To create a post custom carousel:

1. Edit the page with Elementor
2. Search for Post Custom Carousel
3. Drag it to the page
4. Open the Query panel and choose the post type
5. Optionally filter by taxonomy
6. max items: is recommended to use a small amount to keep a certain page performance
7. Offset: how many items to skip from the first
8. Then you can set the desgn in the Settings panel
9. The design has 2 options: default (arrows are on the top right corner) or center
10. Items per row
11. Items per row in tablet
12. Items per row mobile (default is 1, not every mobile allows changing this, depends on the screen size)
13. Autoplay: start the carousel automatically
14. Pause on hover: avoid moving if the mouse is on a card
15. Arrows and dots: display or not the elementr

Create a custom slider of posts for any custom post type, and several design options.

While there is a certain grade of customizability, this element is made to add easily and fast a slideshow to the pages, so there is not the level of complexity of a plugin like Revolution Slider or others. The idea is to add it quickly without a bloat of options.

Design options

Content query options

If you correctly set a radio channel and a titles source, (icecast, shoutcast or alternative compatible sources) this widget will display the song titles on your Elementor page.

Display a grid of release covers with play link, buy link and link to the album page.

1. Edit the page with Elementor
2. look for Release grid small
3. Add the widget to the page
4. Query: you can choose genre, specific items, max items, order, offset and exclude
   
5. Settings: choose the items per row for each specific device.

This widget allows to display the tracks of any existing release.

1. Edit the page with Elementor
2. look for Playlist
3. Add the widget Release playlist
4. Select a playlist from the dropdown
5. Optionally customize the titles size to fit your design

Styling the playlist

You can customize the column background and add more information and colors to make the playlist design more stylish. In this example, there is a column with 2 inner sections.

The first section has the album cover (an Image element) and the titles (text element).

The container column uses a picture background and a gradient overlay.