Lines and Buttons

In this short tutorial we’ll discuss the additional shapes that the Tool bar has under shapes and how to use them.

• Shapes
  • Horizontal Line
  • Vertical Line
  • Button
• Adding a shape
• Resizing a shape
• Tilting a shape
• Changing the shape’s position
• Vertical/Horizontal line design
• The contextual menu of the Button
  • Edit
  • Style
  • Link

Shapes

A Horizontal Line offers a way to divide the page into different sections.

A Vertical Line Can be used the same way as a Horizontal Line.

The Button allows you to create a link with predefined design settings.

Adding a Shape

The different shape element can be found in the Toolbar under Shapes - Simply drag them to the page to add them.

Resizing a Shape

You can resize any element by simply dragging the orange borders around it that appear when it’s selected

Tilting a Shape

You can tilt any element by simply clicking the Rotate Me button at the top right of the element and rotating it.

Changing the Shape’s Position

You can change the position of any element by simply clicking on it and dragging it around the page.

Vertical/Horizontal Line Design

Left clicking the added line will allow you to select the “Design” option.
Through it you can various border designs.
You can read more about it here.

The Contextual Menu of the Button

You can easily edit the text on the button by left clicking on it and selecting Edit.

Style opens up the current element style window. In this window it’s possible to change many of the design settings.

• Background Color - Defines the background color, tone and opacity.
• Background color on Hover - Defines the background color while hovering with the cursor.
• Border Width - Sets the border width.
• Border Radius - Rounds the corners of the border.
• Border Color - Sets the border color.
• Font - Sets the text’s font.
• Text Color - Sets the text color
• Text Color On Hover - Set the text’s color while hovering with the cursor.
• Text Size - Sets the font size.
• Set Shadow - Opens up the shadow options. Read more about it here
• Background Image - Enables you to set the button’s background image.
• Background Position: Positions the image in relation to the screen height and width.
• Size:
  • Cover - Changes the image dimensions so that the entire background is covered. Crops the image if needed.
  • Contain - Changes the image dimensions so that it’s completely visible in the website.

You can link the button simply by left clicking on it and selecting Link.
You can link to a page in your website, a page in an external website, a file in the File Manager and an e-mail address.