Case research will also be a particularly precious advertising and marketing device. Shoppers love a excellent case learn about as a result of they love a excellent tale. And it does appear that the corporations/manufacturers that inform the most productive tales are the most productive entrepreneurs, particularly if their tales are sponsored with high quality services and products. You probably have numerous nice case research that you need to proportion with the sector to your web page, it is helping to place some idea into how you need to prepare them to your guests.

On this use case educational, I’m going to turn you tips on how to create a filterable portfolio with in-post navigation to prepare your case research. To do that, I’m going to be the use of Divi’s Filterable Portfolio Module to design a portfolio grid that fits the design of the structure, and I’ll be the use of the Publish Navigation Module to offer subsequent and former hyperlinks to make it more straightforward for customers to flick thru case research of the similar class.

Sneak Peek

Here’s a preview of the portfolio web page and put up navigation I can be growing.

case studies sneak peek

What You Want for This Instructional

For this use case educational, you’re going to be the use of the next:

  1. Divi Theme
  2. Divi Legislation Company Format Pack (incorporated with Divi)
  3. Divi Filterable Portfolio Module (incorporated with Divi)
  4. Divi Publish Navigation Module (incorporated with Divi)

Growing Mission Classes for Your Case Research

Along with the standard weblog put up kind, Divi has an extra venture put up kind that lets you arrange tasks like you may for standard weblog posts. Since I can want my tasks/case research to be arranged by way of class, it is helping so as to add the venture classes sooner than we begin including new case research as venture posts.

So as to add a brand new venture class, move on your WordPress dashboard and navigate to Initiatives > Classes. Then input the identify and slug to your new class and click on the Upload New Class button.

case studies categories

It is important to do that for every class it would be best to use.

Here’s a record of the types I’m the use of for this explicit Legislation Company use case.

  • Antitrust
  • Development Litigation
  • Copyright Legislation
  • Environmental Legislation
  • Actual Property Litigation

Including Case Research as New Initiatives

Along with your venture classes in position, you’ll be able to get started growing case research as new tasks. Because the Legislation Company Format pack already has a Case Find out about web page structure, we will use that structure for our venture posts.

Growing your Case Find out about Mission Format

To create your Case Find out about venture structure, navigate to Initiatives > Upload New.
At the Upload New Mission web page, input a identify for the case learn about and assign your Mission Class. You may additionally wish to upload a featured symbol to your put up to be displayed at the portfolio grid, however for this educational, I can be pulling from the put up to routinely generate a thumbnail (extra in this later).

Then deploy the Visible Builder.

case studies new project

Now you’re ready to import your Legislation Company Case Find out about web page structure. Open the settings menu on the backside of the web page. Click on the Load from Library button and make a choice to make use of the Legislation Company Case Find out about Web page Format from below the Premade Layouts tab.

case studies import layout

As soon as the web page has been imported, move forward and replace the Identify of the Web page with the Identify of the particular Case Find out about.

case studies update title

Including Publish Navigation to Your Case Find out about Pages

For those who aren’t aware of the put up navigation module, it principally provides subsequent and former hyperlinks on your posts. This may occasionally let you click on to subsequent and former case research with no need to return to the principle case learn about portfolio web page. Plus, the put up navigation module means that you can hyperlink to different posts in the similar class as a substitute of all posts generally. So, if the person selects to view a case in a selected class, they are able to move from side to side to view different circumstances related to their pastime. That is frequently finished on blogs, however too can paintings smartly for Legislation Company case research.

So as to add put up navigation on your venture put up, upload a brand new one-column row below the textual content module that holds the identify after which upload a put up navigation module to the row.

case studies add post navigation

NOTE: We’re including the Publish Navigation Module to the this put up structure sooner than we now have different venture posts. This implies you gained’t have every other venture posts to hyperlink to. However since we’re going to be the use of this structure for the remainder of our case research, I sought after to incorporate the put up navigation now in order that we wouldn’t have so as to add it to every one later.

Putting in place the Publish Navigation Capability

Below the content material tab of the put up navigation settings, you’ve the choice of including customized textual content to your earlier and subsequent hyperlinks (like “subsequent” and “earlier”). By means of default, the module will display the put up identify because the hyperlink textual content except you convert it. To make it extra transparent to customers that they’re viewing case research in the similar class, I’m going so as to add the next customized hyperlink textual content for this put up (since it’s within the Development Litigation class):

