[Stacy CParticipant]

I would like to have an image under my navigation menu spanning the entire width of the logo/navigation menu. Below that I would like to have a 2 column layout with content left, sidebar right.

Looking at this page, you can see an example of what I have currently: http://www.thezengirl.com/dev/my-story/
I am using Renew and made my page “layout-content left, sidebar right”. I am using the Visual Editor and made a content band at the top with the image, but the image displays on the left content area.

If I make the page template “blank- container, header footer”, then the top image goes across the top the way that I want it but then I don’t have the sidebar to display my widgets.

What is the best way to get the image across the top? I don’t want it full width stretching from edge to edge of the window, just the same size as the logo to end of nav bar.

[FriechModerator]

Hi there,

Thank you for writing in! Because this requires a template change, I’d advise that you setup a child theme. This allows you to make code changes that won’t be overwritten when an X update is released. After your child theme is setup, please review how we recommend making template changes in Customization Best Practices. Then navigate to your child theme’s /framework/views/renew directory and create a file named template-layout-content-sidebar.php there. Then paste the code below on it and save:

<?php

// =============================================================================
// VIEWS/RENEW/TEMPLATE-LAYOUT-CONTENT-SIDEBAR.PHP
// -----------------------------------------------------------------------------
// Content left, sidebar right page output for Renew.
// =============================================================================

?>

<?php get_header(); ?>

  <div class="x-container max width offset">
  <!-- banner image -->
  <div class="x-column x-sm vc x-1-1"><img class="x-img x-img-none none" src="http://www.thezengirl.com/dev/wp-content/uploads/2015/02/stairs_cropped.jpg"></div>
    <div class="<?php x_main_content_class(); ?>" role="main">

      <?php while ( have_posts() ) : the_post(); ?>
        <?php x_get_view( 'renew', 'content', 'page' ); ?>
        <?php x_get_view( 'global', '_comments-template' ); ?>
      <?php endwhile; ?>

    </div>

    <?php get_sidebar(); ?>

  </div>

<?php get_footer(); ?>

Now on your page set the template to Layout – content left, Sidebar right.
You can change the banner image by changing the src="http://www.thezengirl.com/dev/wp-content/uploads/2015/02/stairs_cropped.jpg" URL.

Hope it helps, Cheers!

[Stacy CParticipant]

Thanks for taking the time to write this, I really appreciate your help.
I just realized that there is a “widget area” element. I did not know this, and I thought the only way to use the sidebars with widgets was to use the template “layout-content etc”.
I made the template blank and just added a two column content band with the widget area as one column. It now works perfectly.

thanks for your help.

[ChristopherModerator]

You’re welcome.

[Author]

Posts