Customizing the BookChoix Homepage Elementor widgets

This guide explains how to edit the elements on your BookChoix BookStore theme‘s homepage built with Elementor. The homepage features various widgets showcasing products (featured, top selling, specific categories, etc), categories, testimonials, Book authors and blog posts.

Before you begin:

Make sure you have administrator or Editor access to your website.

Editing Elements

Open the Homepage in Elementor:

• Go to Pages in your WordPress dashboard.
• Choose a Homepage and hover over it.
• Click the blue button “Edit with Elementor“.
• Select the element you want to customize:

Click on the specific element you want to edit on the homepage preview. This will highlight the element and open the settings panel on the left side.
Customize the widget:

The left sidebar contains settings specific to the chosen widget. Use these settings to modify the content and appearance of the element.

List of widgets added on homepage 1:

• Product Slider (Recent, Featured, Top selling, Categories, Single IDs and Tags, Top rated, On sale)
• Category Images
• Authors Widget
• Testimonials Widget
• Recent Blog Posts Widget

Product Slider

This widget displays a carousel showcasing products based on various criteria

Recent: Displays recently added products.
Featured: Showcases products you’ve marked as “Featured.”
Top selling: Highlights your best-selling products.
Categories: Displays products from specific product categories.
Single IDs and Tags: Allows you to select individual products or products with specific tags.
Top rated: Displays products with the highest average ratings.
On sale: Showcases products currently on sale.

Showing Category Images

This widget displays images representing product categories.

Customization options: You can choose the  categories that you want to be displayed and number of columns to be displayed on.

Authors Widget

This widget showcases your Book’s authors with their avatars and bios (if provided).

Customization options: You can choose which authors to display and how their information appears.

Testimonials Widget

This widget displays customer testimonials to build trust and credibility.

Before adding the widget, ensure that you have added testimonials posts in the WordPress dashboard.

Customization options: You can edit existing testimonials or add new ones. Modify the author name, quote content, and avatar image.

Mailchimp Newsletter Subscription Form

This widget displays a subscription form that integrates with your Mailchimp account using MC4WP.

Integrating with MC4WP:

1. Create a Mailchimp account: If you don’t have one already, sign up for a free Mailchimp account.
2. Set your API key in the plugin settings.
3. Configure the widget: In Elementor widget, select the Mailchimp Newsletter Subscription Form widget or put the newsletter form ID that is created inside the MC4WP -> Forms.

Recent Blog Posts Widget

This widget displays snippets of your latest blog posts, encouraging visitors to explore further.

Customization options: You can control the number of posts displayed, post filter, order and orderby sorting and customize the layout.

This may be due to the reason that the Envato API server may be down at the time when you try to activate the license. You may try after few minutes.

There could be another reason that your server does not with installed cURL library or may not allow running the WordPress function wp_remote_get(). You can check if all server requirements are fulfilled here https://yourwebsite/wp-admin/admin.php?page=wpshapere_help

Please read the following article to know how to enable cURL in your server if not installed https://askubuntu.com/questions/259681/the-program-curl-is-currently-not-installed or contact your hosting provider to ensure that your hosting account is installed with cURL module.

If none works, kindly open a support ticket along with your WordPress admin login details so we can manually validate your purchase code. Please ensure that you have enabled the plugin editor and file writing permission for the plugin editor before opening support ticket.

Here’s how to save your page as a template:

1. Edit the WordPress page that you want to save as a template.
2. Once you open the page on the left side, near the Update button, you’ll find a down arrow icon and click on it.
3. You will be shown two options. Select “Save as Template.”
4. Give the template a suitable name as your wish.
5. Click Save. The template will then be saved to your Elementor template library under the name you chose.

How to insert a saved elementor template to a page:

1. Create a new page or navigate to the existing page where you want to insert the template.
2. Click the Folder icon.
3. Select My Templates to browse your saved templates.
4. Click Insert next to the template you want to add.
5. You will get a popup with two options. Click the ‘Don’t apply‘ option.
6. That’s it.

Organizing the Menu items as per your requirement:

1. Once you’ve added items to your menu, you can easily drag and drop them to arrange them in the desired order.
2. When you drag an item to the right of another item, you can create sub-menu.
3. Sub-menu will appear as dropdown menus when the corresponding main menu item is clicked.

The main reason for the mobile menu malfunction is: you might not created a menu for Mobile navigation

To make your Hamburger menu or
Mobile menu to work follow these simple steps:

1. Click on Appearance.
2. Select Menus.
3. Select the menu to edit.
4. And select “Mobile Navigation” in Display location.
5. Only if you select Mobile Navigation in Display location your Mobile menu/Hamburger menu will be displayed on mobile view.
6. Click on Save Menu.

A well-designed mobile menu ensures that your visitors can easily navigate through your website, leading to higher engagement and conversions. If you’re wondering how to create a mobile menu in WordPress, follow the below steps.

Steps to create a mobile menu for Apper Theme in WordPress:

1. Click on Appearance  -> Menus
2. Under Menu structure type the menu name in the “Menu Name” option
3. Click on Create menu
4. Select the menu items you want from the left column and click on Add to Menu button to add to the “Menu structure“.
5. Under Menu Settings select “Mobile Navigation” under Display location
6. Click on Save Menu.

Creating menus on your website is easy with CodBe WordPress Theme, from simple dropdowns to complex mega menus, thanks to the theme’s built-in mega menu features.

Building a simple dropdown menu is straightforward: just drag menu items and sub-menu items to the right “Menu structure“.

For mega menus, expand the menu, select ‘Enable Mega Menu,’ and choose the desired number of columns.

You can then create your columns and the submenus or column contents as shown below.

You can also add an image via WordPress widget or insert any widget in to a column by selecting the sidebar from the dropdown as shown below

In the CodBe theme, there are 2 different header styles: Light version and Dark version. You can set global page header styles under “Page Header Builder”.

You can also set the default menu style for all pages under CodBe Options -> Page Header Settings -> Set default menu version for pages.

To add your logo for dark header style,

Go to Appearance > CodBe Options > Main/Menu Header Settings > Logo dark version.

Click Upload button and select and upload your logo from your local computer.

To add your logo for light header style,

Go to Appearance > CodBe Options > Main/Menu Header Settings > Logo light version.

Click Upload button and select and upload your logo from your local computer.

Here’s how to customize the header style displayed across your website:

The CodBe theme offers four styles, and each style can be customized separately.

1. Navigate to Appearance > CodBe Options > Page Header Builder > Default Page Header.
2. Choose the header banner style you want to use.
3. Customize the colors of the selected banner style as you wish.
4. Note: This default style will be applied to all pages. However, you can select unique page header style for specific pages under the “CodBe page settings” option within each page’s edit window. This feature is explained in more detail below.

Customizing page header styles for specific page

1. Navigate to Pages -> All Pages and Edit the specific page that you want to set a different header style.
2. You can set the header banner style under CodBe page Settings -> Header.
3. Select the banner style and click Save Changes.
4. This will be applied only to that specific page.

To customize footer heights and other adjustments, navigate to Appearance -> CobBe Options -> Footer Settings -> Footer Top Styles.

Here, you’ll find options to adjust the width of the columns and padding for both the top and bottom of the footer.

Simply adjust the width and padding to your liking.