Support » Plugin: Elementor Website Builder » Text overlay limitation

  • There appears to be no way to get an image to display in full (not cropped), scaling to the width of the window, with overlaid text centered vertically over the image.

    Here’s an example of a website that does this successfully (presumably without Elementor.) See the “Telling the Full History” text over the image and how the text stays centered and the full image resizes as you resize the window. https://savingplaces.org/

    This is a basic layout that Elementor should be able to do easily. Is it something the developers overlooked, or am I missing something?

Viewing 13 replies - 1 through 13 (of 13 total)
  • What template are you using? OceanWP does this.
    tiger721.com

    Edit Section
    Layout – Stretch section
    No Gaps
    Height – fit to screen
    Column Position – Middle

    • This reply was modified 3 years, 9 months ago by LesTexas60.
    Thread Starter strengthpicker

    (@randomengineer)

    It seems that what’s missing is a something like a section-layout height option for “background image height”. The problem I see is that I think it would then make most of the background image options nonsensical.

    Thread Starter strengthpicker

    (@randomengineer)

    LesTexas, height: “fit to screen” doesn’t accomplish this. It instead only shows the single section/image on the screen vertically and fills the remainder of the screen with whitespace until the next section. Or is there something I’m missing?

    Here is a youtube that explains it:

    Not sure what you mean “it would then make most of the background image options nonsensical.” Say you add a text widget and then set the background to your image, you can add as many blank text lines to make your image height increase. Then you add another Text widget below that and add another image background there. If there are gaps you want to get rid of, just adjust the margins.
    Look at tiger721.com again. I added 2 additional images over the original.

    The original glass is the section background and then another glass and lace are widget backgrounds.

    • This reply was modified 3 years, 9 months ago by LesTexas60.
    Thread Starter strengthpicker

    (@randomengineer)

    LesTexas, I very much appreciate the attempt to help, but I think you’ve missed the problem. tiger721.com doesn’t demonstrate a successful implementation of this feature. As you grow and shrink the window (horizontally,) your image doesn’t scale to the window width. Instead the image is cropped. If you try this at savingplaces.org, it behaves as expected.

    When you say Grow and Shrink, do you mean use the browser Zoom function Ctrl + and -?
    If so I see what you mean when you get under 90 %. I just found a similar issue with my header menu and the zoom function. The menu is very dynamic.

    Thread Starter strengthpicker

    (@randomengineer)

    No, I mean when you change the size of your browser window (particularly horizontally,) the image I’m talking about correctly scales to the window width as opposed to being cropped on the sides, padded with whitespace on the sides, or repeated horizontally.

    Thread Starter strengthpicker

    (@randomengineer)

    Here’s an example from the latest version of their website savingplaces.org. See how the image remains uncropped as I narrow the window width?

    Thank your clarifying, there are so many ways to interpret a description. I see what you mean now. You have peaked my curiosity. I have found there is usually a way to do most anything, you just have to keep looking until you find the right settings. I’m looking forward to trying the new Elementor version, it’s supposed to provide easier access to the settings. I would think someone would know the answer to this one.

    I just tried this using Chrome and FireFox & Edge. Edge cropped at 1/3 the screen, Chrome cropped at just under half and FireFox at half. This was looking at the same site you displayed. I’m using Win 10 with the most current versions of browsers.
    Looking at your pictures, you only went down to half the image so it did still work. This does work with the size as “cover” but in my test and on your sample page the top of the image is truncated as the width lessens.

    • This reply was modified 3 years, 9 months ago by LesTexas60.
    • This reply was modified 3 years, 9 months ago by LesTexas60.
    Thread Starter strengthpicker

    (@randomengineer)

    @lestexas60, yes the image does “crop” when you resize smaller. That is a conscious design choice by the skilled web designers at savingplaces.org. When the user goes to tablet or phone-sized widths, the image changes to a differently cropped version of the photo, which then scales just as the larger crop scales. I was didn’t mention it because it’s not relevant to the discussion.

    I will continue shopping for more robust page builders. I expect Guttenberg should be able to handle this task.

    yes the image does “crop” when you resize smaller. That is a conscious design choice by the skilled web designers at savingplaces.org. When the user goes to tablet or phone-sized widths, the image changes to a differently cropped version of the photo, which then scales just as the larger crop scales. I was didn’t mention it because it’s not relevant to the discussion.

    You can do this with Elementor as well, by using the responsive options.
    Create 3 scaled images and upload them.
    Create 3 sections with those images in each dimension.

    Edit each section and hide it in for example desktop or ablet etc accordingly.
    That way the scaled images will only show on tablet, mobile etc and show the correct scaled image per device.

    Thread Starter strengthpicker

    (@randomengineer)

    @logologics thanks also for trying to help. What it appears you’ve done is create a full-screen section (see the fourth comment from above.)

    LesTexas, height: “fit to screen” doesn’t accomplish this. It instead only shows the single section/image on the screen vertically and fills the remainder of the screen with whitespace until the next section.

    Re: the purposeful “crop” for smaller screens, as I said, that’s not relevant to the limitation in Elementor. This post isn’t about different layouts for different screen sizes, which I’m already aware of. At this point, it’s apparent that the inability to scale an image with text overlay without fitting to screen is a serious deficiency in Elementor.

    im new here but i dont think this is possible. i would love the option to add content and layers over an image element as well. maybe i can via query id?

    your link uses flexbox. you can add this feature with some custom css i suppose

    • This reply was modified 3 years, 9 months ago by ruven.
    • This reply was modified 3 years, 9 months ago by ruven.
    • This reply was modified 3 years, 9 months ago by ruven.
Viewing 13 replies - 1 through 13 (of 13 total)
  • The topic ‘Text overlay limitation’ is closed to new replies.