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

When you see this, you have actually created a brand new WordPress showcase, Blog, that isBlogA list of articles, not necessary for a website.

To start a website, it is necessary to explain who you are, what services you offer, and what your work is.

Now, you look back WordPress website self-built room fact sheet - index chapter In the analogy made in the book, building a WordPress website, is like building your own house in your hometown. It has some steps, but it's far less difficult than you might think, and you could even say that building a website is just a laborious job, with no skills to speak of.

In the process of building, you have to pay mainly sweat, if it is to read these articles I wrote, enough to ensure that you build an identical site up, the core only two words "do as you are told"

Everything has a beginning, and the beginning is the hardest part, so don't expect it to be exactly the same as the tutorial, you just need to draw a tiger.

It is difficult to build a website, a well-functioning website, indeed difficult, difficult to need a whole team, half a year to come up with a finished product; but it can also be very easy, like us to build a showcase, do as we do, a few days can be.

But, even if there is a step in front of you, all you need to do, must consist in taking the first step, which in this series of articles, the first step is 2021 WordPress white novice build a website tutorial nanny version - Tencent pagoda panel build a website You have to have this foundation first, to get to where you are now, and eventually, you will see http://hysen.me Such a website is born in your hands.

Of course, there are all kinds of high-end people will write high-end title "one hour to fix xxx", you go to see, go to do, if 10 hours still not done, you are welcome to come back to see me this, need a few days of WordPress self-build site installation fact sheet, to ensure that you just do, that you can do a sameWebsiteCome out.

Now, we come to the last article in the series, how to create blog posts in DiVi theme, and let's get down to business.

Target page : Create a Blog as shown below, which contains 6 POST articles, often referred to as blog posts.

Objective 1: WordPress Blog related basic settings:

  • 1.1 Set up Blog Page This page displays Post, and blog posts
  • 1.2 Divide Post articles into two categories: Self Improvment and Other
  • 1.3 Set the color of Link in WordPress to #2F7BCB.
  • 1.1 Set Blog Page This page displays Post, and blog posts Dashboard - Settings - Reading - Your homepage displays - A static page - Post Page - Select Blog . Click Save to save the settings.
  • 1.2 Classify POST into two categories: Dashboard - Posts - Categories - Add New Category: Enter Other in the name slug and click the button below to Add New Category. Category, this will add a category Other, you can see the result in the category list on the right.
    Similarly add the Self Improvement category.
  • 1.3 Set the color of Link in WordPress to #2F7BCB.

Frontend, any page, such as Contact or Blog page. Hover the mouse pointer over the Site Title in the upper left corner. Site Title - Theme Customizer - General Settings - Typography - BODY LINK COLOR - #2F7BCB. #2F7BCB. Click Enter after typing, confirm the color change, and click Published above. The settings are complete.

Goal 2. post six Post articles

  • 2.1 Create the first POST , Name: How to Expand Your Influence
  • 2.2 Create a 2nd POST, with video, image and article links and other settings, named How do you Spend Your Time in Life.
  • 2.3 Create a total of 6 Blogs (including the previous two POSTs), categorize the posts, and use Featured images, and finally fill them with random Latin text.
  • 2.1 Create the first POST , Name: How to Expand Your Influence

As you can see above, there are two common ways to create a Post. If you are on the home page, hover your cursor over New in the upper left - select Post. If you are on the backend of the site, Dashboard - Posts - click Add New.

Once created, click Use Default Editor , and use the defaultEditors.

The image above is the Blog editing page, which has been filled in with the title of the article andRandom LatinThe text.

On the left is the post title and post content, on the top right is the settings cog, click to switch to full screen editing, and the Post and Block double tab menu. The three dots in the top right corner are the POST OPTION menu.

  • 2.1.1 On the right side of the Post tab, set two items: Categories - select Self Improvement Featured image - upload the title image of the current POST article.

Finally, click Publish to publish the post. A blog post with a header image will be published successfully. At this point, in the http://hysen.me/blog You can see the first Post: How to Expand Your Influence just published under

  • 2.2 Create a 2nd POST, with video, image and article link, named How do you Spend Your Time in Life.
  • 2.2.1 Fill in the title of the article and all the required text content.

2.2.2 Add the first image.

The cursor is hovered over the space between two lines of text, and the add block menu appears, click on it

  • A menu with 6 items Paragraph, Heading, Image, etc. appears, if you want to see the whole menu, click on Browse All in black with white letters, there are 66 Blocks.

Select Image from the many Blocks, then select Upload from Media LibraryPictures.

In wordpress 5.6.2 + Divi 4.9, there are 66 Blocks that can be added. Text: 11 items Media: 7 items Design: 7 items Widgets: 11 items Embeds: 30 items
Concept: WordPress Gutenberg editor in BLOCKS.
In Gutenberg, articles are composed of blocks, including the common paragraph blocks, image blocks, video blocks and 66 other blocks.
The default editor in WordPress is called Gutenberg, the most widely used classic editor in the early years, which will no longer be supported by the end of 2021. The Classic Editor plugin will be officially supported until December 31, 2021

After the image is uploaded, the cursor hovers over the image and a horizontal bar edit menu appears. Select Align right in the Change alignment item to align the image to the right. The up/down arrows in the horizontal bar edit menu above the image, click Move Down/up to move the image up/down.

The image size can be edited by dragging the origin point on the left side of the image and right in the center of the bottom line. The three dots on the far right of the horizontal edit menu above the image, click on them for a drop-down menu, and at the bottom is the Remove block, which is used to remove the current Blocks, including all 66 types of blocks, images, paragraphs, etc.

  • 2.2.3 Similarly, add a second picture (see the leftmost picture above), aligning it to the left. Adjust the position of the image up or down as needed for the layout.
  • 2.2.4 Adding links to articles:

Select the text you want to link How to expand your influence, click on the Link icon in the pop-up menu, type the keyword influence in the input box that appears, and the previous, first created Post will appear below Link, select it, and the link is complete. The effect of the link is shown in the last picture above.

  • 2.2.5 Adding Video Blocks

Hover the cursor over the space between the two lines of text and the add block menu will appear. Click on it, enter the keyword Video and select Video from the six menus below. In the Video menu that appears, select Upload Video from Media Library.

Once the video has been uploaded, the top banner menu, in addition to moving the video blocks up/down with the up/down arrows, can also be dragged with the Drag icon where the cursor is located.

  • 2.2.6 Setting up a list item with an H4 header
  • 2.2.6.1 Set H4 title blocks Select the text Read More, in the Change block type or style drop-down menu where the small hand of the cursor is located, select the title font, and then select the font size H4 as shown in the figure.
  • 2.2.6.2 Set List blocks Select all 6 article titles below, in the Change block type or style drop-down menu, select List

Select the H4 title Read More and the list of 6 articles, which can be moved up and down through the up and down menu.

  • 2.2.7 Other settings

Right side Post/Block menuSet the following five items.

  • Categories - Select Self Improvement
  • Tags - type life, meanning. hit the enter key in between intervals.
  • Featured image - Uploads the header image of the current POST article
  • Excerpt - Enter article overview content
  • Discussion - Remove the checkmarks before the following two items, Allow comments and Allow pingbacks trackbacks.
  • 2.2.8 Publishing Finally, publish via the Publish menu above. A file containing the commonEditorProject, Text, Image, List, Video Post is done, Congratulations.
  • 2.3 Create a total of 6 Blogs (including the previous two POSTs), categorize the posts, and use Featured images, and finally fill them with random Latin text.

Blog Post Namerespectively:
How to Sell 10,000 Copies of Your Own Time - These three articles are categorized under Self Improvment
How to Expand Your Influence
How do you Spend Your Time in Life
Why use WordPress - These three articles are categorized under Other
Why We use DiVi for Web Design
Top 10 Best Hosting Providers for DiVi

Tips: If you encounter the problem of not being able to refresh the Blog, first set the blog display to empty in Reading, save it and then adjust it to blog, then save it. Refresh a few times.

Objective 3: Eliminate the following four widgets Widges. Change the display of widget Categories

a. Search Search box

b. Recent Comments

c. Archives

d. Meta

With the previous settings, such as the Sidebar section where the cursor is on the right, and the currentTarget Blog PageTo compare, you will see that the widget menu on the right side has 4 more items by default. These widgets are called Widgets, so let's remove them and change the way Categories are displayed.

Backend settings: Dashboard - Appearance - Widgets - Sidebar on the right side of the page Click on the widget item Search and select Delete. Similarly delete Recent Comments, In Categories, select Show post counts.

At this point, the WordPress built-in Blog page is set up. Open your domain / blog, where it is http://hysen.me/blog, you can see that the initial goal we set was achieved, with a total of six blog posts.

Finally, a little homework. If you like http://hysen.me/blog For the current layout, in the Module settings, change the Layout from Full width to Grid.

At this point, WordPress self-build house fact sheet - DiVi theme five pages to build a site, the first three full text finished. You can already easily design a http://hysen.me One of a kind display station now,

If you use Woocomerce, you can further set it up as an independent e-commerce site. Use thousands of WordPress Plugin, you can also get a variety of uses for the site.

That's it for me, my initial goal, is to solve the problem of building a WordPress site from 0-1, as for 1-100, there are too many solutions and tutorials to choose from. I hope your WordPress journey is full of anticipation, and good luck.

Article Title: WordPress self-build room fact sheet - DiVi theme five page builder (next)

Release Time: October 9, 2021 - 20 : 55 minutes

Update time:

Updated Versions : Version 0.5 beta

Links: Zhai Haisheng: WordPress self-build room fact sheet - - DiVi theme five page builder (next)

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

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

After readingThe first few basic articlesAfter, you know, using the WordPress DiVi ThemeBuilding a showcase site is a labor of love, not a skill. The most basic skill you need to have is the word "do it" in the WordPress Build Your Own House series of articles.

Do not have to be sad, you are not alone, the majority of people, toss and turn, for years did not learn anything, but also a good life it. In a technology has become a work of strength, you still can not complete, the reason, it is worth thinking about several times.

New OrientalThere was once the most N-class writing teacher - no need to add one. He wrote all 185 TOEFL essays straight out of the box, and finally published them in a book that has been selling for 16 years. It still has a 7+ rating on Douban. He once had a great passage describing the importance of selling 10,000 copies a time.

