Utilizing Channels, Legend Segments, and CTA's to Grow a Negligible Portfolio Landing page

Posted on December 28, 2016 by Nathan B. Weller in Divi Assets 3 Remarks
Utilizing Channels, Legend Segments, and CTA's to Grow an Insignificant Portfolio Landing page
Blog/Divi Assets/Utilizing Channels, Legend Segments, and CTA's to Grow an Insignificant Portfolio Landing page

Welcome to post 2 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 powerful at drawing in new clients.

In the present post I will tell you the best way to add a few substitute styles to the negligible portfolio landing page we worked in the previous blog entry. I want to give a couple of straightforward increments and choices that we can test later utilizing Divi's A/B testing framework Divi Leads.

How about we make a plunge!
The present Beginning stage: A Negligible Portfolio Landing page
negligible portfolio-landing page

A Negligible Portfolio Landing page

In the previous post I told you the best way to make the negligible portfolio landing page above. We're involving that as our leaping off point for the present plan varieties underneath. On the off chance that you might want to track and haven't done the main instructional exercise in this series yet, follow this connection and try it out so you can return here and evaluate these great augmentations.
Utilizing Channels, Legend Segments, and CTA's to Extend an Insignificant Portfolio Landing page

Buy into Our Youtube Channel
Portfolio Landing page Variation #1: Adding a Negligible Source of inspiration
negligible cta-last

Adding a Negligible Source of inspiration over the Footer

With regards to our negligible stylish I thought adding a highly contrasting source of inspiration at the base over the footer may be a smart idea. Or on the other hand, in any event, something to test and check whether it expands the quantity of individuals who reach out through the contact page.

To make it this is your specialty:

insignificant cta-1

Make a standard segment with a solitary line and two sections (2/3 and 1/3). In the 2/3 section on the left make two text modules, one on top of the other.

insignificant cta-2

In the top text module I've put the words, "Might you want to work with me?" And in the second text module I've put a line of test text.

negligible cta-3

In the 1/3 segment on the perfect locations a solitary button module. For the button text I've stated, "We should Talk!" However you can compose anything feels fitting for you.

insignificant cta-4

Now that our substance is all set up, we should style it to accommodate our plan.
Segment Settings

negligible cta-5

Open up the part settings for the source of inspiration area. Go to the css tab and glue the accompanying under Primary Component:
01
02

line top: strong 2px #626262;
line base: strong 2px #626262;

This will bring about a top and base boundary like the picture above.
Text Module Settings

insignificant cta-6

The main text module that needs settings changed is the heading, "Might you want to work with me?"

Open up the module settings and do the accompanying under the plan tab:

    Text Textual style: Open Sans; All Covers (TT); Strong (B)
    Text dimension: 16
    Custom Edge: 0px Base
    Custom Cushioning: 10px Base

Save your changes. It ought to now seem to be the picture above.
Button Module Settings

insignificant cta-7

Open up the button module settings and do the accompanying under each particular tab.

General Settings:

    Set your button URL to your about/contact page.

Plan Settings:

    Flip the switch for "Utilize Custom Styles for Button".
    Button Text Size: 16
    Button Text Tone: #666666
    Button Line Tone: #666666
    Button Boundary Sweep: 0
    Button Textual style: Open Sans; Striking (B)
    Button Symbol: Camera
    Button Symbol Tone: #666666
    Button Drift Text Tone: #666666
    Button Drift Foundation Tone: rgba(255,255,255,0)
    Button Float Boundary Tone: #666666
    Button Float Boundary Range: 0

Custom CSS:

Glue the accompanying under Primary Component.
01

edge top: 10%;

Save changes. Your button ought to now seem to be the picture above.
The End-product: An Insignificant Source of inspiration

negligible cta-last closeup

Now that your progressions are all settled on the new decision to activity ought to seem to be the picture above. In the segments beneath we'll keep on working off of this underlying variation to make a couple all the more full page plans.
Portfolio Landing page Variation #2: Adding Channels to the Portfolio
filterable-portfolio-last

Trading the Standard Portfolio Module for the Filterable Portfolio Module

For our subsequent variation we will trade out our standard portfolio module for the filterable portfolio module to make perusing by class simpler. Be that as it may, we would rather not erase or get rid of all our diligent effort up until this point. So the initial step here will be crippling the standard portfolio module.

filterable-portfolio-1

