Responsiveness

To address these, we need to understand and apply responsive behavior. It dictates how your elements behave on different screen sizes. Choosing the right behavior for your elements is crucial to ensure a smooth user experience. To adjust a responsive behavior, click on an element and open the inspector menu. You can then choose a behavior from the dropdown menu.

For our button, we will select 'relative width' and for the menu, we’ll apply a 'fixed' behavior setting, stabilizing its position regardless of screen size. For the Icon, we will also set both the logo and text’s behavior to fixed. As you can see, our header now responds the way we wanted.

With that set, let's move on to the hero section. We can see that we face a similar situation with the buttons when changing the screen's width. Returning to the inspector panel, we'll replicate the adjustments we made in the header by setting both buttons' behaviors to 'relative width'. By simply adjusting their responsive settings, we successfully attain the desired responsiveness for both the header and hero sections.

Breakpoints

Let’s now talk about breakpoints. In Wix Studio, you have the ability to design in desktop, tablet, and mobile versions. Each breakpoint comes with a default value, but you can customize or add your own to achieve your specific design goals. A cascading approach is used for designing across breakpoints. Modifications made on larger breakpoints automatically apply to smaller ones, while changes on smaller breakpoints do not impact the larger ones.

Tablet version

It’s important to design your site for each breakpoint, so let’s start with the tablet. At this breakpoint, we want to replace the horizontal menu with a hamburger menu. To achieve this, we shouldn’t delete the element, as deletion affects all breakpoints. Instead, we can hide it. Right-click on the element and choose Hide. You can also perform this action in the layers panel, where you can reveal hidden elements by clicking on the respective icon. Let’s go ahead and hide both the horizontal menu and the button.

By default, Wix Studio's header already has a hamburger menu, which is hidden in the desktop version. If you need a hamburger menu on your site, you can find it in the 'Menu and Search' section in the left menu, where multiple designs are available to choose from.

Returning to our website, you may notice that the hamburger menu is not visible. This is because it is layered below other elements. Go to the layers panel on the left and drag and drop the hamburger menu to rearrange its position. With the hamburger menu now on top, it should be visible. Align the menu to the right and adjust its size to 46x46 pixels. We will also change its color to white.

Hero section

Now that the header is complete, let's move on to the hero section. First, set the section height to 634 pixels. Next, for the title, adjust the font size to 48 pixels and resize it accordingly. Then, in the paragraph settings, do the same by setting the font size to 16 pixels. To ensure readability, set the minimum text size to 16 pixels also.

Buttons play a crucial role in user interaction. Start by resizing the first button to 132 by 40 pixels and adjust the text size to 15 pixels. For the second button, follow a similar approach but change its size to 156 by 40 pixels. We can now adjust the spacing between the items in the stack to 26 pixels. For the earth image, we will resize it to 436 pixels and then repositioning it. Because breakpoints cascade, we can set the responsive behavior to 'fixed' to maintain the same size in the mobile version.

Mobile version

• Set the section’s height to 566 pixels.
• change the size of the title text to 30.
• Set paragraph container’s to 330 pixels
• Adjust the size of both the title and paragraph text containers to suit our design.
• Change buttons stack to a vertical layout, adding a space of 20 pixels between them.
• Resize our title to the correct size to ensure it aligns with our design.
• Adjust the main stack by setting the top spacing to 20 pixels and the bottom spacing to 30 pixels.
• Resize the earth image to 286 pixels and reposition it to fit in our layout.

Support section

Let’s now build the support section. This section will include a title, a paragraph, and four engaging cards beneath them. Let’s get started! First, let’s add a section by clicking on the plus icon and choose the rows layout. Now, let’s set our section height. Go to the size settings and change the height to 772 pixels. Next, we'll apply our background color style in our preset colours.

In the upper cell, add a Heading 2 to your section and change the text. Resize the text container for a neat appearance and set the text color to white. Then, align the title text to the center. Now, insert a second paragraph right under the heading and personalize its content. Adjust the width of the paragraph to 692 for a more visually appealing appearance. Next, center it horizontally. Choose the secondary color for the text. Also, align the title to the horizontal center.

