< Back Studio, Partners & Enterprise Wix Studio Studio Editor: Adding the Wix Hotels by HotelRunner App Does your client own a hospitality business? Add the Wix Hotels by HotelRunner app to their site so they can easily manage their availability and reservations. The app is fully customizable, which lets you tailor the packages to match your client's offering. Adding the Wix Hotels app You can add the Wix Hotels app to your client's site directly from the App Market inside the editor. To add the Wix Hotels app: Click App Market on the left side of the editor. Click App Market . Enter "Wix Hotels" in the search bar. Click the Wix Hotels app in the search results. Click Add to Site . Click Agree & Add . Customizing the "Book a Room" page Customize the Book a Room page so it matches the rest of your client's site. This is the page visitors use in order to find and reserve their accommodation. The entire page is one element, you can decide where the reservation summary is positioned, and whether or not to show details like a "book soon" ribbon or amentities icons. You can also update text on the page to sound more like your client's voice and tone. To access and customize the "Book a Room" page: Click Pages on the left side of the editor. Click Book a Room under Wix Hotels . Click the Booking Page element on the page. Click Settings . Choose what you want to customize: Display: Choose where to display your reservation summary and whether you show icons for the amenities for each room. Text: Edit the text you display throughout the page, including the search bar, reservation summary and room listings. Design: Customize the general page design, the search bar, reservation summary and room listings using the available options. Previous Next Need An AI Run Website? Contact Us Today! Submit

< Back Studio, Partners & Enterprise Wix Studio Studio Editor: Using the AI Assistant to Add Custom Code Currently, this feature is in alpha mode. Add custom code behaviors to elements, without any coding experience, using our AI assistant. Whether you're enhancing interactivity or creating tailored experiences, AI makes it simple. Focus on your creative vision while the assistant handles the technical coding, offering suggestions or implementing your own ideas. How can I access the AI assistant? There are 2 ways you can access the AI assistant for help with custom code – directly through the Code panel, or by selecting an element on the canvas. . On the canvas: Right-click the element you want to customize and select Add Custom Behavior with AI . Through the Code panel: Access the Code panel on the left side of the editor and select AI Assistant . Adding custom behavior with AI Access the AI assistant from the Code panel, or right-click the specific element you want to customize. The assistant will send an initial message on your behalf – ‘What interactive behavior can you apply to (element ID)?’— and offer tailored suggestions based on the element. Pick a suggested behavior or describe the customization you have in mind. You’ll always have the chance to preview and approve the code before it’s added to your client’s site. To add custom behavior with AI: Go to your editor . Right-click the relevant element. Select Add Custom Behavior with AI . Tip: This opens the chat with the AI assistant (within the Code panel) on the left side of the editor. Review the AI assistant's suggestions for custom behaviors it can add. Describe what you want to customize and click the Send icon . Tip: It doesn't have to be one of the suggestions if you had a different idea in mind. The AI assistant will evaluate and advise if it can add the customization you're thinking of. Choose what to do next: Refine the customization: Continue chatting to the AI assistant to clarify the specific customization you want it to add. Preview the code: Click Show code to see the code AI intends to add. It also provides a breakdown of what the code does, clarifying how it applies the customization. Add the code: Add the code to your client's site. Click Add code . Click Approve to confirm adding the code. What's next? Click Preview under Generated Code to see how your customization looks. You can always click the New Chat icon to start a conversation about another customization you want AI to make. Reverting code changes done by AI Restore your client's site to its previous state if you want to undo changes made by the AI assistant. You can access your chat history with the assistant and revert any generated code back to an earlier version. To restore the code to the previous state: Go to your editor . Click Code on the left side of the editor. Click AI Assistant . Click the More Actions icon at the top right of the code panel. Select Show chat history . Select the relevant conversation. Click Restore under the relevant Generated Code section. FAQs Click a question below to learn more. Are there customizations that are not supported? While the AI assistant can perform many actions on various elements, Wix apps and other third-party apps have certain limitations. If the assistant is unable to help with a certain action, it will let you know and suggest some alternative actions as well. The AI assistant gave me a list of element IDs (e.g. 'box 3', 'section1') - how do I find these? When chatting to the AI assistant, it may give you suggestions for elements on the page it can customize. Each element has a unique ID identifying it in the code. When dev mode is enabled , you can see element IDs when selecting the relevant element on the canvas, or in the Layers panel. On the canvas: When selecting an element, the element ID appears on the blue label, right next to the element name. In the example below, the text element's ID is 'text7'. In the Layers panel: Open this panel to get an overview of all of the elements on the page and their IDs. Make sure the Display IDs toggle is enabled. Previous Next Need An AI Run Website? Contact Us Today! Submit

