Website Structure

This document outlines the structure of the website builder, its editing modes, and the process of saving and publishing a website. For detailed information about the available elements and their functionality, refer to the article: Website Builder Elements.

Website Builder Tools - left section

The website builder is designed with three distinct modes, each catering to specific aspects of website creation and management. Seamless switching between these modes ensures an efficient and comprehensive workflow for both building and editing templates.

The Sections Builder Mode focuses on building pages using a library of pre-designed blocks. Sections are organized into categories, simplifying the process of adding new elements to your pages. Once added, sections can be rearranged using drag-and-drop functionality or by adjusting their positions with arrows. This mode also allows you to customize sections by setting background images or videos and tweaking display settings to enhance presentation. Blocks can be copied or removed, providing flexibility and control over your page layout.Every website has an organized structure that includes a header, content (body), and footer. The Hitme website builder follows this structure to streamline the website development process.

The Styles Editor Mode provides tools to define and apply consistent styling across your website. In this mode, you can set fonts and colors globally, ensuring a unified design across all pages, including automatically generated ones such as blogs, product pages, and shops. It also enables you to edit individual elements like text and images, reposition content, or delete unnecessary components within predefined blocks. These global settings streamline the design process and ensure visual consistency.

In the Pages Manager Mode, you can create new pages or switch between existing ones. This mode allows you to assign titles to pages and configure SEO settings, including SEO titles, meta descriptions, and meta keywords. Additionally, you can determine whether specific pages should be indexed by search engines, offering greater control over your website's visibility.

Website Builder Editor – Right Section

The website builder offers different modes that provide access to specific tools for enhancing the creation process. By switching between modes in the left section, you can explore various approaches to building your website.

In the Active Section Builder Mode, you can make broader changes to entire sections within the editor. This includes modifying backgrounds, setting images or videos, and adjusting how sections are displayed. You can customize padding and margins, and rearrange sections by either dragging and dropping or using the arrow buttons to move sections up or down. Additionally, this mode allows you to copy entire sections or delete them as needed.

The Active Styles Editor Mode focuses on detailed customizations within each section. This mode enables you to edit text content, adjust fonts, and change colors to achieve the desired look and feel. It also lets you replace photos by uploading new images, accessing your file manager, or selecting pictures from the photo library.

Using these modes effectively allows you to create a professional and visually appealing website that meets your specific needs.Website 

Development Structure

The header and footer are foundational elements that appear on every page you create. The header, located at the top of each page, typically includes the site’s navigation menu and other elements you want consistently displayed across all pages.

The content section is unique to each page. Positioned between the header and footer, it contains the specific information or features relevant to that page. This layout ensures that every page maintains a clear and organized structure while accommodating unique content.

The footer, displayed at the bottom of every page, is an essential section for including critical links and website information. Common footer elements include contact details, copyright notices, and key navigation links. Additionally, this section is ideal for placing cookies notices, legal disclaimers, or modals you want accessible across all pages.

For more details about using and customizing sections, their purposes, and editing options, refer to the next article: Available Blocks.

website builder website structure sections builder mode styles editor mode pages manager mode header content section footer global styles SEO settings