Wix Studio is easy to get on with, but there are some modules where users still struggle to get along. In this tutorial, I will guide you through integrating the slider, pricing, and accordion modules.

Step 1: Create Your Website with Wix Studio Tutorial

When you open Wix Studio, you’ll see a clear Call To Action (CTA) button to create a new site. Clicking this button gives you several versatile options:

  • Use a Studio Template from a wide selection of pre-made designs,
  • Start with a Blank Canvas to design your website the way you want
  • Create a Studio Sitemap and Wireframe directly in the editor for better planning,
  • Or use your Own Custom Template built within the studio.
Wix studio tutorial

If you choose to skip templates, you can proceed directly to website creation by selecting a template or a blank canvas.

Selecting a studio template loads a list of professional website templates to choose from.

Choosing the blank canvas option takes you straight to the editor page, which comes preset with a basic header and footer, along with a blank section, ready for your design.

How to create your website using the Studio Sitemap & Wireframe Option:-

AD 4nXebzq3Vo8osUATUaa4NN g

Wix Studio allows you to input your project details, automatically generating a sitemap and wireframe for your website. This powerful feature helps you plan your site structure and layout upfront, making the design process smoother and more organized.

The above step is optional. You can proceed directly to selecting from a variety of templates to start building your website quickly.

Wix Studio also offers “your own saved template” to let you use custom templates that you’ve created and saved within the platform.

AD 4nXeQoPutlKUeWINnM5CZuWxydr0UBt9zVoLsfiW3JiqKFvxLswqoO1TnbaEcQeJEFr3jw0B9SZzivjVDa0eNF2EwZz58S

This means you can:

  • Design a website layout exactly how you want it
  • Save that design as a reusable template
  • Quickly start new projects by applying your personalized templates,
  • Maintain brand consistency across multiple sites by reusing your custom styles, structures, and elements.

It’s a great way to speed up your workflow and keep your websites aligned with your unique vision or brand guidelines. However, in this article, we will create a website from scratch, meaning from a blank page.

AD 4nXeN2jV wHhfjAitppWXi72d4b8tFVzw5xRogCHddKiJ11pdVD9zP0qTW4s4p71lmE88nYNKfvePefx 7KRPX5v yIgbTd9q27wK58fB1FXl81zdBBc0SfnASEWb4CypXMY RCKs

Step 2: Build a Wix Website

Creating the Navigation Menu in the Header Section

AD 4nXcjYcwFC Uc8qoqKYt3ZnP0caPwl2kM0xHaAtfFCQhQuRkG6HE5f fKEU5se4RCcL8fllHtx2tt0Ii83PWQYr 7 EZKlFJPMOP3qGg6Zix

To start building your website’s header and navigation in Wix Studio, click the plus (+) icon on the top-left corner to open the Elements Panel. This panel offers a wide variety of drag-and-drop elements, including prebuilt assets, allowing you to add and design any section of your site quickly.

AD 4nXcUm1966j2oAeVZl2G65XrC wZNqoIjRd4ulfk3SjQC5SffFEbKRKBB 2KJwYdjftvZllIYoQ3gOfShWdRURZge9154GQzJUROvmhsCrnQC H SFukF2d7qog9UR9q98AAMfrZ

For the navigation menu, you can drag a menu element into your header and place it within the menu. Once added, use the options on the right panel to customize its size, style, font, and alignment.

You also have precise control over spacing; hold the Option (Mac) or Alt (Windows) key and hover near the edges of the element to check the distance from surrounding elements.

AD 4nXcOfXcq4UmtwINwiYG zpt7ekI d1TK ZiE mSx mpTUrOcENBbs QntXzMrFLHZSc 5MYe x3 wMoVaouE4LxX93J2OmtCl Oi8n4M 7pCXsmYdP2PGc65UrtksWFhYSYwXQlmQ

Wix Studio provides extensive styling options for each menu item, allowing you to tailor the look and feel to match your brand or design preferences.

We also offer the option to create either standard or dynamic pages. Standard Page will directly add the blank page to the canvas. A dynamic page offers the option to either create a collection or add a preset.

For example, if you are adding a blog section to your website, then you can add a preset. You can select a Blog CMS preset from Wix Studio.

  • This provides a prebuilt dynamic page template with a blog post layout.
  • It includes fields like Title, Featured Image, Author, Date, Content, etc.

