Webdesign Playground #01 - Adding SVG Icons to Divi Menu

here's a replay of the first episode of our new tutorial series for divi the web design playground if you'd like to catch the next one live please join our divi lovers facebook group okay i think we are live uh hi everyone it's my first time doing a facebook live so please bear with me i hope you can all hear and see me well there is a bit of delay so i assume that everything works correctly and if it doesn't just let me know in the comments okay so hi in case we haven't met my name is anja romainska and i am here today to start my new tutorial series for tv and i call it the web design playground the idea is to basically create a website a tv website and week after week i'm going to work on the same exact site and hopefully get your feedback and your suggestions on what to add next what to edit and so on so the main purpose of the website would be to display all these videos all these tutorials on how it was made so anytime i add a bit of code or mention some resource i would include that on that website as well so hopefully you like the idea and yes i think it would be awesome if we could do this every week and just create some fun project together so okay let me show you i haven't started the website creation yet but i did made a a little design like i call it the design tile so if you can uh look here on my screen and this is my illustrator file i just did like i i haven't made a full home page layout or anything just the little bits of typography and colors i would like to use on that new side and i did included this icons in the main navigation so this is the part i would like to focus on uh today as a start so hopefully i will be able to show you how we can achieve this fan icons on our tv website okay so let's go back here here's my own site on the developer side you can see that i also have nice icons in the navigation and what's nice about it is that you can actually change their color like it works kind of like icon font so it's similar to the little icons that are included in dv but these are more complex this is svg code it's not an image because if we if i would use an svg image here i wouldn't be able to create a smooth transition to change the color of it so um like i said these are svgs and i added them using some javascript and it's very simple and i will show you how we can recreate the similar effect for our new site so okay here is uh the website would be hosted at the playground.developer.com url so i am planning to build something something very nice on on this page but as you can see it's just a start so today let's focus on the navigation i also okay just a quick note i also recorded a quick video on how i installed the wordpress and tv team here i'm using the flywheel hosting and let me tell you it is very short video it took me like a minute to set up i had some a bit a bit more to set up as a sub domain but basically it was very very easy to get this wordpress website up and running on flywheel it's like i love flywheel the their dashboard is beautiful but like i said i will include that in the in a separate video today we already have our dv installed but it's it's empty it's just a sample page uh here so uh what i would like to do first is create our main pages so page add new and looking back at my illustrator illustrator file we have home tutorials resources and community these are the four main pages i would like to have like home would be basically like yes the home page with some general information on the tutorials page i would list the that would be our blog index page so it would list all the episodes all the videos i'm just recording and on the resources page we would have a list of all the links or tools i'm i might mention in these tutorials and the community tab is where i would like to share some information how people can join our lovely group of tv lovers or join my newsletter okay so we have four pages home tutorials resources and community so back to chrome let me just exit the full screen mode so it doesn't open full screen each time i create a new page and let's do tutorials let's publish and i also disable the pre-published text so it's quicker and then another page resources and community we can use the sample page as our home page so back here we have sample page i will use the quick edit option and we can change that to our home page okay but that is something i would like to address because i know it is confusing for beginners so when you first install dv the your home page lists its lists your blog posts the hello world is the title of a single first blog post that's added in wordpress by default so in order to change that page to a different one we need to go to settings and reading and now your homepage can display a static page and i will choose my home page and the post page that's the confusing part i think i will choose the tutorials to be my posts page and if i save now just to show you real quick go back here i will refresh and that's the home page on my main url and tutorials page would be the page that lists my posts and normally we can't enable the visual builder the tv builder on that page because if i add any content here it won't be [Music] it won't be displayed this is the index page we can only edit it using the dv theme builder but uh we're going to get to that maybe next week to set up our single post um template i think that would be a good idea but for now like i said let's do our main navigation and as you can see uh dv by default also includes all your pages and even categories in the main menu but that is only until you assign a menu that you create yourself so under um menus here or here appearance menus you can create a new menu let's call it main menu and now let's add all our pages in here and if i set it as my primary menu it would display instead of this default one so back here we have our home page tutorials community and resources actually let's move that this way okay one an additional thing one second i think i just okay so one additional thing i would like to change here is to add css class to to each of the menu items i need to first enable that option in the screen options and css classes and now just one second i think i just lost my oh never mind okay so once the css classes are enabled uh we have this field here and i will add a new css class for each menu item so then i can target this menu elements with my custom code for adding different icons to different menu items so let's do dl home and here the l total reals the resources and community okay let's save that and now we won't see any changes but when i inspect this let's see if our classes are here we have lee with a class of dl home just oh sorry you can't see it because of my face so here there is this li element with a class of dll home okay so to display our svg first how do i get svg code from the svg file i have each of the elements i created here each of the icons i have it saved as as my icon file svg file on my computer so now if i there is this website i always use that optimizes the optimizes the svg files if you google svg omg that's the link you will see as your first option i will share that link uh in the on the website on the resources page but here basically if i um drag my icon here and just drop it it would actually that's not okay so we did two too many optimism optimization so let's see let's see what that usually i just leave it at default let's see what you see it adds all sorts of different okay let's let's do the the original for now so that's the oh okay so this is very complex actually let me maybe re-save that file once again let's see okay let's copy this for now let's remove the css okay so i'm copying that svg code from here and now in dv [Music] theme options dv theme options integration tab i will use a child theme but that's maybe for uh for later for now uh let's just do the add our javascript inside the um inside our integration tab just here in the head section so if i just simply add a script tag and then close it and here we are going to add a jquery function so let me quickly uh copy my the beginning of jquery and now back here let me copy the svg code okay so this basically tells the browser to treat every dollar symbol as jquery element so now we can target our menu item like so dl community and direct ancestor link so we want to target the a element inside the lee with the custom css class and i'm going to use the prepend method which basically allows us to add anything we want before the element that this targeted so here i will pass my paste my svg code okay and let's save that and now if i refresh my page it didn't work let's see inspect okay there is there are some errors in the console okay there's a dot here so the svg let's remove the style tag from here okay that should be better the optimization tool didn't work as i hoped it would but let's save that and let's refresh see if we have our icon it's on line 61. so back here hmm okay that's the probably let me check a real quick image let's do everything okay hold on let's fix that i knew that something like this will happen i should probably be a bit better prepared right okay so okay that was the remark and the last one let me just refresh that page once again and let me paste my file once again okay now i have to so i will now optimize all these lovely options until i know that my icon looks good and the code is also optimized okay so yes someone is actually mentions that i should change the change the um quote that i used to a double quote that is possible but i kind of do want to have my svg code cleaned up so hopefully just bear with me okay and now it looks like this much nicer let's go back here and add this here like so okay it's it still breaks somewhere let's try with the double quotes no oh okay it was okay it was fine just the beginning is there we go okay now it's lovely dude it's highlighted correctly so i think we are all set just a minor setback let's refresh no it's still not there let's see okay here oh i know what you meant now yes obviously that was the problem not the svg code yay okay now i'm back with you let's save that there we go lovely now let's quickly do all the others hopefully yes exactly thanks okay let's do quickly a new one so a new image let's drag it here and now it would be ready for us i didn't notice it here so yeah the next one it's going to use quotes as it should so dl home a free pant like this and the next one back here let's get our code for the resources icon thank you nikki for trying to save me okay let's prepend this svg and the last one was for uh tutorials right the this one yes okay um this is too much okay phew that was a lot of code to add but let's save that and refresh lovely now we have our uh pretty icons here now let's uh make sure these are all similar size and let's actually make it look a bit nicer but let's um use the theme builder instead of the default dv menu so back in the dashboard dv theme builder let's build a global header let's start building back here build from scratch okay now we're here let's add a menu module with our main menu let's also add a logo image but i do want to use svg as an image so let me save that close that for a moment and [Music] let's just open here but i do want to add a quickly add a new plugin to be able to upload svg images to uh to my website we could use a custom code but let's just quickly install this simple plugin and it should work right away so let's activate this okay and now back in the theme builder i refresh the page oh that wasn't a good idea i didn't save it so but that's okay let's menu and use a logo image i have my logo as an svg here and using it um in form of svg will make sure that it's nice and crisp so let's just decrease the size a bit maybe to pixel value okay like so and now our um links i'm going to use babas no yeah i think it's german font maybe okay so have you seen the new uh global colors option in tv i was working on a new child team yesterday so that was released just in the perfect moment for me so now we have this global settings for all the colors uh we choose in the dv builder and here we can add uh well global colors and then when we edit them it will edit globally across the entire website it's very cool and it works works really really well i already played with that for a while so so yeah let's i have my um my hex codes saved here um let me add this real quick let me copy this and the last one okay so this would be the link color and let's make that font a bit bigger nice and big actually let's use this that was the active menu link color so let's maybe active one could be actually white but let's do that later so let's leave this empty and here okay and let's align the text to the right uh right side okay let's save let's see how that looks with our icons okay so i have to save and also save the changes here i always forget to do that not sure why my why my icons didn't show up here let's close that i should probably test that earlier let's maybe stick to the default menu for now so let me [Music] let's say that for later i will export that it's fine and now i will remove it and let's maybe customize the default uh navigation that wasn't really what i had in mind but let's see so we can set our fonts in the header and navigation primary let's find our babas noya here let's make it a bit bigger my screen is not big enough oh there they are let's use this color also for the active link okay now let's fix that with css let's also add our logo here so back in the dashboard dvd team theme options let's choose our image and let's add some css to make this navigation um look a bit nicer the logo is way too big let's make it that big so dv by default changes the font weight of your menu to 500 i think let me see so we have to fix the font wave weight for sure let's see okay you see it's 600 it's for all the eight at the et top navigation so this we want this to be 400 like so we also want to add some more space between the elements so the space is the um you can see when i hover over here the box model uh shows that the green part is the padding so it's a padding on each li element and it's right padding 22 pixels so we can increase that and let's do padding right 40 pixels it's a good start i guess well to be honest i kind of don't want to stick to the default navigation i do want to change it to um to the theme builder i'm not sure why my javascript doesn't display icons in in this version of navigation so maybe we can finish at this point i will do some troubleshooting and back get back to you and we can finish that properly for the next time uh hopefully that was kind of helpful i will add the code into a new post here and also you'll be able to watch these videos on my youtube channel and then i will add them here on this website as well and i hope we can do that together so do let me know if um if there is anything specific you would like me to work on i kind of need to troubleshoot this and i don't want to waste your time uh here live so let's finish that navigation along with the mobile menu which is quite important and hopefully we can do it in a nice way with icons as i have said for for the dv lover website but let me get back to you on that and i'm uh i hope to get some feedback from you if you think that this kind of videos are helpful and if you want to build the website together with me week after week i think it would be fun we have a bit of a rough beginning with nothing working as i expected it to work but that's okay that happens it's normal like it usually that's what happens you try to do something and then it doesn't work you have to troubleshoot so uh so yeah let me uh finish that next week oh and one another like housekeeping note i hope uh you like the idea of the feedback friday we are having in the group so uh basically if you can if you would like to get some feedback from other web designers or tv users we have a lot of people in the group just add a new post and tag it with the friday feedback tag hashtag and then maybe write a few words about what the website is about what was the goals and then we can chime in and share some comments maybe you know it's always great to get another set of eyes on your designs because it's it's hard to do it on your own and i know many of us work uh by the by ourselves uh so it's great to have this connection and be able to get that feedback but the one thing i would like to encourage is when you asking for feedback also search the group for the same hashtag and find other posts from different users who ask for opinion on their designs and then we can this way we can get this conversation going so i will do that next week i won't give up i won't let this minor technical issues pull me down i really like the idea i hope you like it too so let's build a fun web design playground together let me know if there's anything specific you would like me to walk you through or cover in in these videos and uh yeah enjoy your valentine's day this weekend and i see you uh next time bye you

Channel: Ania Romańska

Views: 883

Keywords: Divi theme tutorial, Divi Menu module, Divi Theme Website, building website

Id: 5u5Ktk7mWFQ

Length: 39min 8sec (2348 seconds)

Published: Thu Feb 25 2021