Lesson 3: Work with layouts | Wix Learn

Summary

This video tutorial showcases how to design a strong website layout using the Wix Editor. It emphasizes the importance of gridlines for content placement and screen adaptability. The video demonstrates adding sections, customizing backgrounds, and aligning elements to enhance site design. It also covers using strips and columns for complex layouts, ensuring content visibility on all screen sizes. Tips on choosing complementary images and adjusting column proportions are provided, resulting in a visually appealing and engaging website.

Takeaways

• 🎨 A strong website layout is crucial for guiding visitors' focus and enhancing the site's design.
• 🛠️ The Wix Editor provides extensive customization options for site layout, including the use of gridlines, strips, and columns.
• 🖼️ Gridlines serve as essential guidelines for content placement to ensure visibility across different screen sizes.
• 🔄 Adding sections and changing backgrounds can quickly establish the foundation for a webpage's layout.
• 📝 Text elements, such as headings, can be easily added and customized to fit the layout and design needs.
• 🖼️ Images can be incorporated into the layout by making them background elements of columns for a seamless design.
• 🔗 Call to action buttons are important interactive elements that can be themed to match the site's aesthetic.
• 📏 Strips are versatile design elements that allow for complex layouts within sections, enhancing visual appeal.
• 🔄 Columns within strips can be adjusted for proportions and spacing to create dynamic and balanced layouts.
• 🔍 Previewing the site at different screen sizes ensures that all elements remain within the gridlines and are responsive.

Q & A

What is the primary purpose of a strong website layout?

A strong website layout guides visitors' focus towards the most important elements, enhances the site's design, creates engaging interactions, and keeps content updated with web design trends.

How can the Wix Editor be used to customize a website layout?

The Wix Editor allows users to customize the layout of their site by creating complex designs using gridlines, strips, and columns, providing flexibility to adjust the layout in almost any way desired.

Why are gridlines important in web design?

Gridlines serve as guidelines for content placement, ensuring that elements are not cut off on smaller screens and maintaining a consistent layout across different devices.

How can you add a section with gridlines in the Wix Editor?

In the Wix Editor, you can add a section with gridlines by going to the 'Add' panel, selecting 'Section', and then choosing 'Blank Section'. This allows you to see and work with gridlines on your new section.

What happens if you place content outside the gridlines in the Wix Editor?

If content is placed outside the gridlines, the Wix Editor displays a message warning that the element is outside the guidelines, and upon preview, the content may get cut off on smaller screens.

What is a strip in the context of Wix web design?

A strip in Wix web design is a design element that allows for the creation of complex layouts within sections, enhancing the visual appeal and dynamism of the site.

How can you add white space to a section in the Wix Editor?

To add white space to a section in the Wix Editor, you can drag the section down to increase its height or use the toolbar to input the exact pixel value for the desired height.

What is the significance of choosing the right image for a section in Wix?

Selecting the right image is crucial as it complements the overall design, showcases the value offered, and fits the context of the section. It should match the theme, highlight products, and include relevant team members if appropriate.

How can you adjust the column proportions in a strip layout using the Wix Editor?

In the Wix Editor, you can adjust the column proportions in a strip layout by clicking on the layout options and choosing from preset proportions or setting custom proportions to tailor the layout to your needs.

What is column spacing and how can you modify it in the Wix Editor?

Column spacing refers to the space between columns within a strip. In the Wix Editor, you can modify column spacing by adjusting the spacing in the layout settings, which affects the distance between the image in one column and the background color in another.

How does the Wix Editor help in maintaining content visibility across different screen sizes?

The Wix Editor ensures content visibility across different screen sizes by providing gridlines and responsive design features that automatically adjust the layout to fit various devices, ensuring all content stays within the visible area.

Outlines

00:00

🎨 Customizing Website Layouts with Wix