If you want to be wealthy and free, you must learn to write. Writing is one of the very few options for "selling yourself the same time many, many times over" and is one of the easiest steps for the average person to get started.
In such an era, effective communication is clearly the most important skill, and should even be categorized as the "most important survival skill", where one's communication efficiency determines, from the bottom, the resources one may eventually obtain and their quality.
Writing is a more efficient and valuable form of effective communication than private communication.

This passage doesn't seem to have anything to do with this text, does it? It looks like that, but if you think about it further, you have toThere is a place to write, right??

Of course, Zhihu Douban is a good place, but you have been writing for so many years, have you ever been deleted angry experience, self-built site in addition to moral and legal, there are no restrictions, is any restrictions! Now do you understand the meaning of the word "independent" in the "independent site" or not?

Moreover, building a website is one of the few channels that the average person can master to sell 10,000 copies of a time.

As we have seen in WordPress website self-built room fact sheet - index chapter As mentioned in the article, building your own website online is like building your own house in your hometown, there are some steps, but nothing difficult.

You need to choose an address (buy a domain name), buy a plot (choose a server), build a foundation (install LNMP or LiteSpeed), and do some simple renovations (use DiVi for basic setup). Then, the house is ready to be lived in.

The bottom line is, this is the most free channel you can build online, bar none. For many people who really want to control the channel, that alone is attractive enough.

After the previous preparatory work, we have already understood the three core basic concepts of DiVi: Section, Row and Module, and, in the previous article WordPress self-built house record - DiVi theme five pages to build the site (on) We have completed the layout of some of our Home pages,

In fact, you have the basic typesetting skills of DiVi Builder, and you are ready to go.

Come On, in this article, we will work together to complete the four pages Home, About, Service, Contact.

For the article as a whole, the most difficult part was the design of the Home page, which was mostly done manually.
The last three pages, About, Service, and Contact, are all based on DiVi's powerful template library, and are basically effortless to set up.
The Blog page needs to be set up and populated separately, and is only as difficult as the Home page, which will be a separate article.

Catalog:

  • Home Page Settings
  • About page
  • Service page
  • Contact page

Configuring the environment:

HOME Home Page Settings

Previously in our previous article IV. New Section - Full WIDTH Full width sectionIn, already done "Let Us Tell Your Story" this home page full width image, this section we complete the finalTarget pageis the bottom half of the picture below.

A new Section, containing three module rows. Three of the columns are, respectively, Images, Videos and Scrolling Gallery. Implement three columns side by side for Blurb, Photography, Film and Web Design.

I. Set the target with 3 columns of Blurb side by side:

1... The first Column creates a Blurb module with a Title Text of Photography, which contains a graphic and a button, two links.

  • 1.1 Rename the blurb's Text Title to Photography and link to the Photography page of Pages.
  • 1.2 Change the text content to :

We specialize in helping people enhance their display. Images are an important element for you to present yourself online. To find out how to make images attract more traffic, please contact us.

  • 1.3 Add the image used by Blurb.

For the above steps of Blurb creation see: WordPress self-built house record - DiVi theme five pages to build the site (on), of which I. Blurb settings. After adding, click on the check mark to save.

  • 1.4 Formatting text in the Module's Design tab
  • 1.4.1 Change the Title Text:Photography font to 25, uppercase, and centered
  • 1.4.2 Change Body Text font to 15px, 1.9em
  • 1.5 Add Learn More button
  • 1.5.1 Color changed to #cc2b5e, Button Alignment set to center
  • 1.5.2 Linking to the photography page of pages.
  • 1.5.3 Turn on the Use Custom Styles For Button option, and enter #cc2b5e in the color

2. For the second Column, create a Video module, which contains a text module and a button, two links.

  • 2.1 Create a Video module, add a video.

The last image above is the entry point for adding a text module. The key point is to hover the mouse over the video module that appears on the page, and the button to add the module will appear.

  • 2.2 Add Text module and rename Title Text to Film, and link to Film page in pages.
  • 2.2.1 Film character set to H4 header.
  • 2.2.2 Change Body Text to:
    As you know, short videos are the best form of display advertising. In our package, a short promotional video is included, so you get a website with great pictures and movies.

Changing Film from normal text to H4 header text means that the H4 header text can be given a separate appearance in the Design tab, i.e. H1. H2. H3 .... These headers can have a different look and feel from each other. Divi is really powerful in terms of customization.

  • 2.3 Formatting text in the module's Design tab
  • 2.3.1 Check Title Text:Photography to set the title to H4, uppercase, centered, 25px.
  • 2.3.2 Change Body Text font to 15px, 1.9em

First set the appearance of the film in Design - Heading Text, paying attention to the option where the mouse pointer is located.

  • 2.4 Adding the Learn More button Method: By copying the Learn More button from the Photography module and dragging it directly over

First duplicate an identical button by Duplicate Module, then hover the mouse over the Move Module crosshair and drag it directly to the video module by pressing the left mouse button, note that the video module as the destination must have a light horizontal bar before you can let go of it, otherwise it will be confused.

3... Third Column, Slide

By copying the Colummn of the Video module, it is possible to copy the entire column of video + text + buttons together, and include all formats.

The result after copying the Column FILM, the two on the right are the exact same video+text+button combination.

The above picture is the setting portal, in the green Row Option hover menu in the upper right corner, select Row Settings, in one of the three Columns, delete the third one first, then copy the second one. Then two FILM items will appear. Remember to save and exit. Divi settings, either horizontally or vertically, are convenient.

  • 3.1 Add the Gallery module below and make it Slide. Be sure to add the Galley module first, and then remove the video module.
  • 3.1.1 Add 5 photos
  • 3.2.2 Setting to close all two items under elements in Content
  • 3.2.3 Setting Layout as Slider in Design.
  • 3.2.4 Simultaneously open Animation and set Automatic Animation Speed to 3000 Milliseconds.
  • 3.3 Set the text formatting in the Design tab of the module. Note: Open the settings box of the Text module and then change the text content:

The header Web Design is set to H4 Heading format. The text is as follows: We use Divi to create eye-catching DIVI theme is one of the best among many. she is so easy for everyone to build elegant websites quickly. so please feel amazing and very free to So please feel amazing and very free to contact us.

  • 3.4 The two Text Module text selection methods are not limited to H4 Heading formatted text, but can be any text.
    In the first method, select any text you want to create a link in the text box, for example FILM, click insert link and type/filmThat is.
    The second method, in the text box of the module settings text setting, directly select the text you want to change Web Design, check the insert/edit link icon, and in the insert link box that pops up, type/webdesign, this is another way to link to the webdesign page of pages.

The Learn More button changes the link to the webdesign page of the pages. I've said this many times before, so I won't repeat it.

At this point, we have set up a new Section with three modules.

II. Make Why Choose Us section, set the curve effect between the home page picture and the three columns

Objective:
Create the Why Choose Us section, which contains three blurb modules with icons. And two Divider curve effects.

1. Copy the three blurb sections at the top of the page, and use it as the basis for a new section.

Select the blue-framed Section in the above image, and on the Setion Options menu that appears, click Duplicat Section.

2. Set the Section appearance layout where the three icons are located

  • 2.1 Set section background color to dark, base color: #1D0914, gradient two colors, take two colors of the gradient of the previous section, rgba(204,43,94,0.49), rgba(117,58,136,0.49)

Background Color Settings, Section Settings - Content - Backgroud - Add Background Color, enter #1D0914. Gradient Color Settings: Section Settings - Content - Backgroud - Add Background Gradient, select the color and enter two colors in order rgba(204,43,94,0.49), rgba(117,58,136, 0.49) .

  • 2.2 Delete the useless parts. It is faster to delete from top to bottom.

Delete useless content via the trash can delete button on the hover menu.

  • 2.3 Delete the image in blurb, add check mark icon. Set blurb font color to light, Title Text in upper case,

Blurb Settings - Content - image - DeletePictures; Blurb Settings - Content - Use Icon - SelectcheckmarkIcon Blurb Settings - Design - Text - Text Color - Select Light Blurb Settings - Design - Title Text - Title Font Style - Select Uppercase (not pictured)

3... Add text module Why Choose Us

  • 3.1 Adding a single Row

Select the Row where the blurb is located, click on the plus sign - New Row - select a single Row

  • 3.2 Add text module, set Why Choose Us font uppercase, font size 36px, centered, light font color

Add New Module - input "text" - click Text module

Text Settings - Text - Body - Enter Why Choose Us Text Settings - Text Alignment - Select Centered Text Settings - Text Font Style - select Uppercase Text Settings - Text Text Size - enter 36px

  • 3.3 Drag the row where Why Choose Us is located to the top of the three icons, adjust the top position to 53px and the bottom position to 45px.

Hover over the Row where Why Choose Us is located, and in the Row Options menu that appears, select Move Row and drag it to the top of the image range

Press and hold the Move Row button to move the image, the icon turns a green colorplus sign, move the top of the picture, when a long translucent box appears, release the mouse.

! [](data:image/svg+xml;utf8,)

Select the Row where Why Choose Us is located, hover over the text, and when a long translucent box appears, click the left mouse button to pull down

Click the left mouse button to pull down 53px, to adjust the space above. Similarly, adjust the space below to 45px.

Release the left mouse button, and the top and bottom spaces of Why Choose Us are adjusted.

4... Set the CSS code in the Icon Blurb module to achieve the outer frame effect.

 border: 1px solid #3194c8;
 padding: 25px;
 border-radius: 4px;
  • 4.1 Make two copies of the created blurb.

Blurb Settings - Advanced - Custom CSS - Main Element - Paste css code Select the Blurb module, in the Blurb module Options menu, select Duplicate Module, click it twice to duplicate it, as shown in the image on the far right, the duplicated content appears below.

  • 4.2 Update each blurb text content and icon.
    Text Title in order is Professional Work, Great Ideas, Fast Delivery

Blurb Settings - Text - Title - Title is Professional Work, Great Ideas, Fast Delivery Blurb Settings respectively - Image&Icon - icon - select the corresponding icon. When you are done with this section, remember to click on the check mark to save, and the shortcut cmd + s to save.

5... Use animation-blurb code to achieve the mouse hover over, blurb module color change effect

  • 5.1 Fill in the CSS code in Divi, copy the character "animation-blurb"

.animation-blurb.et_pb_blurb:hover {
background: #315669;
transition: all 1.0s ease-in-out 0s;
}

After pasting, click Save Changes

  • 5.2 Reference "animation-blurb" in the blurb CSS project to achieve the cursor hover highlighting effect.
  • 5.3 Turn the other two styles into a hover color change effect by copying the module style.

