So this year we’ve decided to enter the Elementor 2023 ShowOff competition. Our main aim was to show off how our own designers use Unlimited Elements widgets to create entire page designs, instead of just demos of the widgets themselves. It’s super exciting for us because we usually only put together widget demo sections, not complete full web designs with a unique concept. We had a lot of fun creating these designs, and we felt like they really reflected our vision behind the Unlimited Elments plugin.
Concept
Although we knew we wanted to compete in the Experimental category, selecting a concept proved to be quite challenging. Ultimately, we decided to create a landing page centered around one of the world’s most widely consumed fruits – bananas. We chose this seemingly simple topic precisely because of its universal appeal. Our goal was to push ourselves to develop an engaging website with innovative design concepts that would offer an interactive and intriguing way to learn about bananas. This is the foundational idea behind “Unlimited Elements.” Our aim was to provide users with the necessary tools to create visually striking layouts and showcase their unique ideas and concepts in an interactive manner, rather than relying solely on text or images.
Hero Section
The website’s hero section provides an enjoyable scrolling experience for the user through the use of Motion Scrolling Effects within the Elementor editor. To enhance this, we included a new widget called Remote Scroll, which can trigger item-based widgets based on the user’s scrolling position. For this specific case, we connected the remote scroll to a Background Slider that changes the background of the entire section as the user scrolls. To indicate that the user needs to scroll, we added two widgets: an Animated Mouse Scroll Icon that adds a small nifty micro animation to indicate to the user he needs to scroll and also Vertical Text with the word “scroll.”These subtle animations and indicators elevate the web experience, transforming it from good to exceptional.
Anatomy Section
The anatomy section showcases one of the coolest use cases for using unlimited Elements: syncing between two item-based widgets. We’ve built this section using a Hotspots widget, which highlights important parts in a banana, and a Content Accordion widget, which provides more explanation about each highlighted part. And guess what? We’ve even added Remote Arrows to give you another way to navigate between the items. You can place these arrows anywhere in the layout since they’re Remote Arrows, and they can connect to any item-based widget. How cool is that?
Stucture Section
Working on the structure section was such a fun experience! As we dug deeper into the topic, we uncovered some mind-blowing facts about bananas. In this section, we decided to present the banana’s structure using a cool percentage format in the Number Box widget. It’s like an icon box, but better because we can include text within the graphic element. And to make the section even more appealing, we added the Blob Animation background widget, which gives it a modern and captivating vibe. This animation represents the coming together of different components to create a unified structure.
Health Benefits Section
When it comes to talking about health benefits, it can sometimes feel a bit dull and uninteresting, right? That’s why we put our heads together and came up with an awesome solution for this section – the Infographic Circle widget. It’s like tabs, but with a super cool circular layout. This unique design not only makes it fun to explore, but also improves readability, keeping readers fully engaged with the content.
Process Section
The process section was undoubtedly one of the most challenging aspects to design. While the content itself may seem simple, the real difficulty lies in creating an engaging layout that captures the audience’s attention. This section went through multiple revisions as we tirelessly worked to perfect its presentation. However, we are incredibly satisfied with the end result. The design not only maximizes the potential of using Remote Control widgets in your Elementor layouts but also demonstrates the power of seamlessly connecting widgets to create a unique and captivating layout. Within this section, you’ll find various features, including Remote Tabs, Remote Bullets, and a Remote Counter, all integrated with a Content Carousel that beautifully showcases your content.
Nutrition Section
This section of the website offers an immersive and interactive experience with our amazing Calculators feature. We’ve come up with a cool calculator that calculates the nutrition value of a banana based on its size and the number of bananas. With Unlimited Elements, you can create and customize any calculator you want, using your own unique formulas. Use a variety of form fields and effortlessly connect them to create an engaging user experience. The possibilities are endless, so let your imagination run wild and create a digital experience that will truly impress your audience.
Vitamins Section
To create the vitamins section, we used the Semi Circle Progress Bar widget. It helped us make a cool and informative infographic that shows the amount of vitamins in a banana. This way, we can clearly see how nutritious it is. We think simplicity and good looks are important in getting the message across. By keeping the design clean and straightforward, we make sure the audience easily understands the info in the best way possible.
Fun Facts Section
The fun facts section uses a cool Card Carousel widget to show facts in a fun way. This carousel has some really nifty features that help create a unique layout. For example, the stage padding setting gives a cool offset effect to the items. And with center mode, the middle item stands out and is easier to read, so you don’t end up with a bunch of text cluttering up the page. That’s why we blurred out the other items, so the focus stays on the middle. Plus, instead of images, we added icons to each item to keep things minimalistic and match the yellow colors of the page design. Pretty neat, right?
Shakes Section
The shake recipes section was quite a challenge. It may seem like a simple design, but it actually has advanced functionality and wasn’t easy to build. This section creates a unique metro style grid using the new Elementor containers (without them, it wouldn’t be possible). Each part in the grid is designed differently. Some have a video background, some have an image background, and some have elements like links, carousels, and titles.
We use this section to display shake recipes, so we decided to use the Post Carousel to showcase them. Although it may look like static content, it’s actually dynamic. The recipes are pulled in from WordPress posts using a custom post type. If you click on a carousel item’s button, a Dynamic Popup will appear with more information about the recipe. This popup is also a widget, and within it, the ingredients and instructions of the recipe utilize the power of Unlimited Elements multi-source widgets. We show a list widget with data from the ACF repeater field of the custom post types.
I understand that some of this may sound confusing, but I assure you that when building sophisticated and dynamic websites, these features are essential.
Summary
To sum it up, this project was such an exciting experience! We got to dive deep into our own plugin’s amazing capabilities. Our goal was to design a website that showcases the awesomeness of our plugin and all its features. We hope we achieved this mission with our design, and you can make use of it to create your own awesome projects. With Unlimited Elements, you’re capable of making any type of web page imaginable. So don’t let anything limit your creativity – just go ahead and create something awesome!
