It is always fun to get creative with Divi’s transform options. They allow you to create some amazing “outside the box” designs. And in this tutorial, we are going to transform some Divi blurbs into a beautiful segmented circular menu that expands and collapses on click. The trick to creating the segmented areas (like a pie chart) is to use transform skew in a pretty unique way. The inspiration for this idea came from this tutorial and I have to say it was extremely fun to build with Divi.

Let’s get started.


Sneak Peek

Here is a peak at the segmented circular menu we will build in this tutorial.

how-to-create-a-segmented-circular-menu-using-divi-blurbs How to Create a Segmented Circular Menu Using Divi Blurbs

how-to-create-a-segmented-circular-menu-using-divi-blurbs-1 How to Create a Segmented Circular Menu Using Divi Blurbs

how-to-create-a-segmented-circular-menu-using-divi-blurbs-2 How to Create a Segmented Circular Menu Using Divi Blurbs

Download the Segmented Circular Menu Divi Layout for FREE

To lay your hands on the menu design from this tutorial, you will first need to download it using the button below. To gain access to the download you will need to subscribe to our Divi Daily email list by using the form below. As a new subscriber, you will receive even more Divi goodness and a free Divi Layout pack every Monday! If you’re already on the list, simply enter your email address below and click download. You will not be “resubscribed” or receive extra emails.

You have successfully subscribed. Please check your email address to confirm your subscription and get access to free weekly Divi layout packs!

To import the layout to your page, simply extract the zip file and drag the json file into the Divi Builder.

Let’s get to the tutorial shall we?

What You Need to Get Started

To get started, you will need to do the following:

  1. If you haven’t yet, install and activate the Divi Theme installed (or the Divi Builder Plugin if not using the Divi Theme).
  2. Create a new page in WordPress and use the Divi Builder to edit the page on the front end (visual builder).

After that, you will have a blank canvas to start designing in Divi.

Creating A Segmented Circular Menu Using Divi Blurbs

This design will use a combination of built-in Divi settings and external code. We will utilize the visual builder to create most of the design of our menu. Then we will deploy the wireframe view mode to get to those hard to reach settings once the elements become positioned absolutely. We’ll start with creating the circular menu which consists of multiple blurbs in a row. Then we will design an addition blurb in a separate section to serve as the overlapping menu button.

Creating the Row for the Menu Items

In the default regular section, add a one-column row.

how-to-create-a-segmented-circular-menu-using-divi-blurbs How to Create a Segmented Circular Menu Using Divi Blurbs

Styling the Row

Before adding a module, let’s style the row to get our circular shape and background color. Open the row settings and update the following:

  • Background Color: #8857f2
  • Use Custom Gutter Width: YES
  • Gutter Width: 1
  • Width: 30em
  • Height: 30em
  • Padding: 0px top, 0px bottom

how-to-create-a-segmented-circular-menu-using-divi-blurbs-1 How to Create a Segmented Circular Menu Using Divi Blurbs

Then add the rounded corners and the box shadow.

Rounded Corners: 50%
Box Shadow: see screenshot

how-to-create-a-segmented-circular-menu-using-divi-blurbs-2 How to Create a Segmented Circular Menu Using Divi Blurbs

We will be coming back to add some more customizations to the row, but for now we can start adding our blurbs.

Creating the Blurbs for the Menu

Add a new blurb to the one column row inside the circular row.

how-to-create-a-segmented-circular-menu-using-divi-blurbs-3 How to Create a Segmented Circular Menu Using Divi Blurbs

Styling Blurb #1

Update the content for the first blurb to include a title and an icon.

  • Title: link
  • Use Icon: YES
  • Icon: see screenshot

After that, update the design settings as follows:

  • Background Color: #773ef2
  • Background Color (hover): #222222
  • Icon Color: #ffffff
  • Icon Font Size: 40px (desktop), 30px (tablet)
  • Text Alignment: center

how-to-create-a-segmented-circular-menu-using-divi-blurbs-4 How to Create a Segmented Circular Menu Using Divi Blurbs

Then update the title text style as follows:

  • Title Font: Archivo Narrow
  • Title Font Style: TT
  • Title Text Color: #ffffff
  • Title Text Size: 14px (desktop), 12px (tablet)