Row Settings - Advanced - CSS class - paste the character "animation-blurb", click the check mark to save it, and watch The blurb where Professional Work is located has been highlighted with the cursor hovering over it. Right click on the blurb where Professional Work is located, select Copy Module Styles to copy the current blurb, right click on Great Ideas and select Paste Module Styles to paste the style; continue to paste Module Styles to Fast Delivery .

So far, all three icon blurb module The cursor hovering and highlighting effects are achieved.

PS: The animation effect and the duration of the animation can be set via Design - Animation.

III. RealizationCurve splittingEffect

6. Objective: To implement two Divider curves.

  • 6.1 Implement Divider, try left/right flip and vertical flip

The three settings below correspond to the three Divider effects described above.

Select the Section where Full Width Header: Tell Us your story is located, Section Settings - Dividers - Divider Style - select your desired Divider Style - select your desired divider style. Section Settings - Dividers - Divider Flip - select the desired flip mode.

  • 6.2 Implement the two Dividers required in the final page effect of this section,
  • 6.2.1 Implement a Diviver under Full Width Header: Tell Us your story, height 36px
  • 6.2.2 Add a Divider to the top of the icon blurb module Why Choose Us, height 75px

Select the Section where Full Width Header: Tell Us your story is located, Section Settings - Dividers - Dividers - select Top, Divider Style - select your desired divider style, Section Settings - Dividers - Divider Hight - set to 36px

Select the icon blurb module Why Choose Us Section, Section Settings - Dividers - Dividers - Select Bottom Divider Style - Select your desired divider style, Section Settings - Dividers - Divider Hight - set to 36px

This section contains three blurb modules with icons, which are set up.

IV. using 4 image modules and Text module, create COMPANIES WE HAVE WORKED FOR. project branding area?

** Objective:** Using the 4 image modules and the Text module, create the effect shown below.

Create a new Section, using the 4-column Row format. It contains 4 image modules.

Select the Section where Why Choose Us is located, a blue plus sign will appear below, click the plus sign to create New Section - Regular. The new section is created in the background; in the Insert Row popup window, select the four columns format under New Row. Similarly, the new Row is also created in the background, enter the image in the insert module popup, and click the image module to create it.

  • 1.1 Set up Module: upload the required images for the image module, set the format to prepare for copying the image module

The last image setting is an option to set the row where the 4 images are located, which will be used later.

  • 1.2 Set Row: Duplicate the above image module by pressing the Duplicate Module button to make three copies. As shown in the figure below

Drag the copied image module to the corresponding location by left-clicking the Move Module icon on the image module settings menu. Using the same method as above, replace the images in the 2nd, 3rd, and 4th image modules with WooCommerce, WPML, and bbPRESS in that order.

  • 1.2.1 Setting up Row: Create a Text module with the content Companies we have worked for.
  • 1.2.2 Center the text, with a size of 36px.

Select the row where the 4 image modules are located, click the plus sign that appears below to add a row, select a single row, type text, select the text module and create it with the following text: Companies we have worked for , Text Settings - Body - select Align center to center the text. Content - Body - select Align center to center the text.

Text Settings - Content - Body - Paragraph - Select Heading 2 format Text Settings - Design - Heading Text - H2 - Heading 2 Font Style - Select to capitalize the text Text Settings - Design - Heading Text - H2 - Heading 2 Text Size - Set the font size to 36px.

  • 1.3 Set Row, select the row where the 4 image modules are located,

The setting you will use is the far right image above, Row Settings - Sizing - turn on Use Custom Gutter Width, and set Gutter WIdth to 1. Row Settings - Sizing - Turn on Equalize Column Heights, set Width to 100%, Max Width to 2560px max.

The Companies we have worked for module in this section, is set up.

Import of prefabricated formwork

The reason for having a separate secondary directory in this section is that, although we use pre-made templates for the Home page, it is separate and is one of the core differences between the DiVi theme and other vendors.

If you want to dramatically increase the speed of your website's completion, you should learn to use the most brilliant part of Divi: the pre-built web template Layout.

In the past year, Divi's total number of pre-built templates has grown by 40%, reaching a total of over 200 sites, each containing 5-10 pages, and almost 1700 different pages, covering resumes, portfolios, Blog, e-commerce sites, affiliate promotions, almost all common site types. Enough to meet most of your needs, there is bound to be one or more pages that have the part you need to use.

You can choose to import the entire layout, or you can choose to use only a portion of it, which can be a huge time saver when you're dealing with a site that needs to be finished by a deadline, and, since these pages are responsive, they are, in most cases, much better than what you could do yourself.

Objectives: Implement the two new sections What Our Customers Say and Creat your own shown in the lower part of the page.

Objective 1: The module What Our Customers Say, which contains three blurb modules.

  • 1.1 Import the whole page by prefabricated template.

Click on the bottom of the page with the three dotsRoundbutton, and from the Divi Visual builder option menu that pops up, click Load From Library. Then you'll see Divi's famous library of pre-built templates.

Divi has the most powerful pre-built template library in the well-known WordPress Themes, Layout Packs, each Layout pack, is a separate website page, in this library, there are 1440 pages in total, the list on the left is the directory, from art, business, education, dining, fashion to technical blogs, for most people, For most people, there's something for everyone. And the number keeps growing.

For example, if you want to select a page from the template Digital Payments Landing Page, click on it to go to its display page, the default page on the left is Home, which can be scrolled up and down, and on the right is each page, you select a page, and you can see the general structure of the page on the left.

The page you want to use is the What Our Customers Say on the Home page on the left. When taking a part of the page, make sure to uncheck Replace existing content, if you choose to check this box, it will empty your existing page. Click on Use This Layout at the bottom of the page on the left to startLoadpages, the first load time will take longer. When the daily network is not in jeopardy, it will take about 10 seconds to load the required Layout.

  • 1.2 Remove all useless sections, including the Text Module that comes with the What Our Customers Say section.
  • 1.3 Setting the current Section
  • 1.3.1 Copy the section style of the WHY CHOOSE US section, and paste it into the current section.
  • 1.3.2 Delete the original Section base color, so that it ends up with a white base color

Select the Section where the WHY CHOOSE US section is located, right-click on the gear in the Section Settings menu, and click Copy Section Styles. Then go to the Section where the What Our Customers Say section is located, right-click on the gear in the Section Settings menu, and click Paste Section Styles. Then go to the Section where the What Our Customers Say section is located, right-click on the cog in the Section Settings menu, and click Paste Section Styles. This completes the copy of the formatting, not the content.

What Our Customers Say section - Section Settings - Content - Background - Remove the background color and the gradient color. The background color of the section is now white.

  • 1.3.3 Change the background color of the Row using the specified two-color rgba(204,43,94,0.88) rgba(117,58,136,0.86).

Select the Row where the three Blurb Modules are located in the What Our Customers Say section. Row Settings - Content - Background - Gardient - Delete the original gradient color. Row Settings - Content - Background - Gardient - Click Add Background Gradient Row Settings - Content - Background - Gardient - Select Color - Enter in the color card boxBase color 1:rgba(204,43,94,0.88). Similarly enter the base color 2:rgba(117,58,136,0.86). Click on the check mark to save.

Objective 2: Moderation Create Your Own Style,

which contains a button module, an image module, a divider module, and two text modules.

  • 2.1 Import the whole page by prefabricated template.
  • 2.2 Delete all useless sections, including the blank row that comes with the Create Your Own Style section below.
  • 2.3 Setting the current Section
  • 2.3.1 Copy the section style of the WHY CHOOSE US section, and copy it to the current section.

The Fashion Landing Page is loaded from the Layout pack, a pre-made template library, and we will use the part of it shown on the left side of the Home page. The method of loading is exactly the same as for the section What Our Customers Say. The only thing to note is: when deleting useless sections, please start from the bottom and delete the useless sections and so on.

  • 2.3.2 Setting up the button module
  • 2.3.2.1 Copy the module style of the Learn More button under the Service section Photography, and paste it into the current button
  • 2.3.2.1 Set the Button to be aligned to the left and the Button color to be white

http://hysen.me At the top of the home page, under the Learn More button below the three Blurb sections, select this Button Module, right click on the gear in the Module Settings menu, and click Copy Module Styles.

Then go to the Learn More button in the Create Your Own Style section, right-click on the gear in the Button Module Settings menu, and click Paste Module Styles. This completes the copy of the module format rather than the content.

The last setting in the above image is a composite: Button Settings - Design - Alignment - Button Alignment - check Align to the left. Button Settings - Design - Button - Button Text Color - check White.

Finally, click the checkbox to save the result.

  • 2.3.3 Set the color of the line item in the Divider Moudle to white.

Click on the horizontal line to the left of the Create Your Own Style section, and in the Divider Module pop-up menu: Divider Settings - Design - Line - Line Color - Select white. Finally, click the checkbox to save the result.

To this point, http://hysen.me The new sections What Our Customers Say and Creat your own are set up at the bottom of the home page.

About page

Target page: In this section we load a pre-made template to create the final About page as follows. The final page will be different for each person due to the difference in the process.

Objective: 1. load Pre made template, Select SEO agency about templates

Click http://hysen.me The About page on the home page is currently a blank page. On the Divi Visual builder option menu at the bottom of the page, click the plus sign on the left to go to the Load From Library page.

Then select the desired SEO Agency Layout Pack. Select the About page on the right side of the image above, and click Use This Layout to load the About page. Note: You will only be able to click on About or Service pages, etc. if you are out of DiVi Visual Builder.

Goal 2: Remove unused sections: delete three sections, add one video

  • 2.1 The WE KNOW WHAT WORKS section and the Let's Work Together! and Contact information sections at the bottom.
  • 2.2 Add a video. The content is a Divi promo, located in the How We Deliver The Results That You Want! section.

Since the above video is loaded with a link to a DiVi promo on Youbunny.com, not a mp4 video file, it is inaccessible in China, so a false word will appear, trick: hover your mouse near the false word, try it once or twice and you will see a line, click it and the Video Settings Module menu will appear. Click on it and upload an Mp4 video.

Objective 3: Three ways to copy the format of the text

  • 3.1 Since the following effects need a control unit for comparison, we set the Target All The Right Customers section to Heading Text and body text format. Title Text and Body Text are all capitalized, and Tile Text is set to H2, centered. Red.