< Back Studio, Partners & Enterprise Wix Studio Studio Editor: Adding and Customizing a Form Build unique forms with customizable layouts and styles for client sites. When you create a form, a form builder opens directly inside the Studio Editor. Add fields that fit all types of questions like multi choice, checkboxes, and drop-downs. You can also use new layout options to create columns, titles and sections for the form. Once you're done building the form, it's available inside the Studio Editor to add to any page of the site you choose, along with pre-installed form templates. Important: Starting August 1, 2025, the old Wix Forms app will no longer be available in the Add Elements panel of the Studio Editor. Creating a form Create a form directly inside the Studio Editor using a drag and drop form builder. Building a form inside the editor allows you to continue creating the form and site together without navigating away or losing your place. Note: Most of the available forms in the Studio Editor are the new Wix Forms. However, if you prefer using the old Wix Forms, you can add the Order or Donate form presets. To create a form: Click Add Elements on the left side of the editor. Click Contact & Forms . Click Create New Form and drag the form element onto the page. You can also select a form from the pre-installed templates including Contact, Subscribe and Order forms. Click the form in the Editor and click Edit Form to open the form builder. Note about Order forms: Order forms were built using the previous version of Wix Forms, so the options to customize form fields are different. If you are creating an order form, follow these instructions about how to customize form fields . In the form builder, click the Edit icon at the top left to name the form. This form name is only visible internally to help you identify it. Choose fields for the form under Add form fields . The types of fields include: Contact fields: Add fields that collect and store personal data in Wix Contacts . General fields: Add elements like multi choice, checkboxes, drop-downs, and answer boxes. Date fields: Add time and date fields for appointment scheduling or time sensitive enquiries. Layout elements: Add a header or text element to organize the form or further explain a field. Note: The new Wix Forms do not have a CAPTCHA field as all forms are already integrated with spam filters. Learn more about spam filters in the FAQ section of this article . (Optional) Click a field to customize it further, including: Updating the field settings. Making it a required field. Deleting a field. Resizing the field to make a form with multiple columns. Learn how to add columns in the FAQ section of this article . (Optional) Click Rules or Pages at the left to add conditional rules or multiple pages to the form: Rules: Add a conditional rule to the form. Rules improve the way you collect information based on responses. A visitor's response to one field can determine if another field is shown, hidden, required, or optional. For example, add a rule such as, 'If a visitor chooses Option A in Question 1, then Question 2 is hidden. But if they choose Option B, Question 2 is visible.' Pages: Create multiple pages for the form. This keeps questions and information organized. Tip: If you have multiple pages, make sure you add a Submit field to each page so visitors can navigate through the pages by clicking 'Next.' Click Save at the top right. Important: Make sure you add a Submit field to the bottom of the form. If you don't have a submit button, visitors have no way to send the form. Customizing the form design Once you've created a form and added the relevant fields and sections, customize how the form appears on the page including the background color, button style, and font. To customize the form design: Click the relevant form in the editor. Click Settings . Click the Design tab. Customize the form design using the available options: Form Background: Choose the form background color as well as the border color and width. Form Fields: Choose a color and style for your form fields as well as how they appear in Regular, Hover and Error states. Header and Paragraph: Choose a font and color for the form text. Buttons: Design the form buttons including how they appear on hover. Submit Button: Design the submit button style and color. Note: If you are customizing a form built with the previous version of Wix Forms (e.g. an Order form) click the Design icon in the settings panel above the form to customize it. Adding an existing form to a site All forms created in the Studio Editor are saved in the site's dashboard along with that form's submission data. When you want to add a new form to a site, you can choose from all the existing forms as well as the pre-built form templates. To add an existing form to a site: Click Add Elements on the left side of the editor. Click Contact & Forms . Click Add Existing Form . Click the new Form element in the Editor. Click Settings . Click the Forms tab. Choose a form to display from all the forms created on the site. If there are many forms, use the search bar to locate the right one. (Optional) Click the Layout and Design tabs to further customize the form. Tip: You can switch out one form for another at any time. Click Settings above a form and then choose another form in the Forms tab. The new form automatically replaces the previous one without breaking the layout or design of the page. Viewing form submissions From the site's dashboard you can access the most detailed submission data for each form on the site. If you want to quickly glance at data for a specific form, you can also view responses by clicking the Submissions tab inside the form builder. To view form submissions: Go to Forms & Submissions in the site's dashboard. In the Forms tab, you can see all the forms you've created as well as the number of submissions each form has. To view more details: Click the More Actions icon next to a form. Click View submissions . Tip: All form submissions appear in a table. Information is separated into columns depending on what fields you've added. You can also see the exact submission time. FAQs Click a question below to learn more about adding forms in the Studio Editor. What's the difference between new Wix Forms and the old Forms? The new Wix Forms allow you to create your very own form, with the fields, rules and number of pages you want. The new forms also let you add the same form to multiple site pages – all submissions will be connected to the same submission table. Can I accept payments with new Wix Forms? Yes, you can accept payments through site forms you create with the new Wix Forms. Do I have to pay to use the new Wix Forms? The new Wix Forms are free to use. If you want to create more than 4 forms, upgrade your client's site . Some form fields (e.g. the upload file field) are also premium features. Why do the edit and settings options above my form look different? Most forms in Wix Studio are built using the newest version of Wix Forms. Some types of forms, however, including order forms, are built using a previous version. If you see 'Form Settings' and 'Add New Field' in the settings menu instead of 'Edit form' and 'Settings,' it means the form was built on the previous version. You can have both versions of a form on a site, the design and customization options are located in a different place. How do I add columns to my form? Click the form in the editor. Click Edit form . Click the right edge of a field and drag to resize it. Once the field is the right size, drag another field next to it to make a second column. How do I test a form? You can fill out and test a form from the Preview tab in the form builder. Select the form in the Studio Editor. Click Edit Form . Click the Preview tab at the top of the form builder. Test the form including selecting different options, inputting information in text boxes, and clicking 'Next' to navigate between form pages. How do I set email notifications for a form? When someone submits a form, an email automatically gets sent to the site owner notifying them about the submission. This email notification is built using Wix Automations. You can update the automation as well as change who receives emails from Forms & Submissions in the site's dashboard. Go to Forms & Submissions in the site's dashboard. Click the More Actions icon next to a form. Click Set notifications . Wix Automations opens the active email automation for that form. To update who receives an email about the form submission, click the More Actions icon next to the relevant automation. (The automation should have 'Form submitted > Get an email' as the trigger and action). Click Edit . Scroll down to the automation action and click the Action drop-down (the action should be 'Get an email'). Under Send email to: select Custom emails . Enter the emails you want to receive the form submission notifications. Note: If you still want the site owner to receive the notifications, add the site owner's email address to the list. Click Save . Why can't I add a CAPTCHA field to my form? The new Wix Forms are automatically integrated with spam filters. These filters automatically filter out submissions from blacklisted IPs and email addresses. New Wix Forms also integrate with a site viewer CAPTCHA (or invisible CAPTCHA). These CAPTCHAs are not visible in the form, but analyze a site visitor's behavior. If activity is considered suspicious (e.g. potential bot activity) a CAPTCHA challenge appears in the form submission. Can I translate my forms? If you have installed Wix Multilingual on your site, you can translate your forms from the Translation Manager. Go to Multilingual in your site's dashboard. Hover over the relevant language and click Edit Translations . Click Forms on the left to see the forms available for translation. Edit your form's translation manually or click Auto-translate . Learn more about translating your app content . Previous Next Need An AI Run Website? Contact Us Today! Submit

