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 positioning 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.
Instruction - Adding a new element to website with Drag-and-Drop:
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?
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.
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):
Instruction - Adding an element to a new section
Then select the element of interest (e.g.in the video Headline) and add it to the area.
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.
Instruction - How to add an element relative to another:
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.
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.
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!
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.
2.2 Instruction - How to add an absolutely positioned element:
Select the element you are interested in from the side panel.
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.
After dropping an item, go to its Widget Styles, then select the tab LOCATION.
Make sure that the item selected for the widget is ABSOLUTE.
Edit the X and Y coordinates to specify in detail where the widget should occupy on your page.
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!