Editor X Hover & Click Interactions | Building A Pokemon Website (No Code Tutorial) PART 1

Hello, fellow game changers and design enthusiasts! It's time for another exciting live learning session, and we're kicking off this month with a special treat. In this series, we'll dive into the world of Pokemon and create an impressive desktop website, all without writing a single line of code. To achieve this, we'll be using the powerful no code platform, Editor X.

But before we dive into the nitty-gritty, allow me to introduce myself. I'm Brandon Gross, your host for this live learning journey, and I'd like to welcome you to the game changers community! We value your creativity and understand the importance of delivering high-quality designs and animations. So without further ado, let's roll up our sleeves and get the ball rolling on this exciting project.

If you're new to Editor X, it's a no code platform that empowers designers and creatives like us to create and bring our designs to life. So, whether you're a seasoned UI/UX designer or a passionate creative looking to grow in the design industry, there's something here for you.

Join the Live Learning Community

As game changers, we want to continuously challenge ourselves and encourage others in our field. In light of this, our website, livelearning.editorx.io, offers monthly no code design challenges with prizes, a friendly community to collaborate with, and even expert mentoring on building design businesses and advancing your career. So be sure to check out our site and participate for a chance to win cool prizes and connect with like-minded creatives.

Getting Started with the Pokemon Website

Now that you're all caught up, let's start designing our Pokemon website. The first step is creating a new project in Editor X. In the dashboard, select "Create New Site" and choose "Blank Canvas" to begin. Keep in mind that for this tutorial, we'll only focus on creating the desktop version of the site.

Designing the Layout

With our blank canvas set up, it's time to design the layout. We'll utilize the built-in Editor X grid system to create a responsive and visually appealing design. Start by adding sections to your canvas, which will serve as the building blocks for your website.

For our Pokemon website, let's create three sections:

1. Header section: This section will house our logo, navigation menu, and a call-to-action button for users to join our community. To create this section, click on "Add" and select a pre-made header from the menu.

2. Featured Pokemon section: In this section, we'll showcase some popular Pokemon alongside their respective types, images, and descriptions. To create a visually appealing grid, use the Columns & Grid feature under the Add menu.

3. Footer section: This section will include important site links, contact information, and social media icons. Similar to the header section, you can choose a pre-made footer from the Add menu.

Adding Interactions

Now that we have our layout in place, it's time to add some interactive elements to our website. In Editor X, it's a breeze to create hover and click interactions without any coding.

For this tutorial, let's create an interaction where hovering over a Pokemon image will reveal its type and description. Here's how to do it:

1. Select the Pokemon image you want to add the interaction to.

2. In the Interactions Panel, click on "Add Interaction".

3. Choose "Hover" from the trigger dropdown.

4. Set the action you want to occur, such as fading in the text with a smooth animation.

5. Customize the duration and easing of the animation to your liking.

6. Done! Now when users hover over the Pokemon image, it will reveal its type and description with a smooth transition.

Don't forget to save your progress and preview your work!

Finishing Up

Congratulations, you've now designed an impressive Pokemon website using Editor X's powerful no code features! As a reminder, this live learning series is ongoing, so make sure to stay tuned for future sessions where we'll continue to build upon our design and add more exciting functionality.

Before you go, remember to give our monthly no code design challenges a try at livelearning.editorx.io and join our community for invaluable networking, mentoring, and career-building opportunities.

Until next time, game changers! Let's continue to push the boundaries and create value in the world of design.