how-to-create-a-segmented-circular-menu-using-divi-blurbs-5 How to Create a Segmented Circular Menu Using Divi Blurbs

Next, we need to position the blurb using some custom CSS. Go to the advanced tab and add the following custom CSS to the Main Element:

position:absolute !important; left: 50%; top: 50%; 

how-to-create-a-segmented-circular-menu-using-divi-blurbs-6 How to Create a Segmented Circular Menu Using Divi Blurbs
Now go back to the design tab and update the size and spacing of the blurb as follows:

  • Width: 15em
  • Height: 15em
  • Margin: -15em Left

This puts the blurb’s bottom right corner directly in the center of the circle.

how-to-create-a-segmented-circular-menu-using-divi-blurbs-7 How to Create a Segmented Circular Menu Using Divi Blurbs

Creating the Segment Using Transform Options

In order to turn the blurb into a segment of a circle, we are going to skew and rotate the blurb. To do this, update the following transform options:

  • Transform Skew X Axis: 60deg

how-to-create-a-segmented-circular-menu-using-divi-blurbs-8 How to Create a Segmented Circular Menu Using Divi Blurbs

  • Transform Origin: 100% 100% (bottom right)

Since our blurb’s bottom right corner is directly in the center of the circle, we want the transform origin also set to the bottom right. This will make sure the tip of the skewed blurb is at the center of the circle, making the segment.

how-to-create-a-segmented-circular-menu-using-divi-blurbs-9 How to Create a Segmented Circular Menu Using Divi Blurbs

Unskewing the Blurb Content

Really all we want to skew is the shape of the blurb to create the segment shape, not the content inside (ie. the icon and the text). But since this isn’t possible, all we need to do is add a transform property the blurb content that reverses the skew effect so that it appears normal. To do this, go to the advanced tab and add the following custom CSS:

Blurb Content CSS:

 transform: skew(-60deg) rotate(-75deg); position: absolute; height: 27em; width: 27em; bottom: -13.5em; right: -13.5em; 

Then reduce the margin between the icon and the title text by adding the following CSS for the Blurb Image:

Blurb Image CSS

margin-bottom: 15px; 

how-to-create-a-segmented-circular-menu-using-divi-blurbs-10 How to Create a Segmented Circular Menu Using Divi Blurbs

And now, because the blurb content space is extending beyond the blurb (even though you can’t see it), we need to hide the overflow as follows:

  • Horizontal Overflow: hidden
  • Vertical Overflow: hidden

If we don’t add this, we will have unwanted hover space.

how-to-create-a-segmented-circular-menu-using-divi-blurbs-11 How to Create a Segmented Circular Menu Using Divi Blurbs

Creating the Rest of the Blurbs

To create the rest of the blurbs, deploy the wireframe view mode and duplicate the existing blurb 5 times so that you have a total of 6 identical blurbs.

how-to-create-a-segmented-circular-menu-using-divi-blurbs-12 How to Create a Segmented Circular Menu Using Divi Blurbs

Rotate Blurb #2

Then open the settings for blurb #2 and rotate the module as follows:

  • Transform Rotate Z axis: 30deg

how-to-create-a-segmented-circular-menu-using-divi-blurbs-13 How to Create a Segmented Circular Menu Using Divi Blurbs

This will rotate blurb #2 clockwise from the center point of the circle.

how-to-create-a-segmented-circular-menu-using-divi-blurbs-14 How to Create a Segmented Circular Menu Using Divi Blurbs

Then we can continue to rotate the rest of the blurbs in 30 degree increments to create a half circle of segments.

Rotate Blurb #3

Open the settings for blurb #3 and update the following:

  • Transform Rotate Z axis: 60deg

how-to-create-a-segmented-circular-menu-using-divi-blurbs-15 How to Create a Segmented Circular Menu Using Divi Blurbs

Rotate Blurb #4

Open the settings for blurb #4 and update the following:

  • Transform Rotate Z axis: 90deg

how-to-create-a-segmented-circular-menu-using-divi-blurbs-16 How to Create a Segmented Circular Menu Using Divi Blurbs

Rotate Blurb #5

Open the settings for blurb #5 and update the following:

  • Transform Rotate Z axis: 120deg

how-to-create-a-segmented-circular-menu-using-divi-blurbs-17 How to Create a Segmented Circular Menu Using Divi Blurbs