In the section Target All The Right Customers click to select Text Module, click the small gear on the menu and go to Text Settings. Text Settings - Design - Text - Text Font Style - Select the TT option to make all text uppercase. Text Settings - Design - Heading Text - Heading 2 Text Alignment - Select the centering option. Text Settings - Design - Heading Text - Heading 2 Text Color - select Red.

  • 3.2 Three ways to copy H2 font styles
  • 3.2.1 Copy Module Styles, go to the target Module Settings menu and Paste Module Styles to copy the entire Moduel format.
  • 3.2.3 Via Text Setings - Design - Heading Text - three dots menu - select Copy Heading Text Styles, then go to the target Module Settings menu to Paste Heading Text Styles.
  • 3.2.4 Copy Heading Text H2 Styles via Text Setings - Design - Heading Text - Select H2 - Right click menu on H2 - Copy Heading Text H2 Styles, then go to the target Module Settings menu and Paste Heading Text H2 Styles to paste the styles.

From left to right, the top and bottom are viewed one on one,

Three copies, three pastes, and a total of two images to compare the top and bottom, at a glance. One of them: module style copy is to copy the whole module format. Heading Text H2 Style, is just a copy of the H2 text formatting.

Goal 4: Unify H2 fonts within pages,

  • 4.1 TARGET ALL THE RIGHT CUSTOMERS section, through Module Settings menu, right click menu with small gear icon, select Extend Text Styles, to this page, to extend the formatting of the current section's H2 red uppercase title and uppercase Body Text, to the whole page.
    After this step, all the H2 fonts in the current page and the new H2 fonts will maintain the same format.

Note: In general, Copy module style only works for the Text item (both title and text) in the design in Text settings.

  • 4.2 In the last image above, TARGET ALL THE RIGHT CUSTOMERS section, through Module Settings menu, right click menu with small gear icon, set the page with three dots through Heading Text, select Extend Heading Text Styles, a popup will appear Extended Styles screen, then select To - All Texts, Throughout - This Page,
    When you click the Extened button, you can send only the heading text format to all Heading Text text on the current page.

Objective 5: Two methods to change the style of the Button in a similar way

  • 5.1 Set Read More button Call to action module Read More button, change the background color to 75a833 and the font to white.
  • 5.2 Changing the Format of Other Buttons in a Section via Extend Button Styles

In the image below, select the Call to action module where the Search Engine Optimization text section is located, and click the small gear icon on the Module Option menu,

Menu Call To Action Settings - Design - Button - Button after the three point drop down menu - click Extend Button Styles. The Extned Styles menu, select To All Buttons for the first item, and Throughout - This Section for the second item. Note: This action only copies the format of the button to the other buttons in the current Section, and does not change anything else.

  • 5.3 Change the overall format of the Call to action Moudle by Extend Call To Action Styles to the current section

Select the Call to action module where the Search Engine Optimization text section is located, right click on the Module Option menu pinion settings icon, and select Extend Call To Action Styles to the current section. The result is a change to all Call to Action Modules in the current The result is to change the style of all Call to Action Modules in the current section. Note: This action does not work on the body text of the Content tab in the Module menu.

Objective 6: Use Shift to select multiple items

  • 6.1 Multiple choice for three images; text format: Lucy Wang, Name: Lucy Wang, Position: Founder for the first image in the Our SEO Experts section

Using Shift + Left click on similar items will result in all three Person Modules being selected at once, and the Module menu will become a four-item sub-menu that appears above each Person Moudle.

  • 6.2 Copy the formatting of Lucy Wang's Personal Module to the other two by using Copy Module Styles. This text formatting operation is covered several times in this section and will not be repeated.
  • 6.3 Three Person Modules Multi-select and set Left Border to 6px, color to #960096
    Box shadow is the second mode, Box Shadow Horizontal Position is 3px.

Using Shift + Left click on each of the three Person Modules, select them all, click on the small gear icon on the Module Option menu and go to Element Settings - Border - Border Styles item 5 Element Settings - Border - Border Width - set to 3px Element Settings - Border - Border Color - set to #960096 Element Settings - Box Shadow - Box Shadow - select the second format. Element Settings - Box Shadow - Box Shadow Horizontal Position - set to 3px The final result is shown on the far right of the image above.

Objective 7. Try to implement multi-select for two modules across sections, multi-select for both sections, and change the background color at the same time

This completes the about page / section settings.

Service page

Target page: By loading the template, and modifying the page with 7 sections as follows

Load the Pre made template, the same way as in the previous section SEO agency about templatesis exactly the same, this time we're going to load the Learning Management (LMS) Layout Pack in the Landing page. Once selected, click the Use This Layout button to load it.

Objectives: 1. Basic setup of the module Learn to Code Websites Apps Games

  • 1.1 Gradient color setting for Section Background #75a833 and 960096. Gradient Direction 90. Note: Gradient Direction 90 and 180 are two colors.

In the section Learn to Code Websites Apps Games, Section Settings - Content - Background - background - Select the Gradient tab, click on Select Color, enter the color #75a833. Do the same for the second color #960096.

Also set the option Gradient Direction at the bottom of the image to 90deg.

  • 1.2 Buttons VIEW COURSES settings and extended styles to the page.
  • 1.2.1 Button Background #960096, Button Border Color #960096, Button Border Width: 11px Box Shadow set to No

Button Settings - Design - Button - Button Background - Click on the blank area for background color, enter color #960096 Button Settings - Design - Button - Button Border Width is set to 11px. Button Border Color is set to #960096

Button Settings - Design - Box Shadow - Select Box Shadow as None.

  • 1.2.2 Extending the button style to the current page.

In VIEW COURSES Right-click on the button, select Extend Button Styles, select This Page by default in the Extend Button Styles popup, and click Extened to standardize the button formatting across the page.

  • 1.3 Image notebook settings and style extensions
  • 1.3.1 Image Settings - Design - Filters - Hue - 73
  • 1.3.2 Extend Image Styles to the entire page with notebook module styles, Image Settings format
  • 1.4 Section Learn to Code Websites Apps Games was copied to two sections, section Become an expert , and section My entire team was prototyping by the end of the first day.

Section Learn to Code Websites Apps Games is located in any blank space in the Section, click on the Section Option menu, right click on it, select Copy Section Styles, then go to the other two specified sections, right click and select Paste Section Styles.

Objective 2. For the 100's of Courses section, set the H2 Title font to #e02b20, and copy it to the other sections.

Using the shortcut Option + Cmd + V, copy Style to the H2 Title text in the following 5 subsections. a. Learn by Doing b. Build your portfolio c. Achieve your goals d. FAQ e. Ready to get started?

Select the Text Module where the 100's of Courses section is located, Text Settings - Heading Text - select H2 - Heading 2 Text Color - Select the color #e02b20. The text of 100's of Courses is now in red.

To copy text formatting 1: In the box where the text is located, right-click directly, select Copy Module Styles on the pop-up menu, and then go to the target text and right-click Paste Module Styles.

Copy text formatting method 2: How to do it: First copy the Module Style where 100's of Courses is located, then hover over the target text module, the module's outer frame is displayed, use shortcut Option + cmd + V to do so. You don't need to left-click on it, it won't work if you click on it.

There is a simpler way to do it, analyze the Title text of the page, only My entire team was prototyping by the end of the first day! style can turn all the H2 Title text into the same format . However, this method is not recommended, because exhausting the formatting of H3 Title may take a lot of time and may be missed, resulting in a confusing layout.

Objective 3. Replace all colors in the page #09e1c0 with #960096 by operating the Module setting of Line Short.

Left click on any short Divider, for example the text of the version Become an expert, left click on the short line below it, select this short form of Divider, on Module Option, select Module Settings, pop-up menu Divider Settings. Settings - Line - Line Color - right-click and select Find & Replace, the pop-up Find & Replace pops up. With - enter color #960096, check the box below: Replace all found values within every option type, not mited to Line Color, [meaning: Replace all found values within all option types, not limited to Line Color.] Finally, click the Replace button to replace the entire page with the Line color.

Divider Settings - Line - Color - find&replace - you can either enter color 960096, or search by color block, which is an incredibly powerful bulk operation for Divi themes This is an incredibly powerful way for Divi themes to operate in bulk, which is not easy to describe when changing pre-made templates.

Objective 4: Fine-tune some of the content

  • 4.1 Uniformly replace the Body Text text color in each sub-section of the 100s of Courses section, from #8585bd, to #444444.

Select the Blurb Module where the Web Development section is located and click on the small gear on the Module Option menu. Blurb Settings - Body text - Body Text Color - Right click menu and select Find Replace, in the pop-up Find & Replace menu, type in Replace With In the lower box, check Replace All. Finally, click on the Replace button to change the body text color of the board to #444444.

  • 4.2 Extend the Image Hue setting in the Blurbl Moudle, where Web Development is located, to all Blurb modules.

Blurb Settings - Image Icon - Image Hue - set to 93 deg. Then right click on the Image Hue, select Extend Image Hue from the popup menu, and in the Extend Styles popup box, select the two items as shown in the figure Then right click on the Image Hue, select Extend Image Hue from the popup menu, select the two items in the Extend Styles popup box, and click Extened.

  • 4.3 Become an expert section, where the Divider form Line, is changed to #ffffff, and the section containing the text is changed to #ffffff.
  • 4.4. The H4 Title text of Free Courses changes color to #e02b20 and the H4 Title text of Premium Courses changes color to #cc2b5e.

Become an expert section, select the short Line below the Become an expert text, and on the Module Option menu that appears, select Module Settings. Divider Settings - Design - Line - Line Line Color - check the color #ffffff.

Moderation Free Courses: Blurb Settings - Design - Title Text - H4 - Title Text Color - Select color #e02b20. Section Premium Courses: Blurb Settings - Design - Title Text - H4 - Title Text Color - Select color #cc2b5e.

Now, the Service page is set up.

Contact page

Target page: By loading the template, and modifying the page with 3 sections as follows.

Steps: Create a Section with Contact content, load a pre-made template Contact page, delete unused parts, adjust the color scheme, and finish.

Objective 1. Create a Contact Section and set up the Call to action module in it

  • 1.1 Section Add background image and set gradient color Set gradient color Gradient, rgba(224,43,32,0.48), rgba(117,58,136,0.65), Gradient Direction 90. YES. ImageSection Settings - Spacing - Padding Bottom 40px

The current page is a blank Contact Page, click on the blank area and select the settings icon on the Section Option menu that appears. Section Settings - Content - Backgound - Select the image icon - Add background image - Click on the plus sign to upload the image Section Settings - Content - Backgound - Select the Gradient icon - Add background Gradient - Click the plus sign to set Gradient color