Wix automatically creates a “Blog Posts” collection tied to the preset.

  • You can add your posts manually or import them using a comma-separated values (CSV) file.
  • Each item in the collection is featured as a separate blog post, utilizing the same template.

Now, your blog page dynamically displays content from the collection.

  • When you add a new entry to the “Blog Posts” collection, a new blog post page is generated automatically.
  • You only need to input the data; the layout remains consistent.

Step 3: Creating a Hero Section (comprise of Text, Image or Video, and a CTA)

When creating a hero section in Wix Studio, adding and styling text is both powerful and beginner-friendly.

Drag in a text element from the Elements Panel, and you’ll have access to a wide range of styling options from font selection and size adjustments to color, spacing, and alignment controls. All intuitively placed for quick customization.

AD 4nXcUm1966j2oAeVZl2G65XrC wZNqoIjRd4ulfk3SjQC5SffFEbKRKBB 2KJwYdjftvZllIYoQ3gOfShWdRURZge9154GQzJUROvmhsCrnQC H SFukF2d7qog9UR9q98AAMfrZ

Wix Studio also supports page transitions and preset text animations, allowing you to add engaging effects without writing any code. You can animate text for different states like hover, regular, or selected using built-in presets. This makes your hero section visually dynamic right out of the box.

AD 4nXeSgCL3W ESqhBxoY4dSOnYAXzzt557YpXW6P1OY5wJy5Z 1zN9eBKJX UDDF fEGXSAtEPj319unh5IwNkx029 fDrr4mBADM3feFIkZAu6h37MkCOUyJGeR Z7L FMwUismP g

Want to create a unique layout, such as a pretext tag or label-style heading? You can easily do this by combining multiple elements like text, shapes, icons, and lines, no buttons or coding required. With drag-and-drop precision, you’re free to craft creative text arrangements that match your brand’s look.

Whether you’re showcasing a bold headline, a subheading, or a CTA line, Wix Studio gives you the tools to make your hero section text visually compelling and interactive without the complexity.

Creating the Hero Section with Images in Wix

When building a hero section in Wix Studio, adding and customizing images is seamless and feature-rich.

AD 4nXcuej9m8MmOx RLQxXd91B73kQSiNphJ XYLPbMHOfjhkuTMcK3ybBnk8UD1Yv5h2 QVYnFxSid Ml70RmklbTst nfN7S 3gXtktXhJivKDUqbhKOukUPgmFMqwhcekLNRZmpjjw

After dragging an image element into your section, you can use Wix’s built-in Photo Studio to enhance it. This tool allows you to edit your image directly, adding overlays, backgrounds, filters, elements, and more, all without leaving the editor.

  • Adjusting opacity, border radius, and shadows
  • Changing the image fit (cover, contain, etc.)
  • Adding hover effects or animations for interactivity
AD 4nXcvN3V 8gCMrvSGux1eLl0uLCQ3vi4N4o975MoYqmOtFphv41jq6OLweNuNJWV2KjfYYOsXg fgovwWPZopSUP1B86rEzwzHgfJGEANEJjc iiC2qgcMU365LL3pRgFz5FifWgv

These features make it easy to design a visually striking hero image that sets the tone for your site. Whether it’s a full-width banner, a background visual with layered text, or a styled product photo. With Wix Studio, you get creative flexibility without complexity.

AD 4nXc0N8bBwGR211n7jC1bVlHVaTWnrOZA90EL OJ91shBQpahRjLjOUOGLYsFQTjPQv pHhfgxsBXV9rEsJFo5WychV13Q7c jhTbkIi60v

Step 4: Creating a Slider section for testimonials

Wix Studio offers a built-in drag-and-drop slider element by default. You can install from the wix app marketplace for pro versions that offer advanced customization.

AD 4nXenfdDNUSaYCcZ6hECMvKU 4V2vJV0W TfHtY0Ztzit0KkPjgn76 XX9iZGd4 iOHdyh8S7kzqGhdeebr0KZCW4F7 YhyiPKqYlbg6KcYj1PN0C8fOyevyQeQhdzgt9nBG66Rv

Once installed, the slider widget appears under the “Add Widget” section in the Elements Panel, which you can then drag and drop onto your canvas. The basic layout and settings can be adjusted directly from the widget itself.

AD 4nXdMPJmdXD7yi0hv3CpAZUBoXE1C0yV1bFINx9IrX1Ql9wD3XPm9cml6vqvQnogO5ahZjRlR2FwGPOO3Tm8OtJONQ15YEwZYWQnD

