Search Results for 'COLUMNS'

[Eze]

Eze

#291240

Hi there,

Glad you reached out, happy to help.

I added a Row Layout block with two columns and used the same Section Alignment shown in your screenshot. The content was centered both in the editor and on the frontend. Here is a screencast for your reference:
https://share.zight.com/6qu1PyAo

Sometimes, the issue could be related to browser caching. Clear your browser cache or try accessing the editor in a different browser or in incognito mode and see if the issue persists.

See more troubleshooting steps here: https://www.kadencewp.com/blog/how-to-troubleshoot-your-website/

I hope this helps. Please let us know how we can help further.

Cheers,
Eze

[architabasandrai]

architabasandrai

#290950

Hi Christina,

The Endlessly Loop Related Carousel setting just changes the behavior of the carousel when it reaches the end and goes back to the first item. Endlessly loop just makes it appear that the carousel slides continuously instead of going back to the first slide.

Currently, there is no built-in option to change the type of element that displays the related post from a carousel to a grid. However, you can add a custom snippet that will limit the number of items to show in the carousel to match the number of columns you set in the customizer so that it will not add the scroll function.

Try this code snippet using the code snippets plugin: https://www.kadencewp.com/kadence-theme/knowledge-base/advanced/how-to-add-a-custom-filter-or-function-with-code-snippets/

add_filter( 'kadence_related_posts_args', 'customize_related_posts_args' );
function customize_related_posts_args( $args ) {
$args['posts_per_page'] = 3;

return $args;
}

Please see this screen recording for reference: https://share.zight.com/OAuvzJZ2

I hope that helps answer your inquiry. If you have further questions, please let us know, and we’ll be happy to help out.

Best regards,
Archita

[Sandy Flint]

Sandy Flint

#290860

This works.. thanks. It’s not as good as a row with 8 columns, but it works.

[architabasandrai]

architabasandrai

#290856

Hi Sandy,

I’m glad you reached out. I’d be happy to help.

As of now, with, you can add a row layout with 6 columns. You can add gallery(adv) in footer widget and set the carousel mode, it will allow you to show upto 8 columns. Check the screencast for reference: https://share.zight.com/2NuoJm2x

You can check the documentation here: https://www.kadencewp.com/help-center/docs/kadence-blocks/advanced-gallery-block/

I hope this helps. Let us know if we can assist you further.

Best Regards,
Archita

[Sandy Flint]

Sandy Flint

#290854

I need to put 8 association logos in a single row across the bottom of every page on my website.

It looks like I can create a row layout with only 6 columns, and I couldn’t find a way to configure 8 items in the footer widgets.

Any suggestions

[Sandy Flint]

Sandy Flint

#290854

I need to put 8 association logos in a single row across the bottom of every page on my website.

It looks like I can create a row layout with only 6 columns, and I couldn’t find a way to configure 8 items in the footer widgets.

Any suggestions

[chitocamacho]

chitocamacho

#290849

Hi Adam,

Thanks for writing in and the link to your website.

I checked the home page as an example.

Your images are small, 300 × 174 px, but they are rendered as 441 × 294 px. Here’s a video for reference: https://share.zight.com/E0uO2qeL

If a small image is stretched, it will be blurry.

What you can do is upload a larger size or change the Post Archive Columns in Customizer > Posts/Pages Layout > Archive Layout to 3, so the container width will be smaller.

This article about best practice for image sizes could help:
https://www.kadencewp.com/blog/best-practices-for-images-sizes-and-optimization-in-wordpress/

Please let me know how I can assist further.

Best,
Chito

[Karla]

Karla

#290726

Hi, Nicolae.

I apologize for the delay in getting back to you.

To clarify – the Virtue Premium theme has built-in shortcodes. You can refer to this page for shortcode references – https://docs.kadencewp.com/virtue-premium/shortcodes/

Please try changing the code snippet that Eze gave previously and see if your shortcode’s output will be more accurate:

unction custom_blog_grid_shortcode($atts) {
    // Extract the attributes
    $atts = shortcode_atts(array(
        'items' => 4,
        'columns' => 2,
        'post_id' => ''
    ), $atts, 'blog_grid');

    // Convert the post IDs to an array
    $post_ids = explode(',', $atts['post_id']);

    // Query the posts
    $args = array(
        'post_type' => 'post',
        'post__in' => $post_ids,
        'posts_per_page' => $atts['items'],
        'orderby' => 'post__in'
    );

    $query = new WP_Query($args);

    // Start output buffering
    ob_start();

    if ($query->have_posts()) {
        echo '<div class="custom-blog-grid" style="display: grid; grid-template-columns: repeat(' . esc_attr($atts['columns']) . ', 1fr); gap: 20px;">';

        while ($query->have_posts()) {
            $query->the_post();
            echo '<div class="grid-item">';
            if (has_post_thumbnail()) {
                echo '<div class="post-thumbnail">';
                the_post_thumbnail('medium');
                echo '</div>';
            }
            echo '<h2 class="post-title"><a href="' . get_the_permalink() . '">' . get_the_title() . '</a></h2>';
            echo '<div class="post-excerpt">' . get_the_excerpt() . '</div>';
            echo '</div>';
        }

        echo '</div>';
    }

    // Reset post data
    wp_reset_postdata();

    // Return the content
    return ob_get_clean();
}
add_shortcode('blog_grid_custom', 'custom_blog_grid_shortcode');