Section Settings - Content - Backgound - gradient - Select Color - Sets the first base color of the two-color gradient color rgba(224,43,32,0.48). Set the second base color in the same way: rgba(117,58,136,0.65).

Section Settings - Content - Backgound - Gradient Direction - set to 90. Section Settings - Design - Spacing - Padding - Set Bottom to 40px.

  • 1.2 Adding the Call to action module and setting the font
  • 1.2.1 Adding Call to Action Module
  • 1.2.2 Add text content, set the font and remove the background color

Click on the plus sign in the center of the Section, Insert Row - New Row - select a single column of Row Enter the keyword Call, select the Call to Action module in the Call To Action Settings pop-up - Content - Text - Type Contact for Title, and We're here to help for Body text.

Call To Action Settings - Design - Title Text: Set the following 7 sections Title Heading Level: H2 Title Font Weight : Bold Title Font Style: TT Uppercase Title Text Alignment: Select Centering Title Text Size: 112px Title Letter Spacing: 13px Title Line Height: 2.7em

Similarly in Call To Action Settings - Design - Body Text Set Semi Bolt, uppercase, centered, 33px. Click the check mark to save and exit, and the first Section is set.

Objective 2. Load the Contact page and delete the unused parts.

The page loaded is the Contact page in the Learning Management (LMS) Layout Pack.

Note: In the current Divi version, if there is no content in the Section page, the loaded page will directly overwrite the entire page, and there is no option to avoid the overwrite.

In the Divi Visual builder option menu, select Load From Library, and in the Load Page Premade Layouts pop-up, select Learning Management (LMS), and to the right of the page presentation box, check Contact page. Without the Replace existing content checkbox, click Use This Layout to load the premade template Contact page.

  • 2.1 Delete the first and last sections. Also delete the row where the email option module SUBSCRIBE is located. Delete the Divider short line under Contact Us.

Delete the two Sections where Send us a Message and Ready to get started are located, delete the Row where the email option module SUBSCRIBE is located, and delete the Divider short line under Contact Us.

  • 2.2 Add a module, Contact Form Module, to the Contact Us section

On the Row where the Contact US module is located, click on the plus sign to add a new single row. Insert Row - New Row - select Single Row. In the Insert Module menu that pops up, enter the keyword contact and select the Contact Form module.

  • 2.2.1 The button enables the Use Custom Styles For Button, and sets the text color white. The immediate effect is that both the border and the font become white. The body text under Contact Us is set to white.

When creating a Contact Form a pop-up menu Contact Form Settings, Contact Form Settings - Design - Button - Use Custom Styles For Button - select Yes. Contact Form Settings - Design - Button - Use Custom Styles For Button - Button Text Color - Select White. Click on the check mark to save.

Select the text module under Contact Us and set the text white, Text Settings - Text - Text Text Color - select white.

The layout of the Contact page is now complete.

Goal 3: Three Sction color schemes for the entire page

  • 3.1 Contact US in Section Color 753a88, Gradient, rgba(224,43,32,0.48), , rgba(117,58,136,0.65) padding up 68, down 42.

Contact US section, left click on the blank space to bring up the Section Option menu, select Setting menu, Section Settings - Content - Backgound - Add Background Color - enter 753a88 on the mouse hover, click on the check mark to set it.

Section Settings - Content - Backgound - Add Background Gradient - Select Color - Enter rgba(224,43,32,0.48). Similarly enter the second color rgba(117,58,136,0.65).

Section Settings - Design - Spacing - Padding - Enter 68px in the Top column and 42px in the Bottom column.

  • 3.2 Frequently Asked Questions, color 753a88 Blurb Settings - Image &Icon question mark? Replace all colors with cc2b5e. Replace all text colors with 444444, done.

Go to the Module Settings menu where the Frequently Asked Questions are located, Blurb Settings - Image & Icon - Icon Color - right click on the icon and select Find & Replace. Replace. Find Replace - Replace With - Enter the color #cc2b5e Check the Replace all found values within every option type, not limited to Icon Color, to replace all elements of the same color on the current page. Finally, click Replace to complete the color replacement.

Similarly, change the color of all Body Text from #8585bd to #44444.

At this point, all three sections of the current page have been set up.

At this point, all four pages - Home, About, Service, and Contact - have been set up. Congratulations, the website work is more than half done. In the following section, we will set up the Blog, which is quite common.

WordPress self-build house series article list:

Zhai Haisheng: Wordpress website self-built room fact sheet - Index 2 Like - 0 Comment on the article 2 Like - 0 Comment on the article2021 WordPress tutorial nanny version for newbies - Tencent pagoda panel builder 3 Likes - 0 Comments on article 3 Likes - 0 Comments on article2021 WordPress Tutorial for Newbies - WordPress and Theme Basic Settings 2 Likes - 0 Comments on the article 2 Likes - 0 Comments on the articleWordPress self-built room fact sheet - DiVi theme five page builder (on) 0 Like - 0 Comment on the article 1 Like - 0 Comment on the articleZhai 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-built House Record - DiVi Theme Five Page Build (Medium)

Release Time: October 8, 2021 - 23 : 55 minutes

Update time:

Updated Versions : Version 0.5 beta

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

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

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

Catalog:

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

Objectives:
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.

Objectives:

  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

Objective:

  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.

2021 WordPress white novice builder tutorial nanny version - WordPress and the theme of the basic settings

WordPress and Theme Basic Settings

Previous Post 2021 WordPress white novice build a website tutorial nanny version - Tencent pagoda panel build a website, wrote about building WordPress websites to solve the basic problems, involving the key issues before the site renovation. Including choosing an address, buyingLandTo laying the foundation, building the frame (the main body of the house). Finally, a WordPress website is basically set up. Although there are more steps, follow this "WordPress website self-built house fact sheet " series of articles to do, building a website is just a laborious job.

Most of the articles mentioned building a WordPress website, is the above completed part, this is only the main body of the house to build up, completely uninhabitable.

Look, it looks like this:

It's like going from a person with no clothes (no website) to a person with a sack (initial WordPress installation completed).

What we are going to address below, is the basic framework of the WordPress look and feel. One of its visual manifestations, is the change of the site's structure.

and right DiVi ThemeIf you compare the websites you built, there is a big difference.

Below weComplete the basic setup in 8 steps. We will use English WordPress and DiVi theme for three reasons:

  1. WordPress comes from English-speaking countries, native English.
  2. Whenever possible, try to use English, because a lot of terms and concepts are in English, not to mention the fact that you have someone to guide you through it.
  3. In order to solve the various problems that may arise in the future, you must be familiar with English and use English search in order to find accurate answers. An example is the comparison between Google English and Baidu Chinese search results, in the long run, it is not too much to say that the two are very different.

Just like practicing basic typing, the first thing you should be familiar with is the 26 letters of the alphabet, for the obvious reason that the keyboard is made up of the English alphabet.

Let's get down to business: how to do basic wordpress setup, and common configurations for DIVI.

Configuring the environment:

Related question: How can I check what version of software is involved in the "Build Your Own WordPress Website" series of articles?

General wordpress settings

1. WordPress initial installation

My domain name is www.hysen.me, after you've donePrevious Tencent pagoda builder chapterof this step:8.2 Install WordPress via "One Click Deployment" in the software store.

WordPress first login, you can see the initial page of wordpress settings as follows. EnterYour own domain nameAfter that it will automatically jump to http://hysen.me/wp-admin/setup-config.php.

Click Continue, and you will be prompted for the items you need to set, including the most important mysql database username, password, etc.

Click on Let's go!, after installing wordpress, the first login link is http://www.hysen.me/wp-login.php, enter the three items you set before, mysql database name, and account, password, and the rest by default.

Click Submit, and the installation will be completed, which means that your previous settings are correct.

Click on Run the installation, go to the wordpress site and fill in the login details. Do the final preparation before logging in.

After filling out the form, select install wordpress, and a successful installation message will appear:

At this point, the wordpress program installation is complete

2. WordPress backend overview

Click Login, and log in to your daily wordpress login site: http://hysen.me/wp-login.php, or http://hysen.me/wp-admin You can login to the backend of wordpress / BACK END by entering the account and password you set up when you installed the wordpress program.

FRONT END and BACKEND can be simply understood as the frontend is the website that you visit on a daily basis. The backend is a collection of administrative tools for the site.

Click Log In, the first page you see after logging in is the backend of wordpress, which includes post file management, post settings, appearance options and other important content.

The first important place to switch between the foreground and background, is in the screenshot where the little house icon is located.

Click on the little house, it will switch to the frontend of your site, this is the initial default POST page, all wordpress templates first page is it, Hello World! Click again, it will go back to the backend of the site

At this point, you will notice that the first full display of your domain name http://hysen.me , this template is a wordpress template, the name is twenty twenty The page displayed, not our DiVi Theme. Later, we will explain how to import DiVi's theme files. For now we are addressing the basic settings of WordPress.

3. WordPress security thinning

Default Plugin

Here we remove the default plugin, the process is to disable it first, then remove it.

A plugin, is a tool that brings more functionality to a website.

Click on the box, check all plugins, Bulk action - Deactivate, then click on the Apply button on the right.

Then Bulk acticions again - Delete. This will delete all the plugins empty.

- POST and Pages

Delete all existing Posts and Pages.

Click the box, check all Posts, click Bulk action - Move to Trash, then click the Apply button on the right.

Click into Trash, ready to empty the discarded items inside

Click Empty Trash, empty the deprecated items

Similarly, clear the contents of Pages, in exactly the same way.

At this point, all the items to be cleared have been completed, and the following information is entered into Howdy, ['Howdy' is an informal way of saying 'Hello'.]

4, Howdy Information Update

Howdy information is the basic content of the website description and should be filled out at your discretion, this information helps to endorse and increase the trust of the website.

Hover your cursor over Howy, Hysen, and select Edit Profile to go to the User Information Update page, or if you choose to click on Hysen or Edit Profile, you can also go to it.

As I'm sure you've noticed, we can change the visual appearance of the wordpress backend by clicking on the color Ocean.

The above information can be filled in for reference. The picture in Profile Picture should be filled in Gravatar Register to use, Hong Kong and overseas servers are recommended, mainland China is not recommended, because it will slow down the whole site.

Projects New Password Used, when you need to update your WordPress backend password.

Click Update Profile, Complete Howdy profile changes.

The picture below is the official website of GRAVATAR.

Click Dismiss to turn off Welcom to WordPress information

