< Back Studio, Partners & Enterprise Wix Studio Studio Editor: Adding and Customizing the Pro Gallery It's so important to add those special touches and show off your images, videos and text in a way that's right for you! The pro gallery is a professional solution that offers a wealth of customization options, from layout, design, and style there's so much to explore. So whether you're a food blogger, photographer, or professional agency, the pro gallery offers you the tools you need to wow your clients. Adding the pro gallery There's so much you can do with a pro gallery, it offers tons of customization options and it's a great way to really showcase your style and work. What features does it offer? Can be stretched to full width to be used as a background. Displays different types of media in one gallery (photo, video, and text items). Customize how your pro gallery resizes across all breakpoints. Wide range of layouts with unique settings and customization options per layout. Offers separate layouts and design for the mobile breakpoint. Allow your media items to be expanded or open in full screen with a click. Customize the layout and design of the expanded view. Share, Like and Download icons on each gallery item. Connect it to collection databases using the CMS (Content Management System). To add a pro gallery to your site: Click Add Elements on the left side of the editor. Click Media . Click Pro Galleries . Choose a pro gallery design and drag it onto the page. What's next? Click the gallery you just added, then Manage Media to select the images and videos. Using drag and drop, you can easily rearrange the gallery. Customizing the pro gallery settings You can customize every individual part of the gallery to get the look and feeling you want. To customize the pro gallery settings: Click the pro gallery in the editor. Click Settings . Choose what you want to customize: Layout Choose a layout from the options available. Presets are fixed layout templates created by Wix. With these layouts, the bulk of the work is done for you, meaning the layout itself is not customizable. If you selected an option from the Custom tab, you can click Customize Layout to adjust it further: Scroll direction : Choose if you want your gallery to scroll vertical or horizontal. Gallery orientation : Choose how you want your gallery to be orientated. Info to display : Choose what item information displayed when visitors hover over your gallery items. Thumbnail size : Drag the slider to adjust the size of the gallery thumbnails. Spacing : Drag the slider to adjust the spacing between your pro gallery files. Collage Density : Drag the slider to increase or decrease the density (number and size) of the files in your gallery. Note : A higher density displays more files of smaller sizes. A lower density displays fewer files of larger sizes. Gallery direction : Choose if you want to have your gallery go from left to right or from right to left. Tip : Set the direction to "Right to Left" for the text in Arabic and Hebrew languages to be shown correctly. Notes: The layout customization options vary per layout, and some options are only available on specific layouts. It is not possible to adjust your gallery's height in the Inspector panel when: Your gallery is set to scroll vertically. Your gallery is horizontal with a fixed ratio. Settings Customize the following: When clicking on an item : Click the drop-down icon to control what happens when your site visitors click a gallery item. Download : Click this toggle to show or hide a download icon for your visitors to download your images and videos. Social sharing : Click this toggle to show or hide social icons so your visitors can easily share your gallery items. Heart icon : Click the toggle to show or hide a heart icon for your visitors to show they like a gallery item. Design You can design every individual part of the gallery: Overlay & Icons: Customize the color overlay and icons that appear when visitors hover over the gallery. Texts: Display an item's title, description, or both when visitors hover it. Refine the text's design including the style, color and alignment. Buttons: Add buttons to encourage visitors to click on gallery items. Customize the buttons including the text and color. Navigation arrows: Customize the arrows visitors use to browse the gallery. Item Style: Customize the way gallery items look. Adjust the border, create shadows and add effects. You can also control how they load. Scroll Animations: Choose how your gallery items appear when your visitors scroll through the gallery. Expand Mode: Design the expand mode of your gallery items. Decide what information is displayed, customize the text style and refine the icon and background color. Note: The available options depend on the gallery layout you chose. Advanced Customize the following: Image Settings: Image quality : Drag the slider to adjust the image quality. Image sharpening : Click the Image sharpening toggle to sharpen the images in your pro gallery. Video Settings: Play videos : Click the drop-down icon to choose how you want the videos in your pro gallery to play. Play with sound : Click the Play with sound toggle to enable or disable the sound while your videos are playing in your pro gallery. Playback speed : Click the drop-down icon to choose your pro gallery videos playback speed. Loop videos : Click the Loop videos toggle to enable or disable looping on your pro gallery videos. Show play button : Click the Show play button toggle to show or hide the play button on your pro gallery videos. Want to improve accessibility? Pro galleries with videos set to autoplay are not accessible as visitors cannot pause them. To make your gallery accessible and disable autoplay for videos, open the Advanced tab of the Settings panel. Then, click the Play Videos drop-down and select either On hover or On click . Learn more about autoplay and accessibility . Enabling and customizing the Expand Mode When visitors click gallery items, you can set them to open in Expand Mode. This makes the gallery item open in a fully customizable expand window. To enable and customize the Expand Mode: Click the pro gallery in the editor. Click Settings . Click the Settings tab on the left. Select Open in Expand Mode from the When clicking on an item drop-down. Click the Design tab on the left. Click Expand Mode . Click Customize Expand Mode . Customize the following settings on the right side of the pop-up: Info Settings Choose how the image title and description appear in expand mode: What info is shown? : Select the checkboxes next to the info you want to display - title, description and link. Where does it appear?: Choose where the info should appear - to the right of the image or under it. When does it show?: Choose to keep the info next to the image or hidden in a 'Show Info' icon. Viewing Settings Choose how visitors view the images: Allow Full Screen : Let visitors view full screen images from expand mode. Magnifying Glass: Let visitors zoom in on images (works best for high resolution images). Loop Images : Enable the toggle to set continuous scrolling. Design Settings Customize the background, colors and fonts used in expand mode: Background Design : Set a color or a gradient as the background. Background Filters: Set a blurry filter to appear under the expand mode background. This helps visitors focus even more on the image. Text & Icon Design: Change the icon color, choose a different font for the image title and description, and more. Previous Next Need An AI Run Website? Contact Us Today! Submit

