Jump to content

Customizing Portfolio Titles Appearance

Recommended Posts

Site URL: https://metgal.art/

In order to get our portfolio (RESULTS page) hover over titles to appear as we want, I included some html. I thought by editng the SEO descriptions they wouldn't show up when searched in Google, but they do in some areas (like the general portfolio page). Can anyone help include CSS to help format the titles how we have them so I don't have to worry how they display in Google? Images to help illustrate below. 

 

 

Screen Shot 2020-12-31 at 9.12.34 AM.png

Screen Shot 2020-12-31 at 9.12.40 AM.png

Screen Shot 2020-12-31 at 9.21.11 AM.png

Link to comment
  • Replies 2
  • Views 517
  • Created
  • Last Reply

Hi. If you use Business Plan, we can replace <br><p> with some other characters, example: #, |,.. It will still show up on GG (#, | or...), but it will look better than html tag.

Do you use Personal or Business Plan?

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

What if you wrote the titles in plain text (without the HTML) for SEO purposes, then had a script on the RESULTS page convert it to the way you currently have it? I'm not sure if that's the best idea, but it's another idea. For example, your title would be "GENSLER - AUSTIN, TX" (notice it's hyphen separated), then script added to the RESULTS code injection would say to split it in half at the hyphen and add your other code when the page is loaded.
 

window.addEventListener('DOMContentLoaded', (event) => {
    document.querySelectorAll("h3").forEach(function (el, ind) {
        // this line below says to split it at the hyphen...
        var [place, location] = el.innerHTML.split("-");
        el.innerHTML = el.innerHTML.replace(location, "<p style='font-size:20px; line-height:0.1; transition-timing-function:ease; transition-duration: 1.5s; transition-delay: 0.391837s;' class='preFade fadeIn'>" + location + "</p>");
        el.innerHTML = el.innerHTML.replace(" -", "<br>");
    });
});

Or, let's say you'd prefer your titles to use two forward-slashes for SEO, like "GENSLER // AUSTIN, TX". I'll write that code too so you can compare the changes on lines 4 and 6.  

window.addEventListener('DOMContentLoaded', (event) => {
    document.querySelectorAll("h3").forEach(function (el, ind) {
        // this line below says to split it at the two forward-slashes...
        var [place, location] = el.innerHTML.split("//");
        el.innerHTML = el.innerHTML.replace(location, "<p style='font-size:20px; line-height:0.1; transition-timing-function:ease; transition-duration: 1.5s; transition-delay: 0.391837s;' class='preFade fadeIn'>" + location + "</p>");
        el.innerHTML = el.innerHTML.replace(" //", "<br>");
    });
});

 

Link to comment

Archived

This topic is now archived and is closed to further replies.


×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.