Add Professional Design Touches

"What are some touches I can add to my site to make it look professionally designed?"

You are not only limited to adding text, images and changing your theme to make your site look great. There are number of features in the Webs Sitebuilder that you may not have even know you had. In this article we will take a closer look at spacers, dividers, buttons, icons and the lightbox.

 


Spacers 

Sometimes you need some extra space between modules. By default, when you add a new module beneath an existing one, they will be flush against each other. The Spacer module adds additional space between vertically-stacked modules as needed. Other than increasing the height of your spacer, there are no customization options for spacers. 

spacer.jpg

The Spacer module is located under the "Structure" tab at the bottom of the Builder.

 


Dividers

The Divider module is a way to add a decorative border between modules. Once you drag the divider module into place, you can use the toolbar to switch the style of divider you want to use . Use the Advanced menu to adjust the margin, width and position of the divider. Like Spacers, Dividers are horizontal.

divider.jpg

The Divider module is located under the "Structure" tab at the bottom of the Builder.

 


Buttons

Buttons allow you to create calls-to-action for your visitor, i.e. "click here" or "buy now," and are a large part of the Services combo module

button_format.jpg

Formatting toolbar for Button module:

  • Link: Link to internal pages (other pages on your website), external pages, an email address or directly to a file. 
  • Font size: Choose between 8-72 point font for your button
  • Background color: The color of your button. When you first drag your module into place it will be the theme default color.
  • Icon picker: Add a decorative symbol to your button. See below for more on icons.
  • Alignment: Align your button left, right or center within the module
  • Style: Bold, italic, or underline your button text
  • Text color: It is recommended that you choose a color that contrasts nicely with the button color if you are not sticking with the default color

The Button module is located under the "Popular" tab at the bottom of the Builder.

 


Icons

Icons are ornaments or symbols that can be added to titles and buttons as a visual cue or fun design element. 

When you are working in the Title or Button module, the symbol icon appears in the formatting toolbar next to the font size dropdown. 

icons.jpg

There are five icon groups - Boolean, Classy, Falcow, Fugue and Rocky. Each group has a distinct style. Choose icons based on specific calls-to-action. For example:

icon_examples.jpg

In the above image are two button examples and two title examples. It is recommended that you keep styles consistent throughout your page or the entire site, especially if the style is a good fit for the theme you've chosen.

 


Lightbox

A "lightbox" is an enhanced link to a fullscreen version of a image. 

Use the Image module to add an image to your page. 

Click Link in the formatting toolbar to open the "Change Link" pop-up.

lightbox.jpg
Click the lightbox tab and check "Enable Lightbox." You also have the option of entering a caption.
Click Insert Link and publish your changes.

 

Have more questions? Submit a request

0 Comments

Article is closed for comments.
Powered by Zendesk