Innovative Inn

Innovative Inn
website development wordpress html css

Elementor Animated Border | WordPress Elementor.

Hey what’s going on guys

My name is Kumail From InnovativeInn in this Blog post. I’m gonna show you how to create this amazing animated border on your cards using elementor page builder.

Create a new section in Elementor

I will show you everything step by step from scratch. let’s now go inside elementor page builder to take a new section. let’s first click on this plus icon. I’m taking this three-column structure nowhere. I’m making its height to minimum height. let’s set it to 100 vh. Now let’s go under the style tab and from here. I’m setting a background color that’s a hash 0d132d.

All right

Inner section in Elementor

Now inside this middle column click on this plus icon. here I’m dragging an inner section let’s now delete one of these columns from inside the inner section. Now let’s select the inner section. here I’m giving its height to minimum height and 400 pixels is fine now let’s go under hc style tab and from here I’m making its background color to pure black color and then from here

let’s add some border-radius so from here I’m adding 20 pixels of border-radius. So if we now minimize the bar from left here we can see the corners are now rounded all right let’s now expand it and go under its advanced tab from here. I’m just adding four pixels of padding around this inner section now I also want to add some space at the left and right so to do it I’m selecting this time the outer column this one go under its advanced tab and from here I’m just unbinding the padding and only on the right and the left I’m adding 30 pixels of padding

All right

Edite Column in Elementor

Now inside this column click on this plus icon first here I’m dragging and heading widget and we can say it let’s say card 1 I’m making its alignment to centered go under the style tab from here let’s make the text color to white color and from here typography I’m making the font size to 60 pixels and font-weight let’s make it really bold so I’m making it 900 all right now underneath this heading widget here I’m dragging some paragraph we can also make it to centered aligned also I’m making the text color to an off-white color like this and now underneath this paragraph, I’m here dragging a button widget let’s now make its alignment to centered now go under style tab from here

Background Color

I’m making the buttons background color to transparent also let’s add some border with it so I’m making the border type to solid and one pixel of width also let’s make the border radius to 20 pixel-perfect now if we have a look there is a lot of space in between this paragraph and this button so to reduce it just go under advanced tab and bind the margin. Here at the top I’m adding some negative margin I’m adding 20 pixels of margin-top that’s the negative 20 pixels all right now I wanna make all these contents vertically centered within this column so just select this inner column from here so let’s make the vertical-align to the middle now go under these columns style tab from here

first, I’m making the background color the same color as this section so from this color picker I’m taking the same color code that’s 0d132d and with this column. I also want to add some border-radius so from here open the border and here I’m adding border-radius 16 pixels and now to add some inner space go under the advanced tab from here I’m adding just 15 pixels of padding

Animated Border

If we now minimize the bar from left here. we can see our beautiful card and if we have a close look we can see a black color border around this card but actually.

It’s not a border because if we just open the tab from left and let’s now select this inner section you may remember we have added 4 pixels of padding with the inner section so here this black color border is actually the padding in between the inner section and this inner column only to make you double sure I’m making here let’s say 20 pixels instead of four so right.

Now you can see it’s now bigger all right but now instead of this 20 pixel I’m setting it to four pixels and now I want to add that animated border around this card so to do it make sure you are selecting the inner section then from under its advanced tab open the custom CSS field by the way custom CSS is only available on eliminator pro I will put my elementor pro update link

All right

Custom CSS For Animated Border

Now you can write the custom CSS code inside here.

I will put animated border CSS just copy this whole CSS snippet from here.

:root{

–first-color: #ef32d9;

–second-color: #89fffd;

–size: 100px;

–speed: 4s;

}

selector{

overflow: hidden !important;

display: flex;

justify-content: center;

align-items: center;

}

selector:before{

content: ”;

position: absolute;

width: var(–size);

height: 140%;

background: linear-gradient(var(–first-color), var(–second-color));

animation: animate var(–speed) linear infinite;

}

@keyframes animate{

0%{

transform: rotate(0deg);

}

100%{

transform: rotate(360deg);

}

}

And now go inside elementor then paste the code inside this custom CSS field so if we now minimize the left bar where we can see our beautiful animated border all right let’s now open the left bar because I want to show you how you can change the first color second color size and speed from here.

All right

Edit Animated Border in Elementor

So let’s first start with these colors basically these two are gradient colors if you want to change these colors then from here just change the first color first so here I’m putting a hex code that’s hash fffffff you know this is the hex code for white color and if we now minimize the bar here we can see this one become the white color all right let’s now open it and from here the second color if I put here hash ff000 that’s basically the hex code for red color if we now minimize it here we can see it has become the red color all right let’s open it and I basically want to go back to those initial colors

All right

Edit Size or Speed in Elementor

Now from here if you want to change its size let me show you the initial size so right now you can see their length or size is like this if you want to increase it then from here you see the size I set it to 100 pixels instead of 100 if you write here 200 pixels now you see they are becoming bigger or their length is becoming bigger and instead of 200 now I’m going back to 100 but if you want you can put it any pixel value like 100 pixels or 110 20 like this and then here is the last option that is the speed option right now you see their animating speed is 4 seconds and if you wanna make it faster then you can just put here two so you see

It’s now happening within two seconds but it really fast for me so here if we just put 10 seconds here you see it’s now slowly moving within 10 seconds but it also becomes slower but I wanna put here four-second because four-second looks like standard animation duration to me so it’s looking like it at this moment all right let’s open the left bar from here and I want to show you another thing let’s say if you wanna increase the width of these borders then you can just simply select this inner section goes under its advanced tab and open this advanced field from here instead of 4 pixels if you put here for example 20 pixel you see their width is becoming bigger but I don’t want that I’m just showing you the options I’m just putting here for a pixel to me it looks perfect

all right

Create One or More Card in Elementor

If you just want to duplicate this you can duplicate it by duplicating this outer column so make sure you are selecting the outer column then. let’s duplicate it I’m duplicating it one more time and we can simply just delete an empty column from the left also. let’s delete the empty column from the right. Now you know you can just simply change this text so here I’m typing card two and then here. I’m typing card three so right now they are looking great but finally

Elementor Responsive Mode

I just wanna show it how it’s looking on tablet devices and mobile devices so from here. let’s now click here on responsive mode so on the mobile device they’re looking great

I hope you have learned something new today. If you liked it please give this video a big thumbs up and don’t forget to Like &Comments-shear this Blog.

I will upload a new post on this blog website.

If you want me to help you with your WordPress project or element or project then you can contact me through my website that’s InnovativeInn.com.

I will try my best to help you personally once again thank you so much for reading this post. I will see you in the next Blog Post, for now, bye-bye

Leave a Comment

Your email address will not be published. Required fields are marked *