💻

Building a Website with Wix Studio

Jul 8, 2024

Building a Website with Wix Studio

Introduction

  • Overview of the tutorial to create a website using Wix Studio.
  • Core features covered: creating layouts, customizing predefined layouts, responsive design, AI generative tools.

Getting Started

  • Create an account on Wix Studio.
  • Start a new website from a blank canvas.
  • Option to use templates for speed or start from scratch.

Creating the Hero Section

Steps:

  1. Layout Choice: Options for layouts or adding elements; example used is a three-cell collage.
  2. Customizing Background: Change background color via property inspector.
  3. Adding Text: Insert headlines, change text color to white for contrast, and positioning tools for alignment.
  4. Call to Action: Adding and customizing a button.
  5. Utilizing Stack: Organize elements in vertical/horizontal stacks.
  6. Adding Video Background: Insert video background, adjust opacity for contrast.
  7. Responsive Design: Checking and adjusting for different viewports (desktop, tablet, mobile).

Adding More Sections

First Main Section:

  1. Background Color: Set complementary background color for left and right columns.
  2. Loading Images: Import image assets and adjust size and position.
  3. Adding Content: Insert and format text, AI-generated text available for content creation.
  4. Creating a Responsive Stack: Aligning elements and adding responsive design via AI tools.
  5. Advanced Adjustments: Fixing white space and element positioning.

Second Section - Large Typographic Watermark:

  1. Single Column Layout: Adjust background color.
  2. Large Text Element: Creating a large watermark with custom colors.
  3. Scroll-Based Animation: Tie the text movement to scrolling input.
  4. Adding Images: Insert and position additional media assets.

Third Predefined Section - Services/Features:

  1. Selecting Predefined Layout: Import a featured template section.
  2. Content Customization: Modify text and images, use AI tools for image generation.
  3. Interactive Elements: Adding hover effects to images, responsiveness ensured out of the box.

Fourth Custom Section - Call to Action:

  1. Two Column Layout: Setting contrasting background colors and adding background videos.
  2. Inserting Components: Add buttons and other interactive elements, like countdown timers from the app marketplace.
  3. Customizing Interactive Widgets: Adjust design settings of countdown timers (colors, size, text).
  4. Responsive Adjustments: Applying AI tools to ensure responsiveness, fixing white space, and alignment.

Final Section - Footer:

  1. Adding a Footer Section: Customize and position footer, ensure it aligns across different devices.

Publishing

  • Save and publish the website, check responsiveness on different devices.

Advanced Features

  • Coding Functionality: Option to integrate JavaScript, making use of Wix's built-in IDE.
  • Full version control with GitHub.
  • Custom integrations with external APIs.

Conclusion

  • Recap on building a full-fledged, responsive landing page and more advanced integrations possible.
  • Encouragement to subscribe and link to Wix Studio to get started.

Full transcript