Rotate Blurb #6

Open the settings for blurb #6 and update the following:

  • Transform Rotate Z axis: 150deg

how-to-create-a-segmented-circular-menu-using-divi-blurbs-18 How to Create a Segmented Circular Menu Using Divi Blurbs

Here is the result so far.

how-to-create-a-segmented-circular-menu-using-divi-blurbs-3 How to Create a Segmented Circular Menu Using Divi Blurbs

Creating the Menu Button

To create the menu button, we are going to shrink the size of an entire section and then use a blurb icon for the button design.

To do this, first add a new regular section under the current section.

how-to-create-a-segmented-circular-menu-using-divi-blurbs-19 How to Create a Segmented Circular Menu Using Divi Blurbs

Then add a one-column row to the section.

how-to-create-a-segmented-circular-menu-using-divi-blurbs-20 How to Create a Segmented Circular Menu Using Divi Blurbs

Creating the Blurb Icon for the button

Then add a blurb module to the row.

how-to-create-a-segmented-circular-menu-using-divi-blurbs-21 How to Create a Segmented Circular Menu Using Divi Blurbs

Delete the default title and body content and use an icon as follows:

  • Use Icon: YES
  • Icon: Plus symbol (see screenshot)

how-to-create-a-segmented-circular-menu-using-divi-blurbs-22 How to Create a Segmented Circular Menu Using Divi Blurbs

Continue to update the settings as follows:

  • Icon Color: #222222
  • Use Icon Font Size: YES
  • Icon Font Size: 50px
  • Image/Icon Animation: No Animation

Then add the following custom CSS to the Main Element to get rid of the default margin under the icon.

Main Element CSS

margin-bottom: 0px; 

how-to-create-a-segmented-circular-menu-using-divi-blurbs-23 How to Create a Segmented Circular Menu Using Divi Blurbs

Row Padding

Next, take out the default padding of the row.

  • Padding: 0px top, 0px bottom

how-to-create-a-segmented-circular-menu-using-divi-blurbs-24 How to Create a Segmented Circular Menu Using Divi Blurbs

Section Settings

To finish the button, we are going to shape our section into a circle.

Open the section settings and update the following:

  • Width: 100px
  • Height: 100px
  • Padding: 0px top, 0px bottom
  • Rounded Corners: 50%
  • Box Shadow: see screenshot

how-to-create-a-segmented-circular-menu-using-divi-blurbs-25 How to Create a Segmented Circular Menu Using Divi Blurbs

Then give it a white background.

  • Background Color: #ffffff

how-to-create-a-segmented-circular-menu-using-divi-blurbs-26 How to Create a Segmented Circular Menu Using Divi Blurbs

Under the advanced tab, add the following custom CSS to the Main Element to position the button as fixed at the bottom of the window.

position: fixed !important; bottom: -50px; left: 50%; margin-left: -50px; 

how-to-create-a-segmented-circular-menu-using-divi-blurbs-27 How to Create a Segmented Circular Menu Using Divi Blurbs

We also need to add a CSS Class that can be targeting with our jQuery. Add the following:

  • CSS Class: transform_target

how-to-create-a-segmented-circular-menu-using-divi-blurbs-28 How to Create a Segmented Circular Menu Using Divi Blurbs

Then update the Z Index so that the button stays above the rest of the content on the page.

  • Z Index: 12

how-to-create-a-segmented-circular-menu-using-divi-blurbs-29 How to Create a Segmented Circular Menu Using Divi Blurbs

Positioning the Circular Menu Row

Now that the menu button is in place, we need to position the row containing our segmented circular menu so that it is also fixed and centered at the bottom of the page with only the top half of the circle visible.

To do this open the row settings for the row containing the menu blurbs and add the following Custom CSS:

Main Element CSS

position: fixed !important; bottom: -10em; left: 50%; margin-left: -15em; margin-bottom: -5em; 

The update the z index as follows:

  • Z Index: 11

how-to-create-a-segmented-circular-menu-using-divi-blurbs-30 How to Create a Segmented Circular Menu Using Divi Blurbs

Next add the following CSS Class.

  • CSS Class: has-transform

how-to-create-a-segmented-circular-menu-using-divi-blurbs-31 How to Create a Segmented Circular Menu Using Divi Blurbs

