Build your website with the Wix Editor | Full Course | Wix Learn

Wix Learn: Build Your Website with the Wix Editor

Introduction to the Course

• The course emphasizes that a website should narrate the story of your brand, products, and values.

• Ali, the instructor specializing in the Wix Editor, will guide users through building an effective website using various tools.

Exploring Your Workspace

• Users can choose to edit an existing site or create a new one from scratch; templates are available for guidance.

• Templates can be customized even if they don't initially fit all user needs; elements can be added later as required.

• The canvas serves as both a preview and editing space for pages within the Wix Editor.

Adding and Customizing Elements

• The left bar contains tools for adding elements like text, images, buttons, galleries, and social media links.

• Sections on pages allow users to organize design elements easily; sections can be moved up or down as needed.

Managing Pages and Site Design

• The pages menu enables users to add, remove, or rearrange individual pages for better organization.

• Site themes help maintain brand consistency by keeping fonts and colors uniform across the site.

Customization Options

• Users can try out pre-made themes that comply with accessibility standards; customization options are also available.

• Apps can be integrated seamlessly into sites without opening new windows; this includes tools like chatbots or translators.

Media Management

• The Media Center allows users to upload and manage images/videos directly within their site.

• Content Manager and Ascend Business Tools are accessible from the Editor for enhanced business management.

Layers and Navigation Tools

• Layers provide a comprehensive view of all page elements, aiding in precise editing of specific components.

Managing Workspace & Settings

• The top bar offers settings management including saving changes, previewing live sites, SEO updates, and accessing help resources.

• Users can navigate between existing pages while editing their site through a dedicated menu.

Understanding Your Website Workspace

Overview of the Workspace

• The zoomed-out view allows users to see the entire page divided into sections, facilitating easy reorganization without losing track of layout.

• A search bar is available in the workspace to quickly locate tools or help articles, enhancing user experience during site building.

• Users are encouraged to explore creative possibilities with their site using various elements and tools that will be covered in upcoming lessons.

Importance of Site Structure

• The structure of a website is crucial for user navigation; a well-organized site ensures visitors can easily find what they need, similar to a physical store.

• This lesson focuses on building and structuring pages effectively, emphasizing essential components every site should include.

Building Your Home Page Layout

Key Components of a Home Page

• A well-structured home page should present important information first and guide users towards desired actions before they leave the site.

• The layout consists of a header at the top, content in between, and a footer at the bottom. Sections can be viewed using the zoom-out tool.

Customizing Your Header & Menu

• The header serves as the main navigation tool for visitors; it should contain links to critical information while avoiding overcrowding.

• Essential elements for any header include a logo, navigation bar, and cart if products are offered. Wix's Logo Maker can assist in creating logos if needed.

Managing Menu Items Effectively

Linking Menu Items

• Each menu item connects to specific links within the site; users can link items to web addresses or sections on their pages.

• Demonstration on linking 'collections' section directly from the menu shows how intuitive navigation enhances user experience.

Adding New Menu Items

• Users can add new items like 'sale' pages through simple management options within their menus for better accessibility.

Editing Sections Within Your Site

Understanding Section Composition

• All content between headers and footers is organized into sections which may include images, text, galleries, or videos.

Hero Section Essentials

• The hero section is vital as it’s the first thing users see; it must contain an engaging visual element, concise text about the site’s purpose, and an effective call-to-action (CTA).

Creating Engaging Website Content

Importance of Action-Driven Text

• The text on your website should reflect the overall theme and design style, using action-driven phrases to encourage clicks. For instance, "Start exploring" is more engaging than "See our products," potentially leading to higher click-through rates.

Utilizing Effective CTAs

• To learn more about effective Call-to-Actions (CTAs), a resource link is provided in the resources tab.

Quick Edit Tool Features

• The quick edit tool allows for real-time changes to specific sections of a webpage without affecting the overall design. This includes editing backgrounds and text while maintaining consistency across the site.

Real-Time Editing Capabilities

