![]() ![]() There is no body text, but this will come in handy later whenever we use the em length unit (which is relative to the parent body text size) to space out our menu items/blurbs using transform translate. In addition to styling the circular icon, we also added a body text size. Next, we are going to update the design settings as follows: Then add an icon to the blurb as follows. Then update the blurb content by taking out the title and body text. This will be the first of 5 total blurbs we will add to make up our circular icon menu. Creating the Menu Icons with Blurb Modules Blurb #1Īfter the row padding is in place, add a blurb module to the column. This is simply to provide some space for the circular menu items to pop out on click. Then open the row settings and add the following padding: Once the Divi Builder is enabled to edit the page on the front end, add a one column row to the default regular section. Create a new page in WordPress and enable the Divi Builder to edit the page on the front end (visual builder).įor this tutorial, we will be using Divi’s built-in icons from the blurb module, so no need for any external assets.Īfter that, you will have a blank canvas to start designing in Divi.If you haven’t yet, install and activate the Divi Theme installed (or the Divi Builder Plugin if not using the Divi Theme).To get started, you will need to do the following: Let’s get to the tutorial shall we? What You Need to Get Started To import the layout to your page, simply extract the zip file and drag the json file into the Divi Builder. Please check your email address to confirm your subscription and get access to free weekly Divi layout packs! You will not be “resubscribed” or receive extra emails. 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. ![]() To gain access to the download you will need to subscribe to our newsletter by using the form below. To lay your hands on the design from this tutorial, you will first need to download it using the button below. Here is a quick peek at the circular icon menu we will build.ĭownload the Circle Icon Menu Layout for FREE
0 Comments
Leave a Reply. |