Use the new shortcode name on your page content (e.g. ‘[blog_grid_custom items=4 columns=2 post_id=”2930,3109,2936,3090″] ‘).

I hope this helps, and let me know if I can help you further.

Regards,
Karla

[Eze]

Eze

#290659

Hi Pedro,

Glad you reached out, happy to help.

You can achieve a list of posts with the title and date on each of the columns using the Kadence Advanced Query Loop block:
https://www.kadencewp.com/help-center/docs/kadence-blocks/advanced-query-loop-block/

Here is a demo screencast for your reference:
https://share.zight.com/p9u2Wnzo

I hope this helps. Please let us know how we can help further.

Cheers,
Eze

[Karla]

Karla

#290605

Hi, Elizabeth!

I’d be happy to help you with this.

If you have the Kadence Pro add-on, you can do these steps:
1. Create a template to replace single post contents.
2. Add a Row Layout block with 2 columns.
3. Set the Element/Template to replace single post content and to show for all posts. Here’s a screenshot – https://share.zight.com/Qwuom9OG

The Dynamic HTML block is a block from Kadence Blocks Pro and can help show post contents dynamically – https://www.kadencewp.com/help-center/docs/kadence-blocks/how-to-use-the-kadence-dynamic-html-block/

Here’s how one of my blog posts looked after applying the template – https://share.zight.com/geu7N45P

I hope this helps. Let me know if I can help you further.

Regards,
Karla

[Johny]

Johny

#290503

Thanks for the help architabasandrai 🙂

I have 800+ products so selectively choosing which products should have specific tabs would be impossible.

It’s to bad that the developers behind “Custom Product Tabs for WooCommerce” By Yikes Inc/Code Parrots haven’t updated their plugin for a year and people are saying stay away from it since no one answers to support. A their contact form doesn’t work.
That’s to bad because it’s the best product tab plugin i’ve used, it still works perfectly (even the free one) but who knows what will happen when next WP/Woo updates comes.

I’ve also tried “WooCommerce Product Tabs” By Barn2 Plugins, but it refuse to accept posting Gutenberg block into the fields, they strip the field from the formating (rows, sections columns).

I preferably don’t want a to complexed and hacked solution for the same reason.
It’s strange that there seem to be impossible to get/find a good solid custom tabs solution.
I think this should be a part of Shop Kit.

I can add a Code Snippet which enables the block editor in the Woo product editor and add the Kadence Tabs block, but that of course gets placed inside the Description tab.

If anyone know of a solid custom tabs solution for WooCommerce products please share!

The search continues…

/ Johny

[Nicolae]

Nicolae

#290467

Hi michaeltarongoy,

I used the above code and I activated it in Code Snippets, as in the video. I tried it on homepage.

Now I used the shortcode [blog_grid items=4 columns=2 post_id=”2930,3109,2936,3090″] on a test page, https://www.crifst.ro/test/. As you can see, there are much more than 4 posts, and nothing to do with the post IDs used in shortcode.

Best regards,

Nicolae

• This reply was modified 1 year, 9 months ago by Nicolae.

[Eze]

Eze

#290448

Hi Nicolae,

To create a blog grid in WordPress that displays specific posts based on their IDs, you can use a custom shortcode. However, the default WordPress shortcodes do not support specifying posts by their IDs directly.

As a workaround, you can achieve this using this custom function:

function custom_blog_grid_shortcode($atts) {
    // Extract the attributes
    $atts = shortcode_atts(array(
        'items' => 4,
        'columns' => 2,
        'post_id' => ''
    ), $atts, 'blog_grid');

    // Convert the post IDs to an array
    $post_ids = explode(',', $atts['post_id']);

    // Query the posts
    $args = array(
        'post_type' => 'post',
        'post__in' => $post_ids,
        'posts_per_page' => $atts['items'],
        'orderby' => 'post__in'
    );

    $query = new WP_Query($args);

    // Start output buffering
    ob_start();

    if ($query->have_posts()) {
        echo '<div class="custom-blog-grid" style="display: grid; grid-template-columns: repeat(' . esc_attr($atts['columns']) . ', 1fr); gap: 20px;">';

        while ($query->have_posts()) {
            $query->the_post();
            echo '<div class="grid-item">';
            if (has_post_thumbnail()) {
                echo '<div class="post-thumbnail">';
                the_post_thumbnail('medium');
                echo '</div>';
            }
            echo '<h2 class="post-title"><a href="' . get_the_permalink() . '">' . get_the_title() . '</a></h2>';
            echo '<div class="post-excerpt">' . get_the_excerpt() . '</div>';
            echo '</div>';
        }

        echo '</div>';
    }

    // Reset post data
    wp_reset_postdata();

    // Return the content
    return ob_get_clean();
}
add_shortcode('blog_grid', 'custom_blog_grid_shortcode');

