1. Documentation /
  2. ePentatonic Theme

ePentatonic Theme

Build a stunning music online store for your products with the ePentatonic block theme for WooCommerce. There are block patterns, Templates, and Template Parts needed for the music website. To create a site with ePentatonic, you must install the ePentatonic theme and WooCommerce plugin.

ePentatonic Installation

↑ Back to top

Theme Installation

↑ Back to top
  1. Log in to your WooCommerce.com account.
  2. Navigate to the Downloads page. You will see eLaventa theme and click on Download to get a compressed elaventa.zip theme file on your computer.
  3. Log into the WordPress admin panel.
  4. Go to Appearance > Themes and click on the Add New button, at the top of the screen.
  5. In the Add Themes screen, click on Upload Theme.
  6. Click on Choose File, and then browse for the compressed elaventa.zip theme file on your computer.
  7. Click on Install Now to start the installation.
  8. After the installation is done, click on the Activate button.
Install ePentatonic Theme
Activate ePentatonic Theme

More information on Adding New Themes.

Required Plugins

↑ Back to top

This theme is built with the WooCommerce plugin. So, make sure that the WooCommerce plugin is installed and active.

Installing WooCommerce Plugin

↑ Back to top
  1. Log into the WordPress admin panel.
  2. Go to Plugins -> Add New.
  3. Search for “WooCommerce”.
  4. In the search results, click on Install Now.
  5. After the installation is done, click on the Activate button.

Importing Demo Content

↑ Back to top

Importing demo content is an easy way to replicate the demo site and start editing the content. It will allow you to quickly edit everything instead of creating content from scratch.

Navigate to the “Appearance -> Demo Content” or click on the “Import” button.

Theme Customization

↑ Back to top

ePentatonic Theme is a block theme which enables the Site Editor. The Site Editor allows you to design the entire site including the header, footer, and everything in between, with blocks and patterns. It gives you greater control over how your site looks. You can rearrange the blocks and patterns, and edit templates and template parts.

Accessing The Site Editor

↑ Back to top
  1. Log into the WordPress admin panel.
  2. Go to Appearance -> Editor. The Site Editor will then load the front page of your site for you to start editing.
  3. Now, you can edit the blocks (headings, paragraphs, images, buttons, and so on) and patterns directly. Add or remove the blocks and patterns, and manage their position by moving up and down as per your need.
Accessing the Site Editor

More information on Site Editor.

Returning To The Dashboard

↑ Back to top
  1. To go back to your dashboard, click the WordPress icon (or Site icon if you have set one) to open the Site Editor left navigation.
  2. Select Dashboard to take you back to your WordPress dashboard. You will be prompted to save the changes you have made in the Site Editor before leaving.
Returning to the Dashboard

Accessing the Templates Using Site Editor

↑ Back to top
  1. Access the Site Editor as mentioned above.
  2. Click on the WordPress icon (or Site icon if you have set one) to open the Site Editor left navigation.
  3. Click on Templates on the left side of the screen.
  4. Click on the Template that you want to access/edit.
Templates

The ePentatonic theme offers 23 different Templates. You can customize these templates if you feel like changing anything on a certain template and wish to see those changes across your site. Basically, a template defines the structure of the content area of the site, such as a Front Page, 404, Search, Archive, Single post, Page, Shop, etc.

Here is the list of templates available within the ePentatonic theme:

  1. Front Page: Displays the homepage.
  2. Page: Displays a single page.
  3. Single Page (No Sidebar Full Width): Displays a single page on a full-width layout.
  4. Single Page (Sidebar on Left): Displays a single page with a Sidebar on the Left.
  5. Single Page (Sidebar on Right): Displays a single page with a Sidebar on the Right.
  6. Single: The default template for displaying any single post or attachment.
  7. Single Post (No Sidebar Full Width): Displays a single post on a full-width layout.
  8. Single Post (Sidebar on Left): Displays a single post with a Sidebar on the Left.
  9. Single Post (Sidebar on Right): Displays a single post with a Sidebar on the Right.
  10. Blank: The blank template can be used for displaying the contents of a post or page.
  11. 404: Displays when no content is found.
  12. Search: Displays search results.
  13. Archive: Displays post categories, tags, and other archives.
  14. Blog Page (Sidebar on Left): Displays the Latest posts with a Sidebar on the Left.
  15. Blog Page (Sidebar on Right): Displays the Latest posts with a Sidebar on the Right.
  16. Home: Displays posts on the homepage, or on the Posts page if a static homepage is set.
  17. Index: Displays Posts.
  18. Shop Archive Product: Displays your products.
  19. Shop With Full Width: Displays your products on a full-width layout.
  20. Shop With No Sidebar: Displays your products without a Sidebar.
  21. Shop (Sidebar on Left): Displays your products with a Sidebar on the Left.
  22. Shop (Sidebar on Right): Displays your products with a Sidebar on the Right.
  23. Shop Single Product: Displays a single product.