Finally, we need to completely scale down (or shrink) the circular menu using transform scale. This will allow us to toggle the effect on and off with jQuery which will expand and collapse the menu on click.

Update the following:

  • Transform Scale: 1%

how-to-create-a-segmented-circular-menu-using-divi-blurbs-32 How to Create a Segmented Circular Menu Using Divi Blurbs

With our segmented circular menu and menu button in place, all that is left to do is add the custom CSS and jQuery to complete the functionality of the button.

Adding the External Custom CSS to Page Settings

Open the page settings from the menu at the bottom of the visual builder and add the following Custom CSS under the advanced tab:

 .has-transform, .transform_target .et-pb-icon, .toggle-transform-animation { transition: all 400ms ease-in-out; } .has-transform, .toggle-transform-animation { font-size:14px; } .toggle-transform-animation { transform: none !important; } .transform_target { cursor: pointer; } .toggle-active-target .et_pb_blurb .et-pb-icon { transform: rotateZ(45deg); } @media all and (max-width: 980px) { .has-transform { -webkit-mask-image: -webkit-radial-gradient(white, black); } .has-transform, .toggle-transform-animation { font-size:10px; } } 

how-to-create-a-segmented-circular-menu-using-divi-blurbs-33 How to Create a Segmented Circular Menu Using Divi Blurbs

Adding the jQuery with a Code Module

Next, deploy the wireframe view mode and add a code module under the menu button blurb.

how-to-create-a-segmented-circular-menu-using-divi-blurbs-34 How to Create a Segmented Circular Menu Using Divi Blurbs

Then add the following code to the module.

 (function($) { $(document).ready(function(){ $('.transform_target').click(function(){ $(this).toggleClass('toggle-active-target'); $('.has-transform').toggleClass('toggle-transform-animation'); }); }); })( jQuery );  

how-to-create-a-segmented-circular-menu-using-divi-blurbs-35 How to Create a Segmented Circular Menu Using Divi Blurbs

Final Result

Now let’s view the final result on a live page.

how-to-create-a-segmented-circular-menu-using-divi-blurbs How to Create a Segmented Circular Menu Using Divi Blurbs

The menu will work well with your current page or with any of our premade layouts which you can add by clicking the plus icon from the settings menu.

how-to-create-a-segmented-circular-menu-using-divi-blurbs-36 How to Create a Segmented Circular Menu Using Divi Blurbs

Here is what it looks on our psychologist landing page layout.

how-to-create-a-segmented-circular-menu-using-divi-blurbs-1 How to Create a Segmented Circular Menu Using Divi Blurbs

And here it is on mobile.

how-to-create-a-segmented-circular-menu-using-divi-blurbs-2 How to Create a Segmented Circular Menu Using Divi Blurbs

Adjusting the Size of the Circular Menu

The segmented circular menu is built using em length units which are relative to the size of the parent body font. This makes it easy to increase and decrease the size of the menu. To change the size of the font, simply change the font-size property for the has-transforrm class that targets the row in the custom CSS we added to page settings.

how-to-create-a-segmented-circular-menu-using-divi-blurbs-4 How to Create a Segmented Circular Menu Using Divi Blurbs

Final Thoughts

In this tutorial, we covered how to create a segmented circular menu in Divi by getting creative with Divi’s transform options. We also used some custom CSS for things like fixed positioning and “un”skewing the blurb content for the menu items. The jQuery allows us to turn the transform scale property on and off to create the expanding and collapsing effect of the menu when clicking the menu button.

Overall, I think you will find a lot of inspiration from this post. Feel free to expand on this concept to create more designs. For example, you could continue to add blurbs and rotate them in 30 degree increments to create an entire circle with segmented menu links.

how-to-create-a-segmented-circular-menu-using-divi-blurbs-37 How to Create a Segmented Circular Menu Using Divi Blurbs

Or you could even create an interactive pie chart!

Here is a circular icon menu you may like as well.

I look forward to hearing from you in the comments.

Cheers!


Source

SEO News and More

SEO News and More

Subscribe ToThe Weekly SEO Trade News Updates

Get the latest SEO, SEM and SMM marketing intel, tips and tricks from one of the best SEO Gurus online. 

Every Tuesday morning we send out an aggregated email listing all new posts on SEO Trade News.

Excellent! Now check your email to confirm your subscription.

Share This