< Back Studio, Partners & Enterprise Wix Studio Studio Editor: Adding Apps Want to add more functionality to a site in the Studio Editor? The app market has hundreds of apps to choose from. Whether it's major site components like Wix Stores or smaller, helpful apps for analytics, we've got you covered. Adding an app from the app market The app market is where you can add new apps to a site you're working on, both external apps and apps made by Wix. It's organized by categories so you can quickly find relevant apps. Some are free to install, others require payment and / or a subscription. To add an app: Click App Market on the left side of the editor. Click App Market . Use the search bar and the categories on the left to find the app you need. Click the app you want to add. Click + Add to Site . FAQs Click a question below to learn more about adding apps to a Studio Editor site. What happens after adding an app? Often, when adding an app, a widget is automatically added to the page you're working on. In other cases, relevant new site pages are automatically created to show the app's content. Click the widget, or go to the pages that were added, to customize the settings to your client's needs. I've added an app but I don't see it in the editor. Where is it? Some apps have components that appear both in the dashboard and the editor (e.g. Wix Stores, Wix Bookings, Wix Blog, etc.). A few apps work behind the scenes and can be found only in your site's dashboard. Make sure to look for those apps in your dashboard . Are there integrations with external sites and platforms? Yes, you can find plenty of integrations with known sites and platforms in the app market. Note: Apps that integrate with external sites may try to connect to your account if you are logged in (e.g. the Instagram Feed App connects you to your Instagram account). Previous Next Need An AI Run Website? Contact Us Today! Submit