• Changes made in the editor are applied instantly, allowing users to preview modifications live. If unsatisfied with any adjustments, they can easily undo them with one click.

Delegating Edits Safely

• The quick edit tool is beneficial for delegating minor edits to team members, ensuring that only text updates occur without altering the site's design integrity.

Structuring Your Website Layout

Understanding Sections and Strips

• Sections organize site pages while strips serve as design elements that facilitate complex layouts within those sections. Customizing strips can enhance visual appeal.

Creating Adaptive Layouts

• Strips are adaptive; any layout adjustments automatically resize all contained elements for optimal display on various screen sizes.

Customizing Footers and Pages

Footer Essentials

• The footer should include essential links and NAP (Name, Address, Phone number), which aids both user navigation and search engine optimization.

Managing Site Pages

• Users can view existing pages in their site panel, sort them into folders, or rearrange them for better organization before adding new pages like an FAQ section.

Adding New Pages Effectively

Planning Page Structure

• Before adding new pages such as an FAQ page, it's crucial to plan their content structure to ensure a smooth user experience.

Subpage Management

• Newly created pages can be set as subpages in menus for easier access. For example, placing an FAQ page under "Contact Us" enhances navigability.

Advanced Menu Options

Creating Submenus

• Menus can be expanded by adding submenus that categorize information further—like splitting FAQs into distinct sections for clarity.

Hiding Unwanted Pages

• Users have the option to hide certain pages from menus during development by selecting 'hide from menu' options in settings until ready for public viewing.

Designing Strong Website Layout

Importance of Layout Design

• A well-designed layout directs visitor focus towards key content areas first. It also enhances engagement through modern web design trends.

Understanding Gridlines in Web Design

Using Gridlines Effectively

• Gridlines act as guidelines for content placement within sections; positioning items outside these lines may result in visibility issues on smaller screens.

Adding Content with Guidelines

How to Create a Dynamic Layout Using Strips

Introduction to Gridlines and Basic Elements

• The speaker emphasizes the importance of centering elements in design, showcasing gridlines for layout organization.

• An image is added by navigating through the element options, demonstrating how to adjust its size after placement.

• A call-to-action button is introduced, with a preview showing that elements within gridlines remain visible when resizing the screen.

Understanding Strips for Complex Layouts

• The concept of strips is introduced as a tool for creating complex layouts that enhance visual appeal.

• The speaker demonstrates how to add sections and strips, starting from a pre-designed section to create an "About" page layout.

• Customization begins with updating headings and adjusting spacing for better balance in design.

Enhancing Layout with White Space and New Elements

• The importance of white space is discussed; it helps create balance and prevents overcrowding in layouts.

• A new blank strip is added, followed by resizing it precisely using pixel input for accuracy.

Adding Columns and Adjusting Margins

• Columns are introduced into the layout; margins are adjusted to prevent strips from reaching the edges of the page.

• Tips on selecting images that complement overall design are shared, focusing on relevance and aesthetic alignment.

Finalizing Design Elements Within Strips

• Background colors are applied to columns, enhancing visual contrast between text and images.

• Text elements are added seamlessly into columns, demonstrating ease of integration within the layout structure.

Creating Dynamic Grids with Multiple Strips

• The process of duplicating strips allows for more complex designs; managing columns enables quick adjustments.

• Swapping column positions creates dynamic grids while maintaining content visibility across different screen sizes.

Conclusion: Adjusting Column Sizes for Enhanced Layout Control

Creating Custom Layouts and Themes for Your Website

Customizing Column Layouts

• The strip layout allows for adjustable column proportions, such as 40-60 or custom settings, enhancing content adaptability.

• Gridlines assist in maintaining visual balance across columns, crucial for responsive design.

• Column spacing can be adjusted to prevent elements from touching, improving aesthetic appeal.

• Padding adjustments provide additional space above and below columns, adding definition to visuals.

Importance of Design Elements

• Effective site design reflects brand values and influences visitor perception upon landing on the site.

• Themes serve as a time-saving tool that ensures cohesive branding across all pages with just one click.

