Lay Theme Forum

Just define the hr sytle in the settings and set up rows in the gridder.
Page should have no (left & right) frame to make the lines go border to border of the viewport.
Add Project-Thumnail in the first column of each gridder-row and the text afterwords.

These steps should bring you pretty close. Rest ist fine-tuning and perhaps a wee bit of custom css – something like overflow-hidden etc. ‹— just guessing, here.

When it works it works!!
Glad it does 💐💐💐

How about a different approach:

You write on Tumblr, Medium or the like (and get the benefits of a community) and then add the Post-Excerpts via RSS to a Page on your Website.

We might need a good RSS functionality though. But I think that’s the cooler way todo things.

What do you think?

Just add a link with either #layprevproject or #laynextproject on an element (text, image).
You could also setup a footer that utilises the tags mentioned above and add that footer to your projects → you can do so in the Lay Options / Footers.

Hope that helps!

Well you surely could solve that with some code.
As far as I can see the example page is completely code based with CSS animations. The left part are two simple layouts that switch at the same time as the right part is loading a new image (via jquery?) that is panning from left to right. The logo is just spinning continously.

Your given example sounds more like a video-based solution to me. The easiest way would be a video with all the desired flashing, split-screen and stuff with final cut, premiere, after effects or any toolset you feel comfortable with and then:

Option #1
Place that video as background in a row (use browser height for row height) on a new page. This will ensure the video is always full screen.

Then you could make a transparent button (you can use the documentation as a starting point) and place it over the video an link that button to you work overview (or any other page you’d like)

You can make every page your front page in the customizer / front page settings:

Option #2
Just use the Intro Feature in the Customizer.
But this will not trigger the Video again when you click the logo. The intro only will be shown once every time you visit the front page.

But of course a truly code based solution would be more sophisticated. If you know some CSS and know how keyframes work you could dive deep into these topics. It’s not that hard to understand, but may take some time to make things work the way you want.
Here you find some basic info about the animation properties: CSS3 Animation Properties
And here are some examples how to go about certain animations: Animations in CSS

Hope that helps.

@paul_moxie to make your code valid you need a semicolon after 1px in your css:

.line {
stroke-width: 1px;
}

On the other hand I'm not quite sure if stroke-width will work at all for an hr-element. I’d try something along these lines:

.my-hr .lay-hr {
height: 1px;
}

Then add the class my-hr (call it whatever you fancy) to the hr-elements in the gridder. Unfortunately I can’t really explain why the lay-hr class needs to be there – But it needs to be – It’s something about that CSS-parent-child-thing I never really wrapped my head around.

Hope that helps!

@arminunruh I made a quick sketch. Would be 𝖈𝖔𝖔𝖑 to add an extra column for the featured images of projects, like so:

True… this should be a future-feature, I guess.

For now you could hide ›Cart‹ via page/slug specific CSS, which is well documented over here.

So I guess this is solved, isn’t it?

Would you mind editing the topic title to png background not transparent (solved!) or smeothing similar? This way users (with the same issues) can utilise the search function of the forum more easily.

Thanks! 💐

@fabiandraxl Just to make sure: did you activate the overlay feature in Lay Options?

And also activated the option for the page you’d like to use as the overlay? (in the sidebar to the right, while editing the page)

@arminunruh another thing I think would be helpful is to have an option that hides/closes the overlay when clicking/tapping (also scrolling) the background of the overlay.

Would that be an option?

Hi there @arminunruh !

I love the new overlay feature, and been digging through the forum to find a way to control the transparency of the overlay-background. I found something over here 🙏 (I think this should be implemented as a setting for overlays, though)

What I couldn’t find is an answer to this question:
Is it possible to trigger an overlay via page visit? (like an intro but better b/c page specific) e.g. by adding a #overlay-page-name to the url?

That would be killer!

Same here!

I ❤️🧡💛💚💙💜 the new feature a lot! I also tried to target the hover-state type color via CSS, which seems to be a bit tricky.
In generally think it would be super 𝖈𝖔𝖔𝖑 if the hover state would get a few more options, like font color.
Some simple options to add a hover-state to the filter/header elements of the index could also be helpful in terms of good UX.

(push) Anyone?

I’d say »yes, You could just built yourself a footer/page for that.«

Hey! You need to write some custom CSS for that; something along these lines:

#footer-region a {
    color: #FF0000;
}

#footer-region a:hover {
    color: #00FFFF;
}

Cheers! 💐

An Element Grid could also do the trick.

You just need to apply the name of the class you defined in custom CSS e.g. fixed-thing.

Do you have the fullscreen slider plugin installed?
If so → check your settings 😉

Yes!!

You just need to add some custom CSS to target the links. In your example they’re using a filter – Something along these lines might work:

a {
    color: #ff0000;
    transition: ease-in-out 0.2s;
}

a:hover {
    color: #ff0000;
     -webkit-filter: blur(3px); /* Safari */
    filter: blur(3px);
    transition: ease-in-out 0.2s;
}