Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0

How to move image below Blog title / heading on Native template?


Belle71

Question

Hi

I'm testing my blog posts and the image is showing before the blog title which I don't like. How can I move the title of the blog post to the top and above the image?

Thanks

Belinda

Link to post
  • Answers 8
  • Created
  • Last Reply

Top Posters For This Question

Top Posters For This Question

Popular Posts

First you will need the business plan or above. Add the following to Settings > Advanced > Code Injection > HEADER. <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1

Go to Pages. Hover over your Blog Page and click the gear icon. Click on Advanced. Click on Page Header Code Injection. Let us know how it goes.

Thank you so much, perfect instructions and it's worked. Looks so much better with the heading before the image. Really appreciate your help. ūüôŹ Belinda

Posted Images

8 answers to this question

Recommended Posts

  • 0

Please post the URL of your site. If you've not already done so, please set up a site-wide password. Post the password here and then we can take a look at your issue.

Hello I'm Thomas. I've been getting websites up and running for 26 years. I want to help you at whatever level meets your needs, from as little (if you're a DIYer) to as much as you need.

Link to post
  • 0

There is no built-in setting for the title to be above the image. See Native template. Scroll down to Blog Pages > On individual posts.

However with some CSS and Javascript  it could be done.

Let us know if that is something you want to pursue.

Hello I'm Thomas. I've been getting websites up and running for 26 years. I want to help you at whatever level meets your needs, from as little (if you're a DIYer) to as much as you need.

Link to post
  • 0

Hi,

Thanks for your reply. Yes I would like to consider this as I personally feel the title needs to be at the top, looks like it's missing when you land on the page.

What would be the cost for this work please?

Thanks

Belinda

Link to post
  • 0

First you will need the business plan or above.

Add the following to Settings > Advanced > Code Injection > HEADER.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js" type="text/javascript"></script>

For your blog page add the following to Blog Settings > Advanced > Page Header Code Injection.

<script>

  $( ( ) => {
  
    $( 'article' ).each ( function ( ) {
    
      let $this = $( this );
      
      let $title = $( '.entry-title', $this );
      
      let textAlign = $title.css ( 'text-align' );
      
      $this.prepend ( $title );
      
      $title.css ( 'text-align', textAlign );
      
      } );
      
    } );
    
  </script>

Let us know how it goes.

Hello I'm Thomas. I've been getting websites up and running for 26 years. I want to help you at whatever level meets your needs, from as little (if you're a DIYer) to as much as you need.

Link to post
  • 0

Hi,

Thanks so much for this. I do have the Business plan, I have done the 1st code but struggling with the second. I don't have Blog Settings, I do have Blogging but when I click that it only lists posts and comments and doesn't appear to have advance. There is no link here to advanced. Under Advanced there is nothing about blogging. Bit lost sorry. Can you help?

Thanks

Belinda

Link to post
  • 0

Go to Pages.

162458546_ScreenShot2020-09-25at12_53_08PM.png.238ca510113d2e3f7bf9dd3611310e70.png

Hover over your Blog Page and click the gear icon.

1543414113_ScreenShot2020-09-25at12_55_04PM.png.0f257644d2ca8cbc4e59c663f6f15b51.png

Click on Advanced.

1370178372_ScreenShot2020-09-25at12_51_08PM.png.1957683db5497619f4a7c128daa71abb.png

Click on Page Header Code Injection.

1904628931_ScreenShot2020-09-25at12_51_57PM.png.d90e47d3a227f552b54f14f5f201c0ce.png

Let us know how it goes.

Hello I'm Thomas. I've been getting websites up and running for 26 years. I want to help you at whatever level meets your needs, from as little (if you're a DIYer) to as much as you need.

Link to post

Create an account or sign in to comment

You need to be a member in order to leave a comment


√ó
√ó
  • Create New...