< Back Studio, Partners & Enterprise Wix Studio Studio Editor: Adding Alt Text to Images Alternative (alt) text provides a concise description of visuals, helping search engines and assistive technologies understand the content. Alt text can improve both the site's accessibility and SEO , making it an essential part of site building. Make it a standard practice to include alt text for all images and GIFs on your client's site. As well as enhancing the experience for visitors, alt text can improve search visibility. This elevates the overall quality of the sites you create, and clients will appreciate the resulting accessibility and higher search rankings. Adding alt text to images in your editor No matter whether the site has single images, pro galleries, or both, you can add alt text. You can add it to single images from their settings, and to pro gallery images from the Media Manager. To add alt text in the editor: Go to your editor . Click the relevant image or pro gallery. Add the alt text: Single images Click the Settings icon . Write a short description for your image under What's in the image? . Press Enter on your keyboard to save. Pro gallery images Click Manage Media . Select an image. Enter a title for the image in the field. Edit the alt text for your image under Alt text if you want it to be different from the image's title. Click Done . Note: It is not currently possible to add alt text to images / galleries in bulk. If you would like to see this feature, you can vote for it here . Adding alt text to images in the Accessibility Wizard You may be prompted to add alt text to images when you scan a site with the Accessibility Wizard . If you have already added alt text, you can still use the task's drop-down to update it. To add alt text in the wizard: Go to your editor . Click Site Checker on the left side of your editor. Select Fix Accessibility Issues . Click Scan Site . Select the Detected issues tab. Open the relevant page drop-down. (If not all images have alt text) Click Get started . (If you have previously added alt text to all of the images) Click Edit . Click the Edit icon beside the relevant image and enter the text into the field. Click Apply . Tip: You can click Apply as you go, or when you're finished adding alt text to all images in the panel. Generating AI alt text in the Accessibility Wizard Not sure where to start? You can generate alt text with AI in the Accessibility Wizard. The tool provides 2 options to best suit your needs - you can use it on specific images, or generate text in bulk for every image on the page. Important: SVG or GIF images are not supported by the AI alt text tool. You need to manually write the alt text for these files. We cannot guarantee that AI generated alt text is always completely accurate. We therefore recommend checking the generated text for every image, and editing it as needed. To generate AI alt text: Go to your editor . Click Site Checker on the left side of your editor. Select Fix Accessibility Issues . Click Scan Site . Select the Detected issues tab. Open the relevant page drop-down. (If not all images have alt text) Click Get started . (If you have previously added alt text to all of the images) Click Edit . Select what you want to do: Generate alt text for a single image: Click the Edit icon next to the relevant image. Click Generate . Bulk generate alt text for all page images: Click Generate . Check the generated text and make any necessary changes. Click Apply . Using bulk editing? The tool does not create alt text for images that are marked as decorative, or those that already contain alt text. Note: Occasionally, you may see that the AI tool has failed to generate alt text for an image / images on a page. You can click Try Again as needed. Frequently asked questions Select a question to learn more about alt text. Can I add alt text to app images? Absolutely - you can add alt text to images that appear in most Wix apps (e.g. Wix Stores, Wix Blog) from your editor, your dashboard, and the Accessibility Wizard. Why is alt text important for accessibility? Some visitors may use assistive technologies such as screen readers to navigate through sites. These read the site's content aloud to the visitors (including alt text). Alt text is therefore an important part of a site, as it ensures that visitors using these technologies can access the content, and understand what the image contains. Learn more about alt text and accessibility How does alt text impact SEO? Search engines can't 'see' the content of site images, and rely on a text description to understand them. Adding alt text to an image helps search engines to match site pages with the relevant search terms, and include these pages in search results. Learn more about optimizing alt text for SEO Previous Next Need An AI Run Website? Contact Us Today! Submit

< Back Studio, Partners & Enterprise Wix Studio Studio Editor: Adding and Customizing Wix Chat Add Wix Chat so your client can communicate with site visitors directly. Welcome people when they visit the site and set the chat availability so your client never misses a message. Adding Wix Chat Add the Wix Chat app to your site from the App Market. Once you do, a minimized chatbox appears at the bottom right of the Studio Editor. To add Wix Chat: Click App Market on the left side of the editor. Click App Market . Type "Wix Chat" in the search bar and press Enter on your keyboard. Click Wix Chat . Click Add to Site . Customizing the chatbox Adjust the chatbox so it matches the brand and site needs. Customize the design, personalize the text and choose the pages where the chatbox appears so your client never misses a message. To customize the chatbox: Click the minimized chatbox at the bottom right of the editor. Click Settings . Choose what you want to customize: Display: Choose the chatbox location on the page, the pages that display it and the way new messages appear to visitors. Design: Customize the way your chatbox looks (e.g. business logo, chatbox background, font). Texts: Write the text that appears on and inside the chatbox. What's next? Customize additional chat settings like online and offline chat hours, the pre-chat form and more. Initiate chats with live site visitors to keep them engaged. Go to your inbox to view and reply to all chat messages. Previous Next Need An AI Run Website? Contact Us Today! Submit