To change the actual content such as testimonial images or logos, you’ll need to navigate to the CMS:

  • Go to your Collections,
  • Find the collection tied to your slider,
  • Click on the relevant entry to access and edit all the testimonial data, including images, text, and logos.

After updating the collection, the slider automatically reflects your new content, allowing you to match your design layout perfectly.

⚠️ Note: Wix offers free slider apps which may have limited styling options, so for more design flexibility (such as transitions, advanced layouts, or custom breakpoints), you may need to upgrade to a premium version.

Step 5: Creating a Tab Module on a Wix site

AD 4nXdU7rAE9CsPk0SvIO7Zs0dBACG2 mLSCGxcekfUQlM0l7QKA0TQs rKs4YSH jhpNiwtW3H24JzMoI0W9qoAzAnSXK3iH6yMoKqxu6YWXbIkgjN3i9aFJTxoe1EbKF P6D2a9t8ow

Want a tabbed layout? Use Wix Studio preset Tab Module, which you can drag and drop onto your canvas from the Elements Panel. Once added, you can fully customize the tab layout by adding or removing sections, changing content, and styling.

AD 4nXfBCYNHtXHMwTmzfh4lieUJxb6d2UTlta Rb3Y6YDOr3DdvgU8RtYJaZB3bHSu8ohXzGqrPlDmKYhiNtnYhyJ8lsMPHCyseO10UrupKze37r1VIMiCwYeuRq2s8TU 2Og3RtnIGWw

Each tab section is easily editable, allowing you to place various types of content, including text, images, icons, and CTAs. You can also choose from multiple CTA layouts and add custom icons to match your design.

However, there are a couple of limitations to note:

AD 4nXezcPLA1OtghW6Mj7d405GEjatafszSGDimfihZkKhpVf57bom2Ib8EqhVz8seB
  • By default, the tab background extends the full width, which may not align with every design style, especially if you want the background to appear only below the tabs.
  • For specific designs, you’ll need to manually select a button element that includes the structure or functionality you need, as not all elements come pre-loaded in every tab style.

Despite these minor adjustments, the Tab Module provides a flexible and efficient way to organize content into sections without requiring advanced coding.

Step 5: Creating Repeaters for Content Boxes

AD 4nXfB VlzlXREbqnII7jDwb6OS93HAchv4AQsySVWowsWJwHZt1S YKukXJ0YIVTHkgSAEiTUApfzpAFduTomu97 0HWP3siYHYuJVnRiaJayvaBq3ohPFs8wnD6LJYpNruk4Z9jb

When designing content boxes in Wix Studio, using repeaters is an innovative and efficient choice. Repeaters enable you to create a single, styled content box and then replicate it across your page, ensuring that all elements are perfectly aligned, responsive, and consistent without having to duplicate and style each one manually.

AD 4nXfuaA0kT HJQs3Xn8Fx46H3a4em0HSgZEKiwzBhV1ZgyNopD j9U6mgMXgKpKrEfpL9b9P75MDJLgiyni6vZz80zUbIJkER6HPn oP aMhUisk8ZeMNg jKvjmM95mACBASZc4E9g

To set it up, add a Repeater from the Elements Panel, then place your desired elements (text, icons, buttons, etc.) inside one of the content boxes. Once styled, Wix Studio auto-generates additional boxes with the same design.

You can also apply hover effects to make the boxes interactive. While you can create custom animations and apply basic hover styling, one limitation is that there’s no default option to add borders on hover or change icon states. These effects would require additional customization beyond what’s available in the default repeater settings.

AD 4nXd jL0gQB4LR 4UCCK WCxUH8w GwIWZeUl65ZKP2CAXFwPcWRd9ECvviLSUM7WYg7oASj0RYnbBIOL4NCFZRHC7RQrwcm0JWfqHKNexQvs lPuB7Q1

Still, repeaters are a powerful tool for content-heavy layouts, like service listings, team member profiles, or feature blocks, making your design process faster and more consistent.

Step 6: Creating Two-Column Sections

Creating a two-column section in Wix Studio is a quick and straightforward process. You can easily build a layout with two side-by-side cells, one on the left and one on the right.

AD 4nXcomh5ctZuGVaEoJnGywk mk1StISwyzpGD BVfSIZOU9f 2mIgxln84 cGPC0UwvXk

