David Milan Explores Scroll Effects | Class with | Editor X

Hey there, design enthusiasts! We've got some exciting news for you. The amazing Davina Milan has been exploring Editor X, and she's discovered some pretty cool tricks that will elevate your designs to a whole new level. If you've ever wanted to create an eye-catching website with stunning scroll effects and vertical sections, then you're in for a treat. Today, we're sharing her insights on how to create an awesome design that combines different images, scroll effects, and vertical sections on Editor X.

But before we jump into it, let's talk quickly about https://livelearning.editorx.io/editor-x-tv. This website hosts Monthly NoCode Design Challenges with fantastic prizes! Plus, you get mentoring on how to build a design business, further your career, and become part of a thriving community. So, don't forget to check it out and join the fun.

Alright, let's dive into Davina Milan's secrets for designing amazing scroll effects and vertical sections on Editor X.

Preparing the Canvas

To get started, you need to clear the canvas by removing the header and footer. It's quite easy—simply click on the header, then choose "Don't Display," and do the same for the footer. This leaves you with a clean and spacious section to work your magic with.

The next step is to set the min height to 100vh for greater control and customization. To do this, click on the blue cross at the bottom of the section and repeat the process until you have three sections.

Adding Images to the Sections

After dividing your canvas into three sections, it's time to add images to each one. To do this, open the add panel by clicking on the "+" icon in the top-left corner. The add panel allows you to save media and other elements essential to your design.

Now, simply drag your chosen images into each section. Ensure that you stretch each image to fill up the entire section.

The magic begins when you set the scroll behavior to "Reveal" in the section's settings. This allows you to create exciting and captivating scroll effects. Repeat this process for all three images.

Creating a Vertical Section and Container

Now that you've set up the scroll effects let's move on to creating a vertical section. To do this, click on the blue cross on the right side of the canvas. This will automatically generate a vertical section.

Resize the vertical section to your desired size by clicking and dragging. Next, you want to place your images inside a container, making it easier to manage and organize your design elements.

Add a container element by opening the add panel and selecting the container icon. Adjust the container's size by clicking and dragging its borders.

The Final Result

After adding images to the container, setting scroll behavior to "Reveal" for each section, and adjusting the vertical section's size, you're all set. Don't forget to preview your masterpiece to ensure everything looks and works as intended.

With Davina Milan's insights, you now have the tools to create visually stunning designs using scroll effects and vertical sections on Editor X. If you want to take your NoCode design skills further, don't forget to join the https://livelearning.editorx.io/editor-x-tv community. Participate in Monthly NoCode Design Challenges with amazing prizes, and get expert mentoring to elevate your design business and career.

Happy designing!