Accessing the Template Parts Using Site Editor

↑ Back to top
  1. Access the Site Editor as mentioned above.
  2. Click on the WordPress icon (or Site icon if you have set one) to open the Site Editor left navigation.
  3. Click on Template Parts on the left side of the screen.
  4. Click on the Template Parts that you want to access/edit.
Template Parts

The ePentatonic theme offers 12 different Template Parts. The Template Parts is the part of the Templates which helps you to organize and add structure to the theme to avoid having to repeat code. For example, you can define the template part for the header and footer and then combine them with the Font Page template file.

Here is the list of template parts available within the ePentatonic theme:

  1. Page Content: Content inside the page.
  2. Post Content: Content inside the single post.
  3. Header With Cart Banner: Default header.
  4. Footer (With Three Columns): Default footer.
  5. All Products: Displays all products.
  6. Sidebar: Display sidebar.
  7. Product Sidebar: Displays the sidebar for products.
  8. Header: Alternative header design.
  9. Header With Cart: Alternative header design.
  10. Header (With Header Media No Video And No Social Search): Alternative header design.
  11. Header (With Buttons): Alternative header design.
  12. Footer: Alternative footer design.

Editing The Header Using The Site Editor

ePentatonic theme, uses the Header With Cart Banner template part as the default for the header. This template part includes a Cover, Site Logo, Site Title, Site Tagline, Navigation Menu, Social Icons and Mini Cart blocks.

  1. Access the Site Editor.
  2. Click on the WordPress icon (or Site icon if you have set one) to open the Site Editor left navigation.
  3. Click on Template Parts on the left side of the screen.
  4. Click on the Header With Cart Banner to edit the blocks inside the header.
Selecting Template Part
Header With Cart Banner Template Part

Replace a Header Image

  1. Access the Header With Cart Banner template part as mentioned above.
  2. Select the default Cover Image and on the Cover Block Toolbar, click on Replace.
  3. If you want to use existing images from your Media Library then click on Open Media Library, select the existing image on Media Library, and click on the Select button.
  4. If you want to Upload a new image then click on Upload, select the image on your computer and click on the Open button.
  5. If you want to use the featured image then click on use featured image.
Cover Image Block

Add A Site Logo And Edit the Title And Tagline

  1. Access the Header With Cart Banner template part as mentioned above.
  2. Click on the Site Logo placeholder which will open the Media Uploader.
  3. From the Media Uploader, you can either upload a logo from Upload files or use the existing image from Media Library.
  4. Select the logo and click on the Select button.
  5. For other settings and customization, navigate to the right sidebar, where you will find different settings like Styles, Image Width, Dimensions, etc.
  6. Click on Site Title and edit the Title.
  7. Click on the Site Tagline and edit the Tagline.
  8. After all the adjustments, click on the Save button.
Site Logo, Title, and Tagline

More information on the Site Logo block.

Editing Header Navigation Menu

  1. Access the Header With Cart Banner template part as mentioned above.
  2. Select the Navigation Block and edit it as instructed in the heading below Navigation Block (Site Navigation Menu)

Editing Header Social Icons

  1. Access the Header With Cart Banner template part as mentioned above.
  2. Select the Social Icons Block and edit it as instructed in the heading below Social Icons Block (Social Media Menu).

Adjusting Mini Cart Block

  1. Access the Header With Cart Banner template part as mentioned above.
  2. Select the Mini Cart block and from Settings, you toggle Hide Cart Price or remove it from the Options (3 Horizontal dots) button in Block Toolbar.
  3. After adjusting, click on the Save button.
