Search Results for 'COLUMNS'

[Caroline]

Caroline

#223328

I am using this shortcode in Elementor:
[portfolio_posts orderby=rand columns=3 items=6 ratio=square filter=”true” layoutstyle=flat-with-margins]

— when I hover over the portfolio images, they change to the accent color overlay but the portfolio title isn’t showing up – is there an option I need to set for the title to appear on hover? The images also have a 10px padding with white background around them – is there a layoutstyle that wouldn’t have the padding but still have margins?

Thanks!!

[Caroline]

Caroline

#223328

I am using this shortcode in Elementor:
[portfolio_posts orderby=rand columns=3 items=6 ratio=square filter=”true” layoutstyle=flat-with-margins]

— when I hover over the portfolio images, they change to the accent color overlay but the portfolio title isn’t showing up – is there an option I need to set for the title to appear on hover? The images also have a 10px padding with white background around them – is there a layoutstyle that wouldn’t have the padding but still have margins?

Thanks!!

[Kevin]

Kevin

#223326

Hello,

Just to clarify, neither of those sites are using a child theme, they are both configured within the constraints of the default theme. So you can accomplish this on any site with Ascend!

The blog area is configured using page builder in the home page content. It’s set to show 3 columns, each column containing a Ascend: Recent Posts Widget. Each column is set to show only posts of a certain category.

The call to action is also added in page builder, using a fullwidth row with one column.

Here’s more information on the page builder plugin:
https://www.kadencewp.com/using-page-builder/

Let me know if this is helpful!

-Kevin

[Hannah]

Hannah

#223279

Hi Caroline,
There isn’t a built-in function to set the number of columns for that widget. It will fit into the area that it is added. If you’re wanting more control I would recommend using a shortcode like this: [portfolio_posts orderby=date excerpt=false columns=4 items=16 height=200 lightbox=true showtypes=true cat=photos]
As for your second question, I will talk with the developer and be back with you soon!

Hannah

[Kevin]

Kevin

#223277

Hello,

1. The post grid element doesn’t have an option for columns. The columns are defined by the width of the container.

2. If you’re not seeing those options and are using the classic editor, make sure those sections are enabled in the screen options at the top of the page.

If using the block editor, you should see them in the main sidebar.

Let me know if that’s helpful!

-Kevin

[Caroline]

Caroline

#223273

I added a Pinnacle Post Grid widget through Elementor – I cannot figure out how to set the number of columns for the grid – there doesn’t seem to be an option. Is there somewhere I can set it?

[Caroline]

Caroline

#223273

I added a Pinnacle Post Grid widget through Elementor – I cannot figure out how to set the number of columns for the grid – there doesn’t seem to be an option. Is there somewhere I can set it?

[Ben Ritner]

Ben Ritner

#223130

Hey,

I don’t really suggest you make your content width unlimited like you have. It requires that massive photos be loaded in a grid where the width can be whatever screen size the viewer has. Plus on large screens like mine, it makes your images overwhelming in size and harder to navigate and scan the information.

I suggest you consider two alternatives.

One is to simply set a max width for your content, like it does by default but perhaps just make it a little larger for whatever max screen size you want to target.

Another solution is to increase the columns as the screen size gets larger. For example as soon as 270px wide doesn’t work you can use css to increase the columns from 4 to 5 and so on that way your grid just expands in columns instead of the individual columns needing to expand as you get on larger and larger screens.

That can be done with css.

However, I understand that you may want this style and this functionality for really large screens so to change the default way images output you can run some filters using a child theme that will affect the image sizes. Just let me know what size you want for the blog and staff and I can get you some function to add to your child theme.

Ben

[Kevin]

Kevin

#223105

You can increase the number of posts by adding this to the shortcode:
[testimonial_posts columns=1 content=full link=false items=21]

Adding pagination is a bit more complicated and will depend on how you’re wanting it to show. Do you want the content below to show on every page of your testimonials?

-Kevin

[Kevin]

Kevin

#223102

Here’s CSS that will make them show in 3 columns in mobile:

.footercol1, .footercol2, .footercol3 {
    width: 33%;
    float: left !important;
    clear: none;
}

I don’t recommend this though, as it hurts the responsiveness of your site and is a poor design.

-Kevin

[Kevin]

Kevin

#223087

Instead of selecting the testimonial grid template, add the testimonials with shortcode like this:
[testimonial_posts columns=1 content=full link=false]

Add the shortcode to a text editor, then add the content you want below the shortcode. Does that work for you?

-Kevin

[Kevin]

Kevin

#223066

Hello,

Adding this CSS to Theme Options> Advanced Settings should make the footer always 3 columns:

.footercol1, .footercol2, .footercol3 {
    width: 33%;
    float: left !important;
}

Let me know if that works for you.

-Kevin

[Ben Ritner]

Ben Ritner

#222865

Hello, the problem is that my browser always chooses the 270×270 image

You have chosen to set the content width for this page to fullwidth screen width, that makes it so the content can endlessly grow based on screen size. This is all the more reason to have larger images because on my screen your columns are 600px wide which means the minimum image size you need just to support this HD screen is 1200px.

Because of that ^^ you are using fullwidth, I am going to suggest you change to the shortcode, then you can set the width which will change your minimum size from 270 to whatever you set, I suggest 600.

Ben

[Jerry]

Jerry

#222771

Thanks Ben. Like I said, it’s ugly. The only use I think I could make of it is to have lists in columns 1 and 3 and keep the Sections above and below.

I do find it amazing that this capability is not available given all the variety of blocks in Elementor (including premium addons) and Gutenburg (including Ultimate Addons). I think you can do it with CSS but I try to keep my sites as custom CSS free as I can.

Thanks for your help. At least I know I am not missing something fundamental.

Jerry

