Porto theme introduction:
This theme is a very old theme. Many independent sellers will use this theme to build some store TOC sites. There is no problem with this. But this theme is currently only available for $29, so you can also buy it.
Of course, we will provide you with a GPL version here that can also be used typically.
Let’s first go to the official website of the theme to take a look.
First of all, this commercial theme has very high sales. Especially when building toc sites, we will often use this theme to build. We can simply learn about it. What are the characteristics of this theme?
Porto builder:
The first one is that it has some page builders. Of course, the page builder mentioned here is compatible with commonly used Elementor and WPBakery. It just adds many custom modules based on this page builder. For example, what we see now are its elements.
It adds many custom functional modules to each page builder, such as warning buttons or calls to action. It has also done some special processing to match its theme better.
So basically, when you use this theme, you need to install it, and you can get started immediately because as long as you can use any kind of page builder, you can quickly modify its page.
The second is that it customizes a head and bottom, a problem we often encounter when building independent stations. For example, the top module is critical because many customers enter your website. The first thing I see on an independent site is your header area, so we’d better add some crucial functions here, such as our category directory or some content we want users to see. If you can customize the top or bottom of it, it will be relatively convenient for us to build an independent station.
The next one is that it has added a studio. This is not the first time we have heard of this studio. It has many commercial themes, such as Avada, which means this theme will continue to be updated regularly. Some beautiful modules or pages will be designed. You can use this studio, import it into your independent library, and then use the designed style.
The next one is its theme settings, which are available for general business themes. The next one is the installation navigation. The installation navigation here will guide you in generating a tall, independent website. We will give you a detailed demonstration in a moment.
Porto header module:
Another theme is also faster because it has speed optimization embedded into this theme. Of course, in addition to these advantage modules, there are some other modules that we can also take a look at. For example, the Header can also add some basic menus, including some top menus and some super menus. We can also add it at the bottom or classic ones, including some that are compatible with Elementor. Module.
Porto page layout:
The next one is its layout. Its layout includes a box model, full width, and RTL. RTL refers to sorting from right to left. So, for most of the independent stations we currently use, we read the content. It is from left to right, but there are some Arab countries or people in the Middle East who are used to gambling from right to left, so if your theme supports RTL at this time, then if we are dealing with the Middle East market, then you can use it directly It has this function to switch the sorting method of our content.
In addition, its search is also a compelling instant search. Once you enter a keyword, you don’t need to click OK, and you can directly search for the results. Of course, there are some other functions, let’s take a look at it.
Porto theme installation:
Below, we will show you how to install and use this theme.
We enter our backend, find our theme, then install our theme, click upload, here we have prepared this theme, including its supporting plug-ins, as well as its Chinese package, including its official documentation, we are here Go directly to install the main program and click to open the installation. After the theme is installed successfully, we activate it. After activation, it will take us directly to its settings interface and navigation interface. We need to install some necessary things here.
Plug-in: there is a button on it for us to click to install. One of them is its core component. We need to install it first and click to continue. The other plug-ins are when we import different templates or call different ones. We only need to install other plug-ins when using the style.
Then, we return to the first interface of its navigation. We see that this theme has been activated. Then we enter the second step, which is to detect our system. Among the three most commonly used, the first one is ours.PHP Memory limit. We have qualified for this has a maximum upload time of 300, but ours is 120, which doesn’t affect it. Of course, if you think there is a problem with this, you can just modify it according to the content on the Learning Fitness website. Then, the next one is to share your usage data. In this case, it can officially be connected to your independent station, so under normal circumstances, we have to turn this off.
Then go to the third step, it requires us to install a child theme, then you can click this button to install it, if you don’t want to install it, just skip it. Then the fourth step is its necessary plug-ins. We don’t need to install them here because we import different themes and use different plug-ins. Then the other one is the editor of the whole site. We need to check it and then continue like this. We will enter his template style import interface, where you can import your style.
The last one is its support, and then we complete the wizard that we put aside, and then we go to see if the theme is successfully installed. First, we enter its dashboard, where we can also see that the theme has been activated, and then there will be some settings on it.
The second is its page layout. This page layout is very personalized. It divides our entire page into small modules. You can set different content in each small module, such as our header. , click on our head, here you can set a block and then just call this block.
But we haven’t created a block yet, so don’t worry about it; the others are the same.
In our content, such as our single page, or our product details page, including our product category directory page and our sidebar, we can call different modules, which means that each module on the page is independent of You can customize an area, which is the power of this theme.
Porto theme settings:
The third is this theme’s settings, which are global settings that all business themes have. These include basic settings, layout settings, style, header menu, logo, etc.
for example, if there is a logo, we can replace the logo with our own logo, upload a logo we have prepared, and then save it.
Then there are some others like our breadcrumb navigation bottom car sidebar, accessories page, our article portfolio, our member center, and our woocommerce settings import and export, and then the next one is its Navigation here you can follow its steps to generate a stand-alone page step by step.
The next one is optimized for our speed because we have introduced one of its core functions to you before. It adds a performance optimization module to this theme and sets it as a navigation. Then, you can follow its steps, such as the first step. If you are using a page builder like WPbakery, then there are some modules that you do not need. You can check them and delete them.
Then the second one is for Slider Revolution we have told you about a very powerful slide before, so if you use this slide on your independent station, your speed will slow down because this plug-in is too powerful. , so there are a lot of redundant codes in it, so here you can click to check and optimize it. Of course, this is your theme. If you install this plug-in, you don’t need to worry about it if it is not installed.
Porto theme performance optimization:
Here are some performance optimizations. For example, the images we upload will automatically be compressed for us. For example, the compression ratio can be compressed to include the width and height of our largest uploaded image, as well as the lazy loading of our images. You can do it. It is set by default, and there are some others. For example, if there are a lot of comments or spaces in our CSS or JS, you can shrink them together and reduce your space capacity.
In addition, if the framework you are using does not support Bootstrap, you can use this to optimize it. You can also optimize your Google fonts. When we talked about some performance optimization plug-ins for you earlier, the methods used were exactly the same.
The next one is for our mobile phone. For example, the slideshow will not be displayed on the mobile phone. Our key CSS will be placed directly in our header to speed up our response.
The next one is our tool. This tool is mainly for the theme itself. For example, if it has some plug-ins, you can clean them up and remove some of their redundant code.
Then the other one is its page construction, which is also in the dashboard we just entered. The module we call here is added to our page construction, the template component. The last one is our patch. If there is a patch, you can fix it. If not, just ignore it. It is the function of this theme.
So, let’s demonstrate how to import its data. We re-enter the wizard page, then find its demo, import the content, and our logo has been replaced here.
Then, you can clear the data through the next button after you import the data, and then you can change some other template styles. The template styles in it are graded, so for example, if you want to build a toc site, you should choose a shop. If you are building a tob site, you should choose business. If you are building a blog, you should just choose a blog.
Porto theme data import:
Here, we take the toc site as an example. For example, if we import a style now, we see that this style looks good, so we click it, and then it will let you choose what kind of page builder to use.
The first is to use WPBakery, and the second is to use Elementor. According to your own preferences, for example, if you like to use elementor, you choose elementor. Then, after choosing Elementor, it requires us to install two necessary plug-ins. So you need to install these two plug-ins.
Click Install, and then install another plug-in. After the installation is successful, we click the button below to start importing. He will now help us import this template style. Let’s wait a moment.
When it prompts that the import is successful, we go back to our front desk to refresh. We see that the entire site has been imported, and then we can see a pop-up window with our banner above.
Then, below is our category directory and product list, including some modules at the bottom. Of course, these modules can be modified and then clicked to enter a product. We see that the layout of this product is also very reasonable. Including the description below, as well as our reviews, we have completed the installation of the Porto theme and its data import.
