Creative Border

Creative Border option will only work when you have any content inside the section.

Find the “Creative Border” option in Section

In the section, click on the middle icon among the 3 icons to edit the section options. See below image:

Now in Elementor’s main panel (left side), click on “Style” tab from the top. See below image:

 

Find the “Creative Border” tab in this section. Click on the tab and enable this module. See below image:

 

 

 

Creative Border Options

In the First part, you need to build the border by adjusting the options.

Creative Border On:

Select the devices, you want to show this function. Available options: Desktop, Tablet, and Mobile. You can disable on a certain device by clicking the close icon beside the device name.

Border Type:

Select the border type. There are two types: Image and Color. If you want to create a border from an image dynamically then choose the “Image” option. Or, if you want to show a color border then choose “Color”.

 

Image Border Building Options

 

 

 

Choose Image:

Upload the image from which you want to create the border. This image will not show in the frontend. this will be used just for creating the border from this image.

Border Width:

Define the width in pixel of the image from where the border will be cut. Note that, this value will not exceed the size of the main image that you have uploaded. If you have uploaded an image of 1920px width, then set this value within this range. E.g. 1100.

Border Height:

Define the height in pixel of the image from where the border will be cut. Note that, this value will not exceed the size of the main image that you have uploaded. If you have uploaded an image of 1080px height then set this value within this range. E.g. 600.

Cutting Top Offset (px):

Define the top offset of the image from where the border will start to cut the image vertically. Suppose, you have uploaded an image of 1920px width by 1080px height and you have set the Border height to  600px in the previous option. Now if you set the top offset 200px, then the border will be created after the 200px top and will end in 800px in the vertical direction. So remember that your image height must be larger than this value i.e. 800px height minimum in this instance.

Cutting Left Offset (px):

Define the left offset of the image from where the border will start to cut the image horizontally. Suppose, you have uploaded an image of 1920px width by 1080px height and you have set the Border width to  1100px in the previous option. Now if you set the left offset 350px, then the border will be created after 350px left and will end in 1450px in the horizontal direction. So remember that your image width must be larger than this value i.e. 1450px width minimum in this instance.

Border Size:

Define the border size in pixel. If you choose 25px for all side than the border will be cut accordingly. You can define the different size for the different side if you wish.

 

 

Image Border Display Options

 

Enable this option if you want to flip the border horizontally to show after building the border.

Top Margin:

Define the top margin value from where the border will be shown in the front-end vertically. If you disable this option then this will be set to “auto” mode.

Bottom Margin:

Define the bottom margin value from where the border will be ended to show in the front-end. If you disable this option then this will be set to “auto” mode. If you define top margin then this option will not work.

Left Margin:

Define the left margin value from where the border will be shown in the front-end horizontally. If you disable this option then this will be set to “auto” mode.

Right Margin:

Define the right margin value from where the border will be ended to show in the front-end. If you disable this option then this will be set to “auto” mode. If you use both left and right margin then the border will be adjusted responsively.

Border Radius:

Define the radius of the border. You can set this value either in percentage or in the pixel. To change the value parameter, just click on the right-top corner of this option.

Border Rotate:

Define the value for rotating the border. You can define the value for responsive devices by clicking on the desktop icon. A negative value is available to rotate the border on both sides.

Entrance Animation:

Select the animation type from the drop-down options. This is entrance animation and will be loaded on demand, that means when a user will scroll in this section, only then the animation will start to display the border.

Border Z-Index:

Define the Z-Index of the border. If you want to display the border under the content then set a lower value than the Content Z-Index. If you want to display the border above the content then set a higher value than the Content Z-Index.

Content Z-Index:

Define the Z-Index of the Content inside this section. If you want to display the content under the border then set a lower value than the Border Z-Index. If you want to display the Content above the Border then set a higher value than the Border Z-Index.

CSS Filters:

You can apply various design filter for your border. Available options are Blur, Brightness, Contrast, Saturation, and Hue. Just play around these options and see the result.

 

 

Color Border Building Options

Border Width:

Define the total width area for the color border in the pixel value. You can define the value for responsive devices by clicking on the desktop icon.

Border Height:

Define the total height area for the color border in the pixel value. You can define the value for responsive devices by clicking on the desktop icon.

 

 

Color Border Display Options

 

Border Type:

There is various border type available in this option. Select your desired option from Solid, Double, Dotted, Dashed, and Groove.

Width:

This option will be available when you will select any border type from the previous option. Define the border width in this option. you can set the different value for the different sides of the border.

Color:

This option will be available when you will select any border type from the previous option. Define the color of the border as your wish.

Top Margin:

Define the top margin value from where the border will be shown in the front-end vertically. You can set this value either in percentage or in the pixel. To change the value parameter, just click on the right-top corner of this option. You can define the value for responsive devices by clicking on the desktop icon. If you disable this option then this will be set to “auto” mode.

Bottom Margin:

Define the bottom margin value from where the border will be ended to show in the front-end. You can set this value either in percentage or in the pixel. To change the value parameter, just click on the right-top corner of this option. You can define the value for responsive devices by clicking on the desktop icon. If you disable this option then this will be set to “auto” mode.

Left Margin:

Define the left margin value from where the border will be shown in the front-end horizontally. You can set this value either in percentage or in the pixel. To change the value parameter, just click on the right-top corner of this option. You can define the value for responsive devices by clicking on the desktop icon. If you disable this option then this will be set to “auto” mode.

Right Margin:

Define the right margin value from where the border will be ended to show in the front-end. You can set this value either in percentage or in the pixel. To change the value parameter, just click on the right-top corner of this option. You can define the value for responsive devices by clicking on the desktop icon. If you disable this option then this will be set to “auto” mode. If you use both left and right margin then the border will be adjusted responsively.

Border Radius:

Define the radius of the border. You can set this value either in percentage or in the pixel. To change the value parameter, just click on the right-top corner of this option.

Border Rotate:

Define the value for rotating the border. You can define the value for responsive devices by clicking on the desktop icon. A negative value is available to rotate the border on both sides.

Entrance Animation:

Select the animation type from the drop-down options. This is entrance animation and will be loaded on demand, that means when a user will scroll in this section, only then the animation will start to display the border.

Border Z-Index:

Define the Z-Index of the border. If you want to display the border under the content then set a lower value than the Content Z-Index. If you want to display the border above the content then set a higher value than the Content Z-Index.

Content Z-Index:

Define the Z-Index of the Content inside this section. If you want to display the content under the border then set a lower value than the Border Z-Index. If you want to display the Content above the Border then set a higher value than the Border Z-Index.

CSS Filters:

You can apply various design filter for your border. Available options are Blur, Brightness, Contrast, Saturation, and Hue. Just play around these options and see the result.

Have any recommendation to improve the documentation?

Submit your Feedback

Submit your feedback