Some time ago, we explored a cover page transition that would hide some initial content and show another level of content, i.e. “unreveal” it. Today I’d love to share some more ideas for showing another page or preview, including one that uses CSS clip-path to achieve the effect.
This is our initial view:
When clicking on an item, we hide the current content by covering it with an expanding circle. Then uncover the preview by expanding a clip-path. This is the next view:
And this is how it all looks in action:
There are three different effects. Hope you enjoy them and find them useful!
If you have browsed through our latest website roundup you might have seen the amazing website of Margot Priolet. I absolutely love the hero section effect when scrolling and I wanted to remake it and explore some variations including playing with transforms and filter effects.
So the initial view is a hero section like this:
When scrolling, an image section is revealed with an opacity effect. Here, there are many possibilities for variations.
After scrolling for a bit and triggering the effects on the images, we reach the final section.
This is how it all comes together:
This demo shows how to play with smaller images and the black and white filter.
Today I’d like to share a little experiment with you that is based on the layout transition of Aristide Benoist’s amazing homepage. Basically, I’m trying to rotate this layout just like Siddarth did in this shot. No WebGL for this experiment so we definitely don’t reach the slickness level of Aristide’s work but it’s fun to try it out.
Our initial scrollable view looks as follows:
Once we click on an item, we animate the stack to the right side, enlarging the items and showing our content:
Here we can now navigate using the arrows. Once we scroll, we move back to the initial stack view.
Here’s the whole flow in a video:
Please keep in mind that this is very experimental and that there might be bugs
I really hope you have fun with this little experiment! Thanks for checking by!
The website for your design business should not only explain who you are and what you do, but show off the impressive body of work you’ve created. It’s the strongest tool in your sales and marketing arsenal.
But as a web designer, you know how long it can take to build a really great website for a client. If you’re ready to start attracting awesome leads and adding new clients to your business now, you might not want to spend that much time building your portfolio site.
The good news is that you don’t have to.
BeTheme’s new Muffin Builder is like upgrading from a Ford to a Ferrari. You’ll be shocked at how quickly you get your website to the finish line — and with superior results, no less.
Let’s take a closer look:
New Muffin Builder features that’ll knock your socks off
Time is money when you’re a web designer. So, it’s important to build a portfolio site and get it online as soon as possible.
Here are 6 features from the new Muffin Builder (and BeTheme) that will enable you to quickly and painlessly create something you’re proud of and that will undoubtedly impress prospective clients:
Feature #1: A professional-looking portfolio site already built for you
There are certain pages and features every portfolio should have: An attractive home page, convincing client testimonials, a selection of works, and so on.
But just because the structure of your site will mirror other portfolio sites, that doesn’t mean it has to look like everyone else’s.
As of today, BeTheme has over 600 pre-built sites, with dozens of portfolio site options to choose from:
While these portfolio sites might be built for different types of creatives, pay attention to the different styles. Whether you want to give your site a futuristic edge or you want to infuse the design with some femininity, you’ll find the perfect portfolio-equipped site for your business here.
What’s more, each pre-built portfolio site is compatible with Muffin Builder, so you’ll have the added benefit of being able to edit your pre-built site with this powerful website builder.
Feature #2: Intuitive customization options
Realistically, you could have a new portfolio site designed and loaded into WordPress in under a minute with BeTheme.
While each site comes with well-chosen imagery and helpful placeholder text, you’ll still need to customize the content and maybe even tweak the design in order to make it your own.
Once you’re inside the new and improved Muffin Builder, you’ll see how easy this is to do.
The first customization feature to take advantage of is the global settings editor, which you’ll find under Betheme > Theme Options in WordPress:
Quickly update colors, fonts, layouts, and styles and apply them globally to the site from this panel.
To make changes on a smaller scale, use the Muffin Editor within your Pages. The section toolbar will allow you to make adjustments to each container:
You have the same level of control over the content within each block. The settings you find here all depend on what kind of content is in the block. For example:
You have the flexibility to customize your content however you prefer: Use the text editor or take advantage of Muffin Builder’s predefined settings.
Feature #3: Importable and reusable section templates
It’s not just the base of your site that’s already built for you with BeTheme.
Let’s say you’ve imported a great-looking portfolio pre-built site like Portfolio 2:
You like the current layout of the About us page on this site, but you want to add a Google reviews section between the “My offer” and “How I work” sections.
With the Muffin Builder, you can easily import pre-built sections using the icon on the right toolbar or by clicking “Pre-built sections” when you add a new section to the page:
Chances are good that whatever you envisioned adding to the page can be found there. Like this:
As you can see, it’s all placeholder content. That said, the structure and design are taken care of, so all you need to do is fill in the content.
Feature #4: Custom layouts and headers
Pre-built sites are a great starting point. In many cases, you can use them right out of the box.
However, if you want to alter the layout across the site or on a specific page or two, Muffin Builder can help you make those adjustments:
Under the Layouts section in WordPress, set up your custom layout — which includes changing the header, too, if you prefer — and save it.
To apply it to your pages, scroll down below the Muffin Builder on each page and select the layout from the list:
This way, you’re not just empowered to swap out your content for BeTheme’s placeholder content. With Muffin Builder, you get to customize as much or as little of the pre-built site as you want.
Feature #5: Backup and restoration
It’s not uncommon to “sleep on it” and decide you liked the way the site looked or the way you wrote something previously.
Thanks to the Muffin Builder’s revision panel and backups, you can quickly and painlessly roll back your portfolio site.
First, open the revisions panel:
Then choose the revision (if there’s more than one) you want to restore:
If you’ve ever stressed about an update you made to your portfolio and wished you could instantly go back to the way it was before, this new Muffin Builder feature is going to be a lifesaver.
Coming soon: The Front-end builder
If you prefer to design from the front-end of the website, a new Muffin Builder feature will be headed your way the Summer of 2021:
There are a number of reasons why many website builder tools (including WordPress’s own Gutenberg) have a front-end editing experience:
It saves you the trouble of having to switch between the editor and website preview to check your work.
Some people prefer to do their editing within the full context of the website as it’s easier to make decisions when looking at the big picture.
It’s more client-friendly than the typical backend editor, so this feature can empower your clients and other non-tech-savvy users to make tweaks to their sites.
If you’ve been looking for a live visual editor to use in WordPress, this new feature is just around the corner!
The fast and easy way to build a portfolio: BeTheme + Muffin Builder
If you’re looking for a fast and easy way to build your digital portfolio, the solution is obvious:
Start with a beautiful BeTheme pre-built site and then customize it with the intuitive Muffin Builder.
Who knows? This potent combo could end up changing the way you build websites for your clients going forward.
