How to Create an A-Z Index of Content with Tooltips for your Website with Divi

hey Debbie nation welcome to another brand-new Debbie use-case live stream hello everyone for this use case tutorial I'm going to be showing you how to create an A through Z index of content for your website and I'm gonna be using the Divi doctor's office layout pack and I'll be using Debbie's tabs module to build the index and add some custom design to match the doctor's office layout a bit and if you're looking to add some tool tips to your website I'm gonna be introducing an extremely easy to use plug-in called simple tooltips so look forward to that and you can access the doctor's office layout pack for free directly from within the Divi Builder and check out the video description below for a link to the blog post that goes along with this use case and also a link to the simple tooltips plug-in I'll be using and if you don't have a copy of Divi yet make sure you grab that I've included a link to the product page as well so without wasting any more time let's go ahead and jump in and get to it the first thing that you're going to be needing to do let me hide that is jump over and make sure you have your Divi theme and let's go ahead and make sure you have that and also you're going to need to have the tooltips plug-in which is right here it's accessible for free from the WordPress repository and you're going to need the doctor's office layout pack the landing page there we're actually going to be using the home page layout but more on that in a bit and once you have all those three things that's really all we're going to need to get started just to give you a little preview this is the tool this is the actual index we're going to be building as you can see I'm using the tabs module here and as I click through you can see organized I've assigned an alphabet to each of the tabs that way you can organize for this use case a list of medical conditions by just speed up the process by looking at all the you know the conditions that start with the letter A all the conditions that started to letter B and so on and to kind of add additional functionality sometimes you need to showcase a tooltip every once in a while this is a good time to do that as you can see if I hover over this link here a tooltip pops up and I'll show you how to add that as well so that's where we're going and while I'm before I really jump in to it and get started and we want to welcome everyone go ahead and let us know where you are where you're from I see we already are up and running in the comments we have I someone from Spain here we have from Indonesia hi Benny and someone from Arizona Sharma welcome and from Boston Christina hello from Switzerland Iran hello and Kaos G hello to you welcome everyone feel free to post any questions comments we are going to be diving into Dibby today and hopefully we can all learn something let's go ahead and look over at Facebook here all right Jean Christopher Chris Christophe scuse me Bonjour Jared welcome in from Berlin Bianca and from the UK we have Michael hello from Rome all right I love Rome Marco nice to see you here alright let's go ahead and get started so the first thing we're actually going to do is make sure I didn't get to my I'm gonna actually create a new page so you can actually feature this a through see A through Z excuse me index on any part of your page but for this use case I'm actually just going to add a new page for simplicity so to do that go ahead and go to your wordpress dashboard navigate to pages add new and let's get started I'll just call this page index and I'm just going to deploy the visual builder awesome alright so once that's loaded up we're gonna go ahead and grab our layout by clicking the Settings menu down here clicking Add from library icon and all of our wonderful pre-made layouts are there for us I'm going to scroll down find the doctor's office layout click on it and then I'm going to use the home page for this one and just click use this layout alright let's see I want to make sure I got the right one I may have gotten ahead of myself yeah that looks right okay so this is the section we're going to want to use here so actually going to delete this default section up here at the top and I'm going to delete this services section here it's always a good idea to kind of survey your layout to make sure you don't have any elements on the page that you want to you know copy the design and paste it elsewhere so in general I kind of leave everything up there just in case I need it but since I already know I don't need these elements I'm going to delete those simply all these sections so I'm actually going to delete this bottom section you can leave that as well if you want to but so for now I just have the main header section and this your health starts here section alright so I'm going to actually use this section here to you know put my index in so to do that I'm going to edit this column layout here this row excuse me and I'm going to change it to a 2/3 1/3 layout and so I want my AZ index over here on the left and the larger column here so all I'm gonna do is first I'm just going to delete this icon I'm not gonna use that then I'm gonna start dragging this stuff over or I could just copy and paste it over either way using my short key there all right so once I have all those elements over to my right side actually going to left align this text so I'll click online settings for that text module there and then go to my design tab scroll down and I believe it's under my h2 here and see nope that was wrong by my text orientation there it is it's under a heading 2 excuse me text alignment so I'm gonna make that left save my changes go to this text module right underneath change that one to text orientation left actually I can copy I can right click and copy text orientation and paste it as well so it's one of the new features that we've added recently so kind of speeds up the process of having to click in each one of these and find it separately and you can also of course use the search option for like alignment and you can find it really easily that way all right so let's go ahead and save that out and we haven't gotten to our index yet I'm just cleaning up this right side because it it really is once once you have a working index for you know your customers or visitors to scroll through it's a really good idea to have a nice call to action or a forum once they find what they're looking forward to reach out about it so I thought it was a good idea to keep the forum here for that reason so I'm going to edit this forum and one of the things you can do is change the the width of these fields to be full width and right now the name field and the phone number and the email and choose a doctor or art full width but since it's in a small column on the right I want to go ahead and make those full width so I'm going to copy make full width and I actually haven't tried that go to my design tab make full width you can see over here it's changing it to a full width I'm gonna just do a couple more my email address make full width say that and lastly I'm doctor field here make that full width alright alright so that way if you're on a smaller window or whatever you can have a nice size field so it's not smushed together alright so that looks good let's go ahead and get started on our AZ index actually I'm gonna do one thing really quickly because I'm gonna add a title to this page since this is going to be my page I'm gonna get rid of this header but you can leave it if you like so I'm gonna actually copy this and paste it and then I'm going to jump into the settings here and as you can see it's an h1 so that should be my main header so be careful when you're copying over H ones you don't want to have too many of those or actually more than one for SEO purposes so I'm actually going to change my text color to white actually I can just change it to light that's going to scroll down there you go my change my text color to light there we go and I can go in and change my content to read something that makes a little bit more sense like search conditions or search medical conditions or something like that all right now let's go ahead and add a another text module right underneath here that's going to say add my text module and then my content I just wanted to say a through Z index so they know what this is and I don't like that styling so I'm gonna actually copy the style of this text module over here in the right column right click on it and then copy module styles then I'm going to paste that over here alright so that added the font that I want made it white to match that as well one thing I might want to do is increase the size of that text a little bit alright save that out all right so now we're gonna add our tabs module all right so to do that I'm going to go ahead and right underneath in here click to add a new module and search for my tabs module there it is click on it all right so uh before I continue I just want to make sure that everyone knows to reach out with any comments that they have and if you are just joining us I do want to welcome you this is this week's divvy use case livestream and today I'm going to be showing you how to create an A through Z index of content with tool tips for Divis doctor doctor's office layout pack and you can access the doctor's office layout pack for free directly from within the Divi Builder and you can check out the video description for a link to the blog post that goes along with this use case and alone and also you can find a link to the tooltip plug-in I'll be using and if you don't have a copy of Divi yet I have included a link to the Divi product page as well so let's get back to it now that I have my tabs module ready to go I'm ready to start adding my new tabs but before I do that I want to change the design of these tabs so to do that I'm going to go over to my design tab and if you're familiar with the tabs module you can you know customize the active tab and the inactive tab things like that so right now my active tab is set to its default my active tab background color I should say but I'm going to change that to that blue that matches the layout really well and then I'm gonna change the inactive background to kind of a it's kind of a gray with a transparency to it which will look nice once it's all done and then for the tab text color I'm just gonna right here I'm just going to change that to white and for my body font let's go ahead and get my search for my body font there I'm going to change it to Mont Sarat and come down and give it a border so give my border width so I'm sorry I'm gonna take away the border and I'm gonna give it a border width of zero it's an easy way to do that and we're not quite done because just gonna give a little bit of extra styling to this using the Advanced tab so let's actually go over to the Advanced tab and if you used the Advanced tab you know that a lot of the modules have all these different elements you can target with some custom CSS and the tabs module has quite a few so the first one I want to target would be the tabs controls and that's up here this top section of the tab and I'm simply going to get rid of the background so I'm just gonna do background none and I just erased that grey background they're really easy also I'm going to add some custom CSS to the tab input box and this is going to just the tap input boxes the actual tab itself so I'm sorry this one here the tap input box so if I put in my custom CSS I've added a slight border to each one of my tabs that is white to pixels and a border radius of 15 pixels which gives us our nice round pill like design for my tabs which is nice for a medical or a doctor's office website I thought and then the little bit of margin in between each one of those which I've set here using the e/m length value there and then I floated it left and the reason why I floated it left was if you notice on the if you used the tabs module on mobile when you when you scale down to a mobile tablet or a smartphone you'll notice that it kind of goes to a block almost like a full with tabs as you instead of it being kind of left aligned and you'll you'll see what I mean later on but that's simply for mobile reasons that I added the float:left I thought that was simple to do as opposed to going and targeting it in the media queries or whatever so all right okay so now I'm ready to go over back to my content tab and start adding my individual tabs so let me check out the comments real quick looks like we are everybody's getting acquainted all right so I have a question from Avinash can we check in entries of divvy contact forms in dashboard like gravity form entries I don't think so by default no I don't think it has that capability but good question we have a question from Nikhil I think is how you pronounce that how indexing how is indexed content may be helpful if you're asking how this might be helpful it is in general it is helpful to avoid or to actually create a better user experience by avoiding the need to scroll through a whole lot of content like for instance if you have a whole bunch of medical conditions that you've listed and you don't want them to have to search through them there are obviously more or other ways of doing an A through Z index using separate pages for each using a custom menu for each one of the letters and redirect to a page with all of those conditions that you know coordinate or coincide with the letter that it starts with so this is just I thought a very simple way to do it keeps everything in one page it allows the user to scroll through without being redirected but great question and I think this a through Z index would be helpful for blogs as well if you have a need to organize your your blog content using a through Z index you can do that as well alright good question let's go ahead and start our adding our individual tabs so I'm gonna actually go back here and delete this one and then edit this first one here and I'm gonna add the letter A so it's gonna be my first tab there and for my content I'm just gonna put in some mock content for now but this is where you would enter in all of the conditions that start with the letter A like abdominal pain and all the other stuff that I'm just gonna put some mock content but as an example here and also you'll see I've added a the reason why over here you see the the visual builder thinking right now is because I've had in a shortcode in those two locations and this shortcode is actually the simple tooltip shortcode so I went ahead and added it now and in the blog post you can see the code that the specific code that I did add but in general this is a simple tooltip shortcode that wraps around whatever you want to be the text that when you hover over it will show the tooltip and right now I'm just adding one to the to a couple of spots there for an example and we'll get to the tooltip in a moment once we get all of this set up so so as you can see here's my list of content all starting with a you might want to add a link to if you have a separate page or another website you want to link to you can you know add those links there just like you would add any links using the WYSIWYG editor as well alright I think we've got that working correctly all right now the next one I'm going to save this one out and we needed to duplicate this so the easy way to do this I thought was once you have your you know your first tab set up you can go ahead and start duplicating it and you can probably guess how many tabs we need according to the how many letters in the alphabet I actually thought it would be a cool idea for you to go ahead and sing the alphabet as you duplicate these yeah not really okay so a b c d and so on so if you are hope if you were wondering looking for me to sing I apologize I'm not going to do it not on a live stream anyway alright so I think I have enough what is that five maybe a couple more all right and then actually once you're done with that a little shortcut trick that I want to show you instead of going in here and clicking and editing each one you can actually just use the inline editor here to go ahead and change each one so it's a little tip there to make speed up the process and so on so once you have all your letters and you can actually one idea would be let's say you don't have a condition for each one of these letters like you don't have a condition for X or whatever you can actually go in and change that to be a different color to show to use to show the user that that one doesn't really have any so that's another tip you might want to do down the road and I'm not gonna go and add all the letters but you get the point this would be each letter of the alphabet and then you would update the content under each one of these tabs to reflect the corresponding letter so I hope that makes sense and now that that's done we can go ahead and you know I want to show you the the tooltip plug-in and the way that it works is I'll just go over here to the to my blog post here and I'm going to scroll down to the section that covers the tooltip so you can see what I mean and this is the basic structure of the tooltip let me enlarge my screen there you go so this is the basic structure of the tooltip as you can see the it has a spot for this is the content of the tooltip bubble this is where you would enter your content so if I go and save my page out here and hover over this would be the content that you would see in the tooltip that's where you would add it on in the shortcode and you can actually add HTML inside of here like if you wanted to add a ate tag or for a link and that's what I did for this one here as you can see when I hover over there's actually a read more link you can add inside that shortcode content and this is the trigger elements or trigger text there it triggers the tooltip so just wrap that that shortcode around it and make sure you include this ending tag there and that's about it and it's a really easy way to add those tooltips to your content let me go ahead and shrink down my screen there all right so see if we have any questions in the comments all right I pronounced nickles name correctly awesome I have not been known to do that so that's good news we have a question from Carol it is oh wait no this might be is it a question yes it's impossible to have ABC in the column and text on the right side that let me think about that for a moment you probably could this would involve some custom you know CSS to basically change the structure of or tab tabs module here from being from having the tabs on the top to being kind of like a vertical tab so you'd switch all of these over to the left side and maybe create some spacing if you probably couldn't divide each one into a separate column but you could I mean theoretically changed the the way the structure of this so that the this white section would be right aligned and all the tabs would be on the left but again this would be completely custom CSS that I can't really go into at the moment but good question all right okay so let's go back to our our page here so any questions on the tooltip or anything like that so far I know I kind of breezed through that but if you let me just go ahead and show you this one again and this code underneath the a tab or all the tab this code here this let me go ahead and go back to my blog posts to show you the actual code used you can see the the tooltip so here's my tooltip for the first abdominal pain list condition here I just wrapped this text with the shortcode and well here's my beginning here and yet as you can see I've added an a tag for a link inside of my my little parentheses spot for my content from my tooltip so that's the basic structure and you can add as many as you want throughout the content and that's that's how that look it looks here's the ending of the tooltip there alright question can you edit the look of the tooltip alright good question because that's what I need to get into next so once you have the tooltip plug-in installed let's go ahead and go to our WordPress dashboard thanks for reminding me to do this it does have some customization options go to the settings and then under settings go to tool tips excuse me simple tool tips and so it has a default background color which I have left to black and a text color which I have left to white but you can change those very easily and also change the max width of the tooltip I have set it to I think this is the default actually is 250 pixels and with a slight opacity of 0.95 so you can customize those very easily this is actually the only settings for the plug-in and you can change the position of the tooltip like for instance right now it's centered but if I changed it to a left so kind of I'll save the settings and show you what that looks like when my finished product here refresh the page and if I hover over it you can see how it's left aligned now as opposed to directly in the center so it pops up to the left of the text there and check this box of disable tooltips on mobile is an option which i think is a good idea and then another opportunity for you to directly customize or target the tooltip using a selector here like a class or whatever so that's another way you can target it and use them some custom CSS and your theme customizer to go ahead and make it more customized to your theme or your website all right let's see one last sweep through the questions here is it possible to import modules in the text area that is a great thought and that would be cool but I don't not right now that is not possible for you to kind of add another module within a module I think it's kind of the idea there inside of a text editor but I get the reason why I guess it would make it easier for you to add content to these two each one of these tabs but nope unfortunately that is not possible right now maybe in the future I don't know but good question all right well if there's no more questions I think I can go ahead and wrap this up this is our final product here as you can see index by each letter can be done using the tabs module and as I click through you can just see how easy that would be for a user to find whatever condition they want very quickly and then go ahead over here to the right and reach out to the doctor the doctor's office about it so a nice option all right well that's all I've got for you this week thanks for tuning in everyone please be sure to subscribe to our blog newsletter our YouTube channel give us a thumbs up and like us on Facebook our next live stream will be this week in WordPress which is this Friday at 3 p.m. Eastern so look out for that and we will be back here next Tuesday with another use case livestream and if you like the content that we've been sending and that you've been getting and you want to contribute your own knowledge and expertise to empower the divi community you can go ahead and right now submit your best original content for publication on our elegant themes blog so it's really cool opportunity for everyone out there so check out the link that I have in the description for more info about that and if the link isn't there right now I'll go ahead and add it shortly but that I think I put it in there but thanks again everyone and I will see you soon

Channel: Elegant Themes

Views: 4,978

Keywords:

Id: xWPKuAk-Ui8

Length: 37min 49sec (2269 seconds)

Published: Tue May 29 2018