[Ben Ritner]

Ben Ritner

#222769

Hey,
Thanks for posting!

I strongly advise that you upload images much larger than 423px. At least 1600×1600 but usually more like 2000×2000 is what I recommend.

The reason is that WordPress along with the theme can then create multiple sizes of your image from 270 there would also be 540 and so on. Then when outputting the image srcset is used to give the browser multiple options. This is powerful because then the browser can choose the best for the screen viewing. If the size of your container is 423px then for the majority of screens you need images at 846px because HD screens usually have twice the pixel density of standard screens.

In terms of image size, 270 is used because that is what makes sense for how the theme normally outputs a 4 column grid. The theme has a max content width of 1140. So 270 works nicely for standard screen sizes and then srcset is used to support HD screens.

You have chosen to set the content width for this page to fullwidth screen width, that makes it so the content can endlessly grow based on screen size. This is all the more reason to have larger images because on my screen your columns are 600px wide which means the minimum image size you need just to support this HD screen is 1200px.

To change the default output image sizes you can use a shortcode, so lets say you wanted your base portfolio image width to be 423 instead of 270. Then instead of using the portfolio grid page template set the page to a standard page and use this shortcode:

[portfolio_posts columns="4" width="423" height="none" items="12"]

I hope that helps clarify and gives you some options.

Ben

[Ben Ritner]

Ben Ritner

#222761

Hey,
Thanks for posting, you have it correct regardless of which pagebuilder you use to have text on both sides of an image you need to use columns.

I can’t say from a design perspective I would ever recommend this, especially if you somehow had text flowing around the image and didn’t make clear columns. That would be so confusing to try and read.

But perhaps your end goal is different in which case if you can send me an example I may be able to offer a solution.

Ben

[Jerry]

Jerry

#222749

I Want to share with you my clumsy attempt to wrap text around an image using Elementor and it is probably the same way with Gutenberg.

What I want to do is wrap text completely around an image. It is easy to shift an inserted image to the left or right and have the text wrap. The only way I can wrap text completely around an image is as below. Any ideas for improvement would be very welcome. Ideally there is a block I am unaware of that does this.

1. Add a Section with a single column and add text.

2. Add another Section this time with 3 columns.

3. In column 1 add text.

4. In column 2 add an image.

5. In column 3 add text.

6. Add another Section with a 1 column below that Section.

6. Add text to that section.

The final result is ugly but better than nothing. Not much though.

*Login to see link

Please let me know what you think.

Thanks,

Jerry

[Jerry]

Jerry

#222749

I Want to share with you my clumsy attempt to wrap text around an image using Elementor and it is probably the same way with Gutenberg.

What I want to do is wrap text completely around an image. It is easy to shift an inserted image to the left or right and have the text wrap. The only way I can wrap text completely around an image is as below. Any ideas for improvement would be very welcome. Ideally there is a block I am unaware of that does this.

1. Add a Section with a single column and add text.

2. Add another Section this time with 3 columns.

3. In column 1 add text.

4. In column 2 add an image.

5. In column 3 add text.

6. Add another Section with a 1 column below that Section.

6. Add text to that section.

The final result is ugly but better than nothing. Not much though.

*Login to see link

Please let me know what you think.

Thanks,

Jerry

[Hannah]

Hannah

#222644

You can do this using a shortcode rather than the staff template. Like this: [staff_posts orderby="date" items="4" filter="false" link="true" columns="5" height="200" limit_content="false"] You would just paste that into the content area of your page.

Hannah

[Alan]

Alan

#222578

We run Woocmmerce Website and want to create product lists from categories
for Example I see [recent_products per_page=”32″ columns=”4″]
How to generate this kind of short code?

[Alan]

Alan

#222578

We run Woocmmerce Website and want to create product lists from categories
for Example I see [recent_products per_page=”32″ columns=”4″]
How to generate this kind of short code?

[andrea.juelich]

andrea.juelich

#222446

Hi Hannah,

I played around with quite large image sizes, and of course an image with 2000px width would work up to screens with 4000px viewport (when used in 50% columns), but then there are those REALLY large screens above 4000-5000px …but I just read about responsive images and srcset and exchanging images for screen sizes…would you recommend this? Setting a differnet image for those really large screens?

[andrea.juelich]

andrea.juelich

#222388

Hey,

I have a question. I need to create fullwidth stretched rows with 2 cells/columns, basically like the split content module (an image on one side, text with a button on the other, reaching across the whole screen). My problem is that regardless of whether I use the split content shortcode or write my own code, I eitehr have the images cut off depending on the screen size if I use background-size:cover, or if I use background-size:contain there will be a white gap between the two cells at the point when the screen gets too large.

Do you have a tip or know how I can have both? Meaning: images are always displayed without getting cut off, but still they are always covering the whole cell?

Thanks!

[andrea.juelich]

andrea.juelich

#222388

Hey,

I have a question. I need to create fullwidth stretched rows with 2 cells/columns, basically like the split content module (an image on one side, text with a button on the other, reaching across the whole screen). My problem is that regardless of whether I use the split content shortcode or write my own code, I eitehr have the images cut off depending on the screen size if I use background-size:cover, or if I use background-size:contain there will be a white gap between the two cells at the point when the screen gets too large.

Do you have a tip or know how I can have both? Meaning: images are always displayed without getting cut off, but still they are always covering the whole cell?

Thanks!

[Milla]

Milla

#221956

Hi,

what´s wrong with *Login to see link on mobile?
Why it shows 2 columns instead of one on mobile?
Collapse behavior is standard ordered left on top.

– Milla

[Milla]

Milla

#221956

Hi,

what´s wrong with *Login to see link on mobile?
Why it shows 2 columns instead of one on mobile?
Collapse behavior is standard ordered left on top.

– Milla