-
Posts
-
Hello. On my page I’ve added two separate color sections (screenshot). I would like to move color section 1 into color section 2. Is this possible? When I try move color section 1 into color section 2, using drag-and-drop, no change occurs.
The motivation for my question is that I’d like to create a single section that looks like this: https://i.imgur.com/nGpBbf1.jpg In other words, one single full-width image, and underneath, a special header element, a text element, and a button element.
Thanks.
first : that is not possible.
second: Look here: https://webers-testseite.de/feedxl/
what is wrong on having it this way? in other words: what is the benefit of having the whole thing in one section.https://webers-testseite.de/feedxl-2/
it is possible to have more than one background on a container – all definitions are separated by commata:
see here a little tutorial: https://webers-testseite.de/multiple-background-images/
You have to have the horse as cutoff png file.
but you then have the problem on responsive case with the not growing half part at the bottom – so the text has no place to be in there – and it grows then to the top into the other half.
(on that example i have the custom-id of halbhalb (that is the german expression for halfhalf)
and that color-section got no padding!:#halbhalb { background-repeat: no-repeat; background-image: url(https://webers-testseite.de/wp-content/uploads/pferd.png), linear-gradient(#f2d7d0 50%, #fe6d6a 50% ); background-attachment: scroll; background-position: 50% top, center center; background-size: auto 50% , 100% 100%; } #halbhalb.avia-section.av-minimum-height .container .content { vertical-align: bottom; }So my advice is to use two color-sections. https://webers-testseite.de/feedxl/
>> what is wrong on having it this way? in other words: what is the benefit of having the whole thing in one section.
The benefit of having all content contained in a single element is that I can easily hide all content by assigning the element a custom id/class, then adding custom CSS like:
#my-custom-id { display: none; }I realize I can accomplish the same thing by assigning the same custom class to two different elements, and that may be my fall back. But the goal of this exercise is to train non-technical staff how to carry out this process in the future. So I’d like to keep this as simple as possible.
>> see here a little tutorial: https://webers-testseite.de/multiple-background-images/
>> You have to have the horse as cutoff png file.
>> but you then have the problem on responsive case with the not growing half part at the bottom – so the text has no place to be in there – and it grows then to the top into the other half.I see that, but as you mentioned, it is has issues at lower screen width, so I’m not sure it is viable.
Inside a color section, is it possible to add an element–perhaps an image element–that can display a full-width image? If so, might that be a viable approach? That way, inside a single color section I could display that full-width image, plus the header/text/button elements.
with this setup :
custom-ID of the color-section is: Pferd
see: https://webers-testseite.de/feedxl/
you can give to the 1/1 containers a fullwidth definition. – But in responsive Case the columns react normal and flow under each other.
if you have only 1/1 it will work.
The css for that example above (think to get rid or replace the custom-ID):.responsive #top #pferd .container { max-width: 100%; width: 100%; padding: 0; } .responsive body #pferd .column-top-margin { margin-top: 0; } .responsive #pferd .flex_column.av_one_full { height: 50% !important; } .responsive #top #wrap_all #pferd .flex_column { margin-bottom: 0 !important }OK thanks for that, but I don’t think I clearly explained my desired result. Earlier I showed you a screenshot of what I want on the front-end. I want to clarify that in that screenshot, the entire top panel is simply one single image. In other words, the horse, plus the “50% OFF” text, plus the “BE PART OF THE CHANGE” text are all actually just one single image–the image is baked in to the text. I don’t need to display a separate text box element for that content. So how does that change things? That makes things easier–correct? It sounds like I can insert a single 1/1 layout element into the color section, and insert the image into the element. Does that sound accurate? If so, what steps would I have to take (if any) to ensure that 1/1 layout element is full-width?
Thanks!
Unfortunately, many have a wrong idea of how responsive images ( background images ) work.
Either the image reacts to the screen width, then you can see it completely across all widths. For background images this would be the contain property. – Or you can specify fixed heights or width ( this is the cover variant), then the image will be cropped at different screen widths. Of course you can compress or stretch the image, but this is not advisable for a concrete image.Well you have enough variants now – I hope you find an acceptable solution. I would prefer the two color-section solution, and give both the same class.
OK I added a 1/1 layout element, and inside, added an image element. The image is 1900 px wide. But it does not stretch full screen (screenshots). Is there a way to ensure it displays full screen, at all screen widths, *without* adding custom CSS? i.e. does the page builder have any options to ensure this image stretches full width?
Hi,
You have to apply the background image to a full screen element such as the color section, grid row or the full width slider in order to make the image full width or stretch from end to end of the browser viewport. A column is a not a full width element. It inherits its width from the color section container, which is based on the value of the General Layout > Dimensions > Maximum container width option.
Best regards,
IsmaelOK. So in light of all that information, is it possible to create what I want? To re-iterate, here is what I want. I want to add a single element to my page. To that element, I want to:
* Assign the element a custom ID or custom class.
* Ensure the element contains three sections inside. All three sections are arranged in a column–one underneath the other.
* Section 1 is a full width image.
* Section 2 is a text element.
* Section 3 is an Avia page builder button element.
* Here is a screenshot of how all three elements would look like on the front-end: https://imgur.com/nGpBbf1
* All three elements should be responsive, e.g. all three sections remain in a single column, with no overlap, at all screen widths.
* All the above is done without editing General Layout > Dimensions > Maximum container width. My site is already built, and has been online for several years. It sounds like editing this option will cause major changes throughout my site.
* All of the above is done without custom CSS.Using the Avia page builder, is this possible? If yes, exactly how would I do that?
Thanks.
Hi,
* Here is a screenshot of how all three elements would look like on the front-end: https://imgur.com/nGpBbf1
Add two color sections. In the first one, apply the background image and put the text and button in the other. Unfortunately, you won’t be able to accomplish this using a single element. It might be possible with a grid row with a single single cell and an image element but we haven’t tried it.
Best regards,
Ismael>> Add two color sections. In the first one, apply the background image and put the text and button in the other.
That doesn’t meet my requirements–two separate sections is the one and only reason for this ticket. So I’m not sure why you’re instructing me to do this. I appreciate your help. But it’s a bit confusing, and slows things down, when you give such advice.
>> Unfortunately, you won’t be able to accomplish this using a single element.
This reply is much more helpful–it clearly and directly answers my question :-)
>> It might be possible with a grid row with a single single cell and an image element but we haven’t tried it.
OK thanks. Maybe I’ll try that myself, if I have time.
We can consider this resolved.
- The topic ‘Can I move one color section into another?’ is closed to new replies.