Nebon - WordPress Theme - Documentation

1. System Requirements

2. Installation & Update

4. Install Needed Plugins

After successful activation of the theme, you need to install the necessary plugins for the site

Step 1. In WordPress Dashboard, click to Begin installing plugins in installation notification

Step 2.

1 - Choose check all plugins

2 - Choose Install action

2 - Click Apply and wait

Successful install and active required plugins.

5. Import demo data

Step 1. In WordPress Dashboard, Go to Appearance -> Import Demos

Step 2. Fill your Evanto username and purchase code to activate premium features

Step 3. Click to Import Demo

Choose data you want to import and click to import button

Successful import demo data

Note: In case your server has the same configuration as the request but still can not import successfully with Import now. You can use the Import without media feature and then Import media. You can import many times until successful.

0. Header & Footer settings

1. Basic Settings

2. Blog & Post

5. Shop Settings

6. Product Settings

1. Page Settings Metabox

In WordPress Dashboard, You can go to Page -> Add New / Edit Page to see metabox settings for page (default template) .

- Header Page: Select a custom Header (post type header_item) to use on this page. If left empty, the theme’s default header is used. Manage headers in the Header admin menu.

- Footer Page: Select a custom Footer (post type footer_item) to use on this page. If left empty, the theme’s default footer is used. Manage footers in the Footer admin menu.

- Show page title: Toggle the page title visibility for this page only.

- Breadcrumb Image: Upload one image to display as the breadcrumb background on this page. If left empty, the theme’s default breadcrumb image is used.

- Breadcrumb Opacity: Set the breadcrumb overlay opacity from 0 (transparent) to 1 (solid). If left empty, the theme’s default breadcrumb opacity is used.

- Page Sidebar Position: Choose the sidebar position: Left, Right, or No Sidebar.
Note: This applies when the page uses the theme layout (e.g., Default template). Elementor Canvas / Full Width templates won’t render theme sidebars. If left empty, the theme’s default sidebar position is used.

- Sidebar Item: Pick which registered sidebar/widget area to display when the position is Left or Right. If left empty, the theme’s default sidebar item is used.

- Enable Ajax Filter: Enable AJAX filtering for shop/product lists when using the theme’s Elementor product-list widget.

- Fullwidth Page: Make this page use a full-width container (no side gutters from the theme container).

2. Product Settings Metabox

In WordPress Dashboard, You can go to Products -> Add New / Edit Product to see metabox settings for product.

- Breadcrumb Image: Upload a custom breadcrumb background image for this product. If left empty, the theme will use the global breadcrumb image or background color.

- Breadcrumb Opacity: Adjust the overlay opacity on the breadcrumb image from 0 (transparent) to 1 (solid).

- Sold in time: Optional field for displaying campaign duration or sold time information.

- Product thumbnail hover: Upload an alternate product thumbnail that will appear when the product image is hovered in product listings.

- Product guide: Upload a guide file (image or PDF) to be displayed or linked on the product detail page.

- Product detail style:
• Style1 (Swiper gallery) — Default as defined in the Theme Options. Product images are displayed in a swiper (carousel) layout, and the product information scrolls normally.
• Style2 (Fixed Info) — Product images are displayed vertically. The product information area (title, price, add to cart, etc.) stays fixed on the side until all product images are scrolled through.

- Sticky add to cart (Simple Product only): Enable or disable the sticky add-to-cart bar when scrolling on single product pages.

- Advanced: Allows you to append extra content or mega sections before/after the main product page and before/after the product tab section.

- Custom tab: Create custom product tabs by adding Title, Content, and adjusting their display order with the Priority field.

3. Post Settings Metabox

In WordPress Dashboard, You can go to Posts -> Add New / Edit Post to see metabox settings for post.

- Post Style: Select the layout style for this post. Default – Standard post layout following the theme style. Post Parallax – Enables a parallax-style breadcrumb image on the single post.

- Show Featured Image: Check to show the featured image on the single post page (applies to standard post format only).

- Fullwidth Layout: Enable this option to make the post layout stretch full-width (edge to edge) without the default container spacing.

- Post Sidebar Position: Choose the sidebar position for this post — Left, Right, or No Sidebar. If left empty, the theme’s default sidebar position is used.

- Sidebar Item: Select which registered sidebar (widget area) to display when a sidebar position is active. This field is visible only when the sidebar position is set to Left or Right. If left empty, the theme’s default sidebar item is used.

- Breadcrumb Image: Upload a custom breadcrumb background image for this post. If left empty, the theme will use the global breadcrumb image defined in Theme Options.