Now, stack these elements together. Make sure to set the spacing between items in the stack to 20 pixels for a clean and organized layout. Next, move over to the position panel. There, align the entire stack to the center of the cell, ensuring everything is symmetrically placed and visually appealing. Then, it's time to adjust the size of the cell; this is crucial for maintaining balance in our design. And finally, as a last step for the top part, we should center-align the paragraph text. This will enhance the readability and aesthetic of our layout.

Repeater

For the bottom cards, we will use a layout tool called repeater. Repeaters are useful when you want to maintain a consistent layout while varying the content. It is a powerful tool for ensuring design consistency. The content changes in every cards, but not the layout.

Our design requires four cards so let’s add an additional card by clicking on "Add Item." After adding the item, it will appear at the bottom. To rearrange, open the layout panel and set the number of items per row to four. Also, Set both horizontal and vertical gaps between the cards to 20 pixels.

The size for each card should be pixels. Let's begin by adjusting the width. To determine the total width of the repeater, add the widths of all four cards and include the gaps. This should total 1132 pixels.

We can now select the item within the repeater and add a padding of 48 pixels to both the top and bottom of the repeater. This gives our content some breathing room. Next, set its height to 384 pixels. Then, change the item's background to white with a 10% opacity. This creates a subtle, sophisticated look that’s pleasing to the eye without overwhelming it. Round off the corners of each card to 24 pixels for a softer edge.

• Insert a logo and set its size to 88 by 88 pixels and align it to the top.
• Add a title using heading 4 ('Inter Semi Bold' font at 30 pixels.) with the color white and align the text to the center.
• Follow it with a paragraph 3(Inter Regular' font at 14 pixels), colored in the secondary color.
• Resize the paragraph to 242 pixels.
• Then, select all three elements and create a stack.
• Align the paragraph’s text to the center to fit our design.
• Add the button with the size of 128x40 pixels and align it to the bottom.
• Customize each cards: change the logo, text, and the buttons.
• Convert our top and bottom padding from pixels to percentages.

Tablet version

• Set the section height to 1236 pixels
• Set the title to 48 pixels and resize it
• Align horizontally
• Set the paragraph below to 16 pixels
• Adjust stack’s items spacing to 20 pixels
• Center the whole stack to the center of the cell in the position menu
• Resize the cell
• Select the repeater and set items per row to 2
• Now set the repeater’s width to 556 pixels
• Select the item and set the height to 384 pixels
• Set corner to 24 pixels
• The title’s font size will be 30
• Set the paragraph text size to 14
• Set the button’s dimension to 128x40 pixels and set the button’s text size to 15
• Set the button’s responsive behavior to fixed
• Set the repeater’s horizontal and vertical gap to 20 pixels

Mobile version

• Start by setting the section’s height. Let’s set it to 2062
• Set the paragraph’s text to 16 pixels
• Set the stack’s items spacing to 20 pixels
• Just like before, we will resize the upper cell
• Set stack’s width to 306 pixels
• For our repeater, set the items per row to 1
• Set the vertical gap to 20 pixels
• Adjust the width to 268 pixels
• Set item height to 384 pixels
• Again, set the corners to 24 pixels
• Set the title to 30 pixels
• Resize the paragraph to 14 pixels All breakpoints are now complete, demonstrating the effectiveness of Wix Studio's responsiveness. With these adjustments, our design seamlessly adapts to various screen sizes, ensuring a consistent and user-friendly experience.

Responsive AI

If you are not an expert in responsiveness, Wix Studio has this amazing tool that will save you a ton of time to make your design responsive to each breakpoint. The Responsive AI makes your layouts responsive in just one click. To use this feature, select the section you want to make responsive. Then, click on the Responsive AI icon and choose 'Generate Now.' We can now see the AI analyzing the layout and working on the responsiveness on each breakpoint. In the preview, you can click through the breakpoints to see how the section adapts. Depending on what you see, you have the option to either 'Apply Design' and use the AI's suggestions immediately or 'Discard Changes' to keep your original layout. After the layout is generated, we can simply customize it, but if you want to have total control you can make all the breakpoint changes yourself. Now that we have covered responsiveness, the next section will focus on animations and interactions.