I tried to design a 3 columns setup. Inside each column i need
Image
Headline
Text
Button
A few questions.
How can I make each image the same height and length inside the different columns
How can I make the space between the Headline and the image smaller. When I put a headline under my image I get too much empty space between them.
Bug:
When I change the Headline to for example h5 in the Setup pane nothing changes. I need to go to edit text > T rich text > change to h5 to see the effect.
Not all columns have the same text. Some are longer. Can I get an excerpt or is this only possible with a blog
Since each text had a different length I would like to align all buttons on the same position. How can I do that?
Thanks for providing the details. It would be best though that we also know what end result you need so we could recommend the best approach. Right now, I believe you’re wanted some kind of post grid display in which case it would be best to use one of the bundled grid plugins instead as they allow the creation of custom skins and a skin applies to all items in the grid so the setup is much easier. For more details, please check the links below.
If you don’t want to use a grid plugin, here are my answers to your questions.
If you’re using an Image element, this is not possible. It’s best that you upload images with the same height. Edit the image in an image editing program instead. This is also best for performance.
Even if you managed achieve this using column image background, I’d still recommend uploading an optimized image because you’ll be sacrificing page load time which is essential for SEO. Using the column image background also is a big complex as this would require nested columns.
This sounds like you’re using a h tag like h5 inside a headline element like the screenshot below. Notice that the left column in the screenshot has a gap and the right column does not. This leads us to your next concern.
Don’t use the Rich Text editor if you’re using the Headline element. Switch to the HTML editor and remove the HTML tags.
Then, use the Headline element’s Margin options to space the headline relative to its surroundings.
I believe you’re wanting a text clipping feature. Regretfully, this is not available and yes, this type of user interface is mostly for blog excerpts only. This is why I recommended using one of the grid plugins.
Please watch the tutorial below.
If you have time, I’d also recommend watching more tutorials in our Youtube Channel. If you wish to receive a notification if there’s a new video, you can subscribe to our channel and click on the bell icon beside the subscribe button.
Thank you for the tip for the grid plugins. But for now I just want to build 3 columns.
Is there a tool you can recommend for changing the aspect ratio for the images? And where in Wordpress or Pro can I see the Aspect Ratio of used images?
For the Headline element. How can I make the text bigger and stay under the image like you screenshot of the right column?
The video tuturial about the bottom align elements within columns is very clear. Thank you. Good that your Youtube channel is back to life with good tutorials.
Is it possible to align paragraphs with al 3 columns?
Please upload those said images with the same size, use an image editor application (e.g. Photoshop) to resize or crop the image so they will have the same size.
No, Aspect Ratio is the proportional relationship between the width and height of an image, basically, if you want a square oriented image, then have an image with an aspect ratio of 4:3, if you want it to be like widescreen oriented have an image with 16:9 ratio. More details about the Aspect Ratio on the following link.
Please use the Headline element and Image element, do not hardcode anything inside it like <h5> tag. Just use all the Styling and Formatting options available on the Headline element. If you do not see these options on your end, please enable the Advance Mode.
You can even enable the Graphics setup option of the Headline element and have the image set up in it.
Balance every content on your 3 columns (Image height, Headline length, Text length, button height, etc.) and your columns will be aligned.