- Breadcrumb Opacity: Set the overlay opacity on the breadcrumb image from 0 (transparent) to 1 (solid). If not set, it falls back to the global breadcrumb opacity.

- Short Description: Enter a brief introduction or summary for this post. This text can be displayed before the main content or in custom areas depending on the theme design.

- Post Detail Gallery (for Gallery format): Upload multiple images to create a gallery for posts using the Gallery format. These images will display in the single post gallery layout.

- Upload Video (for Video format): Upload a self-hosted video file to display in the single post when using the Video format.

- Video URL (for Video format): Paste a video link (e.g., YouTube or Vimeo) to embed directly into the post content.

- Upload Audio (for Audio format): Upload an audio file (MP3, OGG, or WAV) to display in the single post when using the Audio format.

- Audio Embed URL (for Audio format): Enter a URL from external platforms such as SoundCloud or Spotify to embed an audio player.

1. Introduction

Elementor (formerly Visual Composer) is a unique plugin, it will help you manage your content at the WordPress sites and create stunning layouts in few minutes without coding. Nowadays many websites have complex grid layouts with columns, tabs, sliders and etc. In the Nebon, to create that type of layouts you should be HTML guru or Shortcodes operator ninja.

But not anymore! Elementor will create and manage complex layouts combined with professionally designed plugins made easy!

2. Plugin Documentation

Elementor Documentation

Elementor (Learn more)

Enable page builder for custom post type

In WordPress Dashboard, You can go to Elementor -> Role Manager. Choose Post types is Custom and check post type that you want to enable page builder and Save Changes to finish

3. Update Elementor plugin

When updating the theme version, if there is a newer update for elementor you will see the update notice line appear. You can see plugin package in folder theme -> plugins folder

You can update elementor following these steps:

Step 1. Click to Begin updating plugin.

Step 2. Click to Update

Update Successful

4. Activate plugin license

elementor was purchased by us for an extended license. As a result, all our buyers can use elementor without having to purchase additional personal licenses. The auto-update Activate plugin only applies to the templatemonster account that directly purchases the elementor license. But you can still update the latest version of Elementor through the installation message when updating our theme.

5. Widget elementor

Use the widget utilities provided by the plugin elementor

Overview of Elementor

Setting selector

1. Header & Footer

Header & Footer is one of our outstanding features. It allows you to create and edit your web page header/footer content with the page builder. You can easily edit or design your own header/footer for your site with a wide range of customizable features.

The First, please sure header / footer editing with page builder is active

In WordPress Dashboard, You can go to Header Page to edit/create header

Go to Footer Page to edit/create footer

Edit/Create Header Page interface

Edit/Create Footer Page interface

To set Header/Footer default for your site. You can go toTheme Option -> Customize Header / Customize Footer

To set Header/Footer for special page(Home page). You can go to edit page area. Find to Page Settings -> Choose Custom Header Page / Choose Custom Footer Page

2. Mega Menu

The First, please sure Mega Page editing with page builder is active

In WordPress Dashboard, You can go to Mega Page to edit/create content of mega menu

After you have a Mega Page, the next step is to go to the Menus to configure the display for a mega item.

Step 1. To Dashboard, you can go to Appearance -> Menus

Step 2. Select menu item to display Mega Menu. 

1. Check Enable Mega Menu

2. Select the Mega Menu to display

3. Save changes to apply

Step 3. This is the front end display interface

3. Elementor 7uptheme (Shortcodes)

List 7up's elementor.

Below is the interface of each element

3.1. Swiper Slider

Feature: Used to display swiper slider with any content.

Edit interface

Front-end views

3.2. Title

Feature: Used to display title anywhere in page builder.

Edit interface

Front-end views

3.3. Accordion

Feature: Used to display content in a collapsible accordion style.

Edit interface

Front-end views

3.4. Testimonial

Feature: Used to display customer testimonials in a stylish format.

Edit interface

Front-end views

3.5. Product Group

Feature: Allows selecting up to four products to display together. Customers can add individual items or the entire set to the cart.

Edit interface

Front-end views

3.6. Feature Box

Feature: Highlight key features or brand values with icons and short descriptions.

Edit interface

Front-end views

3.7. Quote Box

Feature: Display a quote with the author's name and image.

Edit interface

Front-end views

3.8. Video

Feature: Display a video with an overlay image.

Edit interface

Front-end views

3.9. Tip List

Feature: Display a list of tips with icons and descriptions.

Edit interface

Front-end views

3.10. Short Post Info

Feature: Display a short summary of a post excerpt (use for post edit with Elementor).

Edit interface

Front-end views

3.11. Image Link Box

Feature: Display an image with title, subtitle, and a clickable link button.

Edit interface