< Back Studio, Partners & Enterprise Wix Studio Studio Editor: Customizing the Members Area Menu The Member Menu appears on every tab of the site's Members Area, allowing members to navigate their account with ease. You can decide which tabs appear on the menu and control its layout and design. Navigating the Member Menu You can quicky access and edit the different tabs that make up your Members Area right from the editor. Use the floating dropdown menu to quickly switch between tabs. You can then manage and edit the settings for each tab. Clicking on tab names in the Manage and Navigate panel also takes you to see the content. From this panel, you can control which tabs appear on the Member Menu, as well as reorder and rename them. Tip: The dropdown will appear at the top of your editor when viewing your Members Area. If you don't see it right away, just scroll down a little. You can click and drag the menu to move it wherever you like. Managing the tabs on the Member Menu You have full control of the tabs that appear on your Member Menu. You can choose which tabs it shows, change their order and add a submenu to keep your menu neat and minimal. To manage your Member Menu: Click Pages on the left side of the Studio Editor. Click Member Page under Members Area . Select the Member Menu element and click Manage and Navigate . Choose what to do next: Add more tabs: Enhance the Members Area with new capabilities, like the Profile tab that lets members introduce themselves to the community. Note: The available tabs depend on the Wix apps installed on this site (e.g. the "My Wallet" tab is only available for Wix Stores). Learn more about adding tabs to your Member Menu . Remove a tab: Hover over a tab, click the More Actions icon and Delete Tab . Rename a tab: Hover over a tab, click the More Actions icon and Edit Tab Name . Reorder tabs: Hold the Reorder icon next to a tab and drag it to the desired position. Adjusting the layout of the Member Menu Change the Member Menu's layout to your needs. Choose how to display the items by adjusting their alignment, size, direction and more. To adjust the layout of your Member Menu: Click Pages on the left side of the Studio Editor. Click Member Page under Members Area . Select the Member Menu element and click the Layout icon . Use the available options to adjust the layout of the menu and submenu. Tip: The available layout settings depend on the type of menu you have (vertical or horizontal). To change your menu from vertical to horizontal or vice versa, you need to change the layout of the Members Area . Designing the Member Menu Customize the look of your Member Menu to fit your aesthetic. Design the menu's background, the text it shows and the borders and corners. You can also design your menu items so they stand out from the rest of the menu when members hover over or select them. To design your Member Menu: Click Pages on the left side of the Studio Editor. Click Member Page under Members Area . Select the Member Menu element and click the Design icon . (In the Inspector) Select an option under What do you want to design?: The menu container, Scroll button or the menu items. Select the relevant state from the drop-down: Regular , Hover or Current page . Note: This option is only relevant for the scroll button and menu items. Use the available options to design the menu. Previous Next Need An AI Run Website? Contact Us Today! Submit

< Back Studio, Partners & Enterprise Wix Studio Studio Editor: Working With Vector Art and Basic Shapes Enhance your design with striking vector art and basic shapes. These scalable illustrations and icons (SVGs) maintain perfect quality at any size, making them ideal for responsive sites. Choose from Wix Studio’s library of free vector art and basic shapes, or upload your own SVGs to align with your client’s brand. Tip: Vector art files often include multiple colors, while basic shapes focus on a single color. However, they're both SVG files. Adding vector art and basic shapes You can use vector art and basic shapes to decorate your client's site, or as an appealing call-to-action. You can either choose from the hundreds of free options available from Wix Studio, or you can upload your own. Click an option below to learn more. Choose from the free options available from Wix Go to your editor . Click Add Elements on the left side of the editor. Click Decorative . Click any category under Shapes or Vector Art . Tip: Access many more free suggestions by clicking More Basic Shapes or All Vector Art . Drag your chosen SVG onto the page. Upload your own SVG Go to your editor . Click Media on the left side of the editor. (In the Media Manager) Click + Upload Media . Select your file(s) from your computer. Click Open . Select the SVG you just uploaded and click Add to Page . Tip: When uploading your SVG file, we analyze its colors and classify it either as a basic shape element or a vector art element. For instance, SVG files that only show a single color will appear as 'basic shapes' in the editor. Designing vector art and basic shapes Customize the vector art / basic shape element, including the colors, opacity, and shadow, so it truly complements your design. Note: The available customization options depend on whether the vector art features a single color, multiple colors, or a grayscale palette. To customize the design: Go to your editor . Select the relevant vector art or basic shape element. Click the Open Inspector icon at the top right of the editor. Design the vector art / basic shape using the available options: Basic shape: Change the fill color and opacity, add a border and apply a shadow. Vector art: Change the fill color(s), adjust the opacity and apply a shadow. Note: It is not possible to change the opacity separately for each color of the vector art. Uploaded your own SVG? If we are not able to identify the colors in your SVG file, you may not be able to customize the colors in the editor. Adjusting the settings of basic shapes and vector art Tweak the vector art or basic shape settings to your liking. Add a link to turn the element into a button and add alt text to make it accessible. Additionally, you can ensure the element keeps its original proportions when resizing, or decide that you want to resize it freely. To adjust the settings: Go to your editor . Select the relevant vector art or basic shape element. Click the Settings icon . Choose what to do next: Want to add a link?: Add a link to the vector art / basic shape. What's this shape / What's in the vector art?: Enter a short description of what you can see in this vector art or basic shape, to help search engines and accessibility tools. Keep original proportions: Enable this toggle to ensure the element's original proportions are maintained when you resize it. Adding a link to basic shapes and vector art Add a link to turn the element into a button or call-to-action. You can link to many places, such as a site page, an external URL, or even a phone number. Adding a link is a great way to encourage interactivity from site visitors, and create something that is both eye-catching and functional. To add a link: Go to your editor . Select the relevant vector art or basic shape element. Click the Link icon . Select the type of link from the list on the left. Enter the relevant information. Click Done. Previous Next Need An AI Run Website? Contact Us Today! Submit

