Avada theme home detailed production process

Avada Theme Home Page There is a way to build it. The home page consists of the header, the middle part made with the avada builder editor, and the footer. Adding content step by step can build the website page we want. In this article, Lao Wei goes on Avada theme making header header Start making the home page. The header content and the home page content are intertwined. If you don't know how to make the header page, please learn from the above link first, and then read this article after mastering the relevant knowledge.

Last lesson, Lao Wei was making Avada theme menu navigation menu The home page is created when the content is empty. Today, continue editing from this empty home page.

1. Page is set as the first page of the website

The homepage of a website is also called the homepage or home page. It is usually a fixed content, so it is realized by using page.

Change the WordPress background settings>reading>your homepage displays to a static page static page, select the established home page in the following homepage, and save changes.

This sets the home page as the home page.

2. Hide page title bar

Lao Wei mentioned in the last lesson that the page title bar named by the blog in the home page is inappropriate and should be removed.

Click pages>all pages in the background of wordpress, find and enter the home page on the right side, pull to the bottom to find the page title bar in the following figure, and change the right side to Hide, so that you can not see this part of the content on the home page.

Note: It is recommended to only hide the page title bar on the home page of the website, because in addition to redundancy, this bar contains H1, while the Home page already has H1.

3. Create first slide

Avada has a variety of plug-ins that can create slides. Here's how to use LayerSlider to create slides. The specific process Lao Wei shared in Avada Theme LayerSlider Slide Creation This article is not repeated here.

Slides can make the homepage of the website look more rich and varied, and the effect is more cool. Of course, it will also occupy certain system resources. So the image size here should be well controlled. The banner image size of the official avada demo is 1920 * 1080. The definition is very high, but the size is only tens of kilobytes. It is very well controlled. For example, these banners used by Lao Wei are 1200 * 200 in size, and the size is controlled between 40KB and 90KB. The foreground is still smooth when opened. I'm afraid some novices will put a large picture of 1M or even several M in size, which will lead to slow opening. After more than 8 seconds, most people will not have patience to wait.

4. Familiarize yourself with the Avada Builder editor

The Avada Builder editor is also called the fusion builder editor. Enter the home page first, and click avada builder to enter the editor. Click+container to create a 1/1 container.

This container is used to hold various elements, that is, text, pictures, switching, sliding and other effects and contents seen when browsing the front page.

Click the container to add a Text Block element, that is, a text block. Drop down to find or search for "text" in the upper right corner.

Add text, confirm to save, and click publish or update on the right side of the page.

The purpose of adding text is to make the home page look fuller, otherwise it will be plain and ugly. This is a highly used block. Other blocks are similar in usage. Here, you can try to add several blocks yourself to become familiar with the method of adding content to the avada topic. If you make a mistake, just delete it.

5. Footer content

Avada theme also has very precise settings for footer footer content. You can add up to 6 columns of widgets through footer. Among them, there are about us, contact info for contacts, social links for social media, etc., which can be selected and arranged according to your wishes.

Lao Wei wrote before Avada Theme Footer Settings You can go to see how to operate and make your own footer content.

6. Home effect

After a lot of hard work, Old Wei finally finished Avada Theme Home Page , including header page, avada builder editor production area, footer page footer.

You can add company profile, picture introduction, text description, product picture, etc. under the banner image of Layerslider. As shown in the figure below, it is composed of avada elements such as title, text block, lightbox, testimonials, gallery, etc. There are so many elements that you can play freely and make many beautiful effects.

Of course, Lao Wei's purpose is to share the operation process. To make a beautiful effect, we should pay attention to the details, including the spacing, margin, left and right distance, borders, and a few pictures in a row. There are too many contents. The effect of the whole page can be beautiful only after the details are well done.