Mini Cart Block

ePentatonic theme, uses the Footer (With Three Columns) template part as the default for the footer. This template part includes a Heading, Paragraph, Social Icons, Image, and Latest Posts blocks which are wrapped in a Row, Columns, and Group blocks.

  1. Access the Site Editor.
  2. Click on the WordPress icon (or Site icon if you have set one) to open the Site Editor left navigation.
  3. Click on Template Parts on the left side of the screen.
  4. Click on the Footer (With Three Columns) to edit the blocks inside the footer.
Selecting Template Part
Footer (With Three Columns) Template Part

Editing Heading and Paragraph

  1. Access the Footer (With Three Columns) template part as mentioned above.
  2. Click on the Heading or Paragraph that you want to edit and edit the text as per your need.

Editing Footer Social Icons

  1. Access the Footer (With Three Columns) template part as mentioned above.
  2. Select the Social Icons Block and edit it as instructed in the heading below Social Icons Block (Social Media Menu).

Editing Footer Copyright Text

  1. Access the Footer (With Three Columns) template part as mentioned above.
  2. Click on the Footer Copyright Paragraph block and edit the text and links as per your need.

Editing Footer Navigation Menu

  1. Access the Footer (With Three Columns) template part as mentioned above.
  2. Select the Navigation Block and edit it as instructed in the heading below Navigation Block (Site Navigation Menu)

Blocks

↑ Back to top

Blocks are the components for adding content in WordPress. There are many different block types available in the WordPress editor to add text, media files, and layout elements which gives your more flexibility to build content. This theme support all WordPress and WooCommerce blocks that you can use to create well-organized content.

You can add or edit blocks in Page and Post Block Editor as well as in Site Editor.

Adding Block In The Block Editor (Page/Post)

↑ Back to top

There are several ways to add a block to your post or page from the Block Editor when you are editing your post or page.

You can use the Block Inserter (+) icon to add a block. You can also use a shortcut slash (/) command to quickly add blocks or use the More options on any of the block’s toolbar to add a block. You can also move blocks or search for a block in your post or page.

Adding Blocks Using The Block Inserter (+) Icon

There are three ways to add a block using the Block Inserter (+) icon.

  1. Block inserter (+) icon in the top toolbar
  2. Block inserter (+) icon to the right of an empty block
  3. Block inserter (+) icon in between blocks
Block Inserter (+) Icon

After you click on the Block inserter (+) icon, it will display a list of blocks available as well as a search box to search for a specific block that you need. Click on that block that you want as per your need. For Example, you can use the Heading block to add a heading, paragraph block to add text, Image block to add an image, Navigation block to add a navigation menu, Social Icon block to add Social Media profiles, and so on.

More information on the Adding Blocks.

Navigation Block (Site Navigation Menu)

↑ Back to top

The Navigation Block is an advanced block that enables you to edit your site’s navigation menu. This theme has used the Navigation block in various template parts like Header With Cart Banner, Header With Cart, Header (With Header Media No Video And No Social Search), Header (With Buttons), Footer, and Footer (With Three Columns). So, you can edit these template parts to add your existing navigation menu or create a new navigation menu.

Adding Existing Navigation Menu

  1. Access the Site Editor as mentioned above.
  2. Access the template part which has a Navigation block. The screenshot below shows the Navigation Block on the Header With Cart Banner template part.
  3. Click on the Navigation block and open the Settings panel.
  4. If you have a menu you’ve already created with the Navigation block or one from a previous theme (including menus from any classic themes), then you can select the existing menu from the Settings panel.
  5. After selecting the menu, click on the Save button.
Selecting an Existing Menu

More information on Navigation Block.

Creating a New Navigation Menu

  1. Access the Site Editor as mentioned above.
  2. Access the template part which has a Navigation block. The screenshot below shows the Navigation Block on the Header With Cart Banner template part.
  3. Click on the Navigation block and open the Settings panel which should show the Navigation block settings. Sometimes, you need to select “Select Navigation” from the toolbar to show the Navigation settings panel.
  4. From the Settings panel, click on Menu Selector and select Create New Menu.
  5. This will add an empty menu, now click on the + Add Block button which will allow you to search or type the URL as needed.
  6. To add submenu items, simply select the block you want to add submenu items to and, in the block toolbar, click on the submenu icon. This will automatically add a submenu item below the block you selected.
  7. After adding all the necessary links, click on the Save button.
