Stacking the Blurbs in the Same Absolute Position The next three blurbs can be creating by duplicating blurb #2 and updating the icon for each. Transform Scale: 70% Creating Blurbs #3, #4, and #5 Then open the settings for the new blurb (blurb #2) and change the icon and set the Z Index back to the default (0).Īfter that, let’s shrink the icon using transform scale as follows: To create the second blurb, simply duplicate blurb #1. Then set the Z Index for this module to 1 so that it will sit above the others that will eventually sit behind it.Īnd finally, take out the default bottom margin under the icon by adding the following custom CSS to the Blurb Image. More on this later.Īfter that, take out the default image/icon animation. 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 8 How to Adjust the Menu Size and Spacing with Ease.6.11 Making the Menu Button Sticky (or fixed).6.9 Adding the External CSS and JavaScript with a Code Module.6.8 Adding custom CSS Classes to the Blurbs.6.3 Positioning the Menu Icons Using Transform Translate.6.2 Stacking the Blurbs in the Same Absolute Position.6.1 Creating the Menu Icons with Blurb Modules.2 Download the Circle Icon Menu Layout for FREE.The Google+ appĪccording to the icon is called "more vert". Google+ for desktop seems to use this as a menu for communities. Horizontal Ellipsis … … … …Īpple uses the horizontal ellipsis and calls it theĪccording to the icon is called "more horiz". It would also be nice to know what to tell novice users to press. It would be nice if developers could consistently use a particular icon for menus. What is the official name of these buttons/icons? Hamburger menu button and now the 3 vertical dots button or vertical ellipsis. Google and some other developers have introduced us to what some have called the It is not currently accepting new answers or interactions. This question and its answers are locked because the question is off-topic but has historical significance.
0 Comments
Leave a Reply. |