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 transform Divi texts into a beautiful segmented circular menu that grows and collapses on click. The trick to creating segmented areas (like a pie chart) is to use the tilt of the transformation in a pretty unique way.
Preview
Here is an overview of the segmented circular menu that we will build in this tutorial.
What you need to get started
To begin, you will need to do the following:
- If you haven't already, install and activate the Divi theme installed (or the plugin Divi Builder if you are not using the Divi theme).
- Create a new page in WordPress and use Divi Builder to modify the page on the front-end (visual builder).
After that you will have a blank canvas to start designing in Divi.
Creating the line for 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
- Upholstery: 0px at the top, 0px at the bottom
Then add the rounded corners and the shadow of the box.
Rounded corners: 50%
Box Shadow: see screenshot
We will come back to add some extra customizations to the line, but for now, we can start adding our introductory notes.
Create blurbs for the menu
Add new blurb text to the row of a column inside the circular row.
Blurb styling # 1
Update the contents of the first blurb to include a title and an 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)
- Alignment of the text: center
Then update the text style of the title 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:
position: absolute! important; left: 50%; top: 50%;
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 presentation text directly in the center of the circle.
Creating the segment using the transformation options
In order to turn the blurb into a circle segment, we're going to tilt and rotate the blurb. To do this, update the following transformation options:
- Transform X axis tilt: 60deg
- Origin of transformation: 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.
Unlock content
In reality, all we want to tilt is the shape of the blurb to create the shape of the segment, not the contents internal (i.e. the icon and text). But since this is not possible, we just need to add a transformation property to the contents blurb which reverses the bias effect so that it appears normal. To do this, go to the Advanced tab and add the following custom CSS:
CSS Blurb Content:
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 by adding the following CSS code for the Blurb image:
Blurb Image CSS
margin-bottom: 15px;
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 do not add this, we will have an unwanted flyover space.
Create the rest of the world
To create the rest of the blurb, deploy wireframe display mode and duplicate the existing blurb 5 times for a total of 6 identical blurb layouts.
Blurb rotation # 2
Then open the Blurb # 2 settings and rotate the module as follows:
- Transform Z axis rotation: 30deg
This will rotate Text # 2 clockwise from the center point of the circle.
Then we can continue to rotate the rest of the presentation text in increments of 30 degrees to create a semicircle of segments.
Rotate the blurb # 3
Open Blurb # 3 settings and update the following:
- Transform Z axis rotation: 60deg
Blurb rotation # 4
Open Blurb # 4 settings and update the following:
- Transform Z axis rotation: 90deg
Rotate the blurb # 5
Open Blurb # 5 settings and update the following:
- Transform Z axis rotation: 120deg
Rotate the blurb # 6
Open Blurb # 6 settings and update the following:
- Transform Z axis rotation: 150deg
Here is the result so far.
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.
Then add a row of one column to the section.
Creating the Blurb icon for the button
Then add a blurb module to the line.
Delete the default content of the title and body and use an icon as follows:
- Use the icon: YES
- Icon: plus symbol (see screenshot)
Continue updating 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.
CSS main element
margin-bottom: 0px;
Row padding
Then, remove the default fill from the line.
- Upholstery: 0px at the top, 0px at the bottom
Section settings
To complete the button, we will shape our section into a circle.
Open the section settings and update the following items:
- Width: 100px
- Height: 100px
- Upholstery: 0px at the top, 0px at the bottom
- Rounded corners: 50%
- Box Shadow: see screenshot
Then give him 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.
position: fixed! important; bottom: -50px; left: 50%; margin-left: -50px;
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 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 parameters of the line containing the menu layout and add the following custom CSS:
CSS main element
position: fixed! important; bottom: -10em; left: 25%; margin-left: -15em; margin-bottom: -5em;
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 activate and deactivate the effect with jQuery, which will expand and collapse the menu on click.
Update the following items:
- Scale of transformation: 1%
With our segmented circular menu and menu button in place, all you have to do is add the custom CSS and jQuery to complete the button functionality.
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:
.for-transform, .transform_menu .and-pb-icon, .toggle-transform-animation {transition: all 400ms ease-in-out; } .for-transform, .toggle-transform-animation {font-size: 14px; } .toggle-transform-animation {transform: none! important; } .transform_target {cursor: pointer; } .toggle-active-target .and_pb_blurb .et-pb-icon {transform: rotateZ (45deg); } @media all and (max-width: 980px) {.to-transform {-webkit-mask-image: -webkit-radial-gradient (white, black); } .for-transform, .toggle-transform-animation {font-size: 10px; }}
Adding jQuery with a code module
Next, deploy wireframe display mode and add a code module under the menu menu button.
Then add the following code to the module.
(function($) {
$(document).ready(function(){
$('.transform_menu').click(function(){
$(this).toggleClass('toggle-active-target');
$('.pour-transformer').toggleClass('toggle-transform-animation');
});
});
})( jQuery );
Final result
Now let's see the final result on a live page.
The menu will work well with your current page or one of our predefined layouts that you can add by clicking the More icon in the settings menu.
Setting 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, all you need to do is 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.
Latest 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 turn on and off the transformation scale property to create the expand and collapse effect of the menu when you click the menu button.
Overall, I think you will find a lot of inspiration in this tutorial.
