Free Website Builder
Build your own professional website without coding. Customize layouts, colors, typography and images, create multiple pages, preview your design and export a complete website ready to publish.
Website Builder
Create a professional website without coding. DesktopGoodies Website Builder gives you the tools to build pages, organize content, customize the design, manage images and export a complete website ready for hosting.
Whether you are creating a website for a small business, a personal project, a portfolio or an organization, you can shape the layout and appearance to suit your needs.
Tutorial
1. Start a new website
Open Website Builder and start a new project. Begin by selecting the available website template. The template provides the initial structure and visual style for your website.
The Business / Agency template is a useful starting point for company websites, service providers and other professional projects.
Before adding content, think about the purpose of your website and the pages visitors will need. A simple structure is often easier to navigate than a website with too many pages.
For example, a small business website could include:
- Home
- About Us
- Our Services
- Gallery
- Contact
You can adapt the structure to your own needs as the project develops.
2. Customize your website’s design
One of the most useful parts of Website Builder is the ability to adjust the overall appearance of your website.
The global design settings help you create a consistent look across your pages. Instead of styling every page separately, you can make shared design changes that apply throughout the website.
Header background color
Choose the background color used in the header area. This is an effective way to establish the visual identity of your website.
A dark header can create a more formal appearance, while a light background can make the design feel open and minimal.
Company name color
Adjust the color of your company or website name in the header. Choose a color that remains easy to read against the header background.
Navigation text color
Change the color of the navigation menu text. Make sure the menu remains clearly visible and easy to read.
These settings are useful for matching the website to an existing company identity or preferred color scheme.
Logo
Add your own logo to give the website a recognizable identity. A logo can help make the header feel more personal and professional.
Tip: Use a suitable image with a transparent background when possible. This usually makes it easier to integrate the logo into different header colors.
3. Build and organize your pages
A website can contain several pages, each serving a different purpose.
Use the page management tools to organize the structure of your website. You can create pages for different subjects and arrange the content so visitors can find what they need.
Think about each page as a separate part of the same website. The overall design should remain consistent, while the content can be completely different.
For example:
- Home: Introduce the business and highlight the most important information.
- About Us: Explain who you are and what you do.
- Our Services: Present your products or services.
- Gallery: Display photographs, projects or examples of your work.
- Contact: Make it easy for visitors to get in touch.
Keep page names short and clear. They should tell visitors what to expect before they open the page.
4. Work with sections
Sections are the building blocks of your pages. Instead of designing every individual element from scratch, you can use ready-made content sections and adapt them to your needs.
Depending on the page and available layout options, sections can be used for:
- Hero areas and introductory content
- About information
- Services and features
- Image galleries
- Team presentations
- Testimonials
- Pricing information
- Frequently asked questions
- Contact information
- Calls to action
- Custom content
A good approach is to start with the sections that communicate the most important information. You can then add supporting content further down the page.
Arrange the content carefully
Consider the order in which visitors should discover information. An introduction should normally appear before detailed descriptions, while contact information and calls to action should be easy to find.
Avoid filling every page with too many sections. Clear structure and useful information are more important than quantity.
5. Add and manage images
Images make a website more engaging and help visitors understand what a business or project is about.
Use relevant photographs for your products, services, team, workplace or completed projects.
When adding images, consider the following:
- Use good-quality images that fit the subject.
- Avoid unnecessarily large image files.
- Choose images that work with the layout.
- Add meaningful alternative text (alt text) to describe important images.
- Use captions when additional context is useful.
Image galleries
A gallery is useful when you want to display several images together, for example photographs of completed work, products, properties or events.
Choose images that belong together and give the gallery a clear purpose. A well-organized gallery is easier to browse than a large collection of unrelated pictures.
Using GoodieTools
You can also prepare images with other DesktopGoodies tools. For example, crop images, resize them or compress them before adding them to your website.
This can help you achieve consistent image dimensions and reduce the size of your finished website.
6. Preview your website
Preview is an important part of the editing process.
Use it to check how the current page looks before exporting your website. Look at the overall balance between text, images, colors and spacing.
Check the following:
- Is the company name and logo clearly visible?
- Is the navigation easy to understand?
- Are headings and paragraphs easy to read?
- Do images fit their sections?
- Are important links and buttons easy to find?
- Does the page look balanced rather than overcrowded?
Remember to review the whole page, not just the first screen. Visitors may scroll through several sections before reaching the information they need.
If something does not look right, return to the editor, make your changes and preview the page again.
7. Make your website easy to find
Search engine information helps search engines and social platforms understand your website.
When configuring page information, use clear and descriptive titles and descriptions.
Page title
Write a short title that describes the subject of the page. Each page should have a title that reflects its own content.
Meta description
Write a concise summary of the page. Explain what visitors can expect to find.
Page names and URLs
Use simple, readable page names. Avoid unnecessary characters and complicated filenames.
Social sharing information
Where available, configure the title, description and image used when a page is shared on social media.
Good page information makes your website easier to understand and can improve how it is presented in search results and shared links. It does not guarantee a particular search ranking.
8. Save your project
Keep a copy of your website project so you can continue editing it later.
The project file is intended to preserve the website’s structure and settings, allowing you to return to your work instead of rebuilding everything from the beginning.
Store your project file somewhere safe and use clear filenames so you can identify different versions.
For example:
my-business-website.jsonmy-business-website-backup.json
If you make major changes, consider saving a separate copy before continuing.
9. Export your finished website
When you are happy with the result, use the export function to generate your website.
The exported website is a separate collection of files that can be uploaded to a web hosting account. It does not need the Website Builder or your WordPress installation to remain online.
The export package can contain:
- HTML files for your pages
- Shared CSS stylesheets
- JavaScript resources
- Images and other website assets
- Supporting website files
After downloading the ZIP file, extract its contents and upload the website files to your hosting account.
The main page is normally named index.html. This is the file most web servers look for when someone visits a directory.
Before publishing, check that the website works from its final hosting location and that images, navigation links and other resources load correctly.
10. Important things to know
Contact forms
A contact form can be displayed as part of a static website, but displaying a form does not automatically provide message delivery. Sending messages requires a suitable backend or an external form service.
Website hosting
Website Builder creates the website files, but you still need a web hosting account or another suitable service to publish the website online.
Responsive design
Always check how your website behaves on different screen sizes. A layout that looks good on a desktop should also be comfortable to use on a phone or tablet.
Keep a backup
Save your project file before making substantial changes. This gives you a way to return to an earlier version if needed.
Create a website your way
DesktopGoodies Website Builder gives you a practical starting point for creating a website without having to write HTML and CSS yourself. Start with a template, build your pages, customize the design and add your own content.
Take your time with the details. Small adjustments to colors, images, headings and page structure can make a big difference to the finished result.