segmented circular menu divi

Segmented circular menu divi: It’s always fun to be creative with Divi’s transformation options. They allow you to create amazing “off the beaten track” designs. And in this tutorial, we’re going to turn Divi texts into a beautiful segmented circular menu divi that grows and collapses on click. The trick to creating a Segmented circular menu divi (like a pie chart) is to use the tilt of the transformation in a pretty unique way.

segmented circular menu divi

Segmented circular menu divi: Creating the row for the menu items

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

Styling the Row

Before we add a module, let’s call the line to get our circular shape and background color. Open the row settings and update the following:

  • Background color: # 8857f2
  • Use a custom gutter width: YES
  • Gutter width: 1
  • Width: 30em
  • Height: 30em
  • Padding: 0px top, 0px bottom

Then add the rounded corners and the shadow of the box.

Rounded corners: 50%
Box Shadow: see screenshot

We’ll be back to add a few more customizations to the line, but for now, we can start adding our blurb notes.

Create blurbs for the menu

Add new blurb text to the row of a column inside the circular row.

Styling Blurb # 1

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

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

Then update the design parameters as follows:

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

Then update the title text style as follows:

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

Next, we need to position the reference text using custom CSS. Go to the Advanced tab and add the following custom CSS code to the main element:

Now go back to the Design tab and update the blurb size and spacing as follows:

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

This places the lower right corner of the blurb directly in the center of the circle.

Creating the segment using the transformation options

To turn the presentation text into a segment of a circle, we are going to tilt and rotate the presentation document. To do this, update the following transformation options:

  • Transform tilt X-axis: 60deg
  • Origin of processing: 100% 100% (bottom right)

Since the lower right corner of our blurb is directly in the center of the circle, we want the origin of the transformation to be set at the lower right as well. This will ensure that the tip of the angled blurb is in the center of the circle, making it the segment.

Unblock content

In reality, all we want to tilt is the shape of the blurb to create the shape of the segment, not the internal content (ie the icon and the text). But since this is not possible, just add a transform property to the blurb content that reverses the bias effect so that it appears as normal. To do this, go to the Advanced tab and add the following custom CSS:

Blurb CSS content:

Then reduce the margin between the icon and the title by adding the following CSS code for the Blurb image:

Blurb Image CSS

And now, because the blurb content space extends 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 that, we’ll have some unwanted hover space.

Create the rest of the world

To create the rest of the blurb, deploy wireframe view and duplicate the existing blurb 5 times for a total of 6 identical blurb layouts.

Rotation Blurb # 2

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

  • Transform Rotation Z-axis: 30deg

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

Then we can continue to rotate the rest of the blurb in 30-degree increments to create a semicircle of segments.

Rotate blurb # 3

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

  • Transform Rotation Z-axis: 60deg

Rotation Blurb # 4

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

  • Transform Rotation Z-axis: 90deg

Rotate blurb # 5

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

  • Transform Z-axis rotation: 120deg

Rotate blurb # 6

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

  • Transform Rotation Z-axis: 150deg

Creating the menu button

To create the menu button, we’re going to reduce the size of an entire section and then use a presentation icon for the button design.

To do this, start by adding a new regular section under the current section.

Creating the Blurb icon for the button

Then add a blurb module to the line.

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

  • Use the icon: YES
  • Icon: plus symbol (see screenshot)

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 code to the main element to remove the default margin below the icon.

Main CSS element

Row padding

Then remove the default fill from the row.

  • Padding: 0px top, 0px bottom

Section Parameters

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

Open section settings and update the following:

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

Then give it a white background.

  • Background color: #ffffff

On the Advanced tab, add the following custom CSS code to the main element to position the button as fixed at the bottom of the window.

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

  • CSS class: transform_target

Then update the Z index (still on the same window) so that the button stays above the rest of the page content.

  • Z index: 12

Positioning of the circular menu-line

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 settings of the line containing the menu layout and add the following custom CSS:

Main CSS element

Update the z index as follows:

  • Z index: 11

Then add the following CSS class.

  • CSS class: has-transform

Finally, we need to completely collapse (or collapse) the circular menu using the 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:

  • Transformation scale: 1%

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

Adding External Custom CSS to Page Settings

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

Adding jQuery with a code module

Then deploy wireframe display mode and add a code module under the menu button.

Then add the following code to the module.

The menu will work well with your current page or with one of our pre-built layouts which you can add by clicking the plus icon in the settings menu.

Read more: How to merge images to create a custom background design in Divi

Adjusting the size of the circular menu

The segmented circular menu is constructed using em length units which are relative to the font size of the parent body. This makes it easier to increase and decrease the size of the menu. To change the font size, you just need to change the font-size property of the pour-transform class that targets the line in the custom CSS that we’ve added to the page settings.

Final thoughts

In this tutorial, we have explained how to create a segmented circular menu in Divi by being creative with Divi’s transformation options. We also used custom CSS for tasks like fixed positioning and slanting blurb content for menu items.

JQuery allows us to toggle the transform scale property on and off to create the effect of expanding and collapsing the menu when you click the menu button.

 

For website maintenance service contact us.

Leave a comment

echo "";