This paragraph introduces the importance of a strong website layout in guiding visitors' attention and enhancing site design. It highlights the use of the Wix Editor for customizing layouts with gridlines, strips, and columns. The speaker demonstrates how to add a section, change the background color, and utilize gridlines as content placement guidelines. They also show how to add elements like text, images, and buttons while ensuring content is centered and not cut off on smaller screens. The concept of 'strips' is introduced as a way to create complex layouts within sections, and the speaker provides a step-by-step guide on using strips to build visually appealing designs.

05:01

🖼️ Enhancing Layouts with Images and Strips

The second paragraph delves into the strategic selection of images that complement the overall design and fit the context of the website section. It discusses making an image the background of a column and adding solid background colors to other columns for a balanced look. The speaker then guides through adding text and themed buttons to the layout. They also explore creating more complex layouts by duplicating and rearranging strips to form a grid effect within a single section. The paragraph concludes with tips on adjusting column proportions and spacing to fine-tune the layout's appearance, ensuring content remains visible and well-presented across different screen sizes.

Keywords

💡Website Layout

Website layout refers to the arrangement of visual elements on a webpage. It's crucial for guiding visitors' attention and enhancing user experience. In the video, the layout is emphasized as a tool to direct users' focus and to align with web design trends. The script illustrates this by showing how to create sections, adjust backgrounds, and align text, ensuring a balanced and visually appealing design.

💡Gridlines

Gridlines are a feature in web design tools that help align content and ensure consistency across different screen sizes. They are depicted in the script as essential guidelines for content placement. The video demonstrates how to use gridlines to maintain content visibility and avoid cutoffs on smaller screens, which is critical for responsive design.

💡Wix Editor

The Wix Editor is a user-friendly platform for designing and customizing websites without coding knowledge. The script mentions it as a tool that allows for extensive customization of website layouts. It's showcased through the process of adding sections, changing backgrounds, and manipulating elements to create a personalized site design.

💡Sections

In web design, sections are distinct areas or blocks of content on a webpage. The script uses the term to describe how to add and modify these areas, such as changing backgrounds and adding elements like text and images, to create a structured and engaging webpage.

💡Responsive Design

Responsive design is the approach to crafting websites so that they provide an optimal viewing experience across a wide range of devices and screen sizes. The video emphasizes this by demonstrating how to ensure content remains visible and uncut off when the screen size is adjusted, highlighting the importance of a flexible layout.

💡Call to Action (CTA) Button

A call to action button is an interactive element on a webpage designed to prompt visitors to perform a specific action, such as making a purchase or signing up for a newsletter. The script includes adding a CTA button as part of the layout process, illustrating its role in guiding user behavior and enhancing engagement.

💡Strips

Strips are design elements in the Wix Editor that allow for the creation of complex layouts within sections. The video script describes how strips can be used to add white space, adjust column proportions, and create dynamic grid effects, contributing to a visually appealing and adaptable website structure.

💡Columns

Columns are vertical divisions within a section or strip that help organize content. The script explains how to add and customize columns, such as setting background images or colors, to create a balanced and structured layout that adapts well to various screen sizes.

💡Customization

Customization in web design refers to the process of tailoring a website's appearance and functionality to meet specific needs or preferences. The video script provides a walkthrough of various customization options in the Wix Editor, such as changing text styles, adjusting section heights, and modifying column spacing, to create a unique and engaging user experience.

💡Adaptive Design

Adaptive design is the practice of creating web layouts that automatically adjust to fit different screen sizes and orientations. The script demonstrates adaptive design principles by showing how to use gridlines and responsive elements to ensure content remains accessible and visually appealing on any device.

💡Visual Hierarchy

Visual hierarchy in web design is the arrangement of elements to guide the user's eye and establish a clear order of importance. The video script touches on this concept by discussing the placement of headings, images, and buttons to create a clear and engaging path for visitors to follow.

Highlights

A strong website layout can guide visitors' focus and enhance design.

Wix Editor allows extensive customization of site layout.

Gridlines help align content and ensure visibility on all screen sizes.

Adding a section and changing its background color is a simple way to start customizing layout.

