Step by step instructions to Make a Convincing About Page for Your Portfolio Site with Divi

Posted on December 30, 2016 by Nathan B. Weller in Divi Assets 7 Remarks
Step by step instructions to Make a Convincing About Page for Your Portfolio Site with Divi
Blog/Divi Assets/How to Make a Convincing About Page for Your Portfolio Site with Divi

Welcome to post 4 of 5 in our miniseries How to Make a Straightforward and Successful Portfolio Site with Divi. In this series we'll cover all that you want to do to make your own portfolio site without any preparation. We'll likewise go over how to utilize our A/B testing framework Divi Prompts ensure your site is compelling at drawing in new clients.

In the present post we will polish off our negligible portfolio site with a straightforward and (ideally) powerful about/contact page. As a sanity check we will make two marginally various forms and test them against one another in the upcoming post.

However, we better not lose track of what's most important. How about we get breaking on this plan!
The present Last Product(s): Two About/Contact Page Plan Variations

To me a page needn't bother with to be perplexing, challenging to construct, or garish to be successful. Truth be told, as a rule, those things will probably neutralize you. That is the reason for our joint about/contact page I needed to keep the plan very basic and in-accordance with our negligible tasteful.

We have a snippet about the craftsman and a contact structure for booking requests. Also, that is all there is to it. The main contrast between the two variations is the arrangement of those two components. In the principal variation you should look down to finish up the contact structure and submit it. In the second one everything is "toward the top" and available when you hit the page.
about-page-last v-1

About/Contact Page Plan Variation 1
about-page-last v-2

About/Contact Page Plan Variation 2

In the segments underneath I'll walk you through how I made every one (and the unpretentious contrasts between them).
Instructions to Make a Convincing About Page for Your Portfolio Site with Divi

Buy into Our Youtube Channel
About/Contact Page Plan 1

To make the main plan variation of our about/contact page, explore to the page you made for it in our most memorable instructional exercise. In the event that you have the worldwide footer we made currently set up, it will seem to be this.

plan v-1-1

Empower the visual developer and add another standard segment with one line and one section.

plan v-1-2

Open up your blue segment settings and pick a foundation picture. Mine is 1920px wide by 1300px high.

plan v-1-3

Whenever you've saved that, click the dark add module button in your column. Add a text module, set the text tone to light, and put your name in the substance region. Then add a divider module underneath it. Set the variety to white, the perceivability to "show divider", and the level to 2.

plan v-1-4

Presently add another line, yet this time with two sections. Add a text module and put the main piece of your about text there. Add a last text module in the second segment on the right and finish your about text there.

plan v-1-5

Presently add another line with a solitary section and add the contact structure module to it. Presently your plan components are all on the page. Now is the right time to revisit and start styling things.

plan v-1-6
Name Text Module Settings

plan v-1-7

Open up the plan settings for the text module your name is in and make the accompanying changes.

General Settings:

    Text Tone: Light
    Text Direction: Left

Plan Settings:

    Text Textual style: Roboto Light; All Covers (TT).
    Text dimension: 34

Custom CSS:

Under fundamental component past the accompanying line of css.
01

text style weight: 400;

Save and exit.
Remaining Line Settings

In the center line containing your "about text" open up the column settings and set the top custom cushioning worth to 20px. Set all of the other custom cushioning values to 0px. Save and close.

In the line settings for the base column, set all custom cushioning values to 0px. Save and close.
Contact Structure Module Settings

plan v-1-8

Under the overall tab add two new things; both information fields. Mark the first "Undertaking" and the subsequent one "Spending plan". You can decide to make them required fields or not relying upon your inclination however to match this plan you should set the Do Fullwidth change to "No".

plan v-1-9-3

Additionally in the overall tab, turn the Showcase Manual human test choice to "No". Furthermore, fill in the excess fields as per your inclination. I enjoyed the stating "Booking Requests" for the title however you can pick anything you desire.

Continuing on toward the Plan tab, roll out the accompanying improvements:

    Title Textual style: Roboto Light; All Covers (TT).
    Text dimension: 34
    Button Text Size: 16
    Button Boundary Span: 1px
    Button Textual style: Open Sans; Intense (B).
    Button Symbol: Camera

At last, in the custom css tab, glue the accompanying css in the "Contact Title" box:
01
02
03
04

text style weight: 400 !significant;
cushioning base: 30px;
edge base: 60px;
line base: strong 1px #ffffff;

Save all that and leave the visual developer. Your eventual outcome will seem to be this.
about-page-last v-1

Your Final product: About/Contact Page Plan Variation 1
About/Contact Page Plan 2

Since our plan components have previously been all made, we're pretty much about to re-organize things for this plan variation. The initial step is to empower the visual supervisor and copy the principal plan we recently made. The copy will show up beneath it. Whenever that has occurred, impair our most memorable plan by right-tapping on the segment settings and handicapping it on all gadgets.

plan v-2-1

Look to the lower part of the current plan and make another line with two sections.

plan v-2-2

Drag the contact structure module into the right hand section. Then, at that point, drag the name text module, white divider, and left-hand side text module into the left section of the new line.

plan v-2-3

Then, erase the best two lines and open up the contact structure module settings. In the css tab glue this changed code in the "Contact Title" box.
01
02
03
04

textual style weight: 400 !significant;
cushioning base: 23px;
edge base: 40px;
line base: strong 1px #ffffff;

Save and leave the module settings. The last step is to add another base line with a solitary section. Add an imperceptible divider module with 350px of level. Save all that and leave the visual manufacturer. Your end-product ought to seem to be the picture underneath.
about-page-last v-2

Your Outcome: About/Contact Page Plan Variation 2
Tomorrow: Testing Your Portfolio's Viability with Divi's A/B Testing Framework Divi Leads

In the upcoming post I'll tell you the best way to direct a progression of A/B tests that will work on your portfolio's exhibition by showing you decisively what works and what doesn't. Regardless of whether you haven't tracked with this miniseries up until this point, the upcoming post will tell you the best way to ponder and set up A/B tests for anything that site you're as of now dealing with.

Make certain to buy into our email pamphlet and YouTube feed with the goal that you never miss a major declaration, helpful hint, or Divi gift!