Basel Theme Setup Guide: A Comprehensive Look at Web Interface Configuration (10)

The look and functionality of your website is crucial to the user experience. Choosing a powerful theme and setting it up properly can make your website stand out from the crowd. This article will take you through an in-depth look at howBasel ThemeThe settings are optimized for each interface of your website so that your website is not only aesthetically pleasing, but also highly usable.

First of all, we will start with Theme Settings at the back end of the website, and step by step, we will explain the functions of each important setting and how to adjust them. Whether you are a beginner or an experienced webmaster, this guide will provide you with practical reference and guidance.

Steps Website backend → Theme settings

As shown below, select the first, Basel theme options, about the theme-related settings are adjusted here!

As you can see below, there are many ways and buttons to set up the program, so let's talk about some of the common ones.

Steps Theme Settings→General

Here are the basic settings for the site, which are usually the defaults

Pay attention to the two on the line, according to the actual situation of adjustment, do not understand can read the translation, or refer to the above picture adjustment

Steps General → Mdobile bottom navbar

Mdobile bottom navbar ( mobile bottom navigation bar settings ) cell phone, usually also the default, you can refer to the picture above

Steps General layout→Site background

Site background: site background, understood as the background of the entire front-end of the site, is now the default no color, if you want to what color is the main, you can set up here!

Site width: site width, you can set the full width layout, or boxed, that is, the center, according to your needs to adjust the

Main Layout: website layout style, actual situation adjustment

Step Page title→Pages title background

As shown above, you can adjust the page title

Pages title background: can be adjusted to the main color of the site, now is the gold color, because the site is gold-based

Step Footer → ON

Turn on the footer settings feature, which is usually the default

Footer layout: the footer layout, the actual situation set, generally the default

Footer text color: the color of the footer text

Footer background: the overall background of the footer, the above picture is black.

Copyrights: the copyrights of the website, as shown below, are displayed at the bottom of the front end of the website.

Step Header→Setting

Header: add the logo here, corresponding to different positions, all uploaded on the line!

Step Header→Top bar

Text in the header top bar: you can add some information that will be displayed in the top bar.

Top bar background: top bar background color

As shown above, the front position

Step Header Layout→Header

Header: you can choose the style of the main navigation as shown above.

Typography: Text font settings

About the site and the theme related to the font aspect are here to adjust, you go according to the translation to adjust, if there is no location or font you want to choose here, you can choose toAdvanced typographyto adjust a certain position to set a separate font, as follows

Steps Styles and colors → Settings

The color adjustments are all in this piece

Buttons: the color of the buttons
Notices: Color of notices

Primary color: the main color of the website

Secondary color :The secondary color of the website, also called secondary color

Steps Blog → Settings

Blog:Blog is also known as the article, the details of the settings are here, you understand according to the translation

summarize

With the above explanation, we have understood how theBasel Themein which basic settings, layout adjustments, footer and header configurations, etc. are performed. The right settings can enhance the overall experience of your website and make it more responsive to the needs of your users.

In the next installment of this article, we will dive into more settings, including the configuration of store pages and product detail pages. The article will be more detailed, so we hope you'll stay tuned and learn these useful tips to better optimize your site.

We look forward to continuing our discussion with you in the next issue to help you create a more professional and engaging website. Thank you for reading!