Content placed outside gridlines may be cut off on smaller screens.

Adding themed text and adjusting its properties can enhance section appeal.

Images and buttons can be added to sections to create engaging interactions.

Strips enable the creation of complex layouts within sections.

Dynamic layouts can be achieved by adding and customizing strips and columns.

White space between sections provides a balanced layout and improves readability.

Choosing images that complement the design and match the theme is crucial for visual consistency.

Making columns' backgrounds with images or colors can enhance visual appeal.

Adding multiple strips within a section creates a more complex and dynamic layout.

Column proportions can be adjusted for a tailored layout to different screen sizes.

Column spacing can be adjusted to avoid content touching, enhancing visual clarity.

Customizing layouts can make a website stand out and improve user engagement.

Upcoming lessons will cover design elements to make pages more visually appealing.

Transcripts

A strong website layout

can lead your visitors' focus in the right direction, pointing them toward what matters most,

First. Your layouts can also enhance your site's design, create engaging interactions

and bring your content up to date with web design trends.

With the Wix Editor, you can customize the layout of your site pretty much any way you want.

We'll learn how to create a complex layout using gridlines, strips and columns.

Let's check it out. To give you the simplest view of your gridlines,

let's add a section.

We can do this by going over here.

Let's add a blank section.

Okay.

The first thing that I'm going to do is change the section background.

Let's go to color and change it to blue.

Great.

Now we can see the gridlines here on my new section,

one on the left and one on the right.

These will be on all of my sections from top to bottom.

These are so important because they serve as guidelines for where your content should be placed.

If you place something too far outside of these lines,

there's a chance that it'll be cut off on smaller screens.

A lot of heading directly onto my section.

I can do this by going to my add panel, going to text and I'll choose a themed text.

Let's add heading one.

I'm going to change the text

to new arrivals.

I'll change the font color.

I'll adjust the text box so all the text fits, great.

And now let's make sure that it's centered.

Perfect.

I'm keeping this section really, really, really simple.

It's just to show you the gridlines.

So I'll also add an image and a button.

To add an image,

I'll go to add elements, go to image

and I'll go to my image uploads.

Let's choose this image.

We'll click add to page and then we can readjust it

to make sure it's the size that we want.

Perfect.

I'll also add a call to action button.

I'll go to add elements,

go to button and I'll choose one of my themed buttons.

Let's choose this one.

Okay.

Let's go to preview to see how this looks.

You can see that as I adjust my screen size, nothing is cut off.

Now, let me show you what happens when I place something outside of these guidelines.

We'll go back to the Editor and I'm going to take this button

and drag it outside of the gridlines.

You can see we get a message here to let you know that you've placed an element outside of the gridlines.

And this is why. We'll go to preview again,

and you'll see as I adjust my screen,

the button begins to cut off.

If you want to create a design that you can use the full width

of your visitors' screens, this is where strips come in.

So let's go over strips.

Strips are helpful design elements that allow you to create complex layouts within your sections.

And while you can add elements directly to your sections, adding strips helps

you create more dynamic, visually-appealing layouts to your site. To show strips in action,

let's jump here.

I created this layout from a simple pre-made section and a blank strip.

So let's recreate it together.

What we'll do here is click add section.

You can see we have pre-designed sections and also blank sections.

I'm going to choose this section here.

Believe it or not, this is the pre-made section

that I started with when I created my About section.

And while it might look a lot different, it only takes a few minutes to achieve the results I have here.

First, I can go ahead and update my heading.

All I need to do is double click.

And in this case, I'll change it to our story.

Now I'm ready to start customizing my layout.

So first, I want to add some white space here.

I can do that by just dragging the section down.

I can also go to tools and open up my toolbar.

And here I can input the pixels to be very precise about how tall

I want my section to be.

You might feel tempted to fill any blank space with content,

but spreading things out a bit gives your visitors room to breathe between sections,

making your layouts feel more balanced.

Next, I know that I'm going to change up this layout,

so I'll just remove this button and text.

