Buy me a coffee

Two lines of text on portfolio page thumbnails

To make portfolio text in two lines, you can follow these

#1. Determine which portfolio page layout you are using.

First, edit the Portfolio Page

Two Lines Of Text On Portfolio Page Thumnails 01 Min

See this

Two Lines Of Text On Portfolio Page Thumnails 02 Min

If the Portfolio layout is Grid: Simple or Grid: Overlay, use #3.1 code.

Two Lines Of Text On Portfolio Page Thumnails 03 Min

If the Portfolio layout is Hover: Follow Cursor or Hover: Fixed or Hover: Background, use #3.2 code

Two Lines Of Text On Portfolio Page Thumnails 04 Min

#2. Find Portfolio Item URL

Just click on each item in the Portfolio List Page, you will see the item URL

Two Lines Of Text On Portfolio Page Thumnails 05 Min

Some example

Two Lines Of Text On Portfolio Page Thumnails 06 Min

Two Lines Of Text On Portfolio Page Thumnails 07 Min

or you can also hover on the portfolio item > Click 3 dots > Settings

Two Lines Of Text On Portfolio Page Thumnails 08 Min

and see URL Slug

Two Lines Of Text On Portfolio Page Thumnails 09 Min

#3.1. With Portfolio layout Grid: Overlay or Grid Simple. Use this code to Custom CSS box

a.grid-item h3:after {
    display: block;
    font-size: 17px;
}
a.grid-item[href="/portfolio01-gridsimple/project-01"] h3:after {
    content: "social media";
}
a.grid-item[href="/portfolio01-gridsimple/project-02"] h3:after {
    content: "marketing";
}
a.grid-item[href="/portfolio01-gridsimple/project-03"] h3:after {
    content: "branding";
}
a.grid-item[href="/portfolio01-gridsimple/project-04"] h3:after {
    content: "motion graphics";
}
a.grid-item[href="/portfolio01-gridsimple/project-05"] h3:after {
    content: "social media";
}
a.grid-item[href="/portfolio01-gridsimple/project-06"] h3:after {
    content: "digital marketing";
}

Two Lines Of Text On Portfolio Page Thumnails 10 Min

Result:

Two Lines Of Text On Portfolio Page Thumnails 11 Min

Two Lines Of Text On Portfolio Page Thumnails 12 Min

Remember to replace with the Item URL Slug you have in #2.

Two Lines Of Text On Portfolio Page Thumnails 13 Min

#3.2. With Portfolio layout is Hover: Follow Cursor or Hover: Fixed or Hover: Background. Use this code to Custom CSS

a.portfolio-hover-item span:after {
    display: block;
    font-size: 17px;
}
a.portfolio-hover-item[href="/portfolio-hover-follow-cursor/project-01"] span:after {
    content: "social media";
}
a.portfolio-hover-item[href="/portfolio-hover-follow-cursor/project-02"] span:after {
    content: "marketing";
}
a.portfolio-hover-item[href="/portfolio-hover-follow-cursor/project-03"] span:after {
    content: "branding";
}
a.portfolio-hover-item[href="/portfolio-hover-follow-cursor/project-04"] span:after {
    content: "motion graphics";
}
a.portfolio-hover-item[href="/portfolio-hover-follow-cursor/project-05"] span:after{
    content: "social media";
}

Result: 

Two Lines Of Text On Portfolio Page Thumnails 14 Min

Remember to replace with Item URL Slug in #2.

Two Lines Of Text On Portfolio Page Thumnails 15 Min