How to Use Divi’s Text and List Style Options for Unique Toggle and Accordion Content Designs

hey divination welcome to a brand-new divya use-case live stream or each week we show you how to add new design and functionality to your Divi websites and today in this tutorial I'm going to be showing you how to use Divis text and list option designs to create some unique toggle and accordion content designs so don't forget to check out the video description for more information on this use case livestream and without wasting any time let's go ahead and jump in and get started alright so welcome everyone just make sure that you let me know if I'm coming in loud and clear for you guys give me a thumbs up and of course let me know where you're coming from introduce yourself and and always feel free to ask any questions as we go along with this use case live stream together hello Dean nice to see you here today alright got a thumbs up very good looking good on YouTube hopefully I'm coming in pretty well in facebook as well alright that looks good as you can see on my screen right now I this is a little preview of what we're gonna be building today as you know if you've been using Divi for a while or if you're just new to Divi if you ever wanted to create some toggles or accordions you know that you know you're fairly limited as to what content you want to put in your toggle or accordion because it's really made for initially just simple text displays but in this tutorial I'm just going to show you how you can get creative with those text and list style options that are built in now to every module including toggles and accordions and it allows you to do some creative things like this which this is actually an HTML list using the the numbering for an ordered list here and in some different text elements and this is all done using the built in design settings of Divi so it's pretty cool option these are of course toggles here up here at the top and if you know this would be helpful for you know showcasing you know some kind of process or highlighting some steps or even just a creative way to add a number designed to each of your blurbs or whatever it is you want to showcase within a toggle or accordion this is my toggles here and if I scroll down you'll see this is the same design here in an accordion of course you can do the same type of design elements using the list and text style options and here I've gotten a little bit more creative showing you how to of course add backgrounds and add actually multiple columns of content within your toggle and there's a simple way to do this in the HTML and I'll show you how to do that of course I'm using a lot of different text elements like here would be an ordered list here's an unordered list and this link here is of course a link text style here and all that can be controlled using Divis built-in settings and so that's that example and here's one with a background image 2 column layout and here's another one it's a whole lot you can do with this design playing around with the different list styles and which is in large part hidden to a lot of people they don't they're they aren't really aware that these list styles exist and how much you can do with them so I thought it would be cool to introduce this to some of you who don't know about them and show you some some really creative options you can use with these list styles all right very good let's see let's get started really if you're well first of all if you're just joining us I do want to welcome you to this week's Divi use-case livestream and each week we show you how to add some new design and functionality to your website and today I'm showing you how to add or create different toggle and accordion content designs using Divis list style options and textile options that are built into the modules alright so let's get started the really only thing you need to get started is Divi we're going to be using the all the built in settings of Divi we are if you want to add a background image to these toggles when we get to that point you will need you know a couple of background images to use in your design but other than that we're just going to be using Divi and we're gonna get started by creating a new page so we're gonna be adding a new page and I'm gonna be building on the front end so make sure you choose to use Divi on the front end if you're following along here and as you can see I've got my regular section ready to go and I'm gonna add a one column row to my section here and before I go adding any of my modules I'm gonna exit out of that and I'm going to update the settings of my row here so I'm going to go over to my design settings and I'm gonna use go under sizing I'm gonna use a custom gutter with of two if you're familiar with what gutter with does that's the basically the margin in between your columns of content so I'm gonna make it a little closer together so I'm gonna do that and I'm going to already let's see back out and I'm gonna I made a mistake I'm gonna make this three column sorry the first example is three columns not one so I'm gonna go change my layout to three columns all right no harm done there now we can go back I still need my sizing my custom gutter with to be two so I'm gonna leave that and I'm gonna increase my width to 100% and I'm gonna give a max width of ninety VW which is ninety roughly 90% of the viewport width all right and let's see let's go ahead and add a toggle mod module to our first row here so imma go to my first excuse-me column add a toggle module and we're going to update the content here I'll leave the title as your title goes here that's fine but here is where we want to add our HTML let me make sure you can see it this is where we're going to want to add our HTML inside our body content for our toggle now if you aren't familiar with HTML lists they're really easy to make in fact you can actually go over to the visual tab and make a list there if you want using these a bullet list option and the numbered list so that's what we're going to be referring to a a a bullet list is basically an unordered list so that's going to be designated with a tag of UL unordered list and then the numbered list is designated as an ordered list which is o L so you'll see those differences here as we go along so I'm going to for sake of time just copy the code that I have already and if you want to find this code you can find it actually on the blog post that went out today that goes along with this use case and make sure though when you when you paste in the HTML or add your HTML you're operating in the text tab here not the visual because that will not work so I'm gonna paste in my code here and I know it's kind of hard to see maybe I can you know increase well I'll have to do it from this angle let me see if I can increase it for you all right so here's my code here and you can see that the top portion here let me go and open up my toggle as well you can see both of them here so my my ordered list and you can see I have this little start attribute here and that isn't necessary because we every ordered list starts with the number one and so but I added it there because we are going to need it for our next modules when we add it to a different column so this just basically tells the list what number you want to start the ordered the numbering at with which points so if I started it at two of course the numbering of the list would start at two and continue to two three four etc and I don't know if you can see it here but you can see the one here is kind of being overlapped by the unordered list item so we have some nested list items here so this is my ordered list and this is the closing tag of my ordered list and then inside my ordered list is my is an ordered list item that has an unordered list which is the UL that would be the bullet list if you will so that is the reason why we're doing this here is because it really is it's kind of a convenient way to give you more design options for different text styles in the in the toggle so this is a margin and I'll show you what I mean in a bit but you can see my UL list my unordered list my bullet list has an inline styling here of a margin top top margin of negative 1 point 5 p.m. which basically brings it up to overlap my my number and that's strictly a design thing that I added which will give you the result that we're going for here as you can see my list I though this would be my unordered list item which is now overlapping my ordered list item number which is one so that's why that margin the top margins in there all right so I have three different kind of text types of text here I have my ordered list item which shows up as a number one an unordered list item which is a bullet and all of the text within that bullet list and then I have AP tag which is a standard paragraph tag and so those three all three of those can be styled within the design settings under your text excuse me my body text area here a list of options as you can see here would be my body text paragraph text or P tag styles here on the first column and then over here I have the unordered list styles or bullet list styles that would be my ul tag content and then my ordered list styles in this tab as well and we're not using the blockquote styles in this tutorial but we will be using the link in a little bit so those are the three the paragraph bullet and list excuse me ordered list styles and since we have all of those active we can use all of these built-in settings to style those text styles however we want so that's kind of the main idea behind this design here getting creative by using taking advantage of the list styles in Divi and and so this is my HTML let's go ahead and get started I'll keep it nice and enlarged here my screen so we can see things a little bit better alright see the first thing let's go ahead and tackle the the icon of my toggle so this isn't we're not getting to the list styles just yet let's go to my icon here and I'm going to give it a nice kind of bright pink design here we're going for there you go and let's go ahead and do my icon font size of just do twenty six pixels let's go to my toggle settings here and for my open toggle background color we're going to keep it white I'm sorry we're gonna make it I'm sorry not my background color wrong one yes that was the right one sorry even I get confused with all of the options we have sometimes very helpful though okay toggle yes open toggle background color is going to be white and also the clothes toggle background color is going to be white because I want to keep them the same and then for my title text my open title text color when the toggle is open I want it to be a dark gray so I'll make it dark grey and the same for when it's actually closed as well so I'm just keeping the color of my title consistent as we open and close the toggle there and then let's go to the title font and I'm gonna use Oswald Oswald kind of stays pretty narrow it's a pretty narrow font so you can fit a lot of content on one line which is why I like to use it here let's go ahead and choose the text size let's make it 20 actually 18 and here's a little secret whenever you're clicking on toggles this is actually a good way to make it more mobile-friendly and it's just to increase the line height because actually on the live site when you it's when you hover over this title that the or this kind of content area here when you click on that areas when the toggle is deployed so if you want to increase that that area you can just increase the line height a bit and you can see that kind of hover area or clickable area has now grown considerably which makes it a better kind of user experience there's just a little tip there let's go to our list list Styles now so I'm gonna go back down go to my body text again and let's go to my list style unordered list Styles first and let's go ahead and make the actually a let's make the the text Oswald the font style there and we're gonna make it a light font weight and and you can see that it's it's changing the unordered list style even though it's kind of nested in my ordered list so as you'll notice if I would have started to design my ordered list first it would have the the unordered list would have adopted the the ordered list styling as well so you can you can override those though as you go on so just a little tip there in case you were wondering so the unordered list textile color let's go let's make it that dark gray there again increase the list I'll text size to 36 alright and and I don't actually want my bullet for this design so I'm just going to take it out as you can see these are my unordered list I'll type options I can make a circle you know square this is actually opens up some you know new design options for you as well whenever you are looking at this on your own time but I'm gonna choose none because I just want the basic or the ability to design the actual text not the not the bullet itself so alright so here's a little tip here the unordered list item indent if you want to you know make it end it all the way to the left you can do so by updating the indent here all right all right I did I do think I have some spacing letter-spacing strictly a you know design element there but if you wanted to give it some you know for a design effect give it some spacing there I'm gonna leave that as it is and then that takes care of my unordered list now let's go to my ordered list and I'd actually have no text on my ordered list it's really just that number that's being hidden right now because of the margin but as I style it and enlarge it you'll see it kind of come to life here so let's do a Cameron font there and let's make it bold and I'm gonna use the same paint color except I'm just gonna kind of bring it down a bit for my unordered excuse me now ordered list text color and then let's go ahead and make it a 100 pixel you can see there we go you can see it very well now and let's go ahead and make our ordered list [Music] let's do a line height of 1.1 and there you go it kind of takes care of our initial design there but you can actually add a any ordered list style type and this is where things get really interesting because you have a lot of options to choose from that you may not even have known existed for example you can choose a a lower alpha and that would organize it by letters you know lowercase ABC etc you can do a lower Greek letter if you want and it's a number of different languages here you can choose lower Roman which would is one option you can use I like the let's see the decimal leading 0 which is cool every number if it's a single digit it's going to lead with 0 and that's the one I've chosen to use for this design so I'll keep that one there alright and let's go ahead and I'm going to keep that design for the most part I could if I wanted to jump over to my paragraph text and you know give it a matching you know fox if you wanted to make it regular whatever it is but let's go ahead and save this out I'm gonna have to take my zoom down a bit it's great and save it and let's check out the result here so far alright there you go so you can see pretty cool use of list styles to give you a unique design for your toggles there and of course if I wanted to you know create you know another one with the list starting at number two all I would need to do is you know copy this module paste it in my second column here and let's go ahead and update this number the start number make sure you can see it the start number to have the number two instead of one and as you can see it will magically change that list ordered list style number two to save that out let's go ahead and paste in another one open it up so you can see it and let's change it to three instead of two and there you go you can continue that process however you need that takes care of my toggles there if you want it to let's go ahead and you know using an accordion I'm not gonna spend a whole lot of time on this but it's really simple the process if you wanted to add an accordion to do this you would just of course add an accordion to your one column row here let me go ahead and shrink this up a bit make this fullscreen okay and let's go ahead and you know delete this one cuz I want to you know design this first one how I want first so I'm gonna open up my accordion design here actually I'm going to save that out because what I really want to do is copy the toggle settings let's say we want to copy the the toggle settings for this first one and basically paste them into our accordion as we need that would be a good way to do it without having to recreate the design over and over but essentially what you're doing is the same exact thing in the accordion you're just going in there and styling that HTML so let's go ahead and do that I'm gonna first alright let's exit out again let's go to my toggle settings let's go ahead and copy the HTML here and then let's go paste it into the first accordion there you go and then you would go save that out open up the toggle one of your already design toggles and we're gonna do it this way actually we're going to go to the let's say we want to you know bring that icon to our toggle well that design well we can do it by extending it so I'm just going to right click on my icon category here and I'm going to click extend icon styles to all accordions on this page and click extend and since my accordion doesn't have another one it's going to make another one here now you can my face is hiding it but let's go ahead and show you there it is you can see those pink icons have been added all right no I've resized this on and make sure that I reset everything okay cool let's go ahead and continue this process for example I could extend the the text the main one or excuse me body text Styles is the main one I want to extend here to all of my accordions on this page extend it it's thinking hopefully I didn't break it and there you go see the design has been carried over to my toggle and that's basically how you would do that there's a few more design settings that I would need to do but it's just to show you that this kind of setup works in a toggle and an accordion actually works in any module but since the these are similar I thought you'd show you how to do both and let's see we should have time for one more example here kind of using this multi-column setup and just to kind of remind you what that looks like scroll down here is a you know a multi-column setup here it's actually really easy to do I'll show you how to do it in a second but I do want to welcome you if you're just joining us or you kind of confuse what's what's going on I want to welcome you to this week's double use case livestream each week we show you how to add new design and functionality to your Divi website and in this tutorial in this livestream showing you how to use given E's text and list style options for some unique toggle and accordion content designs and don't forget to check out the video description for a link to the blog post for this use case and if you don't have the Divi theme yet don't forget to check out our link in the video description there of to our product page to check more out to check out more about Divi and let's go ahead and get back to it one more thing we're gonna tackle this design and then we'll be done let me go and make sure we have any quick don't have any questions let's see okay James has a good question when will we be able to watch this from the beginning no worries this this whole video will be added to the actual blog post and will be available in that blog post either later today or tomorrow very soon so be sure and check that out and that's this one here how to use Divis text endless style options for unique toggle in accordion content designs and so just kind of go to our blog page elegant themes com4 slash blog and make sure and check that out alright i'm going to get rid of my zoom there other questions alright looking good hi Mike and let's see all right last wave guys let's go with we're gonna do another toggle module so let's go ahead and go back to my Divi builder here visual builder and I'm gonna get I'm gonna use some new HTML elements here but I'm gonna add a new row it's gonna be a one column row and I'm gonna drag it up to the top so we can see it and I'm actually gonna give it some spacing just because I want to get it's kind of confusing to know what design we're looking at so this is not part of the tutorial this is just to help you guys see things a bit better so I'm just gonna add some bottom margin to my row here to get rid of the stuff just get it out the way without having to delete it all right so I'm going to this is my one column row in a regular section and I'm gonna add a toggle module let's see should we yeah let's go ahead and copy one of our existing ones here so I'm gonna copy this toggle module and paste it here that'll give us a head start on the design alright and let's go ahead and get us some new HTML and this state this HTML again is in the blog post but it's going to have an additional text element which is a link in it as well so it's a bit different and you can see just by pasting it in it's already doing a lot already and let me see if I can zoom in just a bit show you what that looks like okay so this is my HTML this is actually an ordered list just like we had before but you'll notice that instead of having the you know column count starting at one or I'm sorry the list count starting at one like we did in the previous example this is actually doing something different it's using an inline style a CSS at a CSS property called column count and this basically tells your whatever is going to be whatever content is in this tag it's just gonna organize it into two columns so basically it's just going to kind of bleed into the next column and you can do any number of columns that you want this is actually you know helpful if you want to make you know kind of like a newspaper type layout where you have two columns of text that kind of go extend over into the next column things like that but here we're using it at the list item level here and so here's your ordered list so I know it's going to be numbering so that's going to be my ordered list which is here my pink number here and then I have a list item and this list item is for my ordered list just to kind of show you if I wanted to add content here like here it would inherit that at the list at the ordered list level for that list item but actually I'm having a nested unordered list within my ordered list just like we did in the previous example except right under the this text here this list item text this lorem ipsum I have a link and this link is is has the a tag that's how you know it's a link and it's going to have this learn more texts here now this link can be styled with the body text as I mentioned earlier under the link tab here so that's why we're introducing it here it's a good way to you know style your links with different styles within a toggle which is very helpful alright so what I have here is a number of list items ordered list items with a nested unordered list with a link as well and so what I'm doing is I'm just keep repeating that here's my next one that's this one here and because I have four and I have kind of an equal amount of content within each of my ordered list items it's going to kind of overflow nicely into the other column so because I've designated it as a column count - that's what's happening if I were to say column count 3 in my HTML it would do something like this which as you can see isn't really looking good because I don't have you know like I would need let's say six of these for it to kind of look the right way alright so let's go back to - alright make sure you can see my shrink that up a bit alright so there's my HTML of course you can get it into the blog post let's go ahead and style these a bit let's go ahead and go to my link that's the main thing I want to style here is my link so I'm gonna go to my body text go to my link settings and let's go it's actually inheriting the Oswald I believe textile from one of the lists items because it's nested in there it's gonna inherit that that a link font I'm sorry that the list font so I don't really need to update the link if I want to keep it the same but if I want to change it to something else I could do it let's give it a different weight I'm gonna make it semi pulled and I'm going to give it a different text size let's go with 15 and let's make it a brighter pink color there let's go to my link text color there you go and to make it more link like let's go ahead and make it underlined there you go that basically takes care of that maybe we want to brighten up our ordered list numbers there let's go over to our ordered list wherever it is there it is and let's go ahead and update that color bring it up to a darker pink there that's looking nice and let's go ahead and add our background to our toggle here scroll down to my background and we can add a background image if you want I'm just gonna simply add a gradient and since I have two columns here I'm actually going to add a gradient that kind of you know kind of splits up that those columns a bit so that you can see those columns a bit better so I'm gonna give my gradient left color there which is kind of like a a light version of white and I'm gonna have to add a background color here just to show you okay my second gradient color there you go and I want to have my background color above my background image and actually you know what it's not it's not gonna work with this background color so I'm just gonna have to add an image for this one and let's go ahead and add let's see you can add any image of course I liked this one for this design um let's see this one might work let's just use that one there you go and let's go to make sure our gradient yes is above the background and the start position is I'm sorry the the gradient direction needs to change to 90 degrees so it's kind of like straight up and down start position I want it to be 50 because I want it to be 50% and I don't want to see any of the actual fading of the gradient so I'm going to take it down there we go now we have a sharp contrast between the two columns very subtle but it does kind of show the two column layout a bit and let's go ahead and save it out and I didn't take the time to go through all of the different you know responsive op excuse me design options you can use for this particular design I've included that in the blog post so go ahead and check that out if you want a more responsive version of this but I do want to show you kind of how it will look on mobile as is let's go ahead and refresh so there you go this is kind of the functionality looks pretty cool and of course this will bring it back up see what this looks like as we shrink our browser as you can see we'll need to update the text size a bit to make sure those two columns don't get squished up on mobile too much but the in the blog post I show you you know the final design how it will look on mobile just show that to you it's going to look more along those lines so it will look nice and clean and of course in the blog post I also have a download where you can download the those designs in a layout already pre-made if you want to test those out feel free to do that as well let me go over and check out see if I have any questions alright alright so let's see I have one question how can I customize my blog view Yaroslav I believe I don't know let's try to pronounce it but your name but thanks for the question I but I'm not really sure what you mean could you clarify how can I customize my blog bu hmm I'm assuming your meaning your blog page maybe or using the blog module I'm not sure probably not something I can cover in in detail in this livestream tutorial but maybe you can someone here can reach out and help him out a little in the chat excuse me okay all right so if there's no more questions I think we can go ahead and wrap things up here hope that you did learn a few things at least maybe find a few inspirational items where you can take along with you just a reminder all of these list Styles link styles you know paragraph styles they're available within all of the modules so in in one of our recent updates I think was maybe a month or two ago we added that so make sure to check it out if you haven't noticed all right all right that's all I got for you this week thanks again for tuning in everyone please be sure to subscribe to our blog newsletter our YouTube channel and like us on Facebook that way you don't miss out on any future live streams or freebies we'll be throwing at you and we'll be back here next Tuesday for another Divi use-case live stream so please be looking forward to that and our next live stream is actually this Friday at 3:00 p.m. Eastern and that would be the WP round up the weekly WP roundup and so please check that out and if you do want to share your own knowledge skills and expertise with our community with the divination on our elegant themes blog please check out the video description for a link on how you can share your own unique content with us so please check that out thanks again guys and I'll see you soon you

Channel: Elegant Themes

Views: 3,633

Keywords:

Id: 4PdHqDXQ5hM

Length: 48min 25sec (2905 seconds)

Published: Tue Jul 23 2019