Step-by-step guide to creating a website

In this article, we'll look at how to create an "About Us" section with a heading, text, and an image.

Step 1. Create a new project

  1. Open the Taptop Dashboard — https://dashboard.taptop.pro/.
  2. Click the New project button in the upper right corner.

  1. Create a Blank project by clicking the Select button.

  1. Enter the project name and click the New Project button.

Done! The new project has been created and the Design Editor will open automatically, where you can start working on your website.

Step 2. Create the element structure

  1. Add structural elements to the canvas: a section, and inside it — a container (Section → Container).
    To do this, open the Elements panel by clicking the**+** icon on the left panel, then select the necessary elements.

Learn more:

  1. Inside the container, add an Image and a Div block for text. Then, place Textelements inside the Div block.
    Use the Layers tab to make sure your structure is correct.

Step 3. Set up element layout

  1. Enable Auto layout for the container so that its elements are arranged in a row.

  1. Enable Auto layout for the Div block so that its elements stack vertically.

Learn more in the article: Elements layout settings.

Step 4. Fill elements with content

  1. Upload an image to the Image widget. To do this, double-click the Image widget and click the Upload File button in the left panel.

Then upload the desired image from your computer and click it in the left panel to insert it into the Image widget.

Add your text to the text elements.

  1. Add your text to the text elements.

Step 5. Style the elements

Select an element (on the Canvas or on the Layers tab in the left panel) and set styles to the element on the Design tab in the right panel.

For more details on how to style elements, refer to the Design and Styling section.

  1. Set the padding for the section: 30px padding on the top and bottom.

  1. Set the maximum width for the container to 1600px.

  1. Set the image dimensions: width 700px, height auto.

  1. Style the text elements by setting the font, font size, letter spacing, color, and other parameters. For the first text element, also add a 1px border and a 5px border radius.

To style elements with similar design (for example, headings, text, buttons, cards), it is convenient to use classes. Read more in the article: Classes.

Step 6. Customize your website for different devices

Customize your website for different devices to make it user-friendly for any display. To do this, you need to set different styles to the elements for each Breakpoint.

  1. Switch to the desired Breakpoint on top of the Canvas (Tablet, Mobile Landscape, Mobile Portrait).

  2. Style elements for the selected Breakpoint in the relevant sections on the Design tab (for example, size, position, paddings and margins, and others).

  3. Repeat steps for different Breakpoints as needed.

For example, in Tablet mode, you can change the layout by placing the text block and image one below the other. To do this, adjust the auto layout settings for the container: set the Direction to Vertical (bottom to top).