WordPress self-built house record - DiVi theme five pages to build the site (on)

Words from the front:

Just as WordPress website self-built room fact sheet - index chapter As I said, building a website is like the process of building your own house, it has some steps to complete, but nothing difficult.

In general, referring to the series of articles written here, as long as you follow the word "do", build a and http://hysen.me The same website, although not an hour, but a few days is enough time.

At the same time, you must also have a good grasp of how to set up different common pages, so that you can write your own online resume, showcase your work, and make a simple company presentation website.

In other words, if you follow it carefully, building a showcase site will not be a problem, because, you just followed it and made a site that is not bad (the same http://Hysen.me ) What.

By the time you're done, you'll feel the same way I do, Building a website with the DiVi theme for WordPress is a laborious job, with no technical skills.

The prerequisite for doing so is the first two basic articles:

Zhai Haisheng: 2021 WordPress small white novice build a website tutorial nanny version - Tencent pagoda panel build a websiteZhai Haisheng: 2021 WordPress white novice builder tutorial nanny version - WordPress and the theme of the basic settings

Let's get to the point, how to use Elegantthemes' world-renowned theme DiVi, create a five-page website, the example website is http://hysen.me


I. Basic concepts of DiVi

  • What is DiVi?
  • What is Divi Builder?
  • Entrance to Divi Builder and the three basic concepts
  • How to create Sections, Rows and Modules

II. Layout design

  • I. Blurb settings
  • II. Common functions of Module copying and format saving
  • III. Calling in templates
  • IV. New Section - Full WIDTH Full width section
  • Pictures ofSearch EngineInitial optimization
  • 1. compressed image tool website http://tinypng.com
  • 2. image search engine optimization
  • 3. Take a screenshot according to the principle of thirds, and further reduce the size of the image
  • V. Final chapter of this section - Gradient color filter for background images

Configuring the environment:

I Basic concepts of DiVi:

- What is DiVi?

Divi is more than just a WordPress theme, it is a complete design framework and website building platform that allows you to design and customize every part of your website from scratch.

  • With DiVi Builder, a DiVi layout tool, you can achieve almost any page you want.
  • Use Bloom pop-ups to build your marketing list.
  • Use Monarch Social Sharing to promote your website on social media.
  • Increase website conversions with Divi Leads split testing.

The above is the introduction of DiVi official website, in fact, the most useful for newcomers, the above tools are all Elegant Themes Parent Companynatively integrated in the DiVi theme, extensively tested for compatibility.
This is something that other themes and plugins can't match. This means that you don't have to worry about common compatibility issues or inexplicable errors when using these core features of DiVi.

- What is DiVi Builder?

Divi Builder's full name is Divi Visual Builder, which literally means DiVi Visual Editor. It is a drag-and-drop page builder that allows building almost any type of website by combining and arranging content elements.

The image above is an official promotional screenshot of DiVi Builder in use. That's about it. Let's open it now and see it in action.

- Entrance to DiVi Builder and the three basic concepts

WordPress self-build article series, the second in a series of basic articles, 2021 WordPress white novice builder tutorial nanny version - WordPress and theme basic settings In "DiVi Theme General Customization", we talked about "8. Here, we can find the entry of DiVi Builder in the Home page and in any Pages.

Click on the highlighted Enable Visual Builder, go to the Divi Editor, the first thing that pops up automatically is the Divi Editor Tutorial, just exit, or select Start Building, we will explain step by step how to create a website.

On this page you can see three options:

  • BUILD FROM SCRATCH Create a new page
  • CHOOSE A PREMADE LAYOUT Select pages from a library of hundreds of templates
  • CLONE EXISTING PAGE Copying existing pages for homebrew

We'll start with Build From Scratch, not only because it's the foundation, you learn to build everything from scratch, and you can build everything from pages. But also because, in the process of building from scratch, you can see the power of DiVi Builder and realize the endless possibilities.

Click on Start Building, and choose to create the page from scratch, don't worry, we can always choose the second option to get started quickly with a pre-made template.

First, a few basic actions, default actions, default options
1.. Esc key can make most current windows disappear
2... Cmd + Z is cancelled.
3. If you refresh the page without saving, it will start from the beginning and return to the Start Building position.
4. Generally, content with adjustable options can be restored to default values by hovering the cursor and selecting the ring arrow icon.
5.. Cmd + s to save the current page.
6. Under each setting box, there are options to go back, forward, and confirm save.

Remember the three basic concepts that allow you to see the layout of a DiVi website at a glance, as long as it is a DiVi website, it must be composed of three basic parts,

Sections, Rows and Modules , which are the three basic concepts of Divi Builder, are also the three basic components.
Sections are the largest building blocks, and they hold several groups of Rows.
Row is located inside the Section and is used to place the Module.
Modules are placed inside the Row to display specific content.
The above is the structure of each Divi website.

Below we will see all three of them, using the same color of the settings bar, area wireframe, and add button; displayed in blue, green, and navy, respectively.

- How to create Section, Row and Module

We start with a Section in the page, in which we can have a row of three columns, and in each of these rows, there is a Module module.

When you click on Enabe Visual Builder, select Build From Scratch, and enter the Divi web layout tool. The image above is the first screen of the Divi Visual Builder, where a Section has been created by default, prompting you to insert a Row,

There are 20 row layouts, and only 6 are visible in a narrow window. Click x to close.

  • Blue Section
    Section is the largest editable page unit in Divi, which divides a page into several main sections.

Hover over the area in the middle of the page below, click on a blank space and you will see a long blue box, which is the section.

  • Green Row:
    By hovering the mouse over the two green and blueplus signOn the top, you can see that one is Add New Row and the other is Add New Section. Another basic concept of row is in the picture on the right.

Click on the green plus sign in the center of the screen to bring up the Insert Row window, and you can see that the color will darken when the mouse hovers over 3 Row. Click on 3 row for this,

At this point you can see the newly created green 3 row rectangular frame with three columns, this long green box, is the second basic concept ROW area, the cursor hovering over one of the three navy blue plus signs, you can see the words Add New Module.

  • Navy Module.
    In the image below, click on the plus sign in the third row of the 3-row frame, and the Inser Module option will appear.

The Insert Module window contains 4 modules starting with b as shown in the picture, total 38 modules.

Based on the development of Divi over the years, Insert Module has become more and more rich in modules, including not only blurb for introduction, but also graphic and audio files module, store module, social sharing and other powerful functions.

For example, the letter b in front of the vertical cursor on the right side of the image above contains all the options starting with b, such as Blurb, Blog, etc.

We click Add Module in the leftmost row of the 3-row frame, and the Blurb Setting window appears as shown below,

Click on the check mark where the mouse is to confirm that the default configuration of the module Blurb is used, and the slanted double arrow to the right of the cursor is the window size drag slider.

After the Blurb Module is added, we can see from the above process thatThe three basic concepts Section, Row, Module in its entiretyNow, here's more on how to add them, so you can have a visual comparison.

  • Add Section, blue Section Set bar, blue Section area boundary line. The blue plus sign at the bottom of the page, right in the middle of the long edge
  • Add Row, Green Row Set bar, green Row area boundary line. The green plus sign at the bottom of the page, right in the middle of the long edge
  • Add Module, navy Module Set bar, navy Module area boundary line. Right below it, the navy plus sign in the middle of the long edge

If we add another type of Module, an Audio Module, and add a song, we can observe later in the Blurb setup steps that the name of this Audio Module is clearly Audio Setting, and some of the items in it are different from the Blurb Module on the left.

Delete this audio module, and start setting up the Blurb Module and other settings.

Everything is difficult at the beginning, these three concepts of web layout are the beginning and the foundation. It may seem a little bit difficult, but as long as you grasp the relationship between the three concepts, Section, Row, Module: Module is contained in Row, Row is contained in Section;
Then create a Module three times, and you'll understand the basic concept, not to mention the difficulty.

Two layout design

Now let's get to the layout work, DiVi Builder is a Word-like layout tool, now how many people say they don't know Word? Follow along, it's easy, DiVi Builder is just a new typesetting tool for web pages.

Let's start with the most commonly used Blurb page layout.

I. Blurb settings

Blurb target page:

Here is the start of the production.

Section settings

The first step is to set the background color of the Section,

On the Home page, go to DiVi Builder. The cursor is hovered over the top left corner of the Section on the front page, and the Secotion blue settings bar appears automatically,

When the mouse hovers over the blue Secion setting bar, the cursor will turn into a small hand, move to the gear and the words Section Setting will appear behind it, click on it.

As we can see, the Section menu has three options/submenus, Content, Design and Advanced, which correspond to Content, Design and Advanced respectively,

What we want to adjust is the BackGround item in the Content item of the Section option, which is the background color.

Click BackGround, in the Section Settings pop-up, select Content - Background - Add Background Gradient

Click on the plus sign where the cursor is, and two color options will appear that can be mixed and matched.

Select the color by the color block where the cursor is located, here the first color is cc2b5e, the second color is 753a88. Click the check mark at the bottom right corner of the Content Menu to save the current color setting. At this point, you will notice that the text in the Blurb Module is no longer visible, because the background color has been changed. The black font is not visible. Click the Esc key to exit the Section Menu,

In addition to the Blurb Module in the Row long box, we have two more plus signs to add Modules, these three Modules, the columns they are in are called Columns.

By clicking on the long green box where the Row is located, and clicking on the small gear in the upper right corner of the green Row settings bar, we enter the Row Menu settings. Similar to Section Settings, Row Settings menu also provides three sub-menus: Content, Design and Advanced.

In the Row Settings menu, looking at the Column Structre option in the Content submenu, we see that there are three Columns in this option, each with a small gear setting icon on the Column settings bar, and a deleted trash can icon.

These three Columns correspond to the three Modules in our Row in the figure above, of which the one ready to set the text background color is the Blurb Module, the other two Modules/Columns have not yet been added, and are now two plus signs.

By clicking Add New Column at the bottom of the Content menu, you can change the number of Columns/Modules in this Section to 4 or 5, and if you want to delete them, just click the trash can icon on the corresponding Column option bar. Click the small gear on the Column Settings bar under Row Settings - Content - Column Structure to enter the Column Settings menu, which still has the classic three sub-menus, namely Content, Design, Advanced.

Only the font background can be changed by the Column background color in Row Menu or the background color in Blurb Module, here we choose to change the Column Setting in Row Menu.

Column Settings - Content - Background - Add Background Color - Select White

Then you see that the background color of the Blurb Module description text on the left side has changed to white, click the check mark in the lower corner of the submenu, save the settings, and click ESC to exit the menu.

We can then go to the Module Settings menu to set the text, image and link to the image for the Blurb Module. Click on the little gear setting button on the navy Module Settings to enter the module Blurb Settings.

In the Blurb Settings menu that pops up, you can still see the classic three menus, Content, Design and Advanced.

In Blurb Settings - Content - Text -Title, change the title of the article "My Blurb - Your Title Goes Here" to: Photography, and similarly change the text description in the Body item as follows:

Click the checkbox twice, and save the changes.

Image settings in Module

  • Upload your logo image:

In Blurb Settings - Content - Image & Icon, click on a blank image, select the logo file, and click Upload an image to upload the logo file.

Click Upload an image to upload the logo file.

The logo file appears in the Blurb Settings, click the checkbox to save it. Now, you will see a graphic blurb module. Click cmd + s to save the result.

Blurb's Title link settings

This is where the link goes when someone clicks on the Blurb module. We set the link to a page in WordPress - Photography.

In Blurb Settings - Content - Link, set the Title link URL to a link to dynamic content Page Link - Photography.

Also set the Title link Target to In the New Tab, which means open in a new window. Click the checkbox to save each time you finish setting a page.

Editing of logo images

When the Blurb Settings in Module Settings appears, three shortcut icons like brushes will appear when you hover over the left Blurb. These three little brushes are located in the area corresponding to the right Blurb Settings - Image&Icon - Image Rounded Corners , Title Text and Body Text.

  • Logo image editing

Objectives: Logo image ofRounded rectangleValues: bottom corner 0, top corner 20px. Border style of the image: bottom border, color 753a88, width 10px. The whole content of the image is 40 from the bottom margin, the other three margins are 20.

After setting each item, click the checkbox to save the result.

Set the text part of Blurb

Title Text Title font style changed to uppercase Title text centered
Body Text Center the body text and increase the font size to 16px and increase the letter spacing by 1px
Try adjusting the line height of the body text, for example by adding a 0.1 unit to see the effect

At this point, the first Blurb Module is set up.

II. Common functions of Module copying and format saving

If you feel this Blurb module is good and want to reuse it now, then you can duplicate it by clicking the Duplicate Module button in the Module Settings settings bar. For the sake of convenience, the following picture shows the three settingsComposites,

  • The leftmost button is labeled Duplicate Module Operation, Initial Blurb Module,
  • In the middle is the copied Module, the background color needs to be changed to white. The way to drag its position is through the Move Module button.
  • The rightmost Module setting, which is needed to change the background, is Row Setting - Content - Column Structure - Second Column Setting. In it, select the background color of this Colume as white. Click on the check mark to save the result.

In the same way that the Column background is set to white, adjust the third background to white, so that you see three images with the same effect.

PS: After copying, there are three Blurb Modules arranged in a row from top to bottom, and the way to drag them is through the Move Module button in the middle of the picture above. I dragged it 10 times to get this result, so don't be discouraged, you are not alone.

In the end, we see the result with three Blurb's displayed neatly side by side: the initial goal we set was achieved.

Click on the Wireframe View in the image above to see the layout structure that can be helpful if you get lost in the design process. You can click on the options on the hover menu at the bottom left to see the effect of the view on your computer, tablet and phone. The shortcut keys cmd + and cmd - allow you to display the layout sequentially.

The entire bottom menu can be tucked away by clicking on the ""three-dot pie"" icon at the bottom center of the page. In wireframe view, the Section, Row and Module menus are the easiest to manipulate and adjust.

In Zoom Out mode, the entire page will shrink, and you can easily duplicate the entire Row by clicking on the Duplicate Row button through the Row Setting setting bar to see the 6 Blurb Modules.

III. Calling in templates

The bottom Divi Visual Builder option menu, there are six items in the bottom menu,
After finally making a short version of the Blurb Module, we have a preliminary page, here's a look at what we can doGreatly improved efficiencys, a way to design pages through templates.

Specific steps:

1. Load From Library, load from library

Click on the plus sign. Hundreds of Divi-made template pages can be loaded here, including restaurants, photography, artwork, resumes, and company profiles.

2... Save To Library . Save the current work, i.e. save the current page to the library, and compare the last Potable option to save the current page layout to a file.

  • Layout Name: Name your own layout for the current save
  • Creat New Category: Create a directory for the above content for management purposes

For both of the above, Save/Add to Library is to save to the current site's layout library, located in the Your Saved Layouts tab. Portability is to save the layout file to your local hard drive.
How to import a Layout file from my local hard drive? See the picture on the far right, Portablity Import How to import a page layout file: Divi Visual builder option - Portaility - Import - select Layout file - Click on the Import Divi Builder Layout button to complete the import.

After importing the saved page layout file, the result is as above. This way you can easily reuse what you have designed, or give it to others to use.

3... Delete button, you can empty the current page.

4. Page Settings button, we will talk about its usage later, here is its classic three-menu

One of the rarest features of Divi, compared to other themes, is the official built-in Split Testing, a feature that includes the famous A/B testing. It allows you to know which things on your page are not useful to the user. A common use is that you can tell what type of page, or what color, is going to generate more sales. If you have a site that actually works, you'll love it.

5... Edited history

You can see your most recent edits and click on one of them to go back to the status of that step. This is the third way you can take a regret pill, provided you don't use the shortcut cmd+s or the Save button at the bottom right of the page.

6... Portability button, see item 2 save to library.

This completes the introduction of the DiVi base menu

IV. New Section - Full WIDTH Full width section

Full Width Section Target page: Prepare for Home page

On the home page of Apple's website, the image section is a typical FUllWIDTH Setcion. It spans the entire width of the page to maximize the visual impact.

What we are going to implement is a section that looks like this: We are going to create a full-width Section - a full-width Module in two steps.

1. Full Width Section

On the home page, use the Delete button on the Divi builder options menu to clear all pages and create a new full-width Section section.

Click on the blue box of the selected Section, then click on the blue plus sign of the Section, select the Fullwidth button, and from the pop-up, select a total of 9 types of Modules. Select Fullwidth Header.

The image below shows the newly created FullWidth Header Module. It is often used for eye-catching company or personal story profiles.

For example: How do you explain to your website customers what you do, for example I want to show what I can do in a background video and then I want to have a text introduction, what I can offer my potential customer and motivate him to do something to learn more about our services, or to get in touch with us when they consider choosing our services. Then you can use the Fullwidth Header module.

This newly created FullWidth Header is a graphic box that runs the length of the page, where videos can also be added. Each small brush edit icon corresponds to a shortcut option in the Module Settings menu.

2. Full Width Module / Module

Below we can see the module FullWidth Header, which is also a classic three-dimensional menu, with Content, Design, Advanced

Setting location: Section - select the module where the Fullwidth Title is located - hover the cursor and select the settings icon of the Module Option menu - menu of the Fullwidth Title.

Set Objectives:
1... Change Title to Let Us Tell Your Story ...
Change subtitle to Subtible for Rebranding | Marketing | Web Development ...
Add two buttons, one for Learn More, and one for Contact.
2... Delete all body descriptions. ... adjust the background color to 753a88, cc2b5e. See " Setting the background color of Section, same method
3... Use background for ModulePictures.

The image above is a picture of the key three steps in setting up the content of the module, and the image below is what it will look like when it is finished. The image used is from https://pixabay.com/

3. Full-width module using video

This is the background image of the video, screenshot of the light and dark two contrast look. What we'll end up with is the followingThe effect of the page, including the mouse hovering over Contact with the corresponding icon.

Setting location: Section - select the module where the Fullwidth Title is located - hover the cursor and select the settings icon in the Module Option menu - Fullwidth Title Settings menu.

Setting items:

  1. Two types of video uploads, one for local video files, and one for well-known video sitesWeb Link.
  2. Set button link to Page page: button1 -> about, button2 -> contact link opens in current page.
  3. Add the filter a6a6a6 to the video and adjust the transparency to rgba(166,166,166,0.74)
  4. Open Scroll Down Icon, size 33px
  5. Centered layout, Title font capitalization to 65px, Sub Title to 32px. Subtitle line height to 1.1em Try to adjust sub title word spacing.
  6. Edit the rounded corners of button 1 to 4px, change the icon of button 2 to Email icon. Test closing the button customization, the effect disappears. Try to change button color, border thickness. Try to change text content directly on TItle text
  7. There are two ways to upload videos to the site:

a. Upload the video file;

Set the location to: Fullwidth Title Settings - Content - BackGround - 4th video icon - Add Background Video

Once you have selected the video file, click Upload a Video.

b. Use links to video sites.

Select Insert from URL, fill in the video website, for example, CCTV Beautiful China video from Youbunny.com Beautiful China" Little Panda Learning to Climb Trees with Mom Amazing China-Tree Climbing Lesson | CCTV Record

Click Insert to post in the bottom right corner of the page.

The effect of using video links is the same, but from stability considerations, both domestic and foreign, video links are not recommended, because this is a third-party provider, there are too many uncertainties, which may lead to video unavailability.

2... Set the button to link to the Page page

Button1 ""Learn More"" Setting Steps

Click twice on the check mark to save the current result.

Button 2 "Contact" can be selected in the same way to the Contact page of the Page Link.

Finally, click cmd + s to save the page results and take effect.

3... Add a filter to the video a6a6a6 and adjust the transparency to rgba(166,166,166,0.74)

Enter the color number #a6a6a6 in the position of the first picture, in the second picture the rightmost slider, adjust up and down to rgba(166,166,166,0.74). Click on the check mark to save, click cmd + s to take effect.

4... Turn on Scroll Down Icon, size 33px

Set the icon as shown, and watch for the actual page icon to change when you select the icon. Save and let the page take effect.

5. Font adjustment

The overall layout is centered. Title font is adjusted to 65px, Sub Title to 32px. Subtitle line height is adjusted to 1.1em. Try to adjust the sub title spacing.

Select the centered icon in the Layout, save it and make it effective.

In the picture below, we can see the various possibilities of font adjustment, which is the interlude of this recording. Title Font Weight is Bold, TItle Font Style is Italic, Underline, and Capitalize, UnderlineMarker color.

Okay, cancel the above settings and start the setup task for this section,

5. Title font is adjusted to 65px, Sub Title to 32px. Subtitle line height to 1.1em.

6... Adjustment of Button 1 and Button2

a. Edit the rounded degree of button 1 to 4px, change the icon of button2 to Email icon. b. Test closing the button customization, the effect disappears. c. Try to change the color, border thickness.

Set up the settings as shown, and when you are done, click Save and Exit.

Now, the Module and Home Full Width Header are set up.

Image of the initial search engine optimization

In the process of building a website, it is inevitable that we talk about the volume compression of images and the benefits of compressing images without loss of image quality. And to optimize the images for search engines,

  • The first step is to reduce the volume.
  • The second step is the name and description optimization.

The final presentationTarget pageAs you can see below, the size of the images in this section went from 606k at the beginning to 285k. The size has been reduced by a factor of 2, and in a way, your site can be viewed by twice as many people as it was initially.


  1. By http://tinypng.com Reduce image size
  2. Image search engine optimization, Name the image Rebranding Marketing ShangHai, Add the image keyword description in wordpress: View of the WaiTan, Pudong New Area, Shanghai, China
  3. What is trichotomy
    Take a screenshot in thirds and let the background image take effect.
  4. Overlay Choose your desired effect based on the desired color palette and text clarity

1. Compress image resources http://tinypng.com

As the site's tagline suggests, it's a smart PNG and JPEG compressor, with a 5m per image size limit for free users, and a maximum of 20 images uploaded at a time.

This isShanghai BundClick choose to upload a picture of the exterior, size 606k.

The result is 284.6k, which is 322k smaller than the original, more than double the compression, which is inherently high.Compression ratioThe jpeg images, which are very rare, are largely unchanged. Click on the Download button where your cursor is to download it.

2. Search engine optimization

  • Rename the image,

Change the name from the original to Rebranding Marketing ShangHai.jpg , so that after the name change, when others search for related keywords, your images will be searched, and your site will be more likely to be seen by others.

  • Upload images and add relevant descriptions.

Upload port: Find Section - Select the module where the Fullwidth Header is located - Hover the cursor and select the settings icon in the Module Option menu - Fullwidth Header Settings menu .

Upload the background image at: Fullwidth Title Settings - Content - BackGround - Third image icon - Add Background Image - upload files - Select Files - select the image and upload it

For a picture of the above specific steps of the setup see: "2. Full Width Module / Module"

Click Upload an image to upload the image. This way you can see the page before it was optimized. The look is the same, the speed is very different.

3. Take a screenshot according to the principle of thirds, and further reduce the size of the image

What is trichotomy: TrichotomySometimes called the tic-tac-toe composition, it is a method of drawing inPhotography, ,Painting, ,DesignThis is the most basic and secure compositional technique that is often used in art such as this one, and is generally applicable in all cases. In this method, thePhotographerThe scene needs to be divided by two vertical lines and two horizontal lines, just as if it were writtenChineseThe "well" of the picture. Placing the subject on the dividing line or point, or distributing the image in thirds, makes the subject stand out while retaining a proper sense of space, making it comfortable to look at. In addition, if you divide the space into three parts, you will also get a very comfortable effect. This is in generalScenic PhotographyorArchitectural PhotographyCommonly usedComposition method [1]. ContemporarySmartphoneMost photography apps are equipped with a three-quarter composition aid line [2]

Go to the backend of the website to set up images Dashboard - Media - Library

Click Edit Image to edit the image.

Start via the Crop aboveScreenshotsAfter selecting the area and clicking Crop again, you can click Save to save it. Image size directly affects the rendering speed of your website, which directly affects the visitor's experience.

In addition, you can also enter the corresponding value in the New dimensions on the right side of the image, e.g. 1920 x 1080 and take a screenshot, because the capture is always a part of the original image, therefore, it can also reduce the size of the image.

After saving the image, you can see that it has been further reduced from 285k to 213k, and you can download the image from the website by using the image file link Files URL.

Finally, adjust the Overlay and select the desired effect based on the desired color scheme and text clarity,

Location: Fullwidth Title Settings - Design - Overlay.

At this point, the initial image optimization is complete.

V. Final chapter of this section - Gradient color filter settings for background images


  1. Use button 1 to go to the about page, and the logo icon to go back to the Home page.
  2. Set the gradient color on the background image. Gradient Direction is set to 0

1... Go to the About page via button 1 "Learn More" and return to the Home page via the logo icon,

  • Refer to point 2 of "3. Full-width module using video" in this document, "2. Set button link to Page", and set

As for clicking on the logo icon "Hmedia" to return to the home page, in the Basic Settings article https://zhuanlan.zhihu.com/p/416385580 In, adjust this section of the WordPress menu.

On the current page, click Learn More to go to the previously set Button 1 - About page. Once you reach the About page,

Clicking on the logo icon Hmedia. will bring you back to the Home page, which is the image above.

2.. Set the gradient color on the background image.

Target pageThe effect to be achieved:

Background material rules: Location Content - Background of 4 items, background solid color, gradient color, image, video in order, the right side will overwrite the left side. The other way around does not work.
a. To implement the gradient filter on the background image, you need to turn on a special option: Place Gradient Above Background Image. b. To solve the gradient color as the background image filter, you must first select the gradient colors cc2b5e and 753a88 respectively, and then adjust the transparency effect to achieve the two-color gradient effect. Gradient Direction is set to 179

Location: Content- background- gradient Attach a gradient effect to the background image. Transparency can be set. This is not possible with overlay.

After clicking Add Background Gradient, you can select Place Gradient Above Background Image and set the Gradient Direction to 179.

The first color of the two-color gradient is #cc2b5e, and you can enter the hexadecimal number of the color by selecting Select Color in the lower left corner of the setup page.

After setting the first color to #cc2b5e, first set the transparent color slider to rgba(204,43,94,0.49), then select Select Color in the lower right corner of the setting box to set the second color #753a88, followed by rgba(117,58,136,0.49). Click on the check mark to save, and the settings are complete. Finally, cmd + s will let the settings take effect.

At this point, the first section of the page is set up, and the next chapter starts setting up the rest of the sections.

Congratulations, the home page work has been completed most of the work. Here we will proceed, WordPress self-built house record DiVi theme five page builder (next).

WordPress self-build house series article list:

Zhai Haisheng: Wordpress website self-built room fact sheet - Index 2 Like - 0 Comment Articles2021 WordPress white novice builder tutorial nanny version - Tencent pagoda panel builder chapter 3 Like - 0 Comment Articles2021 WordPress tutorial for novice builders - WordPress and Theme Basic Settings 2 Likes - 0 Comments on the articleWordPress self-build house fact sheet - DiVi theme five page builder chapter (on)0 Like - 0 Comment ArticlesZhai Haisheng: WordPress self-build room fact sheet - DiVi theme five page builder (in)Zhai Haisheng: WordPress self-build room fact sheet - - DiVi theme five page builder (next)

Article Title: WordPress self-build house fact sheet DiVi theme five page builder (above).

Release Time: October 7, 2021 - 21:21 pm

Update time: October 7, 2021 - 23:21 pm

Updated Versions : Version 0.51

Non-commercialPlease save the full text information for reproduction. For commercial use, please contact the author for authorization.

赞(0) Reward
Reproduction without permission is prohibited.WordPress SelfStudy " WordPress self-built house record - DiVi theme five pages to build the site (on)
Share to. More (0)

Elegant Themes' DiVi theme, the most widely used theme.

Limited Time Discount

Feel the article useful to reward the article author

Thank you very much for your appreciation, we will continue to give more quality content, let's create a better online world together!

Alipay sweep to reward

WeChat sweep a reward