< Back Studio, Partners & Enterprise Wix Studio Studio Editor: Setting the Size of Your Elements As you're designing a site, you want to make sure it looks great on every screen size. In the Studio Editor, you set the sizing in px* and the responsive behavior takes care of the rest. Most elements come with a default behavior (e.g. scale proportionally) that controls the way it gets resized on other screens. You can always change the default behavior to one that better meets your needs. px* is a fluid size unit, relative to the page's editing size . Tip: You can set the element's size and responsive behavior per breakpoint . Resizing an element Select an element on the canvas and drag the side handles to make it smaller or bigger. This sets the way the element looks on the current breakpoint. In the Inspector panel, you can check the element's exact width and height. If needed, you can enter your own width / height values. Let the Inspector calculate for you: For your convenience, you can use addition ( + ), subtraction ( - ), multiplication ( * ) and division ( / ) when typing size values. For example, make an element 3 times wider by adding *3 next to the current width. Experiencing issues with resizing? Check out this troubleshooting video to learn how to resolve issues with sections and containers that won't resize. Resizing media elements When resizing a media element, like an image or a video, you can lock the aspect ratio so the width and height always stay proportional to each other. This means that when you change the width, the height automatically adjusts (and vice versa) to maintain the original shape of the element. Which media elements include this option? Image Lottie Animation Shape Vector Art Video Players VideoBox Transparent Video To lock the aspect ratio: Select the relevant media element. Click the Open Inspector arrow at the top right. Click the Lock aspect ratio icon under Size . Resize the element by either: Entering the width / height value in the Inspector (the other value adjusts automatically). Dragging the handles around the element on the canvas. Note: This option is not available in the advanced settings mode. Setting the size in px* px * is a fluid unit of measure in the Studio Editor. It lets you edit sizing using a familiar measurement (pixels), while the actual measurement behind the scenes is responsive. In other words, you design in pixels that represent the size on the canvas, and the element stays responsive. The specific values and size units depend on the responsive behavior you choose. Hover over px* to see the calculation, and the responsive size unit that is being used. In the example below, the container's width on the current canvas is 330 px*. The actual unit is percentage so the width is relative (25.8% of every screen). What's the difference between px* and px? Both let you edit in pixels, however: px* means the size you see is relevant to the breakpoint you're currently working on. px means the size is fixed across breakpoints. Choosing an element's responsive behavior When you add an element to the page, it already comes with a built-in responsive behavior. This means you don't have to worry about how the element looks on different screens - the responsive behavior ensures that it gets resized. However, you may want to switch the responsive behavior, if you see one that is more suitable for your design. What's the difference between the available behaviors? Each responsive behavior has a specific, automatic logic to the way the element gets resized on different screens. The available behaviors were tailored per element, the most common ones are: Scale proportionally: The element's proportions (width and height) keep the same aspect ratio on all screens. Relative width: The element's width changes automatically, in relation to its parent element. Fixed: The element always stays the same size, it does not resize on any screen. Stretch: The element stretches to fit its parent container on every breakpoint. Hug: There are no gaps between the element and its bounding box. The size of the bounding box on each breakpoint depends on the content inside. Note: This is also the default behavior for a horizontal stack. Section behaviors: Fixed height: The section always stays the same height, regardless of screen size. Fit to screen: This makes the section take up the entire height of the viewport (100 vh). If needed, you can adjust the vh so it takes up less space. Text behaviors: Wrap: The font size stays the same on all breakpoints, but the text wraps to fit its bounding box on smaller screens. This adds more rows to show the text. Hug: This leaves no gaps between the text and its bounding box. It also means that the amount of rows in your text always stays the same, regardless of screen size. Note: The responsive behavior you select affects the size units in use. For example, selecting the Fixed responsive behavior changes the measurement from px* to px. To choose a different responsive behavior: Select the relevant breakpoint. Select the element. Click the Open Inspector icon at the top right of the editor. Select an option from the Responsive behavior drop-down. Dealing with unwanted gaps on the live site? Check out this troubleshooting video to learn how the responsive behavior can affect, and resolve, this issue. Using advanced size measurements The advanced settings in the Inspector allow deeper customization of the element's size per breakpoint. Instead of working with px* and choosing a responsive behavior, this mode lets you see the measurements we're using behind the scenes (e.g. px, %, vh) and adjust them to your needs. What are the available measurements? You can choose the one(s) you prefer using: Pixels (px): If you want your element to stay exactly the same on every screen size, you can simply set its height and width in px values. Percentage (%): The width / height value of the element depends on its parent's dimensions. This ensures the element resizes in proportion to its parent. For example, you can dock a text element (child) to a container (parent) and set its width to 50%. This way, your text always takes up 50% of the container's width regardless of the screen size. Viewport width and height (vw and vh): These measurements represent the width and height of a given viewport (browser). For example, 1vw in width = 1% of the browser's width. Max Content (max-c): You can use this measurement to set an element's width, and make it depend on the size of its child elements – no matter how big the content is or how many words it contains. The parent element fits itself to the content. Calculation: Using basic mathematical principals, you can write a "formula" that determines an element's width or height. You can even combine different measurements in this calculation (e.g., vh and px). For example, you can make a header and a section take up the entire viewport height (100vh). If the header height is set to 100px, the calculation for the section height would be: (100vh - 100px). This subtracts the header height from the viewport. Auto width and height For some elements, the width or height is already set to Auto . This means the element's content determines the width / height, allowing you to add or remove content without worrying about resizing. Enabling advanced settings applies to the specific element you select, on all breakpoints. The advanced settings mode stays enabled for that element, for easy access, but you can disable it at any time. To access and edit advanced size settings: Go to your editor . Select the relevant element. Click the Open Inspector icon at the top right of the editor. Click the More Actions icon next to Size . Enable the Advanced settings toggle. Edit the sizing as needed: Width, height, and min and max values. Tip: Switch to a different unit (e.g. from px to %) by clicking it in the Inspector. This opens a list of the available measurements for the element. Setting the section height: We don't recommend setting the height in pixels, as this might cause elements to not display as intended. For example, they might overflow or appear cropped. Setting the sizing preference Choose your sizing preference for the site you're designing. If you like working with advanced CSS measurements, you can enable the advanced settings across the editor. Alternatively, if you prefer choosing the sizing mode per element, you can keep it that way. To set the sizing preference for a site: Click the Wix Studio icon at the top left. Hover over View . Hover over Sizing Preference . Choose your preference: Always Show Advanced: The sizing in the Inspector is always set to advanced. Note: This mode disables the option to switch specific elements back from advanced settings. Set per Element: You set the sizing preference for every element. FAQs Click a question below to learn more about sizing. When should I use the advanced settings? The advanced sizing settings give you full control of the element's size on each breakpoint. Usually, there's no need to switch to advanced – the element's responsive behavior already ensures it looks the way you want on every screen. However, if you have a specific size unit you want to work with (e.g. vh, vw, max-c), whether it's fluid or fixed, you should switch to advanced sizing. Are all responsive behaviors available for elements related to Wix apps? Elements and widgets related to Wix apps (e.g. Wix Stores, Wix Blog) only offer certain responsive behaviors – those that would work best for each element. For example, the available responsive behaviors for the Category Page element are 'Stretch', 'Fixed' and 'Relative Width'. I set a section to scale proportionally but the elements don't scale. Why? Make sure to set the elements' responsive behavior as well. For example, if you set a section to 'Scale proportionally' but a child element is set to 'Fixed', that element will stay fixed across breakpoints. Note: We're investigating an issue wherein some buttons and menus don't show the 'Scale proportionally' behavior in the Inspector. If you're experiencing this issue, you can follow it here and get an email when it's fixed. Why can’t I adjust the size of certain elements using the Inspector panel? In some cases, the ability to adjust an element's size depends on its relationship with its parent or child elements. In repeaters, for example, the height option is disabled in the Inspector panel because the repeater's height is determined by the height of its items (i.e. child elements). Adjusting the items' height automatically changes the repeater's height. On the other hand, when selecting a repeater item, you'll see the width option is disabled. This is because the item's width is tied to the overall width of the repeater. To adjust the item's width, you would need to make the repeater itself wider or narrower. Why are images or videos not scaling correctly on different screen sizes? This issue typically occurs when the responsive behavior of the image or video is not set to scale proportionally. To fix this, go to the Inspector panel and set the responsive behavior to 'Scale proportionally'. For background videos, use the section background settings rather than a video player to ensure proper scaling. Additionally, some app-related elements such as pro gallery have their own internal sizing or proportion settings. In these cases, we recommend checking the element's Settings panel. How do I fix overlapping elements on mobile? When arranging elements, they could be spaced just right in the editor but overlap when you check the live site on different viewports. Overlap usually happens due to the way elements are positioned or because of their responsive behavior. If elements on your client's site overlap on different screen sizes, check the elements' positioning, docking and responsive behavior in the Inspector panel. For example, if an the elements are set to 'Fixed', the solution may be selecting a responsive behavior that resizes each element on smaller screens. In addition, if the elements share the same parent but no relationship (e.g. stack) is defined between them, they will act independently and may overlap. Learn more about preventing overlap across breakpoints . Previous Next Need An AI Run Website? Contact Us Today! Submit

