Beleco WordPress Theme Documentation

Theme installation

The theme can be installed in two ways – through the WordPress admin dashboard or by manually uploading files through an FTP.

Installing the theme through the WordPress admin dashboard

1. Log into the WordPress admin panel.
2. Go to Appearance -> Themes.
3. Click on the Add New button, at the top of the screen.
4. In the Add Themes screen, click on Upload Theme.
5. Click on Choose theme, and then browse for the theme file on your computer.
6. Click on Install Now to start the installation.
7. After the installation is done, click on Activate theme.

Installing the theme by manually uploading files

1. Download the latest theme version from ThemesKingdom.com.
2. Extract the zip folder on your computer.
3. Connect to your server using an FTP client.
4. Upload extracted theme folder into ..wp-content/themes/ directory.
5. Log into the WordPress admin panel.
6. Go to Appearance -> Themes.
7. Click on Activate theme.

A detailed video of theme installation is available here.

Theme customization

Setting up menus

Theme menus can be created under Appearance -> Menus. Created menus can be used when working with templates using Editor.

The navigation menu can be changed in the Editor – you can easily replace the default menu with your own.

1. Go to Appearance -> Editor.
2. In the Site Editor, click on the down arrow, near the template name, on the top of the screen. Click on the Browse all templates button.
3. In the templates screen, click on Template parts on the left-hand side. Click on the header.
4. The Menu placeholder is set. Click on it, and from the floating menu, click on Select Menu.
5. Save changes.

Using the theme editor

The theme can be customized using Editor feature. Editor allows you to control layout and elements of the page templates. Go to Appearance -> Editor. More details how to work with the editor are available on this link.

Setting up site logo

1. In Site Editor, click on the down arrow, near the template name, on the top of the screen. Click on the Browse all templates button.
2. In the templates screen, click on the Template parts on the left-hand side. Click on the header.
3. The title placeholder is already there. Click on the title icon. From the Transform to dropdown click on Site Logo.
4. When the Site Logo element appears, click on it, and then upload or browse for the desired logo file.
5. Save changes when you are done.

Setting up the site title

Site title can be set in the Appearance -> Customize, and under the Site Identity panel, you can set site title and favicon.

1. In Site Editor, click on the down arrow, near the template name, on the top of the screen. Click on Browse all templates button.
2. In the templates screen, click on the Template parts on the left-hand side. Click on the header.
3. The title placeholder is already there. Click on it, and enter the desired text for your site title.
4. Save changes when you are done.

Replacing footer menus

1. In Site Editor, click on the down arrow, near the template name, on the top of the screen. Click on Browse all templates button.
2. In the templates screen, click on the Template parts on the left-hand side. Click on the footer.
3. Click on the menu that you wish to replace.
4. Select previously created menu.
5. Save changes when you are done.

Changing colors and fonts

Changing your website’s colors and fonts can also be done in just a few clicks within the Editor.

Note: To help you choose the right colors and typography for your website, we gave your four style options – different style combinations. You can access them once in the Editor – just click the Styles icon at the top right corner of the screen and select Browse styles.

Font options

1. In the Editor, click the Styles icon at the top right corner of the screen.
2. Click on Typography to open the typography settings for different website elements.

   Once you click on Typography, you will see four separate sections – Texts, Links, Headings, and Buttons. You can set typography settings for each of these elements. So, for example, once you click on Texts, you will be given options to choose a font, text size, appearance, and line height. There are numerous options for fonts you can choose from.

Color options

1. In the Editor, click the Styles icon at the top right corner of the screen.
2. Click on Colors to manage the color palette for different website elements.

   Once you click on Colors, you will see three separate sections – Background, Text (Links and Headings), and Buttons. You can set colors for each of these elements. For example, once you click on Background, you will be given options to set a background color or choose a gradient. There are numerous options for colors for you to play with.

Hiding sidebar filters behind the button

By default, the product catalog page(shop page) is displayed without the sidebar filters. On mobile devices, the sidebar filter will be displayed before the products. But, the sidebar filter is hidden behind the button, so the visitors will focus on products, and expand the filter area only if they need to filter products by attribute, price, and such.

Steps how to set it up:

1. In Site Editor, click on the down arrow, near the template name, on the top of the screen. Click on Browse all templates button.
2. In the templates screen, click on the Templates on the left-hand side. Click on the Product Catalog.
3. Shop is displayed in full width. Click on the Columns element.
4. Change number of columns from 1 to 2 usiing slider in the right-side panel. New column on the right side will appear.
5. Adjust column width by selecting the desired column, and setting their width value in Column settings panel in the right side panel. For the best effect, set left column width to 85%, and right column width to 15%.
6. Click on the right column, where filters will be displayed. Add desired filters to this column.
7. Expand Advanced panel on the right.
8. Add class

   tk-product-filters

   class to Additional CSS Class(es) field. This class will automatically hide the filter sidebar on mobile devices.

9. Now, add a button element above product and filter columns.
10. Add class

    tk-product-filters-trigger

    class to Additional CSS Class(es) field. This class will allow selected button to become filter sidebar trigger.