Click on the little triangle icon to tuck all 5 items away to make room for them, which will look much fresher.

5. Site information update

Location: Setting - General Settings

Click General, go to General Settings, and start setting up the most important items in the backend Site Title: Here is theKeywordDetermines what keywords people use to search for you.

For example, if you're a photographer, people don't search for you under a company name like Hysen Media, they search for you using keywords like Phtographer. If you want your results to show up on the first few pages of Bing or Baidu when people search for your keywords, put the keywords you want to use on the far left of the Site Tile, and the rest on the right.

Tagline item: A one-sentence description of what you do. This is very important for visitors to quickly locate your site.

Below is the basic information, including language, time zone, date and time format. All settings are recommended to be defaulted if there is no specific need.

When you have finished changing the contents of the General item, click Save Changes at the bottom left of the image to save the changes.

Where the arrow is pointing, we see the format http://hysen.me , instead of https://hysen.me, which means the site will indicate insecure in the browser. This is a separate HTTPS certificate issue, and there are multiple solutions, and it does not affect your site's launch. Google or Baidu advanced search for the relevant keywords will give you the answer. Later on, based on the Pagoda panel, and LiteSpeed Web Server, we will explain how to enable HTTPS/SSL certificate separately.

So far, the common WordPress project has been set up.

6. Adding articles to the website as well as the table of contents.

Now, I want to add some content to the site, by adding a few Pages and a few Posts to the site. The current content is shown below, the home page is bare.

The correct order is to add Pages first, then Posts.

For our showcase WordPress site, Pages stands for menu items/directories, Posts is a post.

Target page for this section: In the section Add Pages and Post, the front page we will implement will look like this, note the 8 menu items in the upper right corner.

After setting up the eight Pages, all the Pages, including the current Home, About and other 8 items can be seen here.

Page is created in the order in which the http://hysen.me/ Home, in order of display from left to right, so, in most cases, you need to create Home - About - Service - Blog - Contact in order.

Home, also known as the home page, is the page that appears by default when someone enters your website. Everyone's time is precious, and the homepage is the most critical page of your website, if it is not attractive enough, visitors will leave the site quickly.
AboutIn many cases, your site will almost certainly have competitors who offer the same or similar services as you, so it's natural for people to want to know who they're dealing with. So you need to introduce yourself, or your profile, so that people can get to know you and gain credibility.
Services, means which services you provide.

To enter the settings page: click on New - Page in the menu where the mouse cursor is located, or Pages in the vertical menu on the left, to enter the Pages page.

You can access the Post page by going to Pages in the vertical menu on the left.

Click the Add New button after Pages to enter the editing page of the new Post.

By clicking on the three dots in the top right corner of this page, not the three dots in Chrome, you can see that the default mode is Code Editor, or you can manually switch to Code Editor mode, which does not affect our current operation.

In Editor mode, there is a little trick to reduce your annoyance. Avoid clicking the Publish button twice. Select the Preferences option at the bottom of the menu, and a Preferences menu will pop up.

Uncheck the include pre-publish checklist option, so you don't have to click the Publish button twice each time.

How to publish a Pages page, using the Home page as an example:

  • Type Home in the following position, and click Publish directly.

Next, click on the W symbol in the upper left corner to view all created Pages

Now I want to add three services, Photography, Videography and WebDesign. So Publish three Pages. Finally, we have added 8 pages, which are Home, About, Service, Photography Videography WebDesign, Blog, Contact, i.e., mentioned at the beginning of this section http://hysen.me Target front page.

- Adjusting the WordPress menu

If I don't like the About - Blog - Contact sequence in the top left corner of the page, how do I adjust it? Look at the top left corner of the image above, and hover over the site subtitle Photography | Webdesign | City | Hysen Media, then select Menu, go to http://hysen.me The Appearance - Menus admin item of the backend Dashboard, where we can adjust the order and layout of the Pages in question.

In the Menu Name field on the right, enter the name Main Menu and click Create Menu. At this point, the gray unselectable Pages section on the left side of the menu becomes the optional Pages item in the image below.

Click Add to Menu, and add all nine options on the left to the Main Menu. The Menu Structure on the right side will show all 9 Pages items.

As you can see above, when the mouse pointer becomes a crosshair, the Home tab can be dragged left, right, up and down by clicking the left mouse button.

By dragging the Home tab, you can adjust the tab order and parent-child relationship. For example, if we should put three services into Service, drag the Photography and Film tabs one frame to the right, and they will automatically stop and become children.

The hierarchy between menus can have multiple levels, generally two or at most three levels are recommended.

In the tab below where the mouse pointer is located, the small font sub item indicates the menu hierarchy between Film and WebDesign.

In Menu Settings, we check all the options, click the Save Menu button in the bottom right corner to save the settings, and then click the little house icon in the top right corner of the background window to see the actual effect of the menu on the foreground page. The important thing is to see the horizontal and vertical menu.

Then look at the vertical menu hidden by the three dots before the Search icon:

At the bottom of the image above are six red circles linked to social sharing icons, such as facebook, which is currently empty. Also we can actually see three rows of the same nine items in Pages, with a horizontal menu, a vertical menu, and a footer menu, also presented in the adjusted Home - About - Services order.

Now we go back to the backend Appearance - Menu settings, keep only the Desktop Horizontal Menu, click Save Menu to save the settings.

Click Save Menu to save the settings, then click the little house button at the top of the page, go to the foreground to refresh the page, and you can see that only the horizontal menu is left.

An optimization: reference The official apple website page, we don't need a separate Home button, for the reason that it's not concise, as you can see in the macbook Pro pageTo return to Apple's home page, simply move your mouse pointer to hover over the Apple logo and click to return to Apple's home page.

So, we go to the backend Appearance page, under the Remove Home tab,

Click Save Menu in the upper right corner to save the settings, and you will see that the Home option has disappeared from the menu bar in the foreground page,

At this point, even if you click on the Site Title location, it is Photography | Webdesign | City | Hysen Media It will not return to the previous Home page. How do I set it to go back to the Home menu?

To enter the back office, look at the menu on the left,
Settings - Reading - Reading Settings item:

  • Your Homepage Displays Check A static page (select below),
  • HomePage: Home
  • Post Pages: Blog

Then click the Save Changes button to save the settings. Go to the front page, click Site Title, and you will see that you are back to the Home page, exactly as you did before when you clicked the Home menu.

After optimizing the Home menu, I think, this is the ugliest page you've ever seen on a website. It's obviously not a page that should be shown to people.

So, how to make it pretty, the common way is, we change the theme, which is the world famousTopics DiVi.

What is a WordPress theme / Theme ?
A theme is a combination of a website's layout and functionality, in short, a complete website with specific features. WordPress is the difference between a theme and a platform and a specific project.

We go to the backend Dashboard - Appearance - Themes option, and see that the currently active working theme is the Twenty Twenty theme.

If we use the left mouse button to select another theme, Twenty Seventeen, and click on the Active button that appears automatically, we will see that the appearance and position of the menu, including the layout of the site, have changed; what we cannot see is that the functionality of the theme has also changed.

Theme MarketIs the second largest market in WordPress after the plug-in, WordPress official theme comes with although it has been updated, but because of the function is simple, well-known blogs, using WordPress comes with the theme is very rare. Popular foreign themes, TrustPilot comprehensive evaluation of the best at present, is DiVi Theme. This is the theme used by hysen.me.

7. Installation and basic settings of DiVi theme

- Install DiVi Theme

In the Background Appearance - Themes project, click the Add New button in front of the search box to add a new theme file, which is a zip archive with the file name: divi.zip.

The Upload button screen appears, click the Upload Theme button, and select the divi.zip file to upload to WordPress using the Choose file button.

Select the divi.zip file, click the Open button, and complete the upload.

Wait for the upload to complete,

Click the Install Now button to install. When the installation is complete, the following image will indicate that the installation was successful.

Click Return to Themes page to go back to the backend Themes project, you can see DiVi ThemeAlready appears in the list of topics.

Click the Activate button in the DiVi theme to activate the Divi theme. You can see that the Divi theme is now active.

Click on the Visit site link to enter the new Divi theme page. It's a lot fresher.

- Basic settings of DiVi theme

It could be even more beautiful with the Divi theme's own control panel, which includes General and Layout, Updates, and a total of 8 settings items in landscape.

The following is a description of the basic items that are commonly used for setup.

Divi supports logo replacement, you can upload your own website logo. It is recommended that the logo size be at least 600 x 100, otherwise it would be embarrassing if it is too small to be seen.

Let's go to the backend of the site Dashboard - Divi - Theme Options - General - right side UPLOAD button,

Click the UPLOAD button and a two-option window will pop up, select Upload files where the arrow is located, then select Select Files in the window that appears, the folder that pops up contains your finished logo file, select it.

ClickFoldersEnter the Media Library directory with the Open button in the lower right corner of the form, and enter the profile text in the two descriptions on the right, Alt Text and Title,

After clicking Set As Logo, you will be returned to Divi Theme Options, click Save Changes to finish uploading and setting the logo file in the backend of the website.

Click on the small house icon in the top left corner to switch to the front of the site, and you can see the set logo, HMEDIA, in the top left corner, now click on this logo, the function is to return to the Home page.

Go to the backend color palette settings: Divi - Theme Options - General - Color Pickers Default Palette
8 color options.

- Color Pickers Default Palette is your usual color picker

Define the default color directly, you can select it directly in the future, no need to enter the number every time, this is very convenient in the later design, be sure to set.

There are six more commonly used colors: the core ones are the first two
Color 1 #cc2b5e
Color 2 #753a88
Color 3 #565656
Color 4 #282828
Color 5 #A6A6A6
Color 6 #717171

Steps:
1, First select the color you don't want, then at the mouse arrow, enter your usual hexadecimal color code,
2, Click enter, a green check mark will pop up to indicate the change was successful, and you will also seeColor BlockThe color changes from the original color to the input color #717171.

Moving on to the settings item, you can see the information aboutSocial SharingThe part of, For facebook, twitter, instagram, etc., each social share contains two settings, one is whether to show the logo, and the other is to fill in your own social media links.

For domestic customers, these are basically useless and can be turned off. For example, the facebook and twitter settings appear in pairs,

Show Facebook Icon - Facebook Profile Url
Show Twitter Icon - Twitter Profile Url

Finally, click the Save Changes button on the settings page.

