-
Posts
-
Hi there,
We love the theme and are redesigning our site for the second time with it. There are two questions we have that hopefully can be done. After looking in the forum, we were unable to find the answers or they no longer worked.We are using the grid on the home page to set up two cells with 1 column on left and 2 rows on the right. So far so good. The issue is that we want to use a gradient color overlay over the background column images. I have added the credentials to the private directory of our staging site below.
Questions:
1. Is it possible to make the grid with one cell on left that spans two cells on the right? That way, we can use the cells for the background image and then overlay a column with the gradient color we want. This would give so much more flexibility.
2. If this is not possible, how can we use psuedo class to get the background gradient color we want over the images and under the text. We want the color to fade into the left side.Thank you
Hey aerospec,
I’m not sure if understood properly what you’re trying to achieve but I think it is most likely possible with some css tweaks.
Can you give us a screenshot or a mockup of what you’re trying to achieve?Best regards,
NikkoHI Nikko,
I added the login/pw for the staging site so you could see. I added the link to dropbox with the screeshot below.Hi aerospec,
It kind of is possible, but might not look good on all screen sizes. You need to use grid row with 1/2 cells and set the background image, the other cell, will have 2 shorter elements in it. You need to play with the layout elements and work out the solution that will work for you.
Here are the docs for you
Best regards,
VictoriaHI,
If you look at the screenshot I sent or the staging site that I submitted the credentials, that is exactly what I already did.Let me rephrase my question:
The two elements on the right grid column need a black gradient color OVER the background image in them and UNDER the text, so it lies between like the one on the left side. I’ve tried a few css techniques, including this solution in your form: https://kriesi.at/support/topic/full-width-background-tint-color-for-a-single-1-2-column/ . I don’t know if it’s because my elements are in a grid rather than a color section, but it’s not working. There aren’t any plugins installed, so it’s not that. I know this can be done, but need a little guidance from those who know Enfold best.Is there any chance that @Ismael, @Mike, or @Nikko might have any css solutions for this that would work with the Enfold elements?
The two
@Victoria,
Sorry, I made an error. I didn’t put a background in the full grid column on the right with two elements. That is not what we want. What we want is what I have shared with the two different images inside the elements and a gradient over them. So no I didn’t do exactly what you had suggested, but I do have the columns and elements in place. Your solution is good, but not quite what we need.Hi aerospec,
Can you try adding this css code in Quick CSS, located in Enfold > General Styling:
#custom-grid .avia-builder-el-last .flex_column { overflow: hidden; position: relative; } #custom-grid .avia-builder-el-last .flex_column:before { visibility: visible !important; margin-left: -20px; background: -moz-linear-gradient(right, transparent 1%, #0a0a0a 100%); background: -webkit-linear-gradient(right, transparent 1%,#0a0a0a 100%); background: linear-gradient(to left, transparent 1%,#0a0a0a 100%); }Best regards,
NikkoHi Nikko,
It works perfectly except that the text block is under the gradient layer and the title and button are over. Z-index doesn’t work. At this point, I’ll just use the subheading for the text and call it a success. I knew you could do it. :)Thank you!
- You must be logged in to reply to this topic.