To do this, simply:

  • Add a section to your page,
  • Use the layout settings to split it into two columns,
  • Then drag in your content like text on one side and an image on the other.

This structure is perfect for creating clean, balanced designs, such as hero layouts, feature highlights, or side-by-side comparisons. It’s a flexible setup that works well across various screen sizes, providing complete control over spacing, alignment, and styling.

Step 7: Create a Pricing Table on your website

To set up a pricing table in Wix Studio, you have two main options: use a prebuilt template or create a custom one.

AD 4nXfG02FwOdeNm5Apy0tZ pKbnsYm0iUykktUW4buvGS0qNokMFob j2c41NCmIn2g1j3Kr2x yY4HA5mDNR04o1OVA4QyQ9VSt fsQfW9XPTCK1ufZYvjyquuIG1H0

1. Add a Pricing Table Layout

AD 4nXeZOh 91alHcE KRnjE1wwX9BlEjFjozqIfBT 3TTWdlEx3qFfiuufOSm1kliSEDTtv2J1ByCaLKqF6AByZ2i

Go to the Elements Panel and drag a Pricing Table Template onto your canvas. This gives you a ready-to-use structure that includes:

  • Plan titles
  • Pricing
  • Feature lists
  • CTA buttons

You can fully customize the design from the Styling Panel, adjust fonts, colors, layout spacing, button styles, and more to match your brand.

2. Use Wix Pricing Plans (for Functional Plans & Checkout)

AD 4nXf1BKEXB8v7rMXtFI mbjDnFEVnmt772 CZeD6n2pLLydi rDdY4 oJ9fERw3 QIeN0WtOnyeTqgfwwstUt68y42Z3H4gCO999T W2S4DEHcZ1FcQUcWNS8SCnuCHsoPDMnzvo0 g

To make your pricing table functional (with real subscriptions or gated content), you’ll need to:

  • Go to your Wix Dashboard
  • Navigate to Pricing Plans
  • Click Create New Plan
AD 4nXd2eUS9qLpQAZAwV3P9DoW9DylaybutN0qzPhhls4ZJqyH7xkLI9eo2Q

Enter the following:

  • Plan Name and Description
  • Decide if you want to enable a free plan, set a trial duration, or allow cancellations
  • Choose the billing cycle, monthly or yearly
  • Enable payment options and add your payment method (like Wix Payments or third-party gateways)

3. Reflect on the Website Layout

Once created, your pricing plans can be linked to buttons in your pricing table, allowing users to subscribe or make a purchase. Any updates made in the dashboard will be automatically reflected on your site layout.

Optional: Use a Third-Party App

If you need more advanced layouts or payment options, you can install a Pricing Table App from the Wix App Marketplace. These apps often offer additional features like:

  • Toggle between monthly/yearly billing
  • Advanced styling controls
  • Plan comparison features
AD 4nXdr1 EIQuu08lx4DdVqHJZ59B8o3Qu t06If13bqejBDvxcG3oVZK3MrUVyaHeRtidYsXC3NU9MOSq0ZfHD IHD2E0Y5QQmDbNCLPfhFqj3rAB4dM24gNa0572v2svZdbCRT3bI

Step 7: Adding Blog Content

AD 4nXeZahKFYPFJTr3T9k04XTwn9Vh pPrDQkqzMs4RtnYwuoQga1Wg5ktiAaPtTNkVene1 vIy8Hfdq5U mnnh w

Wix Studio makes it simple to set up a fully functional blog section on your website. You can easily add a blog module that not only creates a dedicated blog listing page but also sets up the backend structure for blog management.

AD 4nXeKUmxeC48Mb30UaBuHnF4AsBy7ONR En1jg VwrshXT9iiAczFHImR9tFcx2vq Jg5yI9X5tVBWjpidyxUqBCqtaGyPbLjGuHFinbRvCF0aTc9Ncl8bg6R9F

From the Elements Panel, drag in the Blog component. This automatically adds:

  • A Blog Listing Page
  • A dynamic Blog Post Page
  • A Blog CMS Collection in the backend
AD 4nXcRUsfMnCi0hnUydlzHkCayXQ0QngHDyT8gkac54IcmMBZ B9JhvCBmlMhgu1 nY hfh6kLN6e4dCML Qe7 MUurqxoJzxhYnKlMq6BCYH0uWq lVZRIaZt rhia 81qFADQ2Okw

2. Customize Blog Layouts