< Back Studio, Partners & Enterprise Wix Studio Studio Editor: About Wix Multilingual Want to create a site in multiple languages? Using Wix Multilingual you can go global, translating your content automatically or manually. With a simple drop-down menu, visitors can switch between languages and get a localized experience. Go to our Wix Studio Academy to check out additional Wix Studio webinars, tutorials, and courses. Adding new languages to a site While setting up Wix Multilingual, you choose whether to translate your content manually or automatically, this way your entire site can be translated instantly into a language of your choice. you can also decide whether to make the new language available to visitors or keep it hidden while you're working on it. Important: Once you've selected your site's main language, you cannot change it to a different language. If this is something you'd like to see in the future, you can vote for this feature . We recommend reviewing our list of translatable content before translating your site. Learn more about what apps can and can't be translated with Wix Multilingual Navigating between languages in the Studio Editor Click the drop-down menu showing the current language in the top bar of the Studio editor to select a language to work on, or click Manage Languages to access the Multilingual dashboard. Translating site and app content Access the translation panel using the newly added languages dropdown at the top of your editor. Translate your site's content automatically or manually for a tailored multilingual experience. Translate both your site and apps content in one place on your site's dashboard - The Translation Manager . Add and translate as many languages as you want as your customer base and business grow. You can also choose what languages to show or hide, and delete any languages that you no longer wish to display. Tip: Wix Multilingual affects your site's regional settings , we automatically adjust the date format, numbers and other metrics to that specific locale. Previous Next Need An AI Run Website? Contact Us Today! Submit

< Back Studio, Partners & Enterprise Wix Studio Studio Editor: Adding and Customizing Videos Videos bring your client's brand story to life, capturing attention and creating a meaningful connection with site visitors. The Studio Editor allows you to seamlessly showcase videos, embed content from social platforms, and enhance your design with unique video elements. Choose from single video players or customizable VideoBoxes, and refine every detail, from playback settings to creative design touches, to create an engaging visual experience. Adding a video Select the video element that best fits your design and goals. Use a single video player for straightforward playback, or opt for a VideoBox for more advanced customization. You can also enhance the site’s design with transparent background videos, crafted by Wix, for a unique decorative touch. To add a new video: Click Add Elements on the left side of the editor. Click Media . Select a video type under Video: Single Video Players: Upload your own video or embed one from a social network. VideoBox: Showcase your own videos, free Wix videos, or professional Shutterstock videos in beautifully designed video containers. Transparent Video: Add or upload your own videos with transparent backgrounds. Drag a video to the desired location on the page. Customizing a single video player Fine-tune the single video player to seamlessly fit within your site’s design. Personalize everything from the video’s playback behavior to its controls and layout, ensuring it delivers a polished and engaging experience for every site visitor. To customize a single video player: Select the video player. Choose how to customize it: Change the video You can always replace the video to a different one, whether it's from your computer or from external sources (e.g., YouTube, Vimeo, Facebook, etc.) Click Change Video . Do one of the following to replace the current video: Click Change Video to access your files in the Media Manager. Click any of the social network icons to share a video. Make sure to enter the video's URL under What's the video's web address? . Decide how your video plays Click Change Video . Click the Autoplay toggle to choose how the video starts playing: Enabled: Your video plays automatically once the site loads. Disabled: Visitors need to click the Play button to start the video. Click the Plays in a loop toggle: Enabled: Your video starts playing again and again when it's finished (in a continuous loop). Disabled: Your video only plays once. Note: The option to play videos in a loop isn't available for all external sources (e.g., Facebook, Dailymotion). Adjust the video player's layout From the Layout panel, you can choose whether or not to show the video's title and its controls, and adjust the size of the Play button to your liking. Click the Layout icon . Click the Show video title toggle: Enabled: The video title appears on top of the player. Tip: You can format and style this title from the Inspector panel. Disabled: The video title isn't visible. Drag the slider under Play button size to increase or decrease the size of the button. Select an option under When playing, controls show : On hover: The video controls (e.g., the play or pause button) appear when visitors hover over the player. Never: The video controls aren't displayed. Note: The available options depend on the type of video you add to the player. Design the video player From the Inspector panel, design your video player to match your style. You can change the overlay color and its opacity, add shadow, format the video's title and more. Click the Open Inspector icon at the top right of the editor. Scroll down to Design . Do any of the following to design the video player: Fill Color & Opacity: Click the color box to choose a different color for the overlay, and drag the slider to adjust its opacity. Border: Add a border to make your video player stand out. Shadow: Click Enable Shadow to add and design a shadow to appear behind the player. Text: Choose a color for the title and play button, and format the title to your liking. Customizing a VideoBox VideoBoxes give you the creative freedom to integrate videos as design elements. Customize playback settings, experiment with unique shapes, and refine every detail—from the cover image to borders—for a truly personalized and visually striking result. To customize a VideoBox: Select the VideoBox. Choose how to customize it: Set your VideoBox behaviors Set how your VideoBox behaves by customizing the play, pause and loop settings as well as the sound behaviors. Play around with the options to see which you think will improve engagement and visitor interaction. Click the Behaviors icon . Customize the different play and sound behaviors: Choose whether your video starts on click, on hover or automatically. Decide if the video should loop continuously, replay on click or stop once it ends. Make your video play in slow motion or with sound. Tip: These options are only available for videos that were recorded in slow motion and/or with sound. Many videos offered by Wix includes slo-mo or sound. Choose the focal point Choose the focal point of a VideoBox for each breakpoint. This means that when the VideoBox is resized for different screen sizes, the part of the video you want to show is always displayed. Click the relevant breakpoint at the top of the editor. Click the Focal Point icon . Select the area of the video that you want to remain visible when it's resized. Design the VideoBox This is where you can really make your VideoBox your own. Choose a cover image, border and shadow, and apply a pattern overlay to create a unique effect. There are many patterns to choose from to match your particular style. Click the Open Inspector icon at the top right of the editor. Scroll down to Design . Do any of the following to design your video: Cover image: Pick a different image as the cover of the VideoBox (what visitors see before clicking it). Pattern overlay: Enable the Apply Pattern Overlay toggle to add an interesting pattern (animated or not) that makes the video even more engaging. Border: Apply a border around the VideoBox while choosing its color, opacity and width. Shadow: Add shadow while choosing its size, color, angle and distance from the VideoBox. Contour: Make the edges of the VideoBox more round or rectangular. You can choose the radius (in px) next to each corner. Note: If you add a video mask, the Border and Contour options are not available. Add a video mask Use a video mask to give the VideoBox a unique shape and a striking visual effect. Choose from thousands of shapes and vector art, or upload a shape of your own (SVG file) to cut out the video. Need to switch the video? Click Change Video to access the Media Manager and select a different file. Accessibility tip: Visitors can pause the VideoBox at any time by hovering over it to reveal the pause button. Troubleshooting video elements Even the best designs may encounter small snags. Here are some typical issues you may face with videos and how to resolve them effectively. Why is my video not playing on my live site? Motion-based elements, such as transparent videos or animations, may not play on live sites due to the Reduced Motion feature on certain operating systems. This accessibility feature prevents motion effects from running to aid visitors with disabilities. Check if Reduced Motion is enabled on your device or your visitors’ devices and learn how to disable it: iPhone and iPad Mac OS Windows OS Android Note: On mobile devices, Reduced Motion may also activate automatically when in low battery or power-saving mode. I have set my video to autoplay, but there's no sound. Why? Most browsers, including Chrome, Firefox, and Safari, block autoplay videos with sound to enhance user experience. To ensure your video plays automatically: Mute the sound on autoplay settings. Let users manually enable sound from the video controls. Browsers that don't support autoplay with sound: Safari (macOS and iOS): Version 11 and later Chrome: Version 61 and later (desktop and mobile) Firefox: Version 66 and later (desktop and mobile) Previous Next Need An AI Run Website? Contact Us Today! Submit