To do that basically empower the visual manufacturer and right snap on the blue area controls in the upper left-hand corner. Click "handicap" and select all gadgets. You'll see that the part turns out to be marginally straightforward/dull. This shows it is debilitated and will vanish from view when you leave the visual manufacturer.

filterable-portfolio-2

Presently look down to the lower part of the segment and utilize the blue button to add another segment. Select the single section format and add the Filterable Portfolio Module.
Filterable Portfolio Module Settings

filterable-portfolio-3

Design the accompanying settings for every tab of the filterable portfolio module.

General Settings:

    Design: Framework
    Posts Number: 16
    Show Classifications: No

Plan Settings:

    Drift Symbol: Camera
    Zoom Symbol Tone: #ffffff
    Float Overlay Tone: rgba(0,0,0,0.76)
    Title Text Tone: #666666
    Channel Text style: Open Sans; Strong (B)
    Channel Text Tone: #666666

Line Settings

filterable-portfolio-4

Presently we really want to change the line settings to make the filterable portfolio fullwidth. To do this open up the column settings and arrange the accompanying settings.

General Settings:

    Make This Line Fullwidth: Yes
    Utilize Custom Drain Width: Yes
    Drain Width: 2

Save changes.
Eventual outcome: A Filterable Portfolio

filterable-portfolio-last closeup

After you save and leave the visual manufacturer your new filterable portfolio ought to seem to be the picture above. This refreshed plan promotions a touch of clean blank area to the general plan and makes perusing your work by class a lot simpler.
Portfolio Landing page Variation #3: Adding a Legend Segment
legend area last

Adding a Legend Segment to Lift Client Solicitations

Similarly as with our last variation, this one will work off of the others to make a last full page design that contains each of the variations in one. To put the last touch on this new full page design we really want to add a legend segment. This is your specialty.

legend segment 1

To get everything rolling add another part with two sections and drag it to the highest point of your page.
Segment Settings

legend segment 2

Transfer a foundation picture that is 1920px wide by 875px high and snap the green save button.
Divider Module Settings

legend area 3

In the left-hand section embed a divider module and set the level to 400. Click the green save button.
Text Module Settings

legend area 4

In the right-hand segment embed a text module and do the accompanying.

General Settings:

    Text Tone: Light
    Text Direction: Center
    Content: "Hey, I'm Kim. How about we catch something uniquely amazing." (Or anything seems OK for your site)

Plan Settings:

    Text style: Roboto; All Covers (TT)
    Text dimension: 34
    Text Line Level: 1.8em
    Custom Cushioning: 15% Top

Custom CSS:

In the custom css tab, under Primary Component, glue the accompanying line of code.
01

textual style weight: 400;
Button Module Settings

legend area 5

Embed a button module underneath the text module you recently made and design it as per the settings beneath.

General Settings:

    Button URL: Set to your about/contact page.
    Button Text: "Let me know More!" (Or anything appears to be legit for your site.)
    Button Arrangement: Center

Plan Settings:

    Utilize Custom Styles for Button: Yes
    Button Text Size: 22
    Button Text Tone: rgba(0,0,0,0.7)
    Button Foundation Tone: rgba(255,255,255,0.75)
    Button Boundary Tone: rgba(255,255,255,0.24)
    Button Line Range: 0
    Button Text style: Roboto; Intense (B)
    Button Symbol: Camera
    Button Symbol Tone: #ffffff
    Button Drift Text Tone: rgba(255,255,255,0.85)
    Button Float Foundation Tone: rgba(0,0,0,0)
    Button Drift Boundary Tone: rgba(255,255,255,0.85)
    Button Drift Boundary Sweep: 0

Custom CSS:

In the custom css tab, under Fundamental Component, glue the accompanying line of code.
01

edge top: 10px;

Save changes.
End-product: A Customized Legend Segment

legend segment last closeup

Whenever you've saved all changes and left the visual developer your new legend area will seem to be this. What's more, the whole page will currently seem to be the picture at the highest point of this variation segment: beginning with a legend picture, then a filterable portfolio, lastly an insignificant source of inspiration.

Later in the series I'll tell you the best way to test these plan components so you can reach an authoritative resolution on what turns out best for yourself as well as your guests.
Tomorrow: How to Make Delightful Venture Pages with the Divi Manufacturer

In the upcoming post I'll be sharing plan tips and standards to apply to your portfolio project pages-as well as offering a couple of free formats to help you on your way! Try not to miss it!

Make certain to buy into our email pamphlet and YouTube feed so you never miss a major declaration, valuable tip, or Divi gift!