Once added, you can choose from multiple blog styles such as grid, list, masonry, etc. and customize the blog cards to fit your brand.

In the Settings Panel, you can adjust:

  • Thumbnail display
  • Title and excerpt visibility
  • Author info, date, and categories
  • Hover animations and spacing
AD 4nXeS0TVTljlnDfWKstA5WunDC7H1u4iISZtlb4jBF3lk ZBrQ7zx4ZTxJ9wvbNw4ca1WwUjwMTBD5lf4iLTQ7zyWTnMK8xbVfDj8y GelC83zTvT 5RHJbYI2PeExF9 MTS8nXNGyA

3. Create & Manage Blog Posts

Managing blog content is straightforward:

  • Go to the Blog section in the dashboard
  • Click “Create New Post”
  • You’ll get a full-screen editor where you can write, format, and style your post
  • Add images, embed videos, set SEO options, and publish with one click
AD 4nXcb9IwicrNhRcRJKutxQwaedrr3udgZaQOMbg67quq7IN Uyh5 uYhGiOS HKT5UNPuLK

Wix Studio handles all the technical setups. So you can focus on writing and design while still getting a clean, responsive blog layout that’s easy to maintain.

Step 8: Adding FAQ Section to your Wix website

Building an FAQ section in Wix Studio is quick and user-friendly, thanks to the built-in Accordion Modules.

AD 4nXfCgj9BIPBwQ5nCJtGQz8g3 oifyw55Ormv96Wd0yI5dx30brbMCGRNI11 5d TbgiS9Kelp9fyYRmGQN8bHzn8Wfugk4udOw3qFnG15Uv2zxE0KO8LFOK3HzqzjAbkQe j7UO4Dw

Go to the Elements Panel, search for “Accordion,” and drag the module onto your canvas. This creates a collapsible layout, perfect for displaying questions and answers in a clean, space-saving format.

Once the accordion module is added to your page, you can click on each accordion item to begin customizing.

Start by editing the question title, click into the text area and type in your FAQ question. Below that, enter the answer content in the collapsible section, where you can also format text, add links, or even embed media if needed.

AD 4nXe6MNEjPjCsUDmFblT1ZZsU 0pgTMGUioHQNN6QnCgfRLes4CpDRx

You can design your site using the styling options. Adjust fonts, text size, colors, padding, and icon styles to match your website’s design theme.

If your FAQ section requires more or fewer items, it’s easy to add or remove accordion items with just a click, giving you complete control over the number of questions you want to display.

You can style it as per your theme to make it visually cohesive.

Step 9: Adding Footer Section

Wix Studio offers prebuilt footer layouts which you can drag and drop easily. These layouts are fully customizable. Every element within the wix website builder can be edited, rearranged, or removed based on your design preferences.

AD 4nXeJYk SSmI779i7D8tfGC2y 2tEMnZLKg3Tn8RXpvtAXzGo1dCtIQt0q2lmJ0dlIA7Cx WjPXvNJ0UOxAg5mhTYQSrPzLvOjcpkBmSRcTsLgnqnP ga0Mit3Y1SYKmULeZnleyDg

You can also add new elements such as icons, social media links, menus, or custom text to tailor the footer exactly to your needs. Use the Wix advanced website design elements to increase site visitors.

Ready to build your site?

Build a website with Wix Studio which fits perfectly on every screen. Use the AI website builder to build a professional website within minutes.

Wix editor strikes a strong balance between design freedom and structured tools, making it suitable for both beginners and professionals. It allows you to create highly visual, customized websites while maintaining control over layout, spacing, and responsiveness.

The platform is intuitive yet powerful enough to handle complex design needs without requiring custom code for every adjustment.

To extend your website’s functionality, Wix Studio also supports app integrations. You can browse the Wix App Marketplace and add tools tailored to your specific needs such as sliders, forms, or pricing tables. However, some free apps come with limitations, and you may need to upgrade to access full features or advanced styling options.

For websites with growing or dynamic content, Wix Studio’s CMS and dynamic page features offer excellent scalability. Whether you’re managing wix blog, portfolios, or product listings, the CMS makes it easy to update content in one place and reflect those changes across the site.

If you’re ready to build confidently, Wix Studio gives you both the creative space and the structure to bring your ideas to life.

Ready to build your site with confidence? Start exploring Wix Studio and bring your creative vision to life! In case of any query you can contact us or comment below!