11. Save changes when you are done.

NOTE: This can be implemented for Products by Category, Products by Tag and Product Search Results templates as well.

Theme defined patterns

Patterns are predefined blocks that can be added to the content. Patterns are groups of several blocks, so their content – text, and images – can be edited.
Besides standard patterns, the Beleco theme comes with theme-specific patterns. 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 pick the desired pattern group from the dropdown.

1. TK Text
2. TK Contact
3. TK About
4. TK Testimonials
5. TK Gallery
6. TK Headers
7. TK Call to Action

To learn more about built-in patterns and how to work with them, please read our official guide WordPress Block Patterns.

How we built the Beleco demo

Before building the homepage, we suggest you create the desired pages and publish some posts and categories.

Then, move to the following pages:

1. Home
2. Products
3. About
4. Journal
5. Contact

Home

The homepage is built using blocks. In the following text, you can read instructions on building the same homepage as shown in our demo. With a little bit of planning, you can create a homepage that will fully suit your needs, with more project categories, blog posts, etc.

1. The first section is the cover image. Layout is created using two columns. In the left column are inserted a short paragraph, a spacer element, another paragrpah and borderless button. In the right column is inserted cover block with image and text in the bottom left corner. CSS class h-reveal–images–from-bottom is added to the image, so the image will have animation when enters the screen.
   
2. The next section are featured products. This section is created using two smaller sections – a heading with a link and handpicked products. The heading part is created using row with heading block and borderless button. Handpicked products is a block that is coming with WooCommerce.
   
3. Promo section is built using Media&text block. In the left part we inserted two columns block, with two paragraphs. The following is spacer element, heading, again spacer and finaly again two columns, where we combined text and image. The right part consists only image with class h-reveal–images–from-bottom.
   
4. The following section consists of only a huge heading, combined with spacer elements and paragraphs.
   
5. Section that is promoting hands products is built using three columns, with discrete borders. The left column contains two more columns for a short paragraphs at the top, spacer element, heading, longer paragraph and borderless button. Middle column contains product image, with title, description and price tag. Product image is using h-reveal–images–from-bottom class. In the right column is displayed only the image, again with h-reveal–images–from-bottom class.
   
6. Face and body section is built using two columns, without a gap. For images are used Cover blocks with h-reveal–images–from-bottom class. Title and borderless buttons are set to appear in the bottom left corner.
   
7. Latest news section combines large heading, built in the same way as for Featured products. Posts are displayed using Query block, with slightly modified template.
   
8. Final section is using columns with heading and two images.

Shop

The shop page is the WooCommerce page, where all products are displayed. This page is set as a Product Display page under WooCommerce -> Settings -> Product.

Blog

The blog page displays all posts. It’s set as a posts page in Settings -> Reading. There is no content on this page.

About page

The about page combines several elements.

1. the First section is the heading, with a separator. Under the separator, the text is placed in the column, so it will stick to the left.
2. The next element is the image element, with 5% padding to the left and right.
3. Under the image, there is three column block, with text in the right column.
4. The last element is a centered image, with text under it.

Contact

Additional CSS classes

Additional CSS classes can be inserted by selecting the desired element and adding that class to the Additional CSS class(es) field in the Advanced panel.

Theme classes that can be used:

• stick-to-top element will stick to the top of the screen, regardless of the page scroll.
• l-desktop-only element will appear only on computers.
• l-touch-only element will appear only on devices with the tocuh screen.
• l-above-mobile-only element will be shown only on devices with larger screen resolution.
• l-mobile-only element will appear only on the mobile devices.
• l-center-margin-auto element will get automatic left and right margin, and will be centered on the screen.
• l-no-margin-top removes the top margin from the element.
• l-no-margin-bottom removes the bottom margin from the element.
• background-color–transparent element will get transparent background.
• padding–horizontal-default adds default padding for the element. This class will prevent element from sticking to the left and right side of the screen. Padding values are 50px for computers, and 30px for mobile devices.
• no-padding–top removes the top padding from the element.
• no-padding–bottom removes the bottom padding from the element.
• no-padding–horizontal-on-touch removes left and right padding for all devices with touch screen.
• no-padding–horizontal-on-mobile removes left and right padding for all mobile devices.
• h-animate–from-top element with this class will float in from the top, when it comes into the viewport.
• h-animate–from-left element with this class will float in from the left, when it comes into the viewport.
• h-animate–from-right element with this class will float in from the right, when it comes into the viewport.
• h-animate–from-bottom element with this class will float in from the bottom, when it comes into the viewport.
• h-reveal–images–from-bottom Images with this class will animate when they enter the viewport. Animation is curtain reveal, from the bottom.
• stack-on-tablet–portrait elements inside the block with this class will be stacked on tablet devices, when the device is in the portrait orientation.
• animate-separator this class will add a eparator with animation effect from the left to the right.
• button-align-on-mobile–left class is used to align button to the left on mobile devices.
• button-align-on-mobile–center class is used to center align button on mobile devices.
• button-align-on-mobile–right class is used to align button to the right on mobile devices.