How to Use the Separator Element – Transcribed?
Hi everyone in this series of videos we’re looking at how to use the builder elements, today we’re looking at how to use the separator element.
Make sure you subscribe to our YouTube channel to keep up with all the latest videos like this one. And if you don’t want to miss one, click the Bell icon to get notifications of all new videos on our channel. OK, let’s begin.
The separated element is a much used and versatile element to provide separation in your design, and it comes with a range of styles.
There is also another style option for using it as a spacing control element, but in most cases margin controls. There are better options for this.
Let’s have a look at the music demo to see how it is being used here. If I Scroll down past the top slider, the first container has a separator right at the top.
Let’s edit this separator to look at the options.
In the general tab, the main option is the style. Here you can choose from default no style, single border, solid, double border solid single border, dashed double border, dashed single border, dotted double border, dotted and shadow.
This particular separator is using the single border solid style.
There are also the usual element visibility in CSS class and CSS ID options which allow you respectively to hide or show the element on various screen sizes or make further CSS customizations.
But let’s look at the design tab, as that’s where the styling takes place.
The first option here is the flex grow option edit in about a 7.
Check out the How to use flex grow on separators doc for more information and an example of usage for this option.
But basically, what this option offers is for you to allow the separator to grow into the available space in a column, which gives you an easy way to align content inside columns in the row.
The next option is margin. This controls the spacing above and below the separator and is the main control for spacing. But in this instance, it’s empty.
This is because the designer wanted the separator right at the top of the container, and instead of using the margins in the separator to add space at the bottom, they have used padding in the containing column.
Then comes separated with.
By default, separators are the full width of the column they’re in. But here you can change that to whatever you like in percentage or pixels.
Here it is set to 40% and under that the option for alignment is set to center.
The option below this is border size and this controls how thick the separator line is. It can be anywhere from zero to 50 pixels. Here it’s at 16 pixels. To create that nice fat line.
After this is an option for the separator color where you can choose any color you like for your separator.
Obviously if you choose no style, no color will show as no style is designed to be used for spacing control when necessary, whereas the other styles are for both visual separation and spacing control.
Select icon is the next option and here you can choose an icon to show in the middle of the separator.
I will just customize this separator to show how this works.
First up, I will adjust the margin to move this separator off the top of the container, and I’ll change the border size back to three pixels.
So now I can choose my icon and I will just search for drum.
And choose this first one.
The next option controls the icon size.
You can increase the icon size all the way up to 100 pixels, but I’ll settle for 46.
Then we have icon color, which of course can be any color you like, including with transparency.
This will fall back to the separated color if no color is set here or in the global options, but I might override it to be white here.
The next option circled icon allows you to choose if you want to circle around the icon or not.
The default here is yes.
And the option below. This allows you to control the color inside that circle.
By default, it’s transparent, but it can of course be any color.
I might just try filling it with the same color as the separator itself.
Yeah, that looks good.
We can also choose not to use a circle if we prefer, and then it looks like this with the icon splitting the line.
In this case, though, I think I prefer it on.
Just below this separator we can see another one.
Titles also include a separator option, but this one is an instance of the separator element.
Editing it, we can say that again, it’s using the single border solid style, but this time it’s using the default dark Gray with a 40 pixel margin below it and it has a border size of only two pixels.
It has no icon, but the width is 300 pixels and is centered.
Separators can also be invisible and are best used between elements that have no margin or padding controls.
For example, if we Scroll down some more, there is a testimonial element here. Above a code block element that’s triggering a video.
If I wanted more space between these two elements, I could just add a separator element under the testimonial.
I’ll just set the style to no style.
And then in the design tab I might add 5% bottom margin to the separator.
As it’s invisible, I don’t need to worry about any other options.
Spacing between columns and containers is best adjusted with column margins and Paddings. So, check out the how to control spacing in Avada Doc For more information about that.
But there you go. That’s the versatile separator element.
OK, this concludes our video on how to use the separator element.
Make sure you subscribe to our YouTube channel to keep up with all the latest videos and if you have any questions or need assistance, please create a support ticket and our team will gladly assist you.
As always, we want to thank you for choosing Avada Web Design Builder.