Image with text

Support
#1

WordPress: v4.8.4
Pro: v1.2.7

I need a Column + Image + text layer on top. All responsive.

Just like the 4 squares on this site:

#2

Hi There,

To create the layout you have showed above, you should add a row to your section.

Click Inspect the ROW: Turn On Marginless Columns.

Divide the Row in two columns.

Add a different background to each column.

Add your elements, classic custom headline, text, button, image.

You also can use a background image instead of a image element as you prefer.

Duplicate the row.

Hope it helps

#3

Thanks,

  • Apparently, the best way, is adding the image to the background to each column of the row.

    This allows me to add the Headline / Text / Button ELEMENTS above the Image Background, as I have NOT found the way to set a, Classic Image ELEMENT or Image ELEMENT below Headline / Text / Button ELEMENTS.

  • How can I control the height of the columns? As I need to have a perfect square, and now I’m getting a rectangle.

#4

Hi there,

You can set a maximum height to the column by going to the customize option of the column settings and adding max-height: 200px; to the inline CSS field.

Hope this helps.

#5

Thanks, but it did not work,

It seems that is to set the max limit, but I need to force the column to a set height.
That way I have a persistence square.

I try these two inline css:
max-height: 600px;
max-height: 600px

#6

I think, I got it, please confirm this is the right css code: height: 600px;

Also, How do I force the column maintain the same aspect ratio, as I need it to always be a square 1:1

Recap:

  • Add a row to Section.

  • Click Inspect the ROW: Turn ON Marginless Columns.

  • Divide the Row in two columns.

  • Set the column hight on the COLUMN CUSTOMIZE/Inline CSS as: height: 600px;

  • Add a Background Image to each column.

  • Add your elements: Classic Custom Headline, Text, Button.

#7

Hi There,

If you need to maintain the aspect ratio to 1:1, height: 600px; does not gonna work for all screen sizes.

Please add this to Theme Options > CSS instead.

@media (min-width: 768px) {
	.one-one {
		height: 50vw;
	}
}
@media (max-width: 767px) {
	.one-one {
		height: 100vw;
	}
}

And apply the CLASS one-one to the columns.

Hope it helps,
Cheers!

#8

Thanks, but unfortunately it didn’t work.

#9

Hi There,

You also can play with:

  • Padding

You also can add a gap elements.

Hope it helps

#10

Still NOT working.
A)

  • The column needs to remain square at all times.
  • Background image should scale-up or down as you resize, maintaining a 1:1 Aspect Ratio at all times.

B)

  • I need to remove the side Margins, at each side of the ROW, as these are visible at all times.
    For that I use the Utility Classes man (Margin All Non) in the ROW / CUSTOMIZE / Class.
  • Now, I need to center the ROW, so my columns are also centered at all times.

http://mydomain.com/test-image-text/

https://www.hass_______.com

#11

Hi there,

You’ll have to do a long and complex customization in order to do that. Responsive contents while maintaining aspect ratio, which of course needs responsive offset position. All of that is already available in The Grid, or Essential Grid, or Rev Slider plugin. I recommend using those plugins instead of creating your own responsive structures.

This isn’t a simple one, we could provide simply CSS for now but there is no guarantee it will work next time, on next device, or on other views. And we can’t continue providing further enhancement.

Thanks for understanding.

#12

I’m trying to stay away from plug-in, and potentially quit using some of them, specially the ones you mentioned.

As it jeopardizes the website performance. We all know this.

Please advise if you have a solution for the column alignment on B)

#13

Hi there,

For the row margin, please inspect your section row and turn off the Inner container option. It’s not a margin, but inner container which inherits the layout 88% width.

You don’t need to center it, turning off inner container will make fill the entire row.

Thanks!

#14

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