Theme Customization Options

• Users can customize themes by selecting color and text options or creating their own unique styles.

• Pre-made themes allow quick changes; however, users can also establish a personalized look based on brand identity.

Color and Text Theme Guidelines

• A maximum of five colors is recommended for themes, focusing primarily on three: primary, secondary, and accent colors.

• Font choices should be limited to two or three types to maintain clarity and speed up loading times while ensuring they align with the brand's message.

Accessibility in Typography

• Fonts must be readable; larger fonts are suitable for headings but may not work well in body text.

• All fonts used meet accessibility standards; careful selection enhances user experience.

Background Customization Techniques

• Default backgrounds can be changed easily; images can replace solid colors to enhance visual interest.

• Users have the flexibility to revert background changes or create multiple themes for different campaigns.

Understanding Sections and Strips

Designing Unique Visual Layouts for Your Site

Creating Eye-Catching Sections

• Using trips to design sections allows for unique visual layouts that enhance content organization and site flow.

• Consistent fonts and colors contribute to a seamless design, integrating well with adjacent sections.

• Updating heading colors to match theme colors is essential for maintaining brand consistency.

Incorporating Design Elements

• Vector art can add a professional touch; using simple shapes consistently across pages strengthens branding.

• Background gradients using brand colors create smooth transitions between sections, enhancing overall aesthetics.

Utilizing Gradient Backgrounds

• Fluid gradient backgrounds provide an organic feel and dynamic visuals, adding energy and movement to the site.

• Unlimited color options in gradients allow customization, which can be saved for future use across various site elements.

Managing Design with Quick Edit Tools

Simplifying Content Maintenance

• Quick edit tools streamline the process of updating site content without altering the layout or design unintentionally.

• The quick actions bar enables easy movement of entire sections on the page with just one click.

Updating Section Content

• Text updates in sections (e.g., changing offers or button text) can be done quickly through quick edit tools.

• AI features suggest alternative layouts based on existing content, allowing for effortless redesigning of sections.

Pinning Important Objects on Your Site

Keeping Key Elements Visible

• Pinning objects like social bars ensures they remain visible across all pages, facilitating user engagement with your brand.

Customizing Social Bars

• Customization options include adjusting layout orientation (vertical/horizontal), icon spacing, and size to fit branding needs.

Finalizing Pinned Elements

Designing Your Mobile Website

Importance of Mobile Optimization

• Mobile users account for over half of global website traffic, emphasizing the need for mobile optimization to reach a larger audience.

• While desktop designs adjust automatically for mobile, customizations specific to mobile can enhance user experience.

Best Practices for Mobile Design

• Focus on speed and ease of access; mobile users expect quick navigation due to smaller screens.

• Minimize scrolling by adjusting vertical spacing in layouts to streamline user interaction.

Content Management on Mobile

• Consider hiding non-essential sections (like "About") from the mobile view to prioritize shopping experiences.

• Avoid large blocks of text that can overwhelm users; instead, create concise paragraphs tailored for mobile viewing.

Enhancing User Interaction

• Ensure text is legible without zooming; consider creating separate content specifically designed for mobile users.

• Utilize elements that only appear on the mobile site, such as images or buttons, to improve engagement.

Button and Menu Design

• Make call-to-action buttons large and well-spaced to accommodate thumb navigation effectively.

• Keep headings prominent so they are easily visible at a glance; this aids in quick comprehension.

Navigation Tools

• Set the site menu header to freeze during scrolling, ensuring constant access regardless of page position.

• Optimize expandable menus (hamburger menus), ensuring clear and simple navigation options.

Mobile Tools and Features

Speed Enhancement Tools

• Implement tools like a "back to top" button for easy navigation across lengthy pages.

Contact Accessibility

• Add a quick action bar that allows visitors immediate access to contact information or social media profiles.

Loading Experience Improvement

• Create a welcome screen that displays while the main site loads, reducing perceived wait times with customizable messages and animations.

Adding Media Effectively