< Back Studio, Partners & Enterprise Wix Studio Studio Editor: About Page Structure (Parent, Child and Sibling Elements) When structuring site pages, you are essentially nesting elements within sections and / or containers and layout tools. For example, placing text inside a container box creates a relationship between the text and container, derived from Modern HTML and CSS concepts. Use this article to learn more about page structure, including parent-child relationships between elements, page layers, and more. Parent-child relationships between elements When you place an element inside a container or layout tool (e.g. grid, stack), it attaches to that tool or container. This creates a parent-child relationship. For example, adding a logo to a header makes the logo the 'child', and the header the 'parent'. Similarly to CSS, the design (i.e. size, position, padding, etc.) of a parent container influences its child elements. Adding padding to a container, for example, makes the child elements smaller in order to accommodate the change. Learn more about sizing elements Did you know? New elements you add are automatically docked to the top and the left / right of the parent element. You can adjust the child element's position manually by disabling auto docking . When you stack elements , they're placed inside a flexbox which acts as the parent. Creating the page structure When planning the design of a site, it's important to begin by creating a layered structure. We recommend creating the parent containers first, then adding child elements by dragging and dropping them in the right place. Layers on a page In the Studio Editor, the structure you create is reflected the Layers panel. The following layers make up the structure of the site: Page: From the Layers panel, you can edit the page's background color and add padding. Click the More Actions icon next to the page name to control these settings. Sections: Every page is made up of at least one section, and you can create as many as your client needs. Most sections contain layout tools and containers (e.g. cells, stacks, etc.). Containers and layout tools: Nest elements within parent containers to ensure they maintain position and spacing across all screen sizes. Add containers , or layout tools such as repeaters and flexboxes . Elements: These are the elements you add from the Add Elements panel (e.g. text, buttons, media, etc.). Dock single elements , or stack multiple elements to ensure consistent order and spacing across screen sizes. Re-parenting elements Moving a child element into a new parent element is referred to as "re-parenting". To re-parent an element, simply drag and drop it inside the new parent. Finding an element's place in the hierarchy When selecting an element on the canvas, a breadcrumbs bar at the bottom left corner shows its hierarchy. This lets you see the element's parent, grandparent and so on, helping you navigate through the page's layers and understand their structure. Hovering over an element's blue label on the canvas also shows its hierarchy. In the example below, hovering over the Menu label reveals that it's nested under a cell within a header section. Structuring sibling elements Siblings are elements sharing the same direct parent. For example, the text and vector art in the below image are siblings, with the container as their parent: If sibling elements are in certain layout tools (e.g. container, repeater, etc.), they may affect each other's size and position. Designing this relationship can be useful in creating a responsive site, as you can prevent elements from overlapping in smaller screen sizes. In the example below, you can see the margins that are automatically created between sibling elements: Structural changes across breakpoints The Layers panel shows you the hierarchy of a page's content (sections, containers / layout tools, and elements) and allows you to adjust them as needed. The page hierarchy is part of the HTML structure of the site, which means changes you make to it are reflected across all breakpoints. For example, when you separate a parent and a child (e.g. text and its container), that separation applies to all breakpoints. Learn more about designing across breakpoints Previous Next Need An AI Run Website? Contact Us Today! Submit

