Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
  • #221521

    Hi guys,

    First of all, thanks for your great theme. It’s a really cool and handy theme and we love it.
    I have a question regarding the layout though:

    We would like to make a news page where we will display posts with the category “News”. Right now, we’re using the advanced layout editor with the following settings:
    -blog style: grid layout
    -blog grid columns: 1
    -define blog grid layout: title and excerpt -preview image size: thumbnail(150×150) -post number: 20
    -pagination: yes
    It is working perfectly, however we would like the thumbnail displayed on the left and the title and excerpt on the right. Is there any way to fix this? or do i have to edit the css code? If so, please tell me which file, where and how to edit.

    Another question: is it possible to create a notification widget that tells you new post and custom post type updates in the same widget? It would be great if I could do that, but am I asking too much?

    Any help would be appreciated. Thanks in advance.



    Hi Yeas!

    You can edit config-templatebuilder > avia-shortcodes > postslider.php, look for this code to modify the look of the blog grid layout:

     $markup = avia_markup_helper(array('context' => 'entry','echo'=>false));
    					$output .= "<article class='slide-entry flex_column {$style} {$post_class} {$grid} {$extraClass} {$thumb_class}' $markup>";
    					$output .= $thumbnail ? "<a href='{$link}' data-rel='slide-".avia_post_slider::$slide."' class='slide-image' title=''>{$thumbnail}</a>" : "";
    					$output .= "<div class='slide-content'>";
                        $markup = avia_markup_helper(array('context' => 'entry_title','echo'=>false));
                        $output .= '<header class="entry-content-header">';
                        $output .= !empty($title) ? "<h3 class='slide-entry-title entry-title' $markup><a href='{$link}' title='".esc_attr(strip_tags($title))."'>".$title."</a></h3>" : '';
                        $output .= '</header>';
                        if($show_meta && !empty($excerpt))
    						$output .= "<div class='slide-meta'>";
    						if ( $commentCount != "0" || comments_open($the_id) && $entry->post_type != 'portfolio')
    							$link_add = $commentCount === "0" ? "#respond" : "#comments";
    							$text_add = $commentCount === "1" ? __('Comment', 'avia_framework' ) : __('Comments', 'avia_framework' );
    							$output .= "<div class='slide-meta-comments'><a href='{$link}{$link_add}'>{$commentCount} {$text_add}</a></div><div class='slide-meta-del'>/</div>";
                            $markup = avia_markup_helper(array('context' => 'entry_time','echo'=>false));
    						$output .= "<time class='slide-meta-time updated' $markup>" .get_the_time(get_option('date_format'), $the_id)."</time>";
    						$output .= "</div>";
                        $markup = avia_markup_helper(array('context' => 'entry_content','echo'=>false));
    					$output .= !empty($excerpt) ? "<div class='slide-entry-excerpt entry-content' $markup>".$excerpt."</div>" : "";
                        $output .= "</div>";
                        $output .= '<footer class="entry-footer"></footer>';
    					$output .= "</article>";

    Or you can add something like this on Quick CSS or custom.css to align the grid image to the left:

    .slide-image {
    width: 30%;
    margin-right: 10px;
    float: left;



    Hi Ismael,

    Thanks for your help! Thats exactly what I wanted!
    However, I would like to have this layout only for some of my pages like my “News” page.
    With this css code:

    .slide-image {
    width: 30%;
    margin-right: 10px;
    float: left;

    I get all of my blog pages displayed that way. (for example, for my “Tours” post page I wanna use the masonry option) Can you please tell me what selector(s) to add to this code?

    And again, I want to know if Enfold has a feature that tells you in one element the latest updates of posts and custom post types. Or is it something I have to deal with the plugins?

    Thanks for your support.




    Please add following code to Quick CSS in Enfold theme options under Styling tab and change page ID to match your pages

    .page-id-999 .slide-image {
    width: 30%;
    margin-right: 10px;
    float: left;

    You can right click on Chrome or Firefox and click Inspect elements to find the page ID



    Hi Ismael,
    I would like to edit config-templatebuilder > avia-shortcodes > postslider.php
    I am using a child theme so I set up same path config-templatebuilder > avia-shortcodes > postslider.php and made the changes in the child theme postslider.php but it’s not working. Can’t see the changes in the front-end. It does show the changes when I modify postslider.php in the Enfold theme folder.
    What is going wrong?
    I appriciate your help.




    If you want to load a custom shortcode file insert this code into the child theme functions.php:

    add_filter('avia_load_shortcodes', 'avia_include_shortcode_template', 15, 1);
    function avia_include_shortcode_template($paths)
    	$template_url = get_stylesheet_directory();
        	array_unshift($paths, $template_url.'/shortcodes/');
    	return $paths;

    and then create a “shortcodes” folder inside your child theme folder. Afterwards place your shortcode files (i.e. postslider.php) into the shortcodes folder.



    Hi, I have used the Advanced Custom Fields plugin and am ytrying to load some of this info into the blog grid – I have successfully got the modifications into the child theme but no matter where I place the code for the custom field in the postslider.php file, it loads it at the very top of the page – above all the content – when there are more than 1, it loads several above all the content – can I get this to load into the grid?
    my code looks similar to this:

    $output .= !empty($excerpt) ? “<div class=’slide-entry-excerpt entry-content’ $markup>”.$excerpt.”</div>” : “”;
    $output .= the_field(‘excerpt’);
    $output .= “</div>”;
    $output .= ‘<footer class=”entry-footer”>’;

    website still in development so only postsed a private link below.


    hi, as this job was time critical, I have had to move past this and come up with an alternatve for my client.

    I really need to load some custom content into this template though.

    Its odd – if I add some basic html to this example <div>this is a test</div>, I can get this to appear whereever I want, as soon as I am trying to load custom data from Advanced custom fields, it ignores where I put it in the template and just adds it to the top of the page. I even tried <div>this is a test <my custom content></div> this loaded the ‘this is a test’ text where I wanted it to go but threw the advanced custom fields data to the top of the page.



    Use get_field($field_name) instead of the_field() function.

    UPDATE: The code are being formatted when I post it here. Please get it from here:

    Best regards,


    Thanks Ismael!!!
    that worked perfectly!

Viewing 10 posts - 1 through 10 (of 10 total)

The topic ‘Customization of Grid Layout’ is closed to new replies.