Types of Media

• Incorporate various media types—images, videos, vector art—to enhance visual appeal and user engagement on your site.

Media Management

How to Add and Customize Images on Your Site

Adding a Single Image

• Users can search for images or select them from site files, allowing for easy integration into the webpage.

• Adjusting image size is straightforward; customization options include brightness, contrast, highlights, and shadows through the photo studio settings.

• The auto cut-out feature allows users to remove backgrounds from images quickly before saving and positioning them on the page.

• Users can add frames and animations to images, enhancing visual appeal; links can also be embedded in images for navigation purposes.

Creating an Image Gallery

• To create a gallery, start by adding a blank section and then selecting the gallery option from the add panel.

• Users can replace default images in galleries easily by deleting existing ones and adding new product images directly.

• Stretching the gallery to fit the entire page enhances visibility; layout customization is available for better alignment with eCommerce needs.

Incorporating Video Content

Types of Videos Available

• Videos significantly enhance site impact; various types include personal uploads or videos sourced from platforms like YouTube or Vimeo.

• Pre-made video options are available within Wix, including video boxes that add movement to sections and unique video masks that shape videos creatively.

Adding Transparent Videos

• Transparent videos provide an animated look against invisible backgrounds; users can customize playback settings such as autoplay or hover activation.

• Design options allow color adjustments and animation features; however, excessive movement should be avoided to maintain performance.

Using Video Boxes

• Video boxes integrate seamlessly into site design compared to standard YouTube links; they offer customizable settings for user interaction upon hovering.

• Masking options allow videos to appear within specific shapes, enhancing aesthetic appeal while maintaining functionality.

Enhancing Design with Vector Art

Adding Decorative Elements

• Vector art adds visual interest; users can access a variety of decorative elements through the add panel under vector art categories.

Adding Media and Customizing Design

Integrating Vector Art into Web Pages

• The speaker demonstrates how to add vector art to a webpage, emphasizing the ease of customization to match branding needs.

• Consistency in branding is highlighted as the speaker selects an orange color for the vector art and adds a "Fade In" animation effect.

Importance of Visual Elements

• The speaker discusses the impact of images, videos, and art on enhancing webpage aesthetics and user engagement.

• Introduction to repeaters as a method for organizing content visually; they provide a cohesive look across different categories.

Understanding Repeaters

What are Repeaters?

• A repeater is defined as a list of items with uniform design but varying content, adaptable to different screen sizes.

• The process begins by adding a blank section where the repeater will be placed.

Customizing Repeaters

• The speaker selects an interactive hover repeater that animates items upon mouse hover, enhancing visual appeal.

• Options for managing items within the repeater are discussed, including duplicating or deleting elements.

Editing Content in Repeaters

Adding Text and Headings

• To clarify content purpose, the speaker expands the section to include headings that inform viewers about services offered.

• Specific services like personal shoppers and monogramming are mentioned as part of the content being edited.

Hover Effects and Interactivity

• The importance of hover effects is emphasized; changes occur when users interact with each item in the repeater.

• Connection between repeaters and content collections is introduced, with resources available for further learning on this topic.

Designing Your Repeater Layout

Adjusting Layout Settings

• After preparing content, layout adjustments can be made by highlighting the entire repeater for overall design changes.

• Image selection is demonstrated; various site files can be used to enhance visual representation within repeaters.

Final Touches on Design

• Background colors can be customized using solid colors or gradients; border options are also available for added detail.

• Hover interactions are tested with different effects (e.g., shrink mode), allowing control over user experience during interaction.

Previewing Changes Made

Reviewing Interactive Features

• A preview showcases all implemented changes in real-time, demonstrating how hover effects apply across items in the repeater.

Next Steps: Exploring Animations

Engaging User Experience through Animation

Engaging Users on Your Website

Importance of User Engagement

• Engaging users with your website increases the likelihood of them exploring content, purchasing products, or signing up for services.

• The lesson focuses on enhancing user interactions through various techniques such as scrolling effects, animations, and lightboxes.

