Basics of website building
Whatever you place on your web page it is about HTML and CSS code that is interpreted by the browser to render the page. However, to work in Design Editor, you do not need to know how to write a code, although it would be useful to understand some basics.
HTML code is directly responsible for the content of your website. It defines what exactly will be on the web page like headings, texts, links, images. It consistently describes what elements are on the website and how they follow each other.
Many elements in Design Editor are described in code with HTML tags, such as section, div, button, img, form. Other, more complex elements, such as widgets, are the basic elements grouped together. It is also useful to understand what h1, h2 ... h6 tags are, as they describe the heading hierarchy.
CSS is responsible for the website style and determines how the content will look on the web page. It defines text size and color, image size, element positioning, effects, etc. This includes properties such as display, position, margin, padding, border, background. The styles you apply to elements will be in the CSS code.
Blocks are the key elements any website is built of. They are placed one under the other like bricks. For example, this can be the website header section, the page body, and the footer.
A parent element is a block that contains one or more other blocks, so-called children.
In this way, all elements on the web page are arranged in a hierarchy. The element hierarchy is clearly visible in the Navigator panel on the Layers tab. The higher the element in the layers list, the higher it on the web page.
Root is the key block in the hierarchy. It is automatically placed on the web page when it is created, and all other blocks are located in it.
Large blocks are used to group multiple elements, which makes it easier to manage, center, align them relative to each other and other elements. For example, the Container element is often used to center the content placed within it on the page.
Parent-children integration features:
- When a parent element is moved on the canvas, its children move too. They are a single group.
- Parent element styles are inherited by a child. For example, the font set for the parent element will automatically be inherited by the elements within it. If desired, the styles of children can be changed in the style settings.
- Parent element can control the position of children within it. This is done by using the parent element’s style settings.
- Parent element’s height depends on children. The height of the element is not fixed by default, it depends on its content. Therefore, when additional content or new elements are added to the block, its height increases. If desired, this can be changed in the style settings by setting the element to a fixed height.