< Back Studio, Partners & Enterprise Wix Studio Studio Editor: Editing and Customizing Images Enhance the images on your client’s site with powerful editing and customization options in the Studio Editor. Adjust image sizes, crop to focus on key details, and set focal points to ensure the most important areas are always visible across all screen sizes. Use Photo Studio for advanced edits and effortlessly add watermarks to protect your work. Tip: Images have unique scroll animations - Parallax Fill and Reveal Fill - that can help you make the visitors' experience more dynamic. Choosing the image's fit mode In the Studio Editor, every image has a bounding box that acts like a responsive container. These are the blue edges that you see around the image. You can choose how the image is displayed within the bounding box (e.g. Fill, Fit). To choose the image's fit mode: Select the relevant image. Click the Settings icon . Select an option from the Display mode drop-down: Fill bounding box The image fills the bounding box so there aren't any empty areas, while still maintaining its original aspect ratio. If the image aspect ratio doesn't match the bounding box proportions, parts of the image are cropped out in the process. For example, when fitting a rectangular image into a square, the sides are cropped to fit that shape. Fit to bounding box The entire image is shown inside the bounding box. If the image aspect ratio doesn't match the bounding box proportions, the image shrinks so it's fully displayed. The image is centered inside the box, which may create empty spaces like in the example below: Keep image ratio The image width is fixed to the bounding box, while the height adjusts automatically to match the image's original aspect ratio. This is a great option for non-symmetrical layouts where you want to show images in different heights, like in the Repeater below: Note: This option is not available for stretched images. If you want to select this option, unstretch the image first. Working with breakpoints: The display mode you choose for the image applies to all breakpoints. Cropping an image You can choose how an image is cropped for each breakpoint. This allows you to further customize the image to suit your specifications, and provide an ideal experience for visitors on all devices. To crop an image: Click the relevant breakpoint at the top of the Studio Editor. Select the image. Click the Crop icon . Customize the crop to your needs. Click Apply . Tip: If you want to uncrop your image, you can reset it by clicking the Settings icon , then Reset Image . Setting the image focal point You can choose the image focal point for each breakpoint. This allows you to select which part of the image is visible when it's resized for different breakpoints on different screen sizes. Tip: Whenever a dominant face is detected, we automatically set it as the focal point of the image, however, you can change or adjust the focal point as needed. To set the image focal point: Click the relevant breakpoint at the top of the editor. Select the image. Click the Focal Point icon . Select the area of the image that you want to remain visible when it's resized. Masking an image with a shape Image masks allow you to easily crop images into different shapes, giving you the flexibility to fit them seamlessly into the design. Choose from thousands of unique designs or upload your own SVG file. To mask an image: Select the relevant image. Click the Mask icon . Choose the shape you want: Explore the different shapes available in the panel. Click the Add icon to browse through more designs or upload your own file. (Optional) Make the image fit the shape's original aspect ratio by clicking Reset to shape's ratio Note: This might resize the image. Changed your mind? Click the square shape at the top of the panel. This removes any mask previously applied to the image. Editing an image with Wix Photo Studio Use the Wix Photo Studio to create beautiful images without leaving the Editor. The Photo Studio allows you to customize images that you've already uploaded and saves the newly edited version to the Media Manager. There are a variety of editing options available, such as filters, rotation, and overlays, so you can revamp any image on the spot. Tip: You can also edit images directly from the Media Manager by clicking Crop & Edit under the thumbnail image. To edit an image: Select the relevant image in the Editor. Click the Settings icon . Click Adjust . (In the Photo Studio) Edit the image using the available options . Click Save . What's next? The newly edited version is automatically replaced on all breakpoints, as the Wix Photo Studio makes changes to the image source. However, changes done on the canvas (to the image design or crop) still only apply to the current breakpoint. Adding a watermark for copyright protection Protect images on the site by adding watermark text in the Photo Studio . The text can be designed and customized to suit your client, and cannot be removed from the file if downloaded. To add a watermark to an image: Select the image in the Editor. Click the Settings icon . Click Adjust . (In the Photo Studio) Click Text under Add An Element . Browse the text styles and click to add one to the image. Type your watermark message. (Optional) Click Design to customize the text. Click Save . Previous Next Need An AI Run Website? Contact Us Today! Submit