Earlier Hyperlink Textual content: “Earlier Development Case”
Subsequent Hyperlink Textual content: “Subsequent Development Case”

Then make a choice to stay the navigation in the similar class.

case studies post navigation content

Styling Your Publish Navigation Module

Below the design tab, taste your put up navigation module with the next:

Hyperlinks Font Taste: TT
Hyperlinks Textual content Colour: #ffba60
Hyperlinks Letter Spacing: 2px

Customized Padding: 10px Best, 10px Proper, 10px Backside, 10px Left
Border Width: 1px
Border Colour: #ffba60

Save Settings.

case studies post navigation design

To provide your hyperlinks slightly more space to respire, move to the row settings and make a choice to make the row fullwidth.

case studies fullwidth row

Save Format to Divi Library

Now that you’re completed with the case learn about structure you’re going to use for the remainder of your venture posts, reserve it on your Divi library. Open the settings menu on the backside of the visible builder, then click on the Save to Library icon. Within the Upload to Library field that pops up, input a reputation for the structure and click on Save to Library.

case studies save to library

Create the Remainder of the Case Find out about Posts with the New Format

Now that you’ve the structure stored on your library, you’ll be able to proceed so as to add new venture posts the use of this structure. Simply just remember to replace your put up navigation module hyperlink textual content to mirror the class of the put up you create. As an example, when you create a brand new put up with the class “Copyright Legislation”, your put up navigation textual content hyperlinks must say “Earlier Copyright Case” and “Subsequent Copyright Case”.

After you have sufficient posts in a class to hyperlink to, that is what your new case learn about put up will appear to be:

case studies final post navigation

Neatly that’s about it for the venture posts.

Atmosphere Your Publish Thumbnails to tug the First Symbol in Your Posts

As discussed previous, I didn’t set a featured symbol when growing the venture posts. As a substitute, I’m going to make use of the primary symbol in the real put up to be routinely used because the put up thumbnail. To do that, move to Divi > Theme Choices and permit the way to “Grasp the primary put up symbol”.

case studies grab first image

Growing Your Filterable Portfolio Web page

At this level you will have sufficient classes and posts to create your filterable portfolio web page to show your case research.

Create a brand new web page, give it a identify and open the visible builder. Then load the Legislation Company Services and products Web page Format.

case studies add service layout

As soon as the structure is loaded, replace the Identify to “Our Case Research”. In the second one segment (below the header), alternate the row to a one-column construction and delete the entire current modules within the row. After that, upload your filterable portfolio module.

case studies add filterable portfolio

Replace the filterable portfolio module settings as follows:

Make a selection all of the Classes to be incorporated within the portfolio.

Format: Grid
Zoom Icon Colour: #ffba60
Hover Overlay Colour: rgba(84,95,102,0.92)

Then upload a Left Border with the next:

Symbol left Border width: 2vw
Symbol Left Border Colour: #ffba60

case studies left border

Then customise the identify and meta textual content.

Identify Font Weight: Semi Daring
Identify Textual content Colour: #545f66
Identify Letter Spacing: 1px
Identify Line Top: 1.5em

case studies title text design

Replace the Filter out Standards textual content.

Filter out Standards Weight: Semi Daring
Filter out Standards Textual content Dimension: 16px
Filter out Standards Textual content Colour: #545f66

case studies filter criteria design

Finally, alternate the meta textual content and pagination textual content colour to #ff9000.

Deleting Sections You Don’t Want

Now all it’s a must to do is blank up the remainder of the structure by way of deleting the sections you don’t want.

This is the overall end result.

case studies final portfolio image

Understand that the thumbnail pictures are all of the identical as a result of they’re pulling the similar first symbol in every of the posts.

Now you must be capable of clear out the case research by way of clicking the clear out hyperlinks above the grid. As soon as you choose a selected case learn about, you’re going to find a way of navigating to subsequent and former posts in the similar class.

Ultimate Ideas

In the end, the way you arrange your case research or tasks could make a large distinction on how customers have interaction together with your content material. Optimistically this use case educational gave you a couple of choices that can assist you to your subsequent venture.

If you have an interest, there may be extra documentation at the filterable portfolio module and post navigation module in our documentation space on our web page.

I look ahead to listening to from you within the feedback.


The put up How to Use a Filterable Portfolio and Post Navigation to Organize Case Studies with Divi seemed first on Elegant Themes Blog.

WordPress Web Design

[ continue ]