Advice on creating a webpage to match Framer styling

annaciric1 · August 27

Hi, I would like to create a similar webpage to this Framer example: https://whenevr.framer.website/?via=hxmzaehsan but I have no idea where to start. Is there a demo that's close to it with rounded buttons, scrolling logo bars, rounded image corners, etc. I'd like to recreate this with your direction and curious if there are any limitations I should be aware of? Thank you!

Phil · August 28

Hi,

A similar demo would be this one: https://themes.muffingroup.com/be/agency8/

There are some limitations that you will not be able to achieve with Betheme features, like moving people's images in a circle:

But most of the features from that example website can be done.

If you point out particular ones you want to have that are not present on the Agency8 demo, please tell me, and I will let you know if they can be done and how.

Best regards

annaciric1 · August 28

Screenshot 2025-08-28 at 4.11.11 PM.png

Okay great! I've been playing around with it and I'd love your help with these things:

How to make the website page margins bigger on the left and right side like the Whenevr example? (see screenshot showing red lines where i'd like the page margins to be)
How to make the nav bar blur only the top 50% and fade to transparent on the bottom 50%? I was only able to get it to blur the entire nav bar but not sure how to match it how the Whenevr nav bar is. (see screenshot showing how the nar bar blur looks currently with the full blur)
How to change the nav bar tabs into a rounded "menu" button, instead?
How to make scrolling text or logo bars?
How to change the color of the entire website background?

Phil · August 29

1) Adjust the Site width in Betheme -> Theme options -> Global -> General:

2) If you attach a link to your website, I can prepare a little CSS that will do the job. But you must have blur assigned to your header.

3) Edit the Menu element in the header template, and under the Style tab, set background color for menu items, gap, and border radius.

4) Use the Query Loop for that.

See the following video tutorials:

https://www.youtube.com/watch?v=maE0FuFIhjQ&list=PLyfUqkbtW2kxq8AY0SivMxX7kf2H9Y-Wf

5) You can change that in Betheme -> Theme options -> Colors -> General:

Best regards

annaciric1 · September 3

Thank you! I've gotten it to this point, here's the URL: https://0bh.852.myftpupload.com

I'm stuck on:

How to get the video background to the top of the page, behind the nav bar?
How to get the 50% top nav bar blur CSS?
How to make the new italics font in titles to resize from desktop to mobile sizing? Here's and example of the code: Making real estate <span style="font-family: 'Source Sans 4'; font-style: italic; font-size: 85px;">effortless.</span>
How to link the nav bar button to anchor down to the footer?
Is there a way to have a cover page thing play briefly like the Whenevr page when you first land on it?

Phil · September 4

1) Assign the video as the section background:

2) Did you add the blur with a custom CSS code? You can do it through BeBuilder in the section advanced -> background settings:

Anyway, for the current construction use this:

.mfn-header-tmpl {
 mask: linear-gradient(black, black, transparent)!important;
}

3) If you want to use inline styles you can use vw instead of px.

https://www.w3schools.com/cssref/css_units.php

4) Making anchor links (in the menu or not) is as simple as creating regular links.

Please head to the documentation, where you will find all the required steps to do that:

https://support.muffingroup.com/faq/how-do-i-link-an-anchor-on-the-same-page/

You can check our video tutorial too:

https://www.youtube.com/watch?v=HoHZksjUrjg

5) Currently, there is an option Preloader in Betheme -> Theme options -> Global -> Advanced:

But it only sets the opacity to 0 before the page fully loads.

Anyway, we have plans to extend this feature.

Best regards

Advice on creating a webpage to match Framer styling

Comments