I have a question about the design of my first page wich is important to me.
Is there any option to place some text on a (static) large image? It does not have to be with any animation gimmick, just a static image on which I can arrange a headline and a teaser text?
Maybe this is also possible with the Slide revolution 6? I tried to buildt with it but I do not manage to display the image in full width.
I would be so great if you coukd give me some advice how to proceed!
Thank you so much in advance and best regards Bettina
There are many ways to achieve that, if you want to have a slider such as in our demos you can use Slider Revolution for more options and animations, if you plan on using a simple image with text above it then we recommend you just add the image as a background image using WPBakery Page Builder, here you can find out some tutorials to set a background image to a row:
I just tried with the backround image option. The first problem that appears is, that the backend looks different as in the tutorials and gives me (apparently) less options. I send you a sceenshot attached. (I´m sorry, it´s in German, I hope you can understand it though.) Nevertheless at least I managed to place the image as backround.
But I have two issues and am kindly asking you for further support:
1. As you can see in the second sceenshot, the uploaded image is "cut" to a certain height - the screen displays only a a horizontal stripe of the image. Is it possible to make an adjustment in the way that the whole image height is displayed? That would be great!
2. Concerns the positioning of the text. As the "row" which contains the backround image is adjusted to be displayed over the full width of the screen, how can I give the information that the text (in the row) should (contrastin) be displayed in "Standard width"? I would like to place it in the same horizontal line with the (text)logo in the header..
It would be super kind if you could help me with these two problems!! Thank you very much in advance and kind regards jenny
hi Art, I think I managed to solve my issues. I´m not 100% sure yet, but I will get back to you if a have another question. For now it seems to be okay :)
I do actually not manage to solve the following detail: The text elements that now are on the first page with the backround image below do move in a bad way in some responsive "sizes". The text and the headline "disappear" behind the header (text-logo and menu) as you can see in the attached screenshots. Is there any option to "fix" the text elements it the way that they do always stay below the header? Maybe I have to add some additional custom css code or do the laborator theme options provide a solution?
Looking very forward to your response! Thanks a lot and best regards Bettina
Can you please share your site credentials here, because we need to login to your site and see this issue live. Your information is safe (private) in this thread.
To include your credentials click Insert Credentials button in the editor toolbar. (See how)
I am super sorry, I have to get back to you again regarding this issue. I had been trying around with the padding and margin values of the column as well as of the text blocks in order to achieve the best position of the textblock as well as the headline of the start page. Now (after your advice) I have removed all these paddings and margins.
The text still - in some display-settings - does disappear behind the header row (you can see that in the little videos I try to attach).
My first question is: is it possible to avoid this?
My second question is: if I want to change the positon of the text - I actually would like to bring it a little more up/higher (headline and text) on the page. The only way for me to do that is with a - "minus" margin value. But if I do this I also affect the behaviour of the text again (it then again dissappears behind the header).
Do you have any idea how to get off this 'dilemma'? I would be very very thankful for your support!
I also have another issue regarding the display of backround image, but I will do a separate post for this. I´m so sorry to ask so many questions, but I think if I solve these two issues I will be fine ;)
my other issue concerns the backround picture on the first/start page.
The original size/format of the picture I want to display there has a "normal" photo side relation - means it has (unfortunately) not a landscape format.
Nevertheless I would like to show the whole picture at this point and not cut away something from the bottom or the top (It is - content-related - important the you can really see that the kids are jumping in the air).
But when the browser window is not very big, the programming of box of thecbackround picture automatically cuts the picture at the bottom and at the top. (see screenshot attached). Could you kindly give me another support with this and check if/how to ensure that the height of the whole picture can be displayed in all cases / on all devices? The original height of the picture is 1551 px.
Thank you so much for your support, Art - i really apreciate this a lot! Kindest regards, Bettina
1. Since you have the "Absolute header" on you will always have these kind of "issues", there is no way you can avoid this unless you use a relative header type instead of the absolute header or make sure the opacity of your sticky header is not that low that the logo text gets mixed with the background and thus it not clearly visible.
This will show space above and below the image but this is the only way to show the whole height of the image, otherwise the image will automatically try to proportionally cover the background which is most commonly used.
Dear Laborator Team,
I have a question about the design of my first page wich is important to me.
Is there any option to place some text on a (static) large image?
It does not have to be with any animation gimmick, just a static image on which I can arrange a headline and a teaser text?
Maybe this is also possible with the Slide revolution 6?
I tried to buildt with it but I do not manage to display the image in full width.
I would be so great if you coukd give me some advice how to proceed!
Thank you so much in advance
and best regards
Bettina
Hi Bettina,
There are many ways to achieve that, if you want to have a slider such as in our demos you can use Slider Revolution for more options and animations, if you plan on using a simple image with text above it then we recommend you just add the image as a background image using WPBakery Page Builder, here you can find out some tutorials to set a background image to a row:
https://wpbakery.com/video-academy/category/background/
Best regards,
Laborator Team
Dear Art,
I just tried with the backround image option. The first problem that appears is, that the backend looks different as in the tutorials and gives me (apparently) less options. I send you a sceenshot attached.
(I´m sorry, it´s in German, I hope you can understand it though.)
Nevertheless at least I managed to place the image as backround.
But I have two issues and am kindly asking you for further support:
1. As you can see in the second sceenshot, the uploaded image is "cut" to a certain height - the screen displays only a a horizontal stripe of the image. Is it possible to make an adjustment in the way that the whole image height is displayed? That would be great!
2. Concerns the positioning of the text.
As the "row" which contains the backround image is adjusted to be displayed over the full width of the screen, how can I give the information that the text (in the row) should (contrastin) be displayed in "Standard width"?
I would like to place it in the same horizontal line with the (text)logo in the header..
It would be super kind if you could help me with these two problems!!
Thank you very much in advance
and kind regards
jenny
hi Art,
I think I managed to solve my issues.
I´m not 100% sure yet, but I will get back to you if a have another question.
For now it seems to be okay :)
Thanks a lot
and best regards
Bettina
Happy to hear that Bettina, if you haver further questions or issue kindly create a new ticket.
Have a great day
Best regards,
Laborator Team
Dear Art,
I do actually not manage to solve the following detail:
The text elements that now are on the first page with the backround image below do move in a bad way in some responsive "sizes".
The text and the headline "disappear" behind the header (text-logo and menu) as you can see in the attached screenshots.
Is there any option to "fix" the text elements it the way that they do always stay below the header?
Maybe I have to add some additional custom css code or do the laborator theme options provide a solution?
Looking very forward to your response!
Thanks a lot and best regards
Bettina
Hi Bettina,
Can you please share your site credentials here, because we need to login to your site and see this issue live. Your information is safe (private) in this thread.
To include your credentials click Insert Credentials button in the editor toolbar. (See how)
Best regards,
Laborator Team
Dear Art,
I´m sorry for the late answer, I was not on my desk..
Of course I will share my login data with you.
Please use the user name: Jenny Brakel
And the password: EmmaundFanny2021
So glad that you will support me to find a solution!
Thanks a lot and kind regards
Bettina
Hi Bettina,
There was a -170px value in the column of your homepage which was causing this, I have removed it and now it does not mix with the logo:
(view large version)
Best regards,
Laborator Team
Dear Art,
thanks a lot for your kind support.
I am super sorry, I have to get back to you again regarding this issue.
I had been trying around with the padding and margin values of the column as well as of the text blocks in order to achieve the best position of the textblock as well as the headline of the start page.
Now (after your advice) I have removed all these paddings and margins.
The text still - in some display-settings - does disappear behind the header row (you can see that in the little videos I try to attach).
My first question is: is it possible to avoid this?
My second question is: if I want to change the positon of the text - I actually would like to bring it a little more up/higher (headline and text) on the page. The only way for me to do that is with a - "minus" margin value.
But if I do this I also affect the behaviour of the text again (it then again dissappears behind the header).
Do you have any idea how to get off this 'dilemma'?
I would be very very thankful for your support!
I also have another issue regarding the display of backround image, but I will do a separate post for this.
I´m so sorry to ask so many questions, but I think if I solve these two issues I will be fine ;)
thanks a lot! and have a nice day :)
Bettina
Dear Art again,
my other issue concerns the backround picture on the first/start page.
The original size/format of the picture I want to display there has a "normal" photo side relation - means it has (unfortunately) not a landscape format.
Nevertheless I would like to show the whole picture at this point and not cut away something from the bottom or the top (It is - content-related - important the you can really see that the kids are jumping in the air).
But when the browser window is not very big, the programming of box of thecbackround picture automatically cuts the picture at the bottom and at the top. (see screenshot attached).
Could you kindly give me another support with this and check if/how to ensure that the height of the whole picture can be displayed in all cases / on all devices?
The original height of the picture is 1551 px.
Thank you so much for your support, Art - i really apreciate this a lot!
Kindest regards, Bettina
Hi Bettina,
1. Since you have the "Absolute header" on you will always have these kind of "issues", there is no way you can avoid this unless you use a relative header type instead of the absolute header or make sure the opacity of your sticky header is not that low that the logo text gets mixed with the background and thus it not clearly visible.
(view large version)
2. The only way to show the full height of the image always is to set this option on that row:
(view large version)
This will show space above and below the image but this is the only way to show the whole height of the image, otherwise the image will automatically try to proportionally cover the background which is most commonly used.
Best regards,
Laborator Team