Divi Two Save Changes buttons with exactly the same function are placed on the settings page, so that you can set the content directly without turning the page, whether you are at the top or bottom of the settings page. Very user-friendly.

8. DiVi Theme Regular Customization

After doing the basic setup, our website will look like this, and we will start to enterTheme CustomizationThe link is now.

- Theme Customizer

With the release of WordPress Version 3.4 in 2012, the Theme Customizer was introduced.
This handy feature allows WordPress users to preview changes made to their theme in real time, and then save them with a single click. What used to take multiple windows and countless refreshes, can now be done quickly in a single browser window.

As mentioned before, each theme has its own custom framework

The structure of a web page is roughly as follows, and we change parts of it step by step. Let's start here. Hover over the Site Tile in the upper left corner, and a menu of 5 items will appear.

Click Theme Customizer, enter Customizer Option Set interface, you can see a lot of settings, isn't it a bitfeel dizzy, Don't worry, many programs means powerful, this is currently the world's top overall ranking Theme.

This is the core customization area of the DiVi Advanced Theme, both functional and cosmetic, and we'll handle the basic options step-by-step enough for you to build a decent website. It takes time to get to know Divi like the back of your hand.

- Favicon settings

Favicon Yesfavorites iconIt is also known as an abbreviation for website icon(website icon), thepage icon(page icon) or urlicon(URL icon), browsers can display the favicon in the browser's address bar, in front of the site name in the bookmarks list, or in front of the page title in the tabbed browser interface. - SelfWikipedia Favicon entry.

Goal: The current website logo feels a little small, I want to make it bigger. Also, there is no Site icon on the site, I want to add one.

We go to the left side, select General Settings

Also click into Site Identity,

Then select Select icon in Site Identity, our goal is to change the site's favicon, the little ball where the mouse pointer is, just like the "know" and "dou" on the web tags of Zhihu and Douban that follow ".

Click on Select icon, enter the Upload files interface, select the Select Files button, and in the pop-up file selection screen, select your site icon file,

Click the Open button, enter the Media Library window, by default it selects the H site icon.PNG file you just uploaded, directly click Select, enter the crop image page

Click Select directly to enter the crop image page

According to your image, use the box to check the image part, click the cropping button, crop the required image for Site Icon, then jump to the Publish page, click the Publish button, and the site icon will be set successfully. The recommended image size is 512 x 512, if you use a standard image, there is no need to crop it.

Like the "know" and "dou" icons on Zhihu and Douban, the http://hysen.me A dark H icon appears on the front of the site's tabs, which is what the site icon looks like when it is successfully set.

In the image above, you can see the black square image with rounded corners is the thumbnail of the site icon, if you need to remove or change the site icon, you can access the option to change the site icon through Remove or Change images on the left.

Publish will be grayed out when you click Publish Complete.

At this point, the site icon is set

- Header & Navigation

Here we start setting up the Header & Navigation

On the Site Identity settings page, scroll back twice, reach Header & Navigation, and click to enter this settings page.

Pay attention, if you see this in the upper right corner of the picture aboveHamburgerBecause the page width is below a certain width, wordpress will automatically change to this hamburger menu, which can be solved by Chrome's own zoom function. The image below shows the result of chrome scaling 90%.

The 4 sliding zoom bars above where the mouse pointer is located can control four sizes:

  • Menu height,
  • The height of the logo,
  • The height of the menu text such as about,
  • Spacing size of menu letters.
    Drag each of them to see the effect, the 4 numbers after theRecovery arrowYou can restore the current default values, for example, to 66, 54, 14, and 0, respectively.

The four items of FONT STYLE are to change the format of the menu text, where "TT" is to change the case. The color bar below is to change the menu color.

At this point, WordPress and the theme's basic settings are finished, here we enter, from time to time, the visual DiVi editor that will amaze you, using it to create websites. It is one of the few themes in the world that comes with a visual editor. Having accumulated a wealth of features, it is now one of the most popular visual editors in the world.

This is the latest article in the "Build Your Own WordPress Website" series,
The previous article is about using Tencent Cloud Hong Kong server to build a pagoda panel to install WordPress website: 2021 WordPress white novice build a website tutorial nanny version - Tencent pagoda panel build a website

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-built house record - DiVi theme five pages to build the site (on)Zhai 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: 2021 WordPress white novice builder tutorial nanny version - WordPress and the theme of the basic settings

Release Time: October 2, 2021 - 23 : 11 minutes

Update time:October 3, 2021 - 11:52 pm

Updated Versions : Version 0.8

Know the link: The2021 WordPress white novice builder tutorial nanny version - WordPress and theme basic settings

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

2021 WordPress white novice build a website tutorial nanny version - Tencent pagoda panel build a website

Subtitle: This article is available for all WordPress themes.

Previously in WordPress website self-built room fact sheet - index chapterAs mentioned in the website, building a website is similar to building a house in ancient times, just like building a house in the old country. There is no technical content, it is a laborious work. The general steps are, choose an address, buy a plot of land, get a permit, build the foundation, build the frame (the main body of the house), renovate, and finally accept and use.

In this section we are going to address the basics, the key issues involved before renovation. This includes choosing an address, buying a plot of land to laying a foundation, and building a frame (the main body of the house). Finally, a WordPress website is basically set up.

WordPress self-builders, it is easier to buy the land first, and choose the address later. Not only that, if you want to start practicing faster, not to buy an address is the most convenient. This will have time to talk after the completion of the main body of the article, to facilitate the more clear goals of people.

When it comes to buying an address, the terminology is called a domain name. There is a basic concept involved here: IP Address Analysis. The form is to convert an IP address like 123.123.123.123 to http://zhangsan.com This is a meaningful domain name. The IP address 123.123.123.123 is just an example, everyone's IP address is different for each cloud server, for example, if you are 123, I may be 111.111.111.111. This is automatically assigned when you buy the land, you cannot choose your own.

This section of the self-build process refers to a bit of a coordinated approach: first buy the land, and then when the foundation is laid, buy the address (domain name), so that you can do two things at the same time, saving a lot of time, and do not interfere with each other.

Here are four steps to complete the installation of WordPress

  • Step 1: Buy Land / Cloud Server
  • Step 2: Select address / Domain Name
  • Step 3: Foundation / Installation of LNMP
  • Step 4: Build the body of the house / Install WordPress

Step 1: Buy a plot of land

Wherever you build a house, you have to have land, which is the land on which the house is built in real estate. Servers(VPS / Cloud Hosting / Cloud Server) is like a plot of land with a basic utility network, commonlyAli, TencentorHuawei, here we useTencent Hong Kong Lightweight Server.

The reason is, this is the current big factory, for the current installation requirements, comprehensive performance, price, service support strength, it is a comprehensive evaluation of the first server. Not only is it free from filing, it is also quite fast and cheap in Hong Kong servers. In order to save time, I wrote this text, at the same time opened a number of servers of several major manufacturers together with the installation test, this is the highest personal overall rating of the server.
The downside is that such quality servers, early on, are generally discontinued or line deterioration, resulting in slow speeds, cards. A lesson learned in recent years, is that the AliCloud International (non-domestic) 30M Hong Kong Lightweight server, now shrunk 10 times to 3M, the price has not changed.
Domestic Ali cloud Hong Kong or Singapore light server, the current speed are not as good as Tencent cloud, if you must choose Ali's record-free server, you can considerAliCloud Lightweight Application Server - Singapore. The speed is still relatively stable, and also has the official Pagoda Panel BT-7.5.1 mirror, I have been watching with Gping on for a long time, basically in the 60ms or less, the speed is okay, not much fluctuation.

How to buy a plot of land

Tap it.Tencent Cloud Server Global PurchasePage,

1. choose Lightweight Application Server

Click on the location of the cursor to confirm the package, and you will be taken to the registration page.

The number of real Tencent Hong Kong servers is not much, now the special price of 144 1-Core 1G (Liunx) servers are often sold out. The temporary alternative is a $204 1-Core 2G (Liunx) server.
In the future, if there is a shortage of stock, large manufacturers can considerAliCloud Singapore $288 2 core 1G package.

2. Register and log in to Tencent Cloud through WeChat, QQ, email or public number

Tencent Cloud has the most options for registration, from WeChat, qq, to email, settings and small public programs. General users are recommended to use WeChat.

According to the official documentation, you can choose any one of these methods to register, and then you can bind the other three in your account information as your login method.

When registration is completed, you will be returned to the Lightweight Server package selection screen, so you can confirm the package again by referring to point 1 above. The result is based on the completion of code scanning.

3. Go to the console, and find the Lightweight Server Administration page

3.1 Tencent Cloud Home, Click on the console in the upper right corner, and log in via your account.

3.2 InProduct overview page, Click on Cloud Products, and select Lightweight Application Server from the drop-down menu.

3.3 Introduction to the Lightweight Server Management portal page

When you enter the server management page, you can see the big menu on the left, and the server information on the right. There are two servers here, Tencent BT 7.6 and Hysen.

The name Tencent_BT_7.6 on the left is custom, and the server it is on is the official Tencent Pagoda Panel image installed. One of the advantages of using the official mirror is that you can call or open a work order to ask questions about the mirror itself. If you are using theCommand LineIf you install it yourself, there is no such service.

The location of the cursor is generallyMirror name, the pagoda panel is officially used here http://BT.cn Domain name as logo image. CPU1 core in the middle - memory 1GB - system disk 25GB, which is described asServer Configuration. The bottom rightmost corner isIP address of the server, here I have PS 8.8.8.8, easy to remember. Tencent Hong Kong is recently seen in the 43.xx.xx.xx address segment, the following 8.8.8.8.8 ip address, replace it with your own ip address. The top right corner of theBlue Letter, one for remote login to the server, and "more" with options for shutdown and upgrade packages.

With an IP address, the domain name can be resolved to an IP, allowing others to access the domain via an IP address such as zhangsan.com, http://lisi.net domain name to access our lightweight servers.

4. Get the login password of Pagoda Panel in the application management interface.

Pagoda Panel, is a simple and easy to use Linux/Windows server operation and management panel, The benefit of the panel is that the server maintenance work can be done through an interactive interface, such as updating the system, adding websites, modifying settings, etc. Previously, you need to remember various commands, but now you can do it through the panel with the click of a button, saving time and effort.
In addition, to use the Pagoda panel properly, you need to register with your cell phone number. So, in http://bt.cn First register your Pta account, then login to the Pta interface, you will be prompted to bind your Pta account.

