The Best Ways To Add Subtle & Animated Shapes to Your Site with Divi

Who doesn’t love subtle animations? They’re a nice method to include a little complexity to your website. If succeeded they can look beautiful and professional at the exact same time.In this tutorial, we’re going to show you how to include subtle, animated shapes using Divi’s integrated options. No additional CSS required. When you get the technique and practice with the examples below, the sky ends up being the limitation. You can produce all kinds of shapes and apply them on your site with little effort.Result Prior to we dive into the tutorial, let’s take a glance at the four various animated shapes we’ll recreate.Animated Forming # 1 Animated Shape # 2 Animated Forming # 3 Animated Forming

# 4

The Best Ways To Include Subtle & Animated Shapes to

Your Website with Divi Method We’re positioning the & shapes in new rows which we’ll remove all the


  • to limit the additional space that’s being developed )Depending upon which side you desire your animated shapes to appear, you’ll need to customize the row alignment A left or right row positioning makes certain these animated shapes stay on that side of the screen no matter what screen size We’re utilizing empty Text Modules to produce the shapes Utilizing an empty Text Module allows you to benefit from all the other Divi built-in choices Custom margin and padding play an essential function in making the items fit We’re utilizing favorable and negative margins to lower the area that was produced by the row and modules and kind of make them overlap with 2 various sections The padding, on the other hand, is used to develop the sort of shape
  • you want The Background, Border and Box Shadow subcategories permit you to develop the type of shape you desire We’re adding direct animation loops which will keep the animation going on at a sluggish speed You can use the samemethod while using your own shapes within Image Modules Produce New Page with
  • Style Conference House Page Develop New Page When you read the basic approach and keep it in mind, proceed and develop a brand-new page on your WordPress dashboard.Switch Over to Visual
  • Builder After including a title, switch to Visual Builder right away.Upload Style Conference Web page In this tutorial,
  • we’ll concentrate on creating the animated items. And what better way is there to do this than by utilizing a premade layout? For this tutorial

    , we’re going to choose the homepage of the Design Conference Design Pack which you

    can find in your premade designs. However obviously, you can apply these animated shapes to any page or layout.Add Animated Shape # 1 Add New Row Position Now, to add the first animated shape, include a brand-new row to your hero area: Column Structure We’re utilizing two columns for this row.Row Alignment

    Then, go to the Style tab and choose left Row Positioning due to the fact that we desire the animated shape to appear on the left side of the screen.Spacing Next, open the Spacing subcategory and eliminate all of the default padding this row includes by including’ 0px ‘to each one of the options.Add Empty Text Module to Column 1 Include Text Module & Leave Material Box Empty Time to start adding the shape! Include a Text Module to

    column 1. We

    ‘re not going

    to share any text or copy within this Text Module, we’re rather using it for its

    Divi built-in alternatives. So, ensure you leave the content box empty.Background Color Include’rgba( 255,255,255,0.14)’as the background color of this Text Module.Spacing We’re going to do two four things within the Spacing subcategory; making a shape with the custom padding, getting rid of the area that’s been developed by the row and module, pushing the shape more to the left and making the Text Module overlap the second row: Leading Margin: -100 px Margin: 100px Bottom Margin: -500 px Left: -100 px Leading Cushioning: 200px Bottom Cushioning: 400px Border To create a circle of the rectangular shape, open the Border subcategory and apply’500px ‘to each one of the corners.Animation Last but not least, include your loop animation by opening the Animation subcategory and applying the following settings:

    Animation Design: Roll Animation Repeat: Loop Animation Instructions: Center Animation Duration: 20000ms Animation Intensity: 500%Animation

    Start Opacity: 100 %Animation Speed Curve: Linear Clone Row Position We’re going to conserve ourselves a long time by cloning this whole row to create the shape in the bottom ideal corner of the hero section.Change Row Alignment The very first thing we’ll require to change about this row is the

  • Row Positioning. Rather of left, use right.Place Empty Text Module in Column
  • # 2 Evidentally, we’ll likewise require to place the Text Module in the 2nd Column instead of the first.Change Empty Text Module Spacing We’re going to change the spacing of this Text Module as well (press it to the ideal rather

    of left): Right Margin: -50 px Bottom Margin: -350 px Left: 50px Top Cushioning: 250px Bottom Cushioning: 250px Add Animated Shape # 2 Create Animated

    • Forming # 1 To develop the second
    • animated shape, merely go
    • through the procedure of creating
    • the animated shape # 1. We’ll have to make few modifications only.Modify Both Empty Text Modules Border The very first thing you’ll have to modify is the rounded corners of the

    Border subcategory. Usage ’20px’rather of ‘500px’ for each one of the corners.Animation Due to the fact that of the shape, it will roll a lot quicker than the circle shape does. That’s why we’re going to

    increase the Animation

    Duration to’100000ms ‘. Add Animated Forming # 3 Add New Row Position To create animated shape # 3, scroll

    down your page till you pass the ‘About Divi 100

    Design’section. Include your row as the last row of that section: Column Structure Select the following column structure for your row: Row Alignment

    Again, we’re making sure the Row Positioning matches the side we’re including the animated shape to. In this case, that’s the left side.Spacing We’re likewise getting rid of

  • all the default cushioning of this row by including’
  • 0px
  • ‘to each one of the alternatives. Visibility The two first animated shapes work great on tablet and phone also. The other two, however, are too invasive for smaller sized screen sizes
  • . That’s why we’re going to disable the whole row on tablet and phone within the Presence subcategory.Add Empty Text Module to Column 1 Include Text Module & Leave Material Box Empty Once again, include an

    empty Text

    Module to the first column of this row.Spacing We’re going to make sure there’s no extra space being created by the brand-new row and Text Module by experimenting with the custom margin. Open the Spacing subcategory and apply the following values

    : Leading Margin: -150 px

    Margin: 25%Bottom Margin: -50 px Left Margin: -25% Leading Padding: 250px Border Next, we’ll include a border to this shape by going to the Border subcategory and using the following settings:

    Border Width: 5px Border Color: # 4646c4 Box Shadow Depending upon your choices, you can likewise include some depth to this object by picking the first choice within package Shadow subcategory without making any adjustments to the


    settings.Animation We’ll use the loop animation to this item by opening the Animation subcategory and usinganimated shapes

    the following settings to it: Animation Style: Roll Animation Repeat: Loop Animation Instructions: Animation Duration: 25000ms Animation Intensity: 100% Animation Beginning Opacity: 50%Animation Speed Curve: Linear Clone Empty Text Module & Keep it in Column 1 Change Spacing Clone the very first empty Text Module and leave it in the very first column. We’ll make & some modifications to it, beginning with the Spacing. Open the Text Module settings, go to

    the Design tab, open the Spacing subcategory and use the following customized margin and cushioning to it: Top Margin: -50%Right Margin: 25%Bottom Margin: -200 px Left Margin: -25%Top Cushioning:

    • 250px Modification Border
    • Color We’ll likewise alter the border color to’#aaaaaa’
    • . Modification Animation The last change we’ll need to make is adding an animation

      delay to this shape by going to the Animation subcategory and including ‘1000ms’to the Animation Hold-up option.Add Animated

      • Shape # 4 Add New Row
      • Row Position We ‘ve reached the final animated shape

        of this tutorial which we’ll position right prior to the ‘Our Sponsors’Text Module of our page:

        Column Structure We’re, once again, selecting for a row with 4 columns:

      • Row Positioning These animated shapes will appear on the best side of our
      • page so naturally, we’re going to enable right Row Positioning.

        Spacing We’re going to lower the area this row uses up by adding’0px ‘to all the customized cushioning alternatives within the Spacing subcategory.

        • Visibility And once again, we
        • want these animated
        • shapes to appear on tablet only so we’ll disable them
        • on tablet and phone in

        the Presence subcategory of the Advanced tab.Add Empty Text Module to Column 4 Add Text Module & Leave Content Box Empty Let’s start creating the animated shape. Add an empty Text Module to column 4. Gradient Background We’re going to use a gradient background for this Text Module including the

        following 2 colors and the default gradient background settings: First Color: #d 002ba Second Color: # 166cc2 Spacing The spacing of this Text Module will develop a shape, will push the shape to the right and will make it overlap withanimated shapes

        the previous section. Open the Spacing subcategory and get in the following worths:animated shapes

        Top Margin: -80%Right Margin: -25%Bottom Margin: -120 px Left Margin: 25%Leading Cushioning: 250px Border We’ll also utilize some rounded corners for this animated shape by animated shapes

        going to

        the Border subcategory and adding’20px’to each one of the corners.Box Shadow To develop more depth, we’ll enable the very first box shadow choice in the Box Shadow subcategory. We’re utilizing the default worths but do not hesitate to modify these to your needs.Animation And last but not least, we’ll likewise include the loop animation in

        the Animation subcategory using the following settings: Animation Design: Roll Animation Repeat: Loop Animation Instructions: Animation Period: 25000ms Animation Strength: 100%

        Animation Starting Opacity: 70%Animation

        Speed Curve: Linear Clone Empty Text Module & Keep it in Column 4 Modification Spacing We’re going to save ourselves some time, clone this empty Text Module and make 2 little adjustments to it. Open the spacing subcategory and change the leading margin to ‘-50 %’. Modification Animation And, as shown in animated shape # 3 too, we’re going to add an animation delay of’1000ms’. And voilà, there you have your sensational animated shapes ! Outcome Now that we’ve gone through all the examples, let’s take a final look at the result.Animated Shape # 1 Animated Forming # 2 Animated Shape #

        • 3 Animated Shape # 4
        • Last Ideas In this post, we have actually shown you how to include subtle
        • , animated shapes to your
        • site utilizing Divi’s integrated alternatives only

        . You can apply this method to other shapes you ‘d like to contribute to your website. They assist you include a bit of additional interaction

        and style to your

        site. If you have any concerns or ideas, make sure you leave a comment in the comment section below!