< Back Studio, Partners & Enterprise Wix Studio Studio Editor: Editing Permissions Per Page Decide who can edit pages and global sections on a site. You control the access level of everyone who was invited to the site, so they're only able to edit relevant content. The exact actions they can perform still depend on their specific role . Important: This option is only available to the site owner and co-owner. Viewing and changing permissions per page Decide who's allowed to edit pages and global sections. The Editing Permissions Per Page panel shows a list of everyone who has access to the Editor, whether they have a site role or a team role (or both). As the site owner, you can give someone permission to edit all pages and all global sections, or just the specific pages that you select. Using Velo to add code? People with the permission to edit code can do so across all site pages, regardless of their page editing permissions. However, if they don't have the right page permission, they won't be able to select elements, adjust their design and perform other actions on the actual canvas. To view and change permissions per page: Click the Wix Studio icon at the top left. Hover over Site . Hover over Team Work . Click Permissions Per Page . Click the drop-down next to a person's name to edit their permissions. Select the checkbox(es) next to the relevant access level: All pages: Can edit all site pages. All pages and global sections: Can edit all site pages as well as any global sections . Note: To select this option, you must first select the All pages checkbox. Specific pages: Select the checkbox next to the pages this person should be able to edit. Changing an existing role When giving someone permission to edit pages and global sections, it's important to verify they have the right site / team role as well. Otherwise they won't be able to perform the actions they need, like add new elements or edit content. To change someone's role: Click the Wix Studio icon at the top left. Hover over Site . Hover over Team Work . Click Permissions Per Page . Hover over the person's name. Hover over the Settings icon and click Change Teammate Role / Change Site Role . Select the checkbox next to the relevant role(s). Click Save . Important: Changing someone's role automatically resets their page editing permissions. Make sure to come back to this panel and update their permissions. Managing site or team roles While working on your page editing permissions, you can adjust your site or team roles on the spot. For example, if you want to create a new role for someone or change the permissions associated with an existing role. To manage your roles: Click the Wix Studio icon at the top left. Hover over Site . Hover over Team Work . Click Permissions Per Page . Click the Manage icon next to Account Team / Site Team . Select Manage Team / Manage Roles . Inviting people to a site or team Need more help with this site? Invite people to your site or account team. Once they accept your invite, they'll appear in the Page Editing Permissions panel so you can adjust their permissions. To invite people to a site / team: Click the Wix Studio icon at the top left. Hover over Site . Hover over Team Work . Click Permissions Per Page . Click the Manage icon next to Account Team / Site Team . Select Add Teammates / Invite People . Fill in the person's email address and select their role(s). Click Send Invite . Previous Next Need An AI Run Website? Contact Us Today! Submit

< Back Studio, Partners & Enterprise Wix Studio Studio Editor: Creating a Custom 404 Page Customize the error page that site visitors see when trying to access a broken link. Design it to match your client's branding and add helpful links to keep visitors engaged. Before you begin: You must upgrade your client's site to create a custom 404 error page. To create a 404 page: Click Pages on the left side of the editor. Click Add New Page at the bottom. Click Add under Page . Give the page a name you can recognize. Change the page's URL slug to "error404": Hover over the page and click the More Actions icon . Select SEO Basics . Enter "error404" under URL slug . Tip: The page URL should look like the following example: https://www.mystunningwebsite.com/ error404 Design the page to your liking. Below are some ideas: Add links, buttons or a menu to help visitors navigate to other parts of your site. This minimizes the chances of your visitors leaving after getting the 404 error message. Add vector illustrations related to error 404 from the Media Manager. You can find tons of free designs in the Media from Wix tab. If necessary, you can hide the global header and footer on this page. Tip: Make sure to check how the page looks like on all breakpoints . Previous Next Need An AI Run Website? Contact Us Today! Submit

