Designing blog grid and blog page

Hi folks,
I’m having difficulties determining how to customize my client’s blog grid and post page.

(I added website a website link(s) in the secure notes area). My questions are:

  1. on the home page, I’m using the grid blog module for the News. Can I add navigation in this section like I can in Divi to scroll the news blog posts?

  2. How can I change the ratio of the the three images in the grid row. I’m wanting to make them more horizontal. Is there a setting somewhere or must this be done via CSS?

  3. Where do we change the page layout for the single posts? In the X Blog settings, I can only select 2 layouts: Full Width or Use Global Content Layout. How do we customize the single post blog page?

  4. How can I add post navigation at the bot of each single post? I can’t find this setting.

Cheers!

I look forward to your response.

PS> SECURE NOTE Doesn’t appear as an option when I create a topic. I need to first create it then edit my post to add the note. Is this a bug?

Hello Gilles,

Thanks for writing in!

1.) Yes, you can. Please edit the page and insert a custom latest-posts ID to the Row Setting.

And then in your menu, you can insert a custom link the will be linked to #latest-posts

2.) The ratio of the image is fixed. You cannot change it in the Post Grid settings.

3.) The single posts layouts will always follow the global layout settings in X > Theme Options > Layout and Design > Content Layout.

4.) To add a post navigation, please check out this thread:

We would love to know if this has worked for you. Thank you.

thanks RueNel!

  1. re: news scrolling
    I’m sorry I wasn’t clear. I didn’t mean to scroll the page to the row section. I want to be able to view “other” posts in that same row. For instance Previous and Next three posts via posts navigation in this row. This can be done in Divi, wanderinf if it is this possible here in X.

  2. Image of ration
    If the ration is set, the layout is very limiting in terms of looks. What is the preferred method of customizing the way the single posts appear?

  3. post layout…
    OK Thanks.

  4. Perfect! I’ve implemented the code in the article you referenced. Worked perfectly. Albeit very basic, unformatted and needing formatting but… it’s a start.

Plus, another question…
5. Why is it that the site’s name “Carriage Hills”, appears as a header (page title) instead of the ad’s title? (link in secure note)

Cheers!

Hello Gilles,

Thanks for updating in!

1.) Regretfully there isn’t a feature that displays the post items in a news scrolling manner. You might be able to use the Classic Slider element and then utilize the dynamic content to display posts in each slides. To know more about dynamic content, please check this out:

2.) The post grid is using the large image size. If you can change that image size, you might be able to have a more horizontal image size. Please go to Settings > Media and change the image sizes. Install Regenerate Thumbnails plugin and then run it.

5.) Is that page a custom post type? If that is the case, since you have your child theme active and ready, please follow these steps below:

a.) Using Notepad or TextEdit or Sublime Text or any text editor, please create a new file in your local machine.

b.) Insert the following code into that new file

<?php

// =============================================================================
// VIEWS/RENEW/_LANDMARK-HEADER.PHP
// -----------------------------------------------------------------------------
// Handles content output of large headers for key pages such as the blog or
// search results.
// =============================================================================

$disable_page_title = get_post_meta( get_the_ID(), '_x_entry_disable_page_title', true );
$breadcrumbs        = x_get_option( 'x_breadcrumb_display' );

?>

