[Marius1989]

Thanks for your feedback, @Kosmas.

Yeah, I know about the mentioned approach and wouldn’t mind about that and so many other things about I claimed here.
The thing is, I generally have to make client’s life as easy and convenient as possible, so some things won’t be an option for me unfortunately, although they are pretty easy to achieve.

To be fair, this time, I consider using Impeka for a personal project so it wouldn’t matter that much.
Still, I just recognized there isn’t a backdrop/overlay for the side area and sliding area yet, which is a real problem for me. I think there even was a dedicated thread about it here, not sure.

Loved the side area in Movedo and used it in almost every project. With Impeka, I didn’t had the opportunity to use it once to due the mentioned things.

Looking forward to the new release tomorrow 🙂

[Marius1989]

Still no option to use area items to place it inside the side area?

[Marius1989]

The Demo is “Impeka Main”.
You can find what you are looking for under “Pages”.
The page which was requested by @zainal is called “Elements”.

[Marius1989]

1.) You can change the timings inside the code, there are no options available for that in the WP backend. Check the main.js, starting on line 1861. Please consider using a child theme and avoid touching the original code.

2.) You can change them with custom CSS. These are the classes you want to target:
– #grve-intro.grve-style-1 .grve-first-title
– #grve-intro.grve-style-1 .grve-second-title

3.) You can change the color inside the WP customizer, where you also can change all other colors, please find “Theme Intro”.

Hope that helps.

[Marius1989]

Yeah I used the column BG for a better visual understanding but there won’t be any difference in their behaviour on different screen sizes.
Of course, the columns wont break anything, but the custom row BG won’t adjust automatically when columns switch their widths.

View post on imgur.com

Good to see, people are getting more into CSS, since it is really powerful if you want to make some minor adjustments inside your theme.

[Marius1989]

I guess there are no limits regarding gradient color steps.
I would recommend you to check some visual gradient CSS generators like: cssgradient.io

View post on imgur.com

.bgtrick {
background: linear-gradient(90deg, rgba(219,219,219,1) 0%, rgba(219,219,219,1) 50%, rgba(255,0,0,1) 50%, rgba(0,39,255,1) 100%);
}

PS: Do not forget to adjust your CSS for all breakpoints, since it will break things as soon as inner columns adjust their set width.

[Marius1989]

Really nice approach. This is exactly what I prepared for you.

View post on imgur.com

For community members who might also be curious about this. You need to add the “bgtrick” class to the Row’s extra class name.

• This reply was modified 2 years, 11 months ago by Marius1989.

[Marius1989]

The reason for that is simple. The expanded background is calculated with JS, which obviously is loaded at the very last of the site, right before the body tag closes.
The actual background is set in CSS, which is loaded inside the head, so it will always render first.

It’s not a browser issue, it’s just a technical thing.
So how long is the delay between the initial BG and the expansion? This depends on your hosting, your page optimization, the actual page size, HTML DOM, etc.
The only workaround I have in mind, this feature should only be used for areas which are not visible on pageload (so not within the first 100vh).
You could also consider other solutions, like using page transitions, a page intro, etc.
If you really need this on the starting screen on a particual page, I would recommend you to solve this with custom CSS.

Other opinions and technical point of views are always appreciated.

[Marius1989]

You can pretty easily tweak the Safe Button animation if you are familiar with GSAP.

In addition, I think it would be a really easy task to close a Modal on ESC or overlay click with a couple of lines jQuery, you should try that.
I guess the modal has some deeper integration into the theme so the actual modal plugin options won’t work here.

There is a close on ESC reference inside the main.js, maybe someone of the team can elaborate for you.
I agree, it is not a great UX decision, to have these 2 options not implemented as default.

[Marius1989]

Might be a GSAP issue.
There are a couple of scrolling issues regarding this. I already mentioned something here regarding the safe button but since I got turned down, I didn’t report about the other stuff.
Can’t confirm since I don’t have an iPad right now to check.

But let me add, on Firefox, the modal closing icon doesn’t render correctly.
On desktop, it just doesn’t show at all. On mobile, there are some sizing issues (not consistently).
Maybe someone can confirm.

[Marius1989]

Glad it worked, Bernhard.
Always open to help out regarding very minor things if I have the time.

Cheers!

[Marius1989]

I actually quickly set it up for demo purposes but apparently I don’t have it anymore.
If you don’t have any idea where to start, you can find a lot of examples at codepen, etc.
This would be my recommendation for you in this case.

[Marius1989]

Please give your title a custom class inside the title element (and replace it with the “custom-class” you will find in the code below). You can find it at the very bottom.

This is your code, feel free to adjust it to your needs:

.grve-title.custom-class::after,
.grve-title.custom-class span::after {
content: ”;
display: block;
position: absolute;
width: 100%;
bottom: -15px;
height: 3px;
}

.grve-title.custom-class::after {
background-color: #efefef;
}

.grve-title.custom-class span::after {
background-color: #ffb44c;
z-index: 1;
}

.grve-title.custom-class span {
position: relative; /*makes sure the colored line fits the titles width*/
}

[Marius1989]

Since there is not even a reply on this for a month and in case you still need this option @DanielPerry, just let me know and I will gladly try to help you out and share some custom code for you.

[Marius1989]

Should be pretty easy to achieve via little CSS. But always hard to tell or help without any live demo.
Cheers!

[Author]

Replies