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.

赞(0) Reward
Reproduction without permission is prohibited.WordPress SelfStudy " WordPress self-built house record - DiVi theme five pages to build the site (in)
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