Instead, I'm going to add a new blank strip here.

I'll go to add elements, come down to strip

and I'll take a white strip.

Okay, let's resize the strip. Again, we'll go to tools,

open up the toolbar

and this time let's set it to 500 pixels.

Now we're ready to add in some columns.

To do this, I can go to layout and choose add column.

You can see that my gridlines have adjusted and I've got two sets now.

I don't want this strip to quite reach the edges of my page,

so we'll just increase the margins here.

I can do this by clicking into the strip,

going to stretch and adjusting the margins.

In this case, I'm going to set them as 50 pixels.

You saw in my example

before that I have an image in my left column and some text and a button on the right.

But two important tips before I add an image.

First, I'm not just picking any image to add here.

I'm choosing one that complements the overall design of my page,

shows off the value I have to offer and makes sense in this section of my site.

For my about section, I'm picking a photo that has a solid background color

that matches my theme, shows off my products and includes members of my team.

You'll see when I add my image, I'm going to make it my left column's background,

which makes it fit perfectly in this half of my strip.

Let me show you what I mean.

I'll click into this left column

and go to change column background and then choose image.

I'll go to my site files and from here I can choose my image.

Now, it fits neatly in this half of the space.

Now, let's quickly add a solid background color to my other column.

I can do this by clicking change column background, going to color

and I'm going to choose this nice purple color.

And now I have a nice solid base for my text.

Now I'm going to add a paragraph.

I can do this by going to add elements, going to text

and let's go to themed text and I'll choose a paragraph.

I can just place it inside the column

and you can see that it just snaps into place.

Let's also add a call to action button here.

I'll select one of the themed buttons that already matches my site.

Go to button,

go to themed buttons and I'll take this nice orange button.

I'll align it here with the left side of my text.

If you're looking for a more complex layout, you can actually add

multiple strips that will live inside of one section.

So let's add another strip here.

In this case, I'm actually going to duplicate this strip.

All you need to do is right click and choose duplicate.

And now you can see I have two of the same strip.

Now, if I click on Manage columns, I can quickly

swap, duplicate or delete columns, or even add up to four columns in a single strip.

I want to create a grid effect.

So let's swap these two columns.

By just quickly duplicating and swapping the position of those columns,

I created a dynamic grid, and I can change

the text and image on this new strip the same way.

Let's preview it.

You can see in preview that even as I make this screen smaller,

all the content I added stays within the gridlines and everything is still visible.

Plus the two strips live within the same section.

So if I go back to my Editor, like so, and I click zoom out,

now, when I move this section up or down,

you can see that both of these strips move along with it.

We can make our layout even more complex by changing up our column proportions.

So let's delete this duplicate strip.

Now we'll just focus on this single strip.

I want to decrease the size of this section, so I can double click

this purple button here and it will snap right into place like so.

And then to create some space, I'll adjust the section height to exactly where I want it.

Let's go back to the strip layout. Right now,

you can see that the columns are equal at 50-50, but you can choose any of these other proportions

or set custom proportions to tailor your layout even further.

So if I pick something like 40-60, and I click on each of my columns,

you can see that the gridlines on the left are smaller than the gridlines on the right.

So as I'm laying out my content in each column, I still have those really helpful

guidelines to keep my layout adaptable to different screen sizes.

I'm just going to readjust this to 50-50 because I like the way that that looks.

The last thing I want to show you about creating layouts is column spacing.

Let's say I don't want the image in my left column and the background color in my right column touching.

All I need to do is add a little extra column spacing.

We go back to our layout here

and you can see that I can

adjust the column spacing by just pulling up and down.

You can see that whatever I've set as my default

background fills the space between.

And I can also adjust the padding here.

This increases the space above

and below my columns within my strip, which adds great definition to my visuals.

You've customized some of the layouts on your page to create a website that really stands out.

And to keep that going,

in the next lesson, we'll talk about design.

We'll go over some of the elements that you can add to make your pages really pop.

I'll meet you there.