Front-end views

3.12. Product Tabs

Feature: Display products in tabbed sections such as New, Hot, or Sale, allowing users to switch between product groups easily.

Edit interface

Front-end views

3.13. Discount Products

Feature: Highlight discounted products with customizable titles and background image.

Edit interface

Front-end views

3.14. Featured Categories

Feature: Select and highlight featured product categories with customizable background images.

Edit interface

Front-end views

3.15. Advertise

Feature: Display image box with image and link.

Edit interface

Front-end views

3.16. About Us

Feature: Present an introduction section with background image, title, subtitle, and an optional video link.

Edit interface

Front-end views

3.17. History Timeline

Feature: Present a timeline section with events, dates, and descriptions.

Edit interface

Front-end views

3.18. Image Compare

Feature: Display two images side by side for comparison, with a draggable slider to reveal differences.

Edit interface

Front-end views

3.19. Team

Feature: Display a team section with member profiles, roles, and social links.

Edit interface

Front-end views

3.20. Location List

Feature: Display a list of locations with details such as address, phone number, and operating hours.

Edit interface

Front-end views

3.21. Custom Logo

Feature: Used to display logo of your site.

Edit interface

Front-end views

3.22. Navigation Menu

Feature: Used to display menu in header or anywhere in page builder.

Edit interface

Front-end views

3.23. My Account

Feature: Used to display user account information and settings.

Edit interface

3.24. Search Form

Feature: Used to display search form. You can custom search for post or product. Live search feature already included in this element.

Edit interface

Front-end views

3.25. Mini Cart

Feature: Used to display mini cart anywhere in your page builder.

Edit interface

Front-end views

3.26. Hot Deals

Feature: Showcase limited-time promotions with a countdown timer and highlighted discounted products.

Edit interface

Front-end views

3.27. List Gallery

Feature: Used to display a list of images in a gallery format.

Edit interface

Front-end views

3.28. My Wishlist

Feature: Used to display user's wishlist.

Edit interface

Front-end views

3.29. Phone

Feature: Showcase phone number with a click-to-call feature.

Edit interface

Front-end views

3.30. Social

Feature: Used to display social media links.

Edit interface

Front-end views

3.31. List Post

Feature: Display blog posts from selected categories in various layouts such as List, Grid, or Masonry with sorting options.

Edit interface

Front-end views

3.32. List Product

Feature: Display products from selected categories with flexible layouts (Grid or List), filtering, sorting, and pagination options.

Edit interface

Front-end views

3.33. Feature Products

Feature: Highlight featured products with a combination of image banners and product sliders for visual emphasis.

Edit interface

Front-end views

3.34. Button

Feature: Used to display button. You can custom style button in this elementor.

Edit interface

Front-end views

4. Create/Edit page

In WordPress Dashboard you can go to Pages -> All Pages and choose page want to edit. Or you can choose Pages -> Add New to create new page.

Pages template:

Default Template: Uses the theme’s default layout with standard header, footer, and padding spacing.

Elementor Full Width: Expands the content area to full width while still keeping the theme’s header and footer.

Elementor Canvas: A completely blank layout — removes the theme’s header and footer, ideal for custom landing pages built 100% with Elementor.

Theme: Uses the layout defined directly by the theme’s page template (for advanced customization).

Slider Revolution Blank Template: A clean, empty layout optimized for displaying full-screen Slider Revolution modules.

5. Create post/product

Create post

In WordPress Dashboard you can go to Posts --> Add New to create new post. Or Posts --> All Posts and choose a post to edit.

Create product

In WordPress Dashboard you can go to Products --> Add New to create new product. Or Products --> All Products and choose a product to edit.

Note: you can enable page builder for post/product to create/edit with Elementor.

6. Responsive

Base responsibe for column: when you create page builder content from rows and columns. You can divide the width of the columns you want to display for each screen.

In Column Settings, you can choose Responsive Options

Width: default width. Apply for small device.

Responsiveness: responsibe settings for 3 type of device.

1: Destop device

2: Tablet device

3: Mobile device

Advanced responsive:: Applies to some special items or all items depending on your settings.

In elements setting, You can choose Responsive Design Option: you can change padding, margin, background, width ... and alot of css attribute for each device.

8. Widget

List 7up's widget

8.1. 7up List Posts

8.2. 7up Select Mega Page Widget

8.3. 7up Custom Price Filter Widget

8.4. 7up Custom Attribute Filter Widget

8.5. 7up Custom Brand Filter Widget

8.6. 7up Custom List Product Widget

1. Choose home page

After importing the demo data. You can choose one of our demo home as your home page.

