This documentation provides comprehensive insights into using the Shape Builder Extension developed by Element Pack Pro.

🧩 Shape Builder – Element Pack Pro

The Shape Builder feature in Element Pack Pro allows you to create visually stunning and unique shapes directly inside Elementor without any external design tools. It gives you the power to design creative sections, dividers, and backgrounds with full control over curves, angles, and layers.

✨ Key Features

• Custom Shape Creation – Build and customize any shape visually with simple controls.
• Dynamic Adjustments – Modify width, height, curves, and rotation in real-time.
• Multiple Presets – Choose from pre-designed shapes like waves, curves, diagonals, and mountains.
• Color & Gradient Support – Apply solid colors or gradient overlays for a vibrant look.
• Responsive Design – Shapes automatically adapt to all screen sizes.
• Lightweight Rendering – Optimized for performance without adding extra load time.

🌟 Key Benefits

• Enhance your page sections with creative and dynamic visuals.
• Avoid dependency on image-based shapes or third-party tools.
• Improve brand identity with custom, on-brand section dividers.
• Speed up your design workflow using presets and real-time editing.
• Make your website more engaging and modern with minimal effort.

Enable the Shape Builder Extension

Go to WP Dashboard Element Pack Pro > Extension

To use the Dynamic Accordion widget from Element Pack Pro, first, you have to enable the extension. Navigate to the WordPress Dashboard.

1. Go to Element Pack Pro > Extensions section.
2. Search by the Widget Name ” Shape Builder ” and it will appear the.
3. Now Enable the Switcher of the Shape Builder extension.
4. Hit the Save Settings button.

Where to Find the Extension

It can be used with any section, container, Widgets or any place you want.

1. Select any Container and click on the six dots icon to open its settings.
2. Next, go to the Advanced tab to access more customization options.
3. Scroll down until you find the Shape Builder panel — beautifully highlighted with the Element Pack Pro logo on the right side.

Work with Shape Builder ( All the Controls Introduction )

The Shape can be added any where or any place. We have share an example of our predesign section. We will demonstrate how to add new shape and all the controls works.

Add Shape

1. Shapes: A default shape item will appear here. Simply click on it to expand and access all the available customization options.

Shape Type

1. Shape Type: Choose the type of shape you want to work with. The available shape options are:

• Circle: Create a perfectly round shape.
• Square: Display a sharp-edged, equal-sided box.
• Triangle: Add a dynamic triangular shape.
• Corner: Design a shape aligned to any corner.
• Blob: Use an organic, fluid blob shape.
• Oval: Create a smooth, elongated circular shape.
• Badge: Add a badge-style shape for highlights.
• Custom: Upload or define your own unique shape.

1. Color: Choose the color for the shape. Select the Fill Type as Color and pick your desired shade to apply it to the shape.

4. Z-Index: Set the stacking order of the shape. A higher value places it above other elements.
5. Width: Define the width of the shape to control its horizontal size.
6. Height: Define the height of the shape to control its vertical size.

7. Position: Define where the shape will appear within the section.

• Horizontal Orientation: Choose the horizontal placement — either Left or Right.
• Offset: Adjust the horizontal offset to fine-tune the shape’s position.
• Vertical Orientation: Choose the vertical placement — either Top or Bottom.
• Offset: Adjust the vertical offset for precise positioning.

Normal

8. Drop Shadow: Add a shadow effect to the shape for depth and visual emphasis.

• Color: Choose the shadow color.
• Horizontal: Adjust the shadow position horizontally.
• Vertical: Adjust the shadow position vertically.
• Blur: Control how soft or sharp the shadow edges appear.

9. CSS Filters: Apply visual effects to the shape for enhanced styling and creativity.

• Blur: Add a soft blur effect to the shape.
• Brightness: Adjust the light intensity of the shape.
• Contrast: Increase or decrease the difference between light and dark areas.
• Hue Rotate: Change the overall color tone by rotating hues.
• Saturate: Control the color intensity or vividness.
• Sepia: Apply a warm, brownish tone for a vintage effect.

10. Transform: Adjust the position and orientation of the shape.

• Horizontal: Move the shape horizontally (left or right) on the axis.
• Vertical: Move the shape vertically (up or down) on the axis.
• Rotate: Rotate the shape at a specific angle to achieve your desired layout.

Hover

1. Drop Shadow: Apply a subtle shadow effect to your shape to enhance depth and dimension. The shadow appears right after enabling the Drop Shadow option.

• Color: Choose the color of the shadow.
• Horizontal: Adjust the shadow’s horizontal position.
• Vertical: Adjust the shadow’s vertical position.
• Blur: Set the blur level to control the softness of the shadow.

9. CSS Filters: Apply visual effects to the shape for enhanced styling and creativity.

• Blur: Add a soft blur effect to the shape.
• Brightness: Adjust the light intensity of the shape.
• Contrast: Increase or decrease the difference between light and dark areas.
• Hue Rotate: Change the overall color tone by rotating hues.
• Saturate: Control the color intensity or vividness.
• Sepia: Apply a warm, brownish tone for a vintage effect.

1. Drop Shadow: Apply a subtle shadow effect to your shape to enhance depth and dimension. The shadow appears right after enabling the Drop Shadow option.

• Color: Choose the color of the shadow.
• Horizontal: Adjust the shadow’s horizontal position.
• Vertical: Adjust the shadow’s vertical position.
• Blur: Set the blur level to control the softness of the shadow.

By following the instruction you can use the Shape Builder. Let’s create a beauficul design with the Shape Builder.

Video Assistant

Video Tutorial is coming soon!

We appreciate your support.