< Back Studio, Partners & Enterprise Wix Studio Studio Editor: Editing the Visual Sitemap This visual sitemap shows a high-level view of your client's site, including all pages and sections. It can help you get a better perspective on the overall structure of the site, allowing you to organize it quicker. Did you know? The Visual Sitemap panel is resizable – drag it to make it as big or small as you need. Adding pages and sections You can add more pages and sections as you work on your client's sitemap and move them around with ease. To add a new page or section: Click Visual Sitemap on the left side of the editor. Choose what you want to add: Page: Click + Add New Page . Select the relevant page type: Blank page or a dynamic page. (Optional) Drag the new page to the relevant location on the sitemap. Section: Click the More actions icon next to the relevant page name. Select the section type: General sections, a blank section or one of your global sections. (Optional) Drag the new section to the relevant location on the sitemap. (Optional) Start designing the page or section on the canvas: Click the More actions icon next to the new page or section. Select Edit on canvas . Tip: If you've used AI to generate this site , you can let it create pages and sections for you, filled with relevant content. Page: Select Generate when adding the new page. Describe the content it should show. Section: Enable the Generate wireframes & content toggle when adding the new section. You can also hover over an existing section and click the Add section icon . Moving pages and sections The visual sitemap allows you to effortlessly rearrange pages and sections, enhancing the flexibility and teamwork involved in defining the site structure. Use drag and drop to move pages and sections freely across the sitemap, or move them 1 spot to the left or right (page) / up or down (section). To move a page or section: Click Visual Sitemap on the left side of the editor. Choose how to move the page or section: Drag and drop: Drag and drop pages and sections to wherever you need them to be. You can move sections between pages if needed. Move by 1: Click the More actions icon next to the page or section. Select Move Right / Left / Up / Down . Setting the page status You can set a status for every page to indicate your progress on it. This is especially helpful for teams collaborating on a site, keeping everyone aligned on where things stand. To set the page status: Click Visual Sitemap on the left side of the editor. Click Set status next to the relevant page. Mark the page as In progress , Done , etc. Exporting the sitemap Share the sitemap with your client. This is a great way to ensure they approve the structure before proceeding with the design process. To export the sitemap: Click Visual Sitemap on the left side of the editor. Click the More actions icon at the top. Select Export sitemap . Tip: This downloads a JPEG file containing the sitemap. FAQs Click a question below to learn more. Does the Visual Sitemap panel show all site breakpoints? The Visual Sitemap panel only shows the desktop version of your client's site. If there are any differences between desktop and other breakpoints, such as re-ordered or hidden sections, they won't appear in this panel. For example, if you've re-ordered sections or hidden them on the mobile breakpoint, the panel will still only display the sections as they appear on desktop. What does the exported sitemap look like? When exporting a sitemap, you get a JPEG file to share with your client. The image looks very similar to the Visual Sitemap panel, organized by page categories (e.g. Main Pages, Store Pages, etc.) Does reordering pages affect the site menu? No. Reordering pages on the sitemap does not affect the site menu, which could have its own unique order. When moving sections, does it reorder them on the canvas as well? Yes, moving sections directly impacts your design on the canvas. Previous Next Need An AI Run Website? Contact Us Today! Submit

< Back Studio, Partners & Enterprise Wix Studio Studio Editor: Designing Across Breakpoints The Studio Editor lets you tailor sites per breakpoint, so they always look great. Breakpoints are screen size ranges, representing the possible screens and devices that visitors tend to use (e.g. tablet, mobile). The design you create on desktop trickles down to tablet and mobile. However, you can create overrides to make the design fit smaller screens. Click a breakpoint icon at the top to get started. Tip: You can set a default editing size (screen width) for each breakpoint on every page of your client's site. Go to our Wix Studio Academy to check out additional Wix Studio webinars, tutorials, and courses. Defining breakpoints The Studio Editor comes with 3 built-in breakpoints, which you can customize and re-define at any point: Desktop: 1001px and up Tablet: 751px - 1000px Mobile: 320px - 750px You can add up to 3 additional breakpoints to make your design even more precise to certain screen sizes. You define the breakpoints separately for every site page and every global section . This means that a global section and the page it's on can have completely different breakpoints. For example, the page below has 5 breakpoints defined: ... While the global header on that page has 3 breakpoints defined: Tip: The breakpoint a site visitor sees depends on their viewport width. For example, an iPad Pro user (i.e. 1024px width) would see the desktop breakpoint (1001px and up). This also varies with portrait or landscape mode, as each mode has a different screen width that may fall into different breakpoint ranges. Cascading design The Studio Editor uses a cascading concept when it comes to designing across breakpoints. Changes you make on larger breakpoints trickle down to smaller breakpoints, but changes on smaller breakpoints don't affect larger breakpoints. For example, a button that is designed to be purple on desktop is automatically purple on tablet and mobile. If you change its color on mobile, the button is still purple on tablet and desktop. Note: Some changes apply to all breakpoints – for example, when you replace or delete elements. Learn more about these changes in the section below. Created additional desktop breakpoints? If you delete the 2nd largest breakpoint, settings from the largest breakpoint automatically trickle down to the smaller ones – even if you have already created overrides . For example, elements that were only hidden from the largest breakpoint would become hidden on the smaller breakpoints as well. To resolve this, create the overrides again. Changes that apply to all breakpoints Some types of actions automatically apply to all breakpoints, and cannot be customized to a certain viewport. Data changes When editing the content of an element, you're effectively changing its data. For example, changing an element's link or the source of an image applies to all breakpoints. Another example is when you replace or delete elements from the page – the element is automatically replaced / deleted on all breakpoints. Did you know? You can hide elements from specific breakpoints. Go to the relevant breakpoint, right-click the element and select Hide . Structural changes Changes to an element's place in the hierarchy of your page. For example, when you stack elements together or move an element to a different cell , you're changing the page structure and it is reflected across all breakpoints. Creating overrides with breakpoints An override occurs when you make changes to an element's design on a specific breakpoint. Meaning, it no longer draws design values from the larger breakpoint above it. However, these overrides do trickle down to smaller breakpoints. There are 2 types of overrides you can create: Design: Changes to an element's properties, such as coloration, border and font. Layout: Changes to an element's position and size, as long as it does not move to a different parent element. Tip: Elements and sections in the Studio Editor come with a built-in responsive behavior . This controls the way they are resized on smaller breakpoints, so you don't have to worry about setting it all manually. Using overrides on all breakpoints If you like an override you've created, you can use it on all breakpoints. This applies the changes to both larger and smaller breakpoints - keeping the site's look consistent across every screen size. To use an override on all breakpoints: Open the relevant breakpoint in your editor . Select the relevant element. Click the More Actions icon . Select Use on All Breakpoints . Removing design overrides on a specific breakpoint You can always reset the design and layout of an element back to its properties on the largest breakpoint. The properties of the element on smaller breakpoints are not affected, just the breakpoint that contains the element that you are reverting back. For example, if you're removing overrides on tablet, it does not affect mobile. To remove design overrides on a breakpoint: Open the relevant breakpoint in your editor . Select the relevant element. Tip: You can select it directly on the canvas, or the Layers panel . Click the More Actions icon . Click Remove Overrides . Did you know? You can use the responsive AI tool to quickly optimize the layout of sections across all breakpoints. FAQs Click a question below to learn more. How do I ensure my site’s layout looks correct on both mobile and desktop? Always design with responsiveness in mind. Start with the desktop breakpoint, choosing the desired responsive behavior for every element and section. Then check the smaller breakpoints and adjust the elements' design and layout as needed. For sections, you can also use the Responsive AI tool to automatically generate a responsive layout. How do I prevent the mobile version of my site from affecting the desktop version? Firstly, it's important to keep in mind that layout and design overrides do not affect the desktop version. For example, you can resize elements on the mobile breakpoint and it won't change their size on desktop. Structural and data changes, like moving an element to a different parent or deleting it, automatically apply to all breakpoints. However, you can always create sections and elements that only appear on a specific breakpoint, hidden from other screen sizes . This can be helpful, for example, when you want to create a distinct look for mobile with a different arrangement of elements. Tip: When you make structural or data changes on lower breakpoints, you'll see a helpful notification. This allows you to confirm whether you'd like these changes to apply across all breakpoints, How do I fix overlapping elements on mobile? When arranging elements, they could be spaced just right in the editor but overlap when you check the live site on different viewports. Overlap usually happens due to the way elements are positioned or because of their responsive behavior. If elements on your client's site overlap on different screen sizes, check the elements' positioning, docking and responsive behavior in the Inspector panel. For example, if an the elements are set to 'Fixed', the solution may be selecting a responsive behavior that resizes each element on smaller screens. In addition, if the elements share the same parent but no relationship (e.g. stack) is defined between them, they will act independently and may overlap. Learn more about preventing overlap across breakpoints . How can I fix large gaps or unwanted white space, especially on mobile? We recommend the following: Check the padding and margin settings for sections, containers, and elements in the Inspector panel. Reduce unnecessary bottom docking values, which may cause excessive spacing. Ensure that related elements are stacked properly to avoid unintended gaps. Adjust the height of sections to 'Fit to Screen' or set it to a fixed pixel value. Tip: Check out this detailed troubleshooting tutorial for more information. Why is my gallery too large on mobile, and how can I fix it? If the gallery does not fit well on mobile, there are a few different ways to resolve the issue. You can choose a different layout for the mobile breakpoint, or stick with the same layout as desktop while tweaking settings in the Inspector panel. When you want the gallery to have the same layout across breakpoints, make sure its responsive behavior is set to either Relative width or Stretch – both of these behaviors ensure the gallery resizes automatically and in relation to each visitor's screen. Learn more about making the gallery responsive . 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. Previous Next Need An AI Run Website? Contact Us Today! Submit