Set Up Scrolling Effects

• Different scrolling effects can be implemented to create a dynamic flow that enhances user experience. Preview mode allows you to see these effects in action.

• Adding a fade-in effect to background sections makes them appear smoothly as users scroll down the page. This can also be applied selectively to images or elements without overwhelming the design.

• A fade-out effect can be used in specific sections (e.g., best sellers) to create an engaging visual transition as users navigate back up the page.

Explore Interactions

• Hover interactions add playfulness; for instance, changing button colors upon hovering enhances interactivity and engagement.

• Customizing hover effects involves adjusting background fills and text colors for buttons and other elements to make them visually appealing when hovered over.

• Additional hover effects like growing elements can draw attention effectively while maintaining a cohesive design aesthetic across different site components.

Add Animations

• Small animations guide visitors' focus and keep them engaged longer; however, moderation is key to avoid cluttering the page with too many moving parts.

• Animations can be applied to text or images; customizing their direction, duration, and delay helps achieve desired visual outcomes without overwhelming users.

• For example, using slide-in animations for images creates an engaging reveal effect that captures attention effectively during scrolling actions.

Create a Lightbox

How to Create an Engaging Lightbox for Promotions

Building a Lightbox

• The lightbox can be used to share important information such as deals, promotions, or events. The speaker demonstrates how to create one for a summer sale.

• Entering Lightbox mode allows customization; the speaker selects an image and adjusts the title from paragraph format to Heading 4 for better visibility.

• Unnecessary elements like subheadings and subscription forms are removed to streamline the design, while a themed button is added with "Shop Now" text linked to the product page.

• Button size is adjusted for text visibility, and the overlay color is changed to match branding. Opacity settings ensure that visitors can still see the site behind the lightbox.

• An 'X' button is added for easy dismissal of the lightbox, ensuring user-friendly navigation.

Setting Triggers and Previewing

• The lightbox's appearance timing is configured; it will show on the homepage after a five-second delay when first visited.

• Animation effects are selected for how the lightbox appears, enhancing visual engagement before previewing its functionality.

• A preview shows that clicking 'X' returns users back to their original site without disruption.

Preparing Your Site for Launch

Editing Site Settings

• Before launching, it's crucial to set up business information in site settings. This includes entering business name (e.g., "Solar") and category (e-commerce).

• Adding a logo and short description enhances brand identity; location and contact details can also be included if applicable.

Importance of Favicon

• Favicons are small icons displayed in browser tabs next to site titles. They should be recognizable and appropriately sized, often using a simplified version of your logo.

Social Media Integration

• A general social image can be uploaded which will automatically share across connected social accounts. Users are encouraged to connect their Facebook profile within this section.

Managing Site History

Connecting a Domain to Your Site

Understanding Domains

• A domain is the name or address used by viewers and search engines to access your site, similar to a URL (e.g., Wix.com).

• Choose a unique domain that is easy to type, spell, and pronounce for better user experience.

Free vs. Custom Domains

• Every Wix site includes a free domain for beginners; however, users can later purchase or connect a custom domain.

• Wix offers a domain name search tool to help find available domains and provides resources on selecting good domains.

Connecting Your Domain

• Users can connect their chosen domain directly from the Editor or through the Domains menu.

• It's possible to add multiple domains (e.g., different extensions like .com), enhancing visibility for visitors searching in various ways.

Important Considerations

• New domains may take up to 24 hours to connect; plan ahead if launching an important event.

Previewing and Launching Your Site

Final Checks Before Launch

• Conduct thorough previews of your site before publishing; ensure everything appears as intended.

Text Review

• Check all text for typos and consistency in capitalization choices.

Link Verification

• Test all links throughout the site (menu, buttons, images) to confirm they direct visitors correctly.

Accessibility Review

• Utilize the Accessibility Wizard to ensure your site is accessible for all users prior to launch.

Mobile Preview

• Preview the mobile version of your site, especially if any content was modified specifically for smaller screens.

Conclusion of Course Content