Avada › Forums › Community Forum › Change tab’s from H4 to H2?

Tagged: , , , ,

Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
    Posts
  • william.baxter
    Participant
    February 3, 2020 at 10:15 am
    Post count: 9
    #694661

    Hi all,

    How can I change the tab headings so they’re H2’s rather than H4’s?

    I’m using tabs to display content, but I need them as H2’s as they’re effectively titles for SEO purposes.

    Thanks in advance.

    marklchaves
    Participant
    February 4, 2020 at 1:29 pm
    Post count: 873
    #695074

    Interesting problem. I didn’t see an Avada hook for this in the Avada docs.

    Normally, I would write-up PHP for this. But, I’m working on a project that needs JavaScript to manipulate HTML . Kinda similar to your request.

    Here’s one way to handle what you are asking using JavaScript. I used the Avada Tab Element page as an example.

    https://codepen.io/marklchaves/pen/abzeQGO

    Shout if you have any questions.

    william.baxter
    Participant
    February 4, 2020 at 5:04 pm
    Post count: 9
    #695202

    Hi Mark,

    Thank you for the very detailed reply.

    I’ve tried the JS you created but I’ve been unable to re-create the outcome.

    I can only imagine it’s because I can’t explicity change the property of body to include <body onload=”changeTabHeadingToH2();”>, or can I? A bit stuck with this one. I’m seeing no errors through the console so the JS is definitely firing correctly.

    Many thanks 🙂

    Will

    marklchaves
    Participant
    February 4, 2020 at 10:20 pm
    Post count: 873
    #695274

    Hi William,

    Sorry–the onload() is “old hat”.

    I put detailed instructions on how to port the JavaScript to Avada. The instructions include screen grabs in a comment below the source.

    I also added two console.log() statements to the CodePen just so you see signs of life.

    https://gist.github.com/marklchaves/41b1451ad77d5aa7cb2a543c502d84bd

    Yell if you get stuck anywhere.

    william.baxter
    Participant
    February 5, 2020 at 10:47 am
    Post count: 9
    #695384

    Worked absolute wonders! Top man.

    Really appreciate the help and I’m sure others will find the solution useful 🙂

    Many thanks,
    Will

    william.baxter
    Participant
    February 5, 2020 at 12:42 pm
    Post count: 9
    #695405

    Mark,

    Quick question. Getting some really funky behaviour going on here…

    When I inspect element, the JS loads the headings as H2. However, the source code of the page itself displays H4’s.

    What could be causing this? I’ve tried putting the JS in the head, as I thought it could be caused by loading at the bottom of the body.

    Many thanks,
    Will

    marklchaves
    Participant
    February 5, 2020 at 2:09 pm
    Post count: 873
    #695445

    Hi Will,

    Great question.

    Yes, confirmed. My script accesses the DOM (document object model). That means my script must be at the end of the page. Bottom of the </body>is where most inline JS should live on a page.

    Also confirmed that what you are seeing in the source and dev tools is correct. They will be different.

    The source from ctrl U is the original source generated by WordPress. The dev tools inspector shows the DOM that the browser actually renders. My script will load and run only after the page is loaded from the server and the DOM is built from the page source. After my script is run, the DOM is updated and displayed to the browser.

    Hope that makes sense 😉

    Enjoy!

    marklchaves
    Participant
    February 5, 2020 at 2:55 pm
    Post count: 873
    #695454

    Hi Will,

    I’m anticipating your next question. Will Googlebot see my new H2s? The answer is yes. It should. Because page rendering is done before the page is sent for indexing. That means Googlebot will see the H2s instead of the H4s.

    If you discover anything different, let me know. I might have a server-side solution by then lol.

    Ah, the joy of WordPress themes.

    william.baxter
    Participant
    February 5, 2020 at 3:41 pm
    Post count: 9
    #695465

    Hi Mark,

    Thanks for the clarification.

    Once again, appreciate the help you’ve provided 🙂

    Will

    william.baxter
    Participant
    February 6, 2020 at 9:29 am
    Post count: 9
    #695756

    Hi Mark,

    Another question for you, Avada generates a tab ID for example #tab-8456764d35db1a5210g.

    Is it possible to re-write this with ID’s pulled from the tab title.

    So the URL would append #tab-1, #tab-2, etc.

    Many thanks 🙂
    Will

    jothaes
    Participant
    March 10, 2022 at 4:11 pm
    Post count: 1
    #878995

    Thanks for this great help, Mark.

    Exactly what i was looking for – just that i needed to get rid of Headings at all in the Tabs labels and needed to turn them into “p” / Paragraph – and your solution worked like a charm 🙂

    Kudos.

    Why turning them from h4 into “p”? Because the real valuable Headlines are “inside” the tab element (not in the tab label) and because i am using the same wording (like “Risks”) on many tab labels on different portfolio item single pages and my SEO tools complained about using same H4 headlines again and again. So using your solution and turning from H4 to “p” solved it just perfectly.

    marklchaves
    Participant
    March 13, 2022 at 1:06 pm
    Post count: 873
    #879098

    Hey @jothaes,

    Excellent. I’m glad that worked out for you 🙂

  • Author
    Posts
Viewing 12 posts - 1 through 12 (of 12 total)
  • You must be logged in to reply to this topic.