BOWWE University

Correct positioning of elements on the site. Relative and Absolute tags.

Adding elements to your website with drag-and-drop:

Drag-and-drop is a mechanism that allows you to create a professional landing page, Micro Page, portfolio or CV in BOWWE without writing a single line of code.

BOWWE is a drag-and-drop based creator, so knowing how it works is a basic knowledge essential to use it.

In this tutorial, you will learn to correctly position new elements to the page using drag-and-drop, avoiding the most common mistakes.

How does relative and absolute positioning affect SEO?

Relations between elements allow your website to be easily understood by search engines such as Google, Bing, Duck duck go and others. All these search engines are so-called contextual search engines. They work based on the analysis of the context of the information contained on every website. In the case of the relative positioning of elements, the website's SEO is very high because all elements are related to others and create context.

The significant disadvantage of absolute positioning is that often there are no relations and no context between the various elements of the page. Then search engines will not understand that a given element, e.g. a header, relates to another element, e.g. a photo.

Therefore, while absolute positioning is easy to use, avoid it and use it only when appropriate. Thanks to this, search engines will perfectly position your BOWWE website! A significant part of website builders do not offer such possibilities to their users and give all elements absolute positioning. This worsens the SEO of the page.

Adding a new element to website with Drag-and-Drop. Instruction:

1

Take a look at the Side Panel on the left side of the screen. You will see categories there.

2

Expand any category and then click on the item you are interested in.

3

Drag the item anywhere on your page. Now you can decide whether you want to place it relatively or absolutely.

4

Click SAVE to save all your changes.

Knowing the difference between the relative and absolute positioning of page elements is very important. This division is a standard in modern web development and results from the rules of programming. So you have to get to know him!

1. Relative positioning

1.1 Relative tag and positioning of widgets. What you need to know?

Modern websites are made of elements relative to each other. It is a standard nowadays because it guarantees the responsiveness of websites (e.g., error-free display on mobile devices) and facilitates their editing.

So if you want to create a flawless website, read the following information about elements placed on the page relatively:

An element relatively placed on your page is always in relation to another component of the same section.

When adding an element relatively, you must always specify which element it will be relative to, i.e. which element will be its reference point. It's effortless in the BOWWE.

Relative elements work together, which significantly facilitates the work on the website and improves its operation.

By influencing one element, you can control the element that is relative to it. A good example would be a banner (item 1) with a button (item 2) inside it. By changing the placement of the banner, you will instantly change the position of the button so that it is still inside the banner. This is possible because both elements (1 and 2) are relative to each other.

Even if the item on the page has absolute settings, you can easily change them to a relative. Go to Widget Styles, then LOCATION. In the window, Position select RELATIVE.

1.2 How to add an element relatively (using the Relative tag):

In the BOWWE page builder, there are two ways to add items relatively - you can add an item to a section (new or existing) or another item using the green checkmarks that are visible for each item in the creator.

Instruction - Adding an element to a new section

1

If you're building a website from scratch, drag the widget Area from the widget panel on the left and place it on your site. You can also add a new section - the easiest way to do this is by pressing the green + button.

2

Then select the element of interest (e.g.in the video Headline) and add it to the area.

3

Perfect! Now Header (item 1) Area (item 2) are relative to each other.

4

Click SAVE to save all your changes.

Remember!

By changing the settings Area (e.g. its width), you will affect the Header because it is inside the Area. The area is the superior element to the Header.

By changing the settings of a child element, you will not affect the parent element - in this case, by changing the Header settings, you will not affect the Area's settings.

To know which item is superior to another, check the widget hierarchy at the bottom of the page builder.

How to add an element relative to another:

1

Select the item you are interested in from the side panel.

2

Drag an item to another item relative to which you want to place it on the page. You will see green markers to help you place the item in the right place.

3

When the green checkmark next to an item is active, drop the dragged item, and it will immediately position itself on your page where you dropped it. It will also be relative to the object whose green marker you saw.

4

Click SAVE to save all your changes.

This method allows you to position elements also on the side of other elements or above them. Follow the green markers and you will be sure that you add all the elements to the page correctly - in a relative way.

Remember!

By dropping an element onto the page with green markers, you will always place it in the same section where the element is relative to it.

2. Absolute positioning

2.1 Absolute tag and positioning of elements. What you need to know?

Absolute placement is helpful when you want to impose a permanent and uninfluenced element position on your page

A placed element will never change its position on your website!

An absolutely positioned element has strictly defined X and Y coordinates that determine its place on the website. By changing the coordinates, you can adjust its position to your needs.

However, the absolute positioning may be dangerous, e.g., when you change the screen's resolution on which your website is displayed (e.g., on a mobile device), the absolute and relative elements may overlap. If you use absolute placement, remember always to check the appearance of your website on a mobile device!

Even if the element has relative settings, you can easily change them to absolute. Go to Widget Styles, then LOCATION. In the Position window, select ABSOLUTE.

Attention!

If you're new to the BOWWE website builder, be careful with absolute placement. Too many elements placed in this way will make your website chaotic, unresponsive, and difficult to edit.

2.2 Instruction - How to add an absolutely positioned element:

1

Select the element you are interested in from the side panel.

2

Drag an element onto your page and drop it anywhere, not in any section! Also, be careful not to drop an item on the page while there are active green indicators - they are for adding items relatively, not absolutely.

3

After dropping an item, go to its Widget Styles, then select the tab LOCATION.

4

Make sure that the item selected for the widget is ABSOLUTE.

5

Edit the X and Y coordinates to specify in detail where the widget should occupy on your page.

6

Click SAVE and PUBLISH.

Congratulations!

You already know how relative and absolute positioning of elements on a website works!

The division into relative and absolute elements may sound complicated, but we guarantee that by using the BOWWE page builder, you will understand very quickly how to use these functions properly.

Remember that the division between relative and absolute results from generally imposed programming principles.

Learning to use the relative and absolute functions is a giant step forward! To avoid basic mistakes and create better websites, check out the following tutorials on the basics of the BOWWE Builder!

Dedicated to you

Didn't find the answer?

No matter what your problem is. We are here to help you find a solution.

LET'S TALK