How to Add Shapes Using OzSpeed hPanel

Adding shapes to your website can enhance the visual design, create unique layouts, and draw attention to specific content areas. With OzSpeed’s Website Builder, you can easily insert and customize various shapes like circles, squares, rectangles, and lines to fit your design needs. Here’s how to add and style shapes step by step.

---

Step 1: Access the Website Editor #

To start adding shapes, open the page editor in hPanel.

1. Log in to hPanel at ozspeed.com.au.
2. Go to Website Builder > Edit Site.
3. Navigate to the page where you want to add the shape.

Tip: #

• Use the Preview feature to plan where shapes can enhance the design, such as highlighting sections or creating dividers.

---

Step 2: Add a Shape Element #

You can drag and drop various shape elements onto your page.

How to Add a Shape: #

1. Click Add Element or + Add New Section in the editor toolbar.
2. Select Shapes from the list of elements (e.g., Rectangle, Circle, Line).
3. Drag the selected shape to the desired location on your page.
4. Click Insert to place the shape on your page.

Tip: #

• Use shapes to separate content sections, create call-to-action backgrounds, or add visual interest to the page.

---

Step 3: Customize the Shape’s Size and Color #

After adding the shape, you can adjust its size, color, and other properties.

How to Customize: #

1. Click on the shape to open the Design Settings.
2. Adjust the width and height to resize the shape.
3. Click on the Color Picker to change the shape’s color. Choose a solid color or add a gradient.
4. Click Apply to save the changes.

Tip: #

• Use your brand colors for the shapes to maintain a cohesive design throughout the website.

---

Step 4: Add a Border or Shadow #

Enhance the shape’s appearance by adding a border or shadow effect.

How to Add a Border: #

1. Click on the shape to open the Design Settings.
2. Enable the Border option and set the border width, style (solid, dashed, dotted), and color.
3. Click Apply.

How to Add a Shadow: #

1. In the same Design Settings panel, enable the Shadow option.
2. Adjust the shadow color, blur, and offset.
3. Click Save.

Tip: #

• Use a subtle shadow effect to give the shape a 3D appearance and make it stand out.

---

Step 5: Arrange and Align the Shape #

Position the shape precisely where you want it on the page.

How to Arrange: #

1. Click on the shape and drag it to the desired position.
2. Use the alignment guides that appear to help position the shape accurately.
3. Click Bring to Front or Send to Back if the shape overlaps with other elements.

Tip: #

• Align shapes with text blocks or images to create a balanced layout.

---

Step 6: Add Text or Content Inside the Shape (Optional) #

You can place text or other elements inside the shape for added impact.

How to Add Text: #

1. Drag a Text Block or Button Element onto the shape.
2. Edit the text (e.g., “Click Here,” “50% Off”).
3. Adjust the font size, color, and alignment to fit within the shape.

Tip: #

• Use shapes as backgrounds for call-to-action buttons or special promotions.

---

Step 7: Preview and Test the Shape #

Before publishing, preview the page to ensure the shapes look good and align properly.

How to Preview: #

1. Click Preview in the top toolbar.
2. Check the shapes on both desktop and mobile views.
3. Ensure that the shapes are responsive and adapt well to different screen sizes.

Tip: #

• Use an incognito window or clear your browser cache to see the changes as a new visitor would.

---

Step 8: Publish the Changes #

Once you’re satisfied with the shape’s design and placement, publish the updates.

How to Publish: #

1. Click Publish in the top right corner of the editor.
2. Confirm the changes to go live.

Tip: #

• Announce the new design elements on your social media or email newsletter to showcase the updated look.

---

Troubleshooting Tips #

1. Shape Not Displaying Correctly:
   • Check the color and background settings to ensure the shape is visible against the page background.
   • Clear your website cache in hPanel and your browser cache.
2. Shapes Overlapping Other Elements:
   • Use the Send to Back or Bring to Front options to adjust the layering of the shape.
   • Adjust the padding and margin settings for better spacing.
3. Shape Not Responsive on Mobile:
   • Enable responsive mode in the Design Settings.
   • Test the shape on different devices and adjust the size as needed.

---

Additional Tips: #

• Use Shapes for Emphasis: Shapes can be used to highlight key messages or important sections of the page.
• Combine Shapes: Layer multiple shapes for creative backgrounds or unique design elements.
• Keep It Simple: Avoid using too many shapes on one page, as it can clutter the design.