Here is how to add the custom function to your website using the Code Snippets plugin:
https://www.kadencewp.com/help-center/docs/kadence-theme/how-to-add-a-custom-filter-or-function-with-code-snippets/

After adding the above code, you can use the shortcode in your page like this:
[blog_grid items=4 columns=2 post_id=”23,37,101,123″]

This will display a grid of posts with the specified IDs in the layout you defined.

Here is a screencast for your reference:
https://share.zight.com/L1ub2J2l

I hope this helps. Please let us know how we can help further.

Cheers,
Eze

[ameliasmith11.me]

ameliasmith11.me

#290433

Hi,

I created a website using the Kadence Blocks Pro plugin. On the site, I designed a “Top Features of XNXubd VPN Browser APK” section by showing its features in row and column layouts. The problem is that there is a little bit too much space between the columns. How can I minimize it? Here is the site: xnxubdvpnapk.com

[ameliasmith11.me]

ameliasmith11.me

#290433

Hi,

I created a website using the Kadence Blocks Pro plugin. On the site, I designed a “Top Features of XNXubd VPN Browser APK” section by showing its features in row and column layouts. The problem is that there is a little bit too much space between the columns. How can I minimize it? Here is the site: xnxubdvpnapk.com

[TomH]

TomH

#290243

Hello,
I want to add the following on a single row in the mobile menu:
– account
– shopping cart
– search icon
When I just add these, they are placed beneath each other in the mobile menu:
*Login to see link
How can I make them adjacent? I can’t find a setting for this, nor adding columns.
Thanks
Tom

[TomH]

TomH

#290243

Hello,
I want to add the following on a single row in the mobile menu:
– account
– shopping cart
– search icon
When I just add these, they are placed beneath each other in the mobile menu:
*Login to see link
How can I make them adjacent? I can’t find a setting for this, nor adding columns.
Thanks
Tom

[emmanuelatse]

emmanuelatse

#290187

Hi, thanks for your answer!
So I tried this, and it kind of worked :
It wasn’t working until I set a vertical alignement option on the parent as you said, but also any number on “flex-grow” to the parent too (otherwise, nothing would work, with only vertical alignment, this was moving the two columns up and down).

But then, whereas it was good looking in the editor, it turned bad on the real rendered page…
I made a screencast so you can see what I’ve done :

https://youtu.be/F7SnQpTu4RY

Best regards,
Emmanuel

[Karla]

Karla

#290181

Hi, Emmanuel!

Glad you reached out to us.

Let’s say you have this layout:
– You have a two-column Row Layout block.
– On the right column, you want to show two separate columns.

Here’s the initial look – https://share.zight.com/9Zu9K1wE

But you want to stretch the inner columns on the right side to equal height to the left one. Here’s how the Flex Grow option can help:
– Select a flex Vertical alignment for their parent Section block to activate flex – https://share.zight.com/E0ueX12l
– Set equal values for “Flex grow” options in the inner Section columns on the right side (e.g. 1).
– You should see that they’ll stretch automatically (based on their content length) to give you this layout – https://share.zight.com/L1ubDjGX

If you want the other section to be taller than the other, set a higher flex grow value for it.

We’ll update the Section block’s documentation to include these details.

I hope this helps, and let me know if I can help you further.

Regards,
Karla

[David Stirling]

David Stirling

#290019

I think I have resolved my issue by using Columns block instead of Row Layout.

[ahmedchouihi]

ahmedchouihi

#289065

Hello,
I want to use Kadence classes in my website , which meant to create row and columns using the code .Is there any documentation about this ?
Thanks in advance

[ahmedchouihi]

ahmedchouihi

#289065

Hello,
I want to use Kadence classes in my website , which meant to create row and columns using the code .Is there any documentation about this ?
Thanks in advance

[antony-2003]

antony-2003

#288989

Thanks for the feedback but that’t not the functionality I’m looking for.

I’m looking to sync two independent sliders, that layout just creates a nav using the existing slides. I’m wanting a slider that contains images and the secondary slider contains supporting text in two columns that then acts as a nav [reference visual attached]

This would probably be the closest option using Splide, however that extensions doesn’t seem to be installed.

https://splidejs.com/extensions/url-hash

I’ve decided to roll my own and added Slick Slider JS which is working well.

If anyone else needs to do something similar just hit me up!

Thanks

[jaspallo]

jaspallo

#288668

Hi,

when logged in as Admin, click on “customize” in the admin toolbar.

When the customize sidebar appears, click on the mobile view button on the bottom right-hand side of the sidebar and then select ‘header’ from the sidebar to customize the header.

at the bottom of the screen the section where you can edit the header columns, you will see an option to select the ‘navigation menu’ settings and then, from the ‘design tab’ you can select the background color for the navigation menu.

Let me know if you need more help.