< Back Studio, Partners & Enterprise Wix Studio Studio Editor: Adding and Managing Pages Use the Pages panel to add new site pages and manage the existing ones. Change the pages' settings, reorder them for better organization and delete pages that you no longer need. Navigating between pages: Use the page navigation dropdown at the top of the Studio Editor to easily move between pages. Adding a page Add new site pages from the Pages panel. You can choose from different types of pages based on your needs. The pages are divided into categories so you can easily find them in the panel. For example, some apps (e.g. Wix Stores) automatically add site pages to display relevant content - those pages are in their own categories. Tip: Wix sites can have up to 298 pages, including 100 static pages. Each dynamic or app page counts as one page, no matter how many CMS items or unique URLs it displays. To add a new page: Click Pages on the left side of the editor. Click + Add New Page at the bottom. Select a page type: Page: A standard blank page. Dynamic Page : A page that can change its content while keeping the same design and layout. Any element that's connected to your Content Collection changes according to what item is being viewed. Enter the page name and press Enter on your keyboard. Note: New pages are automatically displayed on the site's main menu. Reordering pages in the Pages panel Using drag and drop, you can change the order of pages in the Pages panel. Organize them in a way that helps you work more efficiently. Tip: Reorganizing the Pages panel does not affect the order of pages on the site menu(s). To reorder pages: Click Pages on the left side of the editor. Hover over the relevant page. Hold the Reorder icon next to the page and drag it to the desired location. Copying and pasting pages between sites Want to re-use a page's layout and design? Copy and paste it to another Studio Editor site in your account. You can also choose which site's header and footer to use on the page. Important: Any apps, code, and CMS content on a page you copy are not pasted to the other site. To copy and paste pages: Open the site with the page you want to copy in your editor. Click Pages on the left side of the editor. Click the More Actions icon on the relevant page. Select Copy Page . Open the other site editor in a new tab. Paste the page in that site: Right-click anywhere on the canvas. Click Paste page . Select whether you want to use the header and footer design from the copied page, or the current site. Click Paste Page to confirm. Keyboard shortcuts: You can also copy a page by selecting it in your editor and selecting Ctrl / ⌘ + C. You can use Ctrl / ⌘ + V in the other site's editor to paste it. Deleting a page You can always remove site pages that are no longer relevant. Tip: You can also hide a page temporarily if you don't want it published for a while. See Hiding a page below. To delete a page: Click Pages on the left side of the editor. Click the More Actions icon on the relevant page. Click Delete . Click Delete Page to confirm. Hiding a page If you would like to hide a page temporarily, or are still working on a page and you don't want to publish it yet, you can hide it from the menu and / or search results. Site visitors can't access hidden pages unless you link to them directly. Click below to learn how to: Hide a page from a menu You can remove a page from a menu so visitors can no longer see it. This does not delete the page from the site. Select the relevant menu in the editor. Click Manage Menu . Hover over a page and click the More Actions icon . Click Remove From Menu . Note: You cannot hide a page from the main site menu, only from additional menus you create. However, you can delete the main site menu and replace it with a custom menu. Prevent search engines from indexing the page Click Pages on the left side of the editor. Click the More Actions icon on the relevant page. Click SEO Basics . Disable the Let search engines index this page toggle. Changing the page settings After adding a new page to the site, set it up from one easy place. You can change settings like the page name, permissions, SEO and the way it's shared on social media. To change the page settings: Click Pages on the left side of the editor. Click the More Actions icon on the relevant page. Click Settings . Set up the page by clicking the tabs at the top of the Page Settings panel: Page info: Change the page's name, set it as the homepage or control its caching . Access: Decide who can access this page - everyone, password holders , or members only. SEO basics: Set up how the page appears in search engines such as Google. Social share: Review and customize the way the page looks when people share it on social media. Customizing the page's SEO settings Wix automatically adds default SEO settings for the page's title tag, meta description, and URL slug. You can customize these settings to help search engines and social networks display relevant information about the page. To customize the page's SEO settings: Click Pages on the left side of the editor. Click the More Actions icon on the relevant page. Click SEO Basics . Customize any of the following SEO settings: URL slug: This text is the last part of the page's URL. You should only change this if it's necessary to reflect the page's content. We recommend keeping it short and easy to read. Title tag: Add a title that summarizes the content of the page, to appear on search engines results. Meta description: Add a short description of the content on the page. This description helps visitors decide if the page is relevant to them. Click the Let search engines index this page toggle to set whether search engines can crawl and index the page or not: Enabled: Search engines will index the page. People can find the page when searching keywords and phrases in search engines. Disabled: Search engines will not index the page. People cannot find the page when searching keywords and phrases in search engines. Editing the URL slug? Wix automatically creates a 301 redirect for the page so the old link refers to the new link. If you've manually redirected the page in the past, it creates a conflict that you can resolve from the SEO Dashboard. Previous Next Need An AI Run Website? Contact Us Today! Submit