<?php if ( ! x_is_blank( 1 ) && ! x_is_blank( 2 ) && ! x_is_blank( 4 ) && ! x_is_blank( 5 ) ) : ?>
  <?php if ( is_page() && $disable_page_title == 'on' ) : ?>

  <?php else : ?>

    <header class="x-header-landmark">
      <div class="x-container max width">
        <div class="x-landmark-breadcrumbs-wrap">
          <div class="x-landmark">

          <?php if ( x_is_shop() || x_is_product() ) : ?>

            <h1 class="h-landmark"><span><?php echo x_get_option( 'x_renew_shop_title' ); ?></span></h1>

          <?php elseif ( x_is_bbpress() ) : ?>

            <h1 class="h-landmark"><span><?php echo get_the_title(); ?></span></h1>

          <?php elseif ( x_is_buddypress() ) : ?>
            <?php if ( x_buddypress_is_component_with_landmark_header() ) : ?>

              <h1 class="h-landmark"><span><?php echo x_buddypress_get_the_title(); ?></span></h1>

            <?php endif; ?>
          <?php elseif ( is_page() ) : ?>

            <h1 class="h-landmark entry-title"><span><?php the_title(); ?></span></h1>

          <?php elseif ( is_home() || is_single() ) : ?>
            <?php if ( x_is_portfolio_item() ) : ?>

              <h1 class="h-landmark"><span><?php echo x_get_parent_portfolio_title(); ?></span></h1>

            <?php elseif ( is_singular( 'classified' ) ) : ?>

              <h1 class="h-landmark"><span>Classifieds</span></h1>

            <?php else : ?>

              <h1 class="h-landmark"><span><?php echo x_get_option( 'x_renew_blog_title' ); ?></span></h1>

            <?php endif; ?>
          <?php elseif ( is_search() ) : ?>

            <h1 class="h-landmark"><span><?php _e( 'Search Results', '__x__' ); ?></span></h1>

          <?php elseif ( is_category() || x_is_portfolio_category() || x_is_product_category() ) : ?>

            <?php

            $meta  = x_get_taxonomy_meta();
            $title = ( $meta['archive-title'] != '' ) ? $meta['archive-title'] : __( 'Category Archive', '__x__' );

            ?>

            <h1 class="h-landmark"><span><?php echo $title; ?></span></h1>

          <?php elseif ( is_tag() || x_is_portfolio_tag() || x_is_product_tag() ) : ?>

            <?php

            $meta  = x_get_taxonomy_meta();
            $title = ( $meta['archive-title'] != '' ) ? $meta['archive-title'] : __( 'Tag Archive', '__x__' );

            ?>

            <h1 class="h-landmark"><span><?php echo $title ?></span></h1>

          <?php elseif ( is_404() ) : ?>

            <h1 class="h-landmark"><span><?php _e( 'Oops!', '__x__' ); ?></span></h1>

          <?php elseif ( is_year() ) : ?>

            <h1 class="h-landmark"><span><?php _e( 'Post Archive by Year', '__x__' ); ?></span></h1>

          <?php elseif ( is_month() ) : ?>

            <h1 class="h-landmark"><span><?php _e( 'Post Archive by Month', '__x__' ); ?></span></h1>

          <?php elseif ( is_day() ) : ?>

            <h1 class="h-landmark"><span><?php _e( 'Post Archive by Day', '__x__' ); ?></span></h1>

          <?php elseif ( x_is_portfolio() ) : ?>

            <h1 class="h-landmark"><span><?php the_title(); ?></span></h1>

          <?php endif; ?>

          </div>

          <?php if ( $breadcrumbs == '1' ) : ?>
            <?php if ( ! is_front_page() && ! x_is_portfolio() ) : ?>
              <div class="x-breadcrumbs-wrap">
                <?php x_breadcrumbs(); ?>
              </div>
            <?php endif; ?>
          <?php endif; ?>

          <?php if ( x_is_portfolio() ) : ?>
            <div class="x-breadcrumbs-wrap">
              <?php x_portfolio_filters(); ?>
            </div>
          <?php endif; ?>

        </div>
      </div>
    </header>

  <?php endif; ?>
<?php endif; ?>

c.) Save the file named as _landmark-header.php

d.) Upload this file to your server in the child theme’s folder wp-content/themes/x-child/framework/legacy/cranium/headers/views/renew

We would love to know if this has worked for you. Thank you.

Thanks so much for this RueNel! Awesome support. You provided wonderful info.

I ended up modifying the post image by tweaking the CSS. I’m good with the all the points you addressed.
Thanks again so very much,
Gilles

Glad to hear that. :slight_smile:

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.