Step 1: In WordPress Dashboard, Go to Settings -> Reading

Step 2: Click to A static page (select below) and select Home page from list.

Step 3: Click Save Changes to apply.

2. Translate theme/plugin with Loco Translate

Loco Translate provides in-browser editing of WordPress translation files. It also provides localization tools for developers, such as extracting strings and generating templates.

First, you need to install Loco Translate plugin for your site.

Translate Theme

Step 1: In WordPress Dashboard, Go to Loco Translate -> Themes

Step 2: Choose theme want to translate from theme list.

Step 3: Click to New language to add language to translate. Or choose exits language to edit.

Step 4:Choose a language and location and click Start translating to start translate.

Step 5: translate interface

1: Click Sync button to update new pot file. Use when update theme or update pot file in theme-folder -> languages folder.

2: Enter key to find text/string

3: Source text, click to text want to translate.

4: Source text display.

5: Enter text translated.

6: Click Save to finish.

Translate Plugin: Same as translate theme, In WordPress Dashboard, Go to Loco Translate -> Plugins and and sequentially the remaining steps as you are translating the theme.

3. Multi language plugins

Our products are compatible with multi language plugins like WPML, Polylang, QTranslateX

First, make sure you have installed multi language compatible plugins for our products and that translations for languages are available for the categories, products, pages, product categories .... You can read Multi language plugin guide for usage

Theme Option in Multi Language: When using multi language plugin. Theme Option values will be stored independently for each language. So you need to save your settings for each language.

Go to Theme Option, Switch language that you want to settings

Header/Footer/Mega page in multi language: You can translate same as page or copy content and translate in a new Header/Footer/Mega Page and rechoose for each language.

4. Optimization

* Optimize Uploaded Images

Images are one of the heavier elements of your site. There are a few ways you can optimize your uploaded images.

You should specify the maximum image dimensions for thumbnail, medium, and large sized images. That means, if you upload an image 1024px wide, and your content area is only 604px wide, normally the image will be scaled down using CSS. When you specify the maximum width of your ‘large’ images as 604px, it’ll then display the pre-resized, 604px wide image, which will be significantly smaller in size.

* Install A Caching Plugin

The second most effective way (the first being choosing a good web host) to improve your site’s load times is to install a caching plugin. As soon as you install a plugin like W3 Total Cache or WP Super Cache, you’ll be able to tell that your site loads faster.

In simple words, when a caching plugin is active on your site, it servers users cached copies of your pages. It greatly reduces MySQL database access, no. of PHP requests, server access for static resources, and even HTTP requests (in case of combining multiple files into one).

W3 Total Cache is one my most favourite WordPress plugins. It offers a variety of caching features:

- Page Cache

- Minify

- Object Cache

- Database Cache

- Browser Cache

- CDN

Initially, you don’t want everything enabled. You can still safely enable everything except Minify and CDN (unless you want to use a CDN).

Minify breaks some other heavily JS-based plugins unless you specifically tweak it. On the other hand, you should tweak the Browser Cache settings to utilise the full potential of browser caching.

* Try a CDN to Speed Up WordPress

Offloading the static resources of your site, like images, scripts, css files, can speed up your site. Not only those resources will load faster for visitors, if you use a CDN, your primary server will have less load to handle and thus will deliver significantly better performance while serving the rest of your site.

* Enable Gzip Compression

You should serve compressed versions of your site to your visitors, as they’ll be less in size and will generally load a lot faster.

5. Use child theme

Child Themes

A child theme is a theme that inherits the functionality and styling of another theme, called the parent theme. Child themes are the recommended way of modifying an existing theme.

Why use a Child Theme?

There are a few reasons why you would want to use a child theme:

- If you modify a theme directly and it is updated, then your modifications may be lost. By using a child theme you will ensure that your modifications are preserved.

- Using a child theme can speed up development time.

- Using a child theme is a great way to learn about WordPress theme development.

Child Themes install

You can find child theme package next to the main theme package in the full download(nebon-child.zip). Once you've installed the main theme, you have to install the child theme and start customizing it

The main file

- function.php: You can create new function or php process for your theme or copy a php function in the main theme to child add to edit and customize your way.

- style.css: Allows you to insert the css code into your web page

Template folder

Allows you to change the html structure of the theme components. You can copy any file in folder s7upf_templates into child theme with the same directory structure to edit. Or you also copy all s7upf_templates folder into child theme for comprehensive change.

6. Custom style

In addition to using styles available in theme settings, you can add css codes to customize your look in the following ways:

Use Additional CSS in Customize WordPress: In WordPress Dashboard, Go to Appearance -> Customize -> Additional CSS

Use file style.css in child theme.