Select Navigation Button
Create New Menu
Adding Menu Items
Add Submenu Button

More information on Creating a New Menu.

Social Icons Block (Social Media Menu)

↑ Back to top

The Social Icons block allows you to add icons linking to your social media profiles or sites. This helps to increase the visibility of your social media profiles. This theme has used the Social block in various template parts like Header With Cart Banner, Header With Cart, and Footer (With Three Columns).

Editing Default Social Media Icons And Links

  1. Access the Site Editor as mentioned above.
  2. Access the template part which has a Social Icons block. The screenshot below shows the Social Icons Block on the Header With Cart Banner template part.
  3. You will see YouTube, Instagram, and SoundCloud as the default Social Media Icons.
  4. To add a link to default Social Media Icons, just click on the Social Media Icon and add the URL for the social media profile in the input field, and press Enter.
  5. To remove any default Social Media Icon let’s say Instagram Icon, just click on the Instagram Icon and click on the Options (3 Horizontal dots) button in Block Toolbar, and click on Remove Instagram.
  6. After editing Social Media Icons, click on the Save button.
Social Icons Block
  1. Access the Site Editor as mentioned above.
  2. Access the template part which has a Social Icons block. The screenshot below shows the Social Icons Block on the Header With Cart Banner template part.
  3. Select the Social Icons block and click on the (+) icon at the rightmost corner to show the list of available social media platforms. 
  4. If you do not find the platform you are looking for in the menu, type the name of the platform in the search box.
  5. Select the icon from the menu to add it to the Social Icons block.
  6. Add the URL for the social media profile in the input field and press Enter.
  7. Repeat these steps for each of the social media profiles you want to add.
  8. After adding all the necessary Social Media Icons, click on the Save button.
Add Social Media Icons

More information on Social Icons Block.

Patterns

↑ Back to top

Block Patterns are a collection of predefined block layouts, available from the patterns tab of the block inserter. Once inserted into content, the blocks are ready for additional or modified content and configuration.

Using the block pattern is an easy way to create beautiful layouts. Besides standard patterns, ePentatonic comes with 30 incredible pre-designed block patterns to produce professional designs.

To add a pattern, click on the block Add button, and then click on the Browse All button, in the floating block picker. In the left-hand side panel, click on the Patterns tab, and then from the dropdown pick the desired pattern group.

There are three ways to add Block Patterns using the Block Inserter (+) icon.

  1. Click on the Block inserter (+) icon in the top toolbar and Click on Patterns. Browse the Patterns and select the one that you like to add.
  2. Click on the Block inserter (+) icon to the right of an empty block, after that Click on the Browse All button, and finally Click on Patterns. Browse the Patterns and select the one that you like to add.
  3. Click on the Block inserter (+) icon in between blocks, after that Click on the Browse All button, and finally Click on Patterns. Browse the Patterns and select the one that you like to add.

ePentatonic Block Patterns

↑ Back to top

ePentatonic comes with 30 incredible pre-designed block patterns to produce professional designs.

  1. About Us With Stats
  2. Case Study Videos
  3. CTA
  4. Episode
  5. Favorite Podcast
  6. Featured Podcast
  7. How It Works
  8. Latest Products
  9. Logo
  10. Music Podcast
  11. Sidebar
  12. 404 Header
  13. Band Members
  14. Footer Default
  15. Footer Three Columns
  16. Header Default
  17. Header Media
  18. Header With Buttons
  19. Header With Cart Banner
  20. Header With Cart
  21. Header With Header Media No Video And No Social Search
  22. Hidden 404
  23. Post Header
  24. Archive Header
  25. Product Sidebar
  26. Recent Blog With Sidebar
  27. Search Header
  28. Services
  29. Team
  30. Testimonials

Adding ePentatonic Theme Patterns

↑ Back to top
  1. Click on the Block inserter (+) icon in the top toolbar.
  2. Click on Patterns.
  3. Select ePentatonic in the select box.
  4. Select the ePentatonic theme custom patterns.
ePentatonic Theme Patterns

More information on Block Patterns