Blog Post Header

[onesmartcrib]

Hi, I would like to reverse the title and main featured image in my blog posts so that the title is above the image, which will help with SEO.

Can you please tell me how to acheive this? What template do i need to edit?
Thanks,
Tim

[ruenel]

Hello Tim,

Thanks for writing in!

To resolve your issue and accomplish what you want, since you have your child theme active and ready, please follow the following steps below:
1] Using Notepad or TextEdit or Sublime Text or any text editor, please create a new file in your local machine.
2] Insert the following code into that new file

<?php

// =============================================================================
// VIEWS/ETHOS/CONTENT.PHP
// -----------------------------------------------------------------------------
// Standard post output for Ethos.
// =============================================================================

$is_index_featured_layout = get_post_meta( get_the_ID(), '_x_ethos_index_featured_post_layout',  true ) == 'on' && ! is_single();

?>

<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>

  <?php x_get_view( 'ethos', '_content', 'post-header' ); ?>

    <div class="entry-wrap">

      <?php if ( $is_index_featured_layout ) : ?>
        <?php x_ethos_featured_index(); ?>
      <?php else : ?>
        <?php if ( has_post_thumbnail() ) : ?>
          <div class="entry-featured">
            <?php if ( ! is_single() ) : ?>
              <?php x_ethos_featured_index(); ?>
            <?php else : ?>
              <?php x_featured_image(); ?>
            <?php endif; ?>
          </div>
        <?php endif; ?>
      
      <?php x_get_view( 'global', '_content' ); ?>

    </div>

  <?php endif; ?>
  
</article>

3] Save the file named as content.php
4] Upload this file to your server in the child theme’s folder wp-content/themes/pro-child/framework/views/ethos/

5.] And then please add the following CSS code in the X > Theme Options > Global CSS (http://prntscr.com/evui3r)

.page .x-main.left .hentry .entry-featured, 
.single-post .x-main.left .hentry .entry-featured {
    margin-top: 30px;
    margin-right: 0;
}

The final layout would be like this:

Please let us know how it goes.