How To Use Sticky Effect To Create A Standout Portfolio | Editor X

Are you a NoCode designer looking to create an attention-grabbing portfolio that showcases the best of your work? Look no further! In this blog post, we'll teach you how to create an eye-catching design with floating cards using Editor X's sticky effect. And guess what? You don't need any code to achieve this stunning effect!

Editor X is a powerful platform that allows you to create amazing web designs without writing a single line of code. It's also the home of the Monthly NoCode Design Challenges W/ Prizes, where you can join a community of fellow designers, learn from experienced mentors, and further your career in the design industry.

So let's get started with creating a standout portfolio using sticky effect on Editor X!

Creating a floating cards layout with sticky effect

Follow these simple steps to create a visually stunning portfolio using the sticky effect for cards floating on top of each other.

Step 1: Start with a blank section

Begin by creating a new blank section, which by default will be 500 pixels in height. But we're going to change this to viewport height (vh) at 325%. This will create four rows: three with 100% height and a fourth with 25% height.

Step 2: Add the grid

Apply a grid to the section using the "Other" option, and select four rows. By default, the section will be equally divided between the rows. However, you can customize this by adjusting the grid layout. Change the height of each row to viewport height, matching the percentage values set in Step 1 (100% for rows one, two, and three, and 25% for row four).

Step 3: Add a container

Now that you have your grid set up, add a container to the top grid cell. Stretch the container so it covers the entire grid cell. This will constrain the limits of the first image or floating card you'll add.

Make the container transparent by setting the background color to transparent. This is because we want the floating cards to be visible when scrolling the page.

Step 4: Insert the floating cards

Place your first card image in the center of the transparent container, which is now constrained by the grid cell. This first card can be a picture that represents your portfolio or a project you'd like to showcase.

Repeat the process for the second and third rows, adding a new container and floating card to each. Now you have three floating cards stacked on top of each other, each constrained within their respective grid cell.

Step 5: Apply the sticky effect

The magic happens here! Select the first floating card, and under the "Position" properties, choose "Sticky". Set the "Top" value to 0. This will ensure that the card sticks to the top of the viewport when scrolling down.

Now, apply the same sticky effect to the other two floating cards. As you scroll the page, the cards will float on top of each other, creating a visually stunning effect that showcases your work in a unique way.

And that's it! You've created a standout portfolio using the sticky effect on Editor X. Your visitors will be wowed by the clean design and the floating cards showcasing your best work. Plus, you can now participate in the Monthly NoCode Design Challenges and practice using sticky effect to improve your design skills even further!

Remember to check out Editor X's Live Learning platform for more design tips and tricks, and to join a community of fellow designers looking to build successful design businesses.

Happy designing, and good luck with your standout portfolio!