Click the button below to save your code!

** Remember to place all images into a folder with your downloaded files for them to properly display! **

Are you sure you want to delete ??? ?

**This will delete all elements inside!**

What would you like to add ?

You are adding into ???

Containers

Text

Image

Paste an element

What would you like to change ?

You are editing DIV

Copy this element

Website Builder 1.1

Welcome to my website builder! Here's how to use it:

  • Left click to add a new element
  • Right click on an element to edit it.
  • Double click an element to delete it.

Have any requests? Anything going wrong? Leave a message here.

This tool was made in 2022!

Notes on using this tool

Hints

  • To make an element, such as an image, align with the content- set its position to "static". This will also remove draggable/resizable functionality, but this can be reset by setting the position to "absolute" or "relative".

Responsive design

Websites made with this tool may not look the same across devices and browsers. To ensure that your design is responsive, keep this in mind:

  • If you want an element to span the page, instead of dragging it out set the width to 100%!
  • If you want an element's position to change as you scale the page, set its left/top position to a % value (like 50%).

Aligning text

  • By default, text isn't draggable nor resizeable. To control its position, it should be wrapped in a seperate container, or the properties of its parent container should be changed. I will try to make this easier in future updates.

Centering content

The easiest way to align content in the center is to use flex.

  1. Set the display to 'flex'
  2. If you want your content to flow up and down, set flex-direction to "column"
  3. To align horizontally, set align-items to "center"
  4. To align vertically, set justify-content to "center"

However, there are many ways to do this, depending on the content you're trying to center!

Fonts

  • Most of these fonts are taken from Google Fonts
  • Custom fonts are not currently supported - sorry! :-(

Using flex properties

  • Flex rules will only work inside of a flex container (container with display set to flex)
  • For more information about flex, read here!
Notes ↑
Save ↑