How to Create a Website in WeBase

Technology
In this guide, you'll learn how to create a website in WeBase.

We'll be designing a website from scratch in six steps. This usually takes less than an hour.

Our completed website will look like this: https://www.webase.com/sites/contest-template-website. But of course, you can take these principles and apply them to your unique design.

Let's start!

Basics of the WeBase site editor:


Websites in WeBase are composed of rows and blocks. You can create/delete rows and blocks using the buttons above the 'properties' bar on the right.

The properties bar is where we style rows, blocks, and components.

Components, on the left side of the page editor, are what you drag onto the composer.

All edits on the composer can be made visually.

Below components are views. An example of a view is a subscribe form. You can create views in the app editor, and then drag them onto the composer.

Add new pages and edit the Navbar and Footer using the menu icon above the composer.

Periodically check out the page with the blue 'preview site' button.

Page Editor Features (we'll see these in action below):

- Backgrounds: images (integration with Unsplash), color (solid or gradient) or patterns.

- Blocks: adjust the width and alignment of the block.

- Animation: animate text

- Icon: ready-made icons (ex: rocket ship) to drag onto the composer

- Customizable buttons

- Views: made in the app editor; ex: subscribe form

6 Step Process:


1. Banner

Once you have opened up an app in your workspace, you navigate to the second icon on the left toolbar to go to the page editor.

We'll start with Row Properties. Note the background options. In our example, we'll select 'color' and then linear gradient.

guide 1.1.png 1.13 MB

Now we'll add a block to this row. This will divide the row into two parts: we'll have text on the left block and an image on the right.

We add text with a component. In our case, we'll select the component, 'Header'. You can make duplicates of any component, so we'll do that now.

Then we'll drag another component, 'button', and customize that. See:

guide 2.1

Finally, we'll add an image.

To space things in a way that looks nice, we apply margins and padding. You can add both margins and padding to a row, a block, or an individual component.

Banner completed!

guide 3.1.png 988.19 KB


2. Features

Our design will highlight three features of our imaginary product.

Create a row with a width of 205 and a solid light gray background color. Drag a header onto this row and title it 'Features'. Duplicate the header, adjust the font size and text color, and then describe what makes your product's features awesome in 1-2 sentences. Align middle.

Make sure to use padding to make the components look good. For example, I added 3px of padding to the right and left of my description, as well as 2px at the top.

Now we'll create another row with a width of 400 and the same gray background color. Add a block.

To save time, we'll duplicate this row twice.

guide_6.png 50.86 KB


For these three rows, then, we'll alternative between text (and a button) on the left and a picture on the right. Remember to adjust the margins and padding of each component so that everything looks nicely spaced.

Tip: In the block properties, I've aligned everything to 'middle' so I only have to adjust the padding on the components.

3. Testimonials

Our testimonials section will be composed of two rows. The first row headlines the section with the header, 'testimonials', size 2x and  h3. The width of the row is 175 and the block is aligned 'bottom.'

Under the header, 'testimonials', I've added another description, similar to the one in the features section.

Leave the background color white to add contrast between 'testimonials' and 'features'.

Add a new row; make the width 280. Add 3 blocks inside this row.

Inside the block properties, check the box next to 'card'. This adds a border and shadow to each block, as you can see in this picture:

guide_7.png 145.08 KB

The blue quotation element in our demo website (https://www.webase.com/sites/contest-template-website) is an image, so download an icon of your choice and drop an image component onto the first card. Upload the icon. I've used the component properties to resize my image down to a width of 60px and a height of 50px.

Next drop a 'header' component and change the font size and color. Finally, drop another image. In our demo, I used our Unsplash integration to find a profile picture. Note the border property: select 'circle'.

Adjust the padding and repeat these actions for the next to cards!

guide 4.1.png 295.42 KB

4. CTA

Our 'Call to Action' is a row with a width of 250. The background color is a linear gradient using the same two colors in the banner. Nest two blocks in this row and align middle.

Go ahead and drag a 'header' component into the first block.

The second block uses the component, 'button'. Use a button size of lg, as seen here:

guide 5.1.png 684.83 KB


5. Latest Posts

The process for our next section, 'latest posts', is similar to the one for our space for 'testimonials'.

Create a row to headline the section, titling it 'latest posts'.

Then add a second row with a width of 400px. While we're in the row properties, go ahead and add padding of 5px to the bottom.

We'll divide this row up into three blocks and check the 'card' attribute. Drag an image component onto the first card. I'm using the Unsplash integration to find an image I like, then I'll resize it to come up with something like this:

guide_10.png 641.12 KB

Next add a 'header' component to title the post, and then duplicate the header and adjust the font size and color for the post description. Repeat for the next to cards.

6. Nav/Footer

At the top of the page editor, go to the navbar.

guide 6.1.png 100.62 KB


Change the default 'new header' to the name of your site. In my case, that's Gestalt. Next drag a 'link' component onto the following block; add a margin of three to the right, then duplicate this component as many times as you like. Change the text to the names of the next pages you plan to make. Once you make those pages, use the resource property to link to each one.

Conclusion:


WeBase is built from the ground up for creating awesome looking websites.

This guide has shown you how to build one from scratch. For reference, though, you can check out our website templates - just grab one and change the images and text, and you're ready to go.

Once you've finished creating your website, you can deploy to Netlify - see this article.

Thanks for reading!