By clicking the cursor position in the above picture, you can enter the server's administration page, and click the application management at the top. In the software information module of the application, you can see ""Panel Home Address"" http://8.8.8.8:面板端口/tencentcloud The "Username and Password" section tells you how to get the password for the administrator account in the Pagoda admin panel.

Look at the cursor position, click copy first, then click on the blue login, a black box will pop up below, this is the command line window of ssh, paste the previously copied

sudo /etc/init.d/bt default Command,

Then enter, you will get the login address, login and password of Pagoda Admin Panel.

The address of the outside board of Pagoda Management is http://8.8.8.8:8888/tencentcloud Account: username: urz9g98m Password password: 09b2444ad828

This step must be copied and saved, and will be used later.

5. SettingsFirewall

The explanation of the Chinese meaning of firewall is "a thick and high wall between two houses or between two parts of a house that prevents the spread of fire" creates an isolation between devices.The firewall is to shield the host from the invasion of some useless viruses and malware on the Internet when it is connected.

The firewall we are using here is simple, it opens and closes ports. By default, all cloud vendors only open a limited number of ports, so in the future, if you have problems connecting or accessing, first check if the corresponding port is open.

At the back of the application management interface, click Firewall to enter the firewall settings interface.

Click on the Add rule where the cursor is located, and open the port strictly according to the above diagram. See the diagram below for details.

Add the port as shown in the above image, and click the OK button.

6. Login to Pagoda Management System

By browser, input http://8.8.8.8:8888/tencentcloud, enter the password you just copied and pasted, and log in to the Pagoda panel.

When you see the prompt : "Associated with Tencent Cloud API key", just close it, it is used to read server information and upgrade some operations, which overlap with Tencent's official functions.

The third step, the foundation

7. one click to install LNMP, which is the foundation.

After closing the window of "Associate Tencent Cloud API Key", you will see the second window behind, which is the convenient one-click installation of LNMP from the Pagoda panel.

Select the options strictly according to the diagram, click Install with one click, and wait for about 20 minutes, and the installation will be finished. When you select Mysql 5.7, you will get an error "Your memory is less than 2GB, it is not recommended to install MYSQL-5.7", ignore it.

We are just building a WordPress site, which does not use much memory. It is not recommended to close the current installation window here, just open another window for whatever you need to do.

Now while LNMP is laying the foundation for this time, let's go buy a domain name.

Step 2, select the address (right, this is the order)

To buy a house, the location is always the first consideration. A good location, a lot of people. On the Internet, this is reflected in high traffic. Corresponding to building a house online, is your domain name, to be short and concise and easy to remember.

I always recommend that you prefer .com domains, .cn if you can't, and nothing else. Even if you have less money, don't buy weird domain names, such as .top, you know, for a long time, Baidu isDiscrimination .top domain name, slow, or simply a few months can not be included. Other people Baidu can not find you, your site is a dead site, only self-indulgence, can not be a lot of fun.

In addition, the main difference between domestic and foreign domain purchases is the need for real names in China, and other differences are the differences in payment tools, mainly paypal or international credit cards in foreign countries.

In terms of privacy protection, foreign countries are doing better. But in the long run, you must buy a domain name in the country, because many of Ali Tencent's services are dependent on you buying a domain name from it, which can be automated, and can also provide deeper services.

Since the use ofTencent's Cloud Server, naturally choose Tencent's domain name to buy.

a. Purchase of domain name

EnterTencent Cloud Console, Select Domain Registration under "Domains & Websites" in Cloud Products. Enter the domain name purchase screen.

Click Shop Now where the cursor is located to enter the domain name purchase screen, enter zijianfangshilu.com, click Search, and check if the domain name is available.

Since the . me domain name is no longer available in China, so it cannot be used http://hysen.me domain name registration as an example. Here we use http://zijianfangshilu.com (Self-built video) Describe the process of buying a domain name.

Then add it to your shopping cart, click Buy Now on the right side, and go to the order details page. Here is the most important step of real name verification.

b. Domain Name Real Names

In the picture above, it prompts "No domain information template available, please create a new information template first" Click on New Information Template in blue,

Check the box "Use account information to fill in", so that you can fill in the content less repeatedly. Fill in the picture and submit. ID number is forZhang SanfengSpecially edited.

After you scan the QR code and pay, you can see your domain name in the domain registration. Here you can use http://hysen.me Perform domain name resolution

c. Domain name resolution to IP address

In my list of domains, select http://hysen.me This domain name,

Click on the blue word "Resolve" on the back to enter the address resolution page.

Click Add Record, as shown above, to add two A records for search engine optimization (SEO), the host records are www and @, both with the IP address 8.8.8.8. Equivalent to the domain name www.hysen.me and hysen.me will both point to the IP address 8.8.8.8.

At this point, the domain name resolution is complete.

Let's move on to #7. One-Click Installation of LNMP. Log in to the Pagoda Management System, and start installing WordPress through the Pagoda system.

Step 4, build the body / frame of the house

8. Install WordPress through the Pagoda Panel

8.1 Verify the installation of the five items.

First check if the five items in the one-click installation are successful. Check that all five items from Nginx 1.20.1 to PhpMyAdmin 5.0, starting with the cursor, are installed successfully.

If there is something missing, it is recommended to associate the Tencent API after reinstalling the system, refer to the two additions at the end of the article,

  1. How to reinstall the system of Tencent Lightweight Server.
  2. How to use Tencent's API Key

8.2 Installing WordPress via "One Click Deployment" in the software store

Select the software store on the left side, click on One-Click Deployment in the Applications category on the right side, and then find WordPress 5.6 (the latest version of 5.8 is actually installed),

In the bottom right corner of the page, you will find a button for one-click deployment, click to start installing the WordPress body, and finally start building the main body of the house.

Enter the domain name hysen.me, record the database hysen_me and the password, which will be used when installing WordPress. Finally, click the "Submit" button in the bottom right corner.

WordPress starts downloading and installing. At the end it says "WordPress has been successfully deployed". Record the pop-up box ofDatabaseName, user and password. This will be used later in the WordPress installation. Copy the address of the site mentioned in "Visit site": http://hysen.me/index.php

8.3 WordPress installation setup

Enter your domain name in the address bar of your browser as shown above, and I will enter http://hysen.me/index.php, and finally the beautiful WordPress page settings page.

Select Simplified Chinese, and continue.

Now for the pre-start page message, click Start Now.

Enter three pieces of database information, database name, User Name, Password. Click Submit.

For security reasons and for future site clustering, the table prefixes above wp_ Suggested change to Website abbreviation + wp_in the form of, for example hs_wp_.

If the database information is correct, you will enter the above page, click Install Now. Go to the WordPress site basic information filling page

Refer to the fill in, click Install WordPress.

Option: Visibility to search engines, if checked, then search engines will not pick it up. This can be changed later, in WordPress - Settings - General
If your password is too short, remember to check the "Confirm weak password" box.

8.4 WordPress installed successfully.

When the installation is successful, click Login and enter the WordPress settings.

You can switch between the frontend and backend of WordPress by the location of the cursor in the upper left corner.

At this point, if you see this page, the installation has been successful. Congratulations.

Next, we will do further settings for WordPress, and also do the basic settings of the theme, see the next article
2021 WordPress white novice builder tutorial nanny version - WordPress and theme basic settings .

The introduction to this article is at WordPress website self-built room fact sheet - index chapter

Additional content:

1. How to reinstall the system of Tencent Lightweight Server

Just like a computer, LNMP will need to be reinstalled at some point. Initially you will have a lot of chances to reinstall the whole system.

There are two entry points to reinstall the system, called "Reset Application",

  • An entry is made in the Application Manager, after the application information, in blue for Reset Application.
  • Another reference to this section 3.3 Introduction to the Lightweight Server Administration Portal, goes to the Lightweight Server "Overview" page,

Look at the cursor position, select Reset Application, enter the system reinstallation interface

Select the application image from the Pagoda Linux panel, click OK to start the system reinstallation, and within a minute, a new clean BT7.6 image is installed.

You can then refer to, 4. Get the login password for the pagoda panel in the application management interface. to perform the relevant operations.

2. How to use Tencent's API Key

Sometimes, the installation doesn't work, like when you install LNMP with one click and find that MySql, or Nginx is missing. Then we need to use Tencent's API.

Setting up the Tencent API

EnterTencent Cloud Console, scroll down to the bottom of the cloud product, and select " Manage & Audit" in the Access Management “.

Select Access Keys - API Key Management in the left menu, and on the pop-up page, select Continue to use to enter the API generation page.

Click on New Key to generate a new key. The key can be enabled, or disabled by clicking on Disable later.

The pagoda panel uses Tencent Cloud Key, the last mentioned location is 7. Install LNMP with one click.

Login to the Pagoda panel, click on Associate Tencent Cloud API Key where the cursor is located, and then enter the Secret ID and Secret Key in the pop-up window. Finally, click on the button Associate API Key.

Once set up, you can see some information about the host, such as expiration date, server region. The key information is that, here, you can directly pay to upgrade your package or renew your subscription through the row of buttons below. The fact that this feature can be implemented means that this version of Tencent Cloud's Pagoda Panel is exceptionally stable, and any system that is related to money collection is the best.

At this point, the Tencent Cloud API key is associated with the Pagoda panel. After this is done, it will be more stable to do LNMP one-click installation.

3. how to manually build the foundation / install LNMP

LNMP is Linux, Nginx, Mysql

Sometimes, the installation doesn't work, like when you install LNMP with one click and find that MySql, or Nginx is missing. Then we need to use Tencent's API.

Setting up the Tencent API

EnterTencent Cloud Console, scroll down to the bottom of the cloud product, and select " Manage & Audit" in the Access Management “.

WordPress self-build house series article list:

Zhai Haisheng: Wordpress website self-built room fact sheet - index chapter2021 WordPress white novice build a website tutorial nanny version - Tencent pagoda panel build a website2021 WordPress white novice builder tutorial nanny version - WordPress and theme basic settingsWordPress self-built house record - DiVi theme five pages to build the site (on)Zhai 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: 2021 WordPress white novice builder tutorial nanny version - WordPress and the theme of the basic settings

Release Time: September 19, 2021 - 22 : 20 minutes

Update time:November 24, 2021 - 21:55 minutes

Updated Versions : Version 0.91

Know the link: The2021 WordPress white novice build a website tutorial nanny version - Tencent pagoda panel build a website

Non-commercialPlease feel free to reproduce this article in its entirety. For commercial use, please contact the author for authorization.

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

Limited Time Discount