< Back Studio, Partners & Enterprise Wix Studio Studio Editor: Working with DOM Order Document Object Model (DOM) refers to how site pages are structured, and determines the tabbing and loading order of elements. Organizing the DOM order of a site can improve its accessibility and performance, and provide a better experience for visitors. Good to know: Organizing elements by DOM order is especially important when using more complex layout tools on a site, such as stacks and flexboxes. The importance of DOM order DOM order determines the loading, reading, and tabbing order of elements on a page. This means it can impact a site's: Accessibility: Some site visitors may use assistive technologies to navigate sites, such as screen readers and / or the Tab key. A site's DOM determines the order in which it's read by screen readers, as well as the tabbing order. Learn more about DOM and accessibility . Performance: The DOM determines the sequence in which elements load on a site. Matching the DOM order to the visual order of elements therefore creates a logical loading experience. Learn more about DOM and performance . SEO rankings: As an aligned, logical structure can improve accessibility and site loading, it may also increase the site's SEO rankings. A logical DOM order is therefore important, as it ensure the best experience for site visitors. For example, the site menu should come first, followed by the rest of the elements in the header, then the page title, then the page contents, etc. Auto DOM order Automatic (auto) DOM is based on the visual order of elements on a page - from left to right, and top to bottom. The DOM order automatically rearranges as you add, align, and resize elements, so it should stay optimized as you go. Disabling auto DOM If you notice an issue with the DOM order of a site you're working on, you can disable it across the site. If there's an issue with specific elements, you can disable it on individual sections and containers, as well as grid cells within a section. Select an option to learn how to disable auto DOM: The entire site Click the Wix Studio icon at the top left of the editor. Click Tools . Click Auto DOM Order to deselect it. Click Turn Off to confirm. Sections and containers Right-click the relevant section / container. Click Auto DOM Order in the right-click menu to deselect it. Grid cells in a section Right-click the grid cell. Click Auto DOM Order in the right-click menu to deselect it. Working with sticky elements and sections? You can keep sticky sections / elements at the front without affecting the DOM order. . Manually changing the DOM order of elements After turning auto DOM order off, you can manually change it to match the visual order of elements (left to right, top to bottom). To change the DOM order manually: Click Layers on the left side of the editor. Choose what you want to organize: Elements inside a section: Select a section to open it. Drag and drop the elements into the correct position. Sections: Hover over the top section and click the More Actions icon . Click Arrange . Click Bring to Front . Repeat steps i-iii with all other sections, going from top to bottom in the panel. Reorganizing the DOM order You can rearrange the DOM order of elements in a section, flexbox, or stack, or on an entire page with a single click. The order is optimized to match the visual order of the elements (left to right and top to bottom). To reorganize the page's DOM order: Click Pages on the left side of the editor. Select the relevant page. Click the More Actions icon . Click Reorganize DOM Order . To reorganize the elements' DOM order: Click Layers on the left side of the editor. Select the relevant section, flexbox, or stack. Click the More Actions icon . Click Reorganize DOM Order . FAQs Select a question to learn more about DOM order on a site. How can I check the DOM order of a site I'm building? You can test out the automatic DOM order of a site by using your keyboard's Tab key, or a screen reader on the live version of the site. How does auto DOM work on site pages? It is not possible to disable auto DOM on specific site pages. If you want to turn it off, you need to disable auto DOM across the entire site. Where else can I enable auto DOM? You may see the option to automatically organize a site's DOM order in the Accessibility Wizard . We recommend selecting this option, as it ensures the wizard's scan and resulting tasks are correct. Is auto DOM applied anywhere else? Auto DOM is applied to element stacks. You can disable auto DOM in the Layers panel. What happens to auto DOM if I rearrange elements in the Layers panel? The auto DOM of sections and containers is automatically disabled if you change the order of their elements from the Layers panel. You can always reenable auto DOM for them if desired. How does DOM work with site languages? Different languages have different reading orders (e.g. French reads left-to-right, and Arabic reads right-to-left). Changing a site's language to one with a different reading direction may therefore result in the DOM order being unaligned with the visual order of elements. If you change the site's language to one with a different reading direction, we recommend using the Accessibility Wizard to reorganize page elements and content . Previous Next Need An AI Run Website? Contact Us Today! Submit