< Back Studio, Partners & Enterprise Wix Studio Studio Editor: Pro Gallery Best Practices Pro Gallery lets you display videos, images and text, all in one beautiful multimedia gallery. Read the guidelines in this article to make the most out of Pro Gallery in the Editor – discover the different ways you can customize your gallery and make it look great in any screen size. Finding the settings you need There are two main areas where you can adjust different gallery settings: The Wix Pro Gallery settings panel The Inspector panel The Settings panel The Settings panel lets you adjust your gallery's design and functionality. You can choose a layout that suits your images, decide what happens when clicking on an item, or enable a variety of social sharing settings. The Inspector panel From the Inspector panel, you can adjust your gallery's size, position and behavior across breakpoints. These settings can help to ensure your gallery is responsive and looks great in every screen size. The Design tab opens first by default. Click the Interactions tab to create engaging animations. Making your gallery responsive There are many different ways to ensure your gallery is responsive to all screen sizes. Read below to choose the best method for your design needs. Check the gallery's responsive behavior In the Inspector panel, you can see the gallery's size and the current responsive behavior. Make sure the gallery is set to either Relative width or Stretch to ensure it resizes automatically and in relation to each visitor's screen. Tip: It is not possible to adjust your gallery's height in the Inspector when: Your gallery is set to scroll vertically. Your gallery is horizontal with a fixed ratio. You can change these settings from the Layout tab in the gallery's Settings panel. Use different layouts per breakpoint Pro Gallery offers different layout options. You can choose a layout for each of your breakpoints so the gallery always fits the screen. You can also save time by choosing a preset layout that is fixed where you only change the color, text and animations in the Design tab. Troubleshooting gap and spacing issues If you find that there is too much space above, below or between gallery images, try the steps below. Reduce the spacing between images Check the spacing you've set between images in your gallery's Settings panel. Click the Pro Gallery. Click Settings . Click the Layout tab. Click Customize Layout . Scroll down to Design Settings . Drag the Spacing slider to reduce the gaps between images. Check the text box size When your gallery text appears above or below images, make sure the text box isn't too big. If the text box is too big, it can affect the spacing and create unwanted gaps. You can check the text box size and make it smaller from your gallery's Settings panel. Click the Pro Gallery. Click Settings . Click the Design tab. Click Texts . Select Manually under Adjust text box size . Drag the slider under Text box size to make it smaller. (Slide show layout) Check the info bar size The Slide Show layout includes an info bar that shows your image's information. If the info bar is too big, with a small amount of text that doesn't fill up the entire space, it can create gaps below the images. Click the Pro Gallery. Click Settings . Click the Layout tab. Click Customize Layout . Set the Info Bar Size to a lower number or to 0 to remove the empty space. Previous Next Need An AI Run Website? Contact Us Today! Submit