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

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.

赞(0) Reward
Reproduction without permission is prohibited.WordPress SelfStudy " 2021 WordPress white novice builder tutorial nanny version - WordPress and the theme of the basic settings
Share to. More (0)

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

Limited Time Discount

Feel the article useful to reward the article author

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

Alipay sweep to reward

WeChat sweep a reward