< Back Studio, Partners & Enterprise Wix Studio Studio Editor: About the Page Limit of Studio Sites Studio Editor sites can have up to 298 pages, including up to 100 static pages, plus dynamic pages, app pages, lightboxes, Signup & Login, and Search Results pages. Dynamic and app pages may create unique URLs for items, but only the main page counts toward your quota—not individual items or URLs. Dynamic pages are a handy solution to page limits, as they allow you to create multiple web addresses of the same page. You can design dynamic pages as "templates" inside your editor, then use them to display an entire collection from the CMS. When designing a dynamic page, connect the elements to their corresponding collection fields so they display the right content. Learn more about: How dynamic pages work Dynamic list pages Dynamic item pages Dynamic category pages Dynamic manage item pages Previous Next Need An AI Run Website? Contact Us Today! Submit

< Back Studio, Partners & Enterprise Wix Studio Studio Editor: Working with Overflow Content Some site elements and content may be too large for their page, section, or container, and flow outside the edges. You can set how overflow content behaves on specific sections or containers, or on an entire page. Using Safari as your browser? Hiding overflow content from your container, section or page is only supported from version 16 and up. Setting overflow content in sections and containers Choose how you want overflow content to look on page sections and containers. You can hide /show the content, or set the overflow to show on scroll. To set your overflow content in sections and containers: Click the relevant container or section. Click the Open Inspector icon at the top right of the editor. Scroll down to Layout . Select the relevant option under Overflow content : Show: Overflow content is displayed on your client's site, even if it is too large for the page. A scroll bar is automatically added so visitors can see the rest of the content. Hide: Overflowing elements are clipped to maintain the page's edges. Scroll: Visitors can view the overflow content by scrolling. Scroll direction: Select whether visitors can view the content by scrolling horizontally, vertically, or both. Show scrollbar: Click the toggle to show / hide the scrollbar on your client's site. Setting overflow content on pages You can hide or show content overflow on your site page to suit your design needs. As the content flows outside the page edges, a scrollbar is automatically added. To set your overflow content on pages: Select the page layer from either: The Layers panel. The breadcrumbs at the bottom left of the editor. Click the Open Inspector icon at the top right of the editor. Scroll down to Layout . Select the relevant option under Overflow content : Show: Overflow content is displayed on your client's site, even if it is too large for the page. A scroll bar is automatically added so visitors can see the rest of the content. Hide: Overflowing elements are clipped to maintain the page's edges. FAQs Select a question to learn more about overflow content Is my overflow content automatically set? Pages / sections / containers are set to show the overflowing content by default. What happens if I display page overflow content? When you set page overflow content to show, a scrollbar is automatically added so visitors can see the content. Displaying page overflow content may also create gaps. Can I choose the overflow settings for different breakpoints? Yes. As the Studio Editor uses a cascading system, changes you make on a larger breakpoint affect the smaller breakpoints. However, you can then separately adjust the overflow settings of smaller breakpoints as needed by clicking a breakpoint icon at the top of the editor. Why is there a horizontal scroll bar appearing on mobile? Horizontal scroll bars are usually caused by elements extending beyond the viewport. Go to the mobile breakpoint in your editor and set the page's Overflow Content to Hide . This ensures no scroll bar appears on mobile. Additionally, we recommend checking which elements extend beyond the viewport and look for the reason within the Inspector panel (it could be the element's size, responsive behavior, docking, etc.) Learn more about troubleshooting horizontal scroll bars and gaps . Previous Next Need An AI Run Website? Contact Us Today! Submit

< Back Studio, Partners & Enterprise Wix Studio Studio Editor: Using Site Comments Comments allow you to effectively communicate with other team members while collaborating on a site. You can attach files, tag collaborators, and manage comments for a smooth design process. Adding comments Got feedback for a collaborator? Add a comment to an element, section, or overall page. You can also choose the breakpoint to ensure everyone has the information they need. To add a comment: Open the relevant page in the editor. Select the relevant breakpoint. Choose what you want to add the comment to: Page: Select Comments on the bottom left of the editor. Section / element: Select the relevant section / element. Click the Click Comments icon . Type your comment in the box. (Optional) Use the options to add further detail: Tagging: Type @, then the name of the team member you want to tag. Formatting: Click an icon to add formatting to the text (bold, underline, and bulleted list). Attaching files: Click the Attach files icon to add files / images. Click the Submit icon to post the comment. Did you know? You can also add comments to elements / sections by clicking them on stage while the panel is open. When you tag a team member in a comment or respond to another comment, the recipient gets an email and dashboard notification. Viewing and managing comments Each page has its own comments panel, so it's easier to view and provide specific feedback. You can filter the view, respond, and edit comments as needed to manage and streamline the design process. To view and manage comments: Open the relevant page in the editor. Select Comments on the bottom left of the editor. Choose what you want to do: Filter the view: Click the drop-down menu to select a filter for the comments: Open: Open comments that have not been resolved. Resolved: Comments that were already resolved. My comments: Comments that are related to you directly. This includes both comments that you have added and other comments that mention you. Current breakpoint: Comments related only to the breakpoint you're currently viewing (e.g. desktop, mobile). Reply: Click Reply on a comment to respond in the thread. Edit / Delete / Re-open: Hover over your comment, then click the More Actions icon to edit your comment, or delete it entirely. If the comment has been resolved, you can also re-open it. Resolve: Hover over the relevant comment, then click the Resolve icon . Tip: Clicking a comment (or a comment notification) brings you to the breakpoint and element the comment was left on. Previous Next Need An AI Run Website? Contact Us Today! Submit