Webdesign Playground #04 - Divi Child Theme and Footer Template

okay okay hi sofia thank you that's great to know thank you i'm very very glad to hear that it is working now so okay a bit of technical troubles my microphone got disconnected somehow and i can't plug it in so the audio quality might not be perfect but let's let's try it this way okay so once again sorry but just let me do it properly my name is anya i'm the founder of dv lover and here in my new project i call web design playground i am doing weekly lives on inside our facebook group and the replays are also available on youtube and every week i'm building the same exact website adding different elements and styling different parts of it and the replays of this video workforce are available on the website itself so it's basically you know you can copy the code i use or watch the replace in form of the weekly blog posts on the web design playground website so i hope that that is clear to everyone i'm very excited that you are joining me live let me see i can see your comments here on the side so let me let me welcome you all hi giovanni it's lovely that you uh join us i can see some new faces hi michael sofia thank you yes i the technical issues are always part of our work right it's always something but okay hopefully it will go smoothly from now on so before i uh share my screen and let you know what we have done so far show you and also show tell you a bit what i would like to do today i wanted to mention that please feel free to ask any questions you might have in the comments and i'll try to answer them while i'm still here um okay so uh hi everyone it's so fun to be live right it's so fun that there's so many of us here from uh all different places it's really amazing like internet is awesome okay so let me share my crumb with you so this is our website this is what we've built so far in the past weeks we've created this um nice navigation with the big svg icons and this is the single post layout with we've done last week and it's it has the post content here and the post navigation and we finished by creating the adding some css to style the comments section and i would kind of want to pick up from here because i noticed that if i resize my browser windows i forgot to handle this part like the comment field is not wide enough on smaller smaller screen sizes so i would like to fix that first okay so here i am logged in to my site let me go to the dashboard and so far we are adding our css in the theme options but today later today i would like to create a child theme so that we can move our current uh in there but uh we'll get to that in a moment so let me find the oh this part so the p with a class of comment form comment uh we've set the width to 51 percent but um we really want to change the width only on um on scribe on smaller screen sizes and to be exact let's inspect that 767 pixels i think yes that's the break point when the um whether the fields are getting stacked so we only need to target screens that are wider than 767. so back here let's add a media query i'm in with 768 and then we can change the let's format it nicely okay like so and let's check that i have to check it in the incognito mode because if you're logged in the comments form look differently okay so and now the bigger screen okay so yeah that's the first thing i wanted to fix i uh forgot about it last week so now it uh it all works fine and the one part we didn't get a chance to finish because we ran out of time last week is the button here so let me quickly show you my initial design i created for for that project it's just like i call it the style tile it's not a full um website layout or anything it's just a little piece of ui i i wanted to include so i decided on my fonts and i also created the navigation here in my illustrator but i also designed this button and that is kind of how i would like my buttons on this website to look so just to show you what we are going for here and now back to um back to chrome let's style this button so it look less like the default dv uh button and more like uh the thing that i i draw in illustrator okay so let me close that incognito browser and let's go to the theme builder maybe in a new tab it's always good to have like 100 tabs open right i'm sure you can all relate so the comment form is a module that we included in the indeed body template for single posts so let's go ahead and edit that template so i can edit the design of the button inside the comments module here okay so let's go to settings design button and we want to use custom styles for it let's do a small font size 20 pixels with our global dark text color and i want the background to be white and one pixel border also with our global dark color but i want zero pixels for the border read radius we are going to add some letter spacing because i will also make the font style uppercase and i want to use the bold font version i don't want to use an icon but i would like to use a shadow to create this this blue decoration let's call it okay so let's but that's not the text shadow i want the shadow for the for the entire button so the box shadow let's start with this one that's close enough and let's do four pixels actually sorry minus four for horizontal because we want this to be shifted to the left and four from the top like so and let's use our global color yeah maybe the lighter one will be should look should be fine okay so that's the button but i do want to remove that remove that shadow on hover so it kind of looks like you press it uh okay so i will show that in in a moment but um for now let's let's just trust me on this okay so on hover i want zero i want to hide the shadows sort of because i want to press the button we'll cover the alignment in a moment and on hover removing shadow but okay let's let's let me maybe save that and show you um how this looks here so when we only hiding a button it doesn't well it kind of looks like we are pressing it but not exactly i would i would want the button to move to the bottom and to the left instead of move the shadow inside behind the button and it will be easier for me to show you this on actual button module instead of the button in the comments because uh here we have less styling options within tv i will show you that in a second so back here let me just just for a moment let's add a button module just so you can uh know what i mean and i will go back here to the comments module settings and try to copy my button styles let's see if that works and paste okay great that's a good start not everything got copied because the box shadow works a bit differently in the button module and in the comments module but we are pretty close so so that's good let's add that both shadow once again here which is real quick minus four and then on hover zero and here four pixels and on hover zero and also we want to change the color like this okay so like so and we want to use the transform property to move the button behind the shadow you'll see in a moment what i mean hopefully that's that makes sense let me know if it doesn't but uh you'll see in a second so i will use transform translate to move it but only on hover okay so on hover let's move it to the left and to the bottom oh sorry sorry sorry let's we have to uncheck this minus four oh no sorry this is oh silly me okay so this is four and this should be minus four okay like so uh okay i confused okay so that's the hover is style okay so if i save that just to quickly show you here on actual page oh sorry no not here here too many tabs right okay so here we are and this is my button you see how that looks better when you kind of press it and instead of just instead of here when the shadow gets hidden here hopefully you you can appreciate the difference the tiny details i know i might be weird to focus on things like that but i do think it this looks much better than this and once we finish and you can see it on the live site yourself when you actually hover over it yourself you'll see how how fun it looks unfortunately we can't use the same transform property within the dv builder settings for the button here in the comments form because we would transform the whole module it doesn't apply to only a button but there's easy um easy solution we can use thank you sophia yeah i i totally agree that this little things make uh all the difference so yeah i'm i'm happy that you that you agree too okay so uh we have this css here it's generated by the builder for us so we don't need to write it rewrite it again for for this button here if i inspect and i know this looks weird but it's only because i'm logged in here usually the user will see the form better but just so um just so you know we are um we are yeah i hope you you can if you you are able to follow along to see what i'm doing okay so back back back to work i mentioned that we don't need to rewrite our css because we can copy what already has been generated by the dv builder so for this button here we can choose the hover style right for for this and we can find that it uses this css transform translate x and translate white for pixels and we can use this okay to target our button within the comments form module and this is actually not a link but a button element and it has the id of etp submit let's use that maybe i think we should be [Music] we should be good with using only the id so et pb submit hover and i'm pasting what i copied from from the the other link right so save changes here and let's hope this this works so if i refresh lovely you see it was very very easy but there is another link here so just if i bring up my incognito browser that's the not so pretty default one but if i refresh the page uh there's our submit button but that's not a good post but the we want also to target the replay link oh i got my first comment thank you martin if you're watching us thank you so much so i can use that to to see how the rep re reply now button looks and you see it doesn't use the same effect because we didn't we have to target it as well so with our css we can find the selector here and it's actually it's a css class that is used commonly used within wordpress i think it might even be generated by wordpress itself or not sure but the comment reply link that's the class we can target and i think we should be we should make it work with just the class alone so let's try that comment reply link hover okay save changes let me bring back this and refresh yes it works lovely so these are the little things that i like to i like to do we might want to maybe add some more spacing here for for the button well not necessarily for the submit button but just for the let's call it the regular standard buttons across the side we might want to add some some more space just so they are a bit bigger because really this website doesn't have much content so we can kind of go a bit uh crazy with the sizing well not too crazy but you see this is big and we have big icons there's no reason why we shouldn't have big buttons for for the call to action okay so let's close that and back in the theme builder i want this um actually let's just as i uh as i mentioned let's let's add some spacing okay so spacing and padding let's try 15 top and bottom and 25 always a bit more on the side it's it kind of makes it uh looks look nicer maybe 12 something like this okay so i think that should work well across all screen sizes really it's not like we're going to have any long text inside so it should be we should be fine with that so i'm not going to change that for for mobile on or phone but i do want to use the preset functionality okay so if you haven't used it before you definitely have to start using it because it's it's like awesome and especially when you're starting the website starting building a new new page setting the presets in advance allows you to build it more quicker like later you just add your content you add a new module and boom it looks perfect just with one click so setting the presets is very powerful and um and you should definitely use that so right now it's the we are we edited the button styles but not the preset styles and i can create new preset from current styles okay so that's what i'm do and i want to assign that preset to default i can call it default but that's the name doesn't really matter if i only have one and it's the default one i could create multiple presets for like secondary buttons for example i could use a different styling and then i could name the preset differently but if it's default then it's fine obviously the builder will ask if i'm sure because this will apply to all the buttons across the website and that's exactly what i would like to do so i can save that now save it and just to show you how how that works the next time i will add a button boom it looks like this right it's it doesn't use the default dv uh styling but it uses my my set of uh design options i i chose here okay so let's let's save that let's remove this uh sample buttons from our post layout we can save that layout because now the comment form looks perfect as i uh just as i like so we can leave that part and i think we can create a footer nothing too fancy just quickly create a global footer layout inside the theme builder i have like a basic idea so let's let's let's do that we want to build from scratch as always actually there is a way to disable that notice but maybe some other time right okay so uh full width row and first i want to create the horizon vertical line because as you can see here we have like here we have this line and the single pixel line is across the design for for this page i would i think it would be a nice visual element that kind of adds some more space inside the footer so i will use a divider module for that and by default dividers are horizontal that's that's the intention but we can uh use the design option to change its sizing but i we do want to change the background as well so the background will be our default dark background but i do want this to be one pixel wide so just one pixel and let's um make it 150 pixel tall okay and we want this to be aligned in the center just like that okay and now i want to remove the padding okay first i want to add a background just a light bluish background the same we are using in the header of the single post layout or actually let's use the global color and i want to remove the spacing so that my line actually touches the top of the of this section so sorry not sizing but spacing and zero padding and the bottom padding should match the length of the divider because there's no divider at the bottom so i want to have 150 pixels padding there but for the row i do want to have zero padding so the spacing is controlled only within the section and not the another row okay oh sorry and back in the section i also want the horizontal line at the top border top so border this one and one pixel and global dark color okay that's a start just hold on now let's let me show you my my vision i didn't draw it in illustrator so i can't show you i have it in my head but just just let's let's go with that first an image module just to show our website logo i have it here and i do not want this to be that huge no no no so let's not spacing sizing with let's do 120 oh 120 like so yeah that's pretty good in the center like that and below i want to add some text um okay so first uh you might notice already if you watch any of i i think i mentioned it a couple of times but if you haven't this is a little trick i use to display um the current current sorry current year it did within the in inside the footer so every year you don't need to go in and edit the footer for for a client for example you can actually use building dv options to do that so if inside the content we can use the dynamic content feature and we can use the current date okay so the default date format is set within wordpress settings but we can choose custom and to only display current year the custom date format is php date format it's uppercase y okay and that gives us a current year and before uh current year um i want to use the copyright symbol so it's uh i don't need to copy it from anywhere because i know that html version of that symbol is um ampersand copy i think it is this is called ampersand not sure but correct me if i'm wrong but i think it's ampersand copy and then semicolon okay and that gives me this copyright the c inside the circle symbol and i want to add a space here so it's not squished together with my ear okay and then after again space and let's do oh sorry like that and let's say all rights reserved okay or company name or whatever you would put inside the footer that would be our first line okay i want to align this text in the center okay and now because the the content here when we are using the dynamic field doesn't give us a lot of space i i like to use a separate text module to add more text here so so maybe let's try and say that this website was made [Music] during live video stream i am so bad at spelling things but let's bear with me with during live video stream using okay something like that and this one okay let's maybe add my answer by me okay okay and here i would like to use links so just for now i would just empty uh add empty links but obviously i would want to link to elegant themes and then here we can link to wordpress.org in the new window okay and i could link myself okay let's not worry about that now let me uh move that here okay so the design tab just real quick i do want this text to be like in the center so we definitely have to set the maximum width to something like 400 pixels and we want to align this in the center or maybe let's do 50. okay that kind of makes sense i might edit that later i'm not sure if i like the wording you know obviously english is not my strongest skill but okay it should be good i just want people to know that they can watch the videos to actually learn how this website was made because that's the whole point of the project right so that's why i want to mention it in the footer here and i also would like to style my links i don't like the blue color i want the default color but i will make them sorry make them bolder so link font weight bold okay like so it's looks pretty good and then one final element of the footer i would like to include a call to action here so that people can join us and watch the live videos together with you like you are now okay so uh below let's add a button and join us okay but we want this um to link to our as you can see we have the community page planned it's not it's empty yet but we could fill it up with all the necessary details for anyone who would be interested to join our lovely divi lovers community right so uh join us and now we can instead of just writing the url of that page i can also use dynamic content and link it right like so you see it even selected the community first it's so smart our builder right no okay so and then if i change the this page name it would still link to the same page so that's how dynamic content works it's quite useful if you want to make sure that your in internal linking works correctly even if you decide to rename or change the slack uh url of your page later okay so this link will will will work why do we oh okay i'm wondering why we can't see it but you know there it is okay but we want this to be in the in the center lovely i think it's a pretty good footer hopefully you agree i don't have much content here like i could list some inner pages or all different things that usually go inside the footer but for this project there really isn't much to it so so i think we we are fine so let's save that and i think we also have to save the changes here in the theme builder because that was a new template and now i think if i refresh hopefully the changes will work here lovely nice big footer with a join us link that takes us to our empty community page okay we have to deal with that soon it's really a kind of um not the usual uh order of things because we still haven't created the home page here so but you know we'll we'll get there patients we have our single posts where you can copy your content we have our header and a footer and uh that's a very good start okay so uh now i would want to show you how to create a child team okay and i know that there are many different um questions you might have uh about child themes and it's kind of a top big topic itself but i would kind of want to explain why i want to use childhoom for this project and why i tend to use child team in most websites i use the reason for that is this place right here the theme options custom css box for me it's very little and i tend to write a lot of css for my website i know that we can achieve many nice designs within the builder alone but i find it limiting on many occasions and most of my websites tend to have hundreds and hundreds of lines of custom css and it's just easier for me to edit that css within my code editor my program a software i have on my computer rather than just looking in which tab i have my theme options open like now okay so that's the main reason for me why i like to use a child team instead of adding my customizations here but also if i add additional javascript i can always add that in the integration tab yes that's what we what we did here but if i want to use some additional javascript library like you know particles javascript or some other javascript file for example i would use a javascript to use a color highlights on the code i'm pasting so it's it looks nicer than than this that's actually something we will uh we will need to take care of like now this code is like hard to read because it's not color coded so there are javascript libraries that can handle that for me very easily but that would be a separate file i would need to load within wordpress so using a child theme to achieve that will be much easier for me okay so that's kind of my main reasons for using childheme because i know some people will tell you that you should always use child team but that really is not the case like you can keep your code edits within the dv team options and if there isn't a lot of customizations other than what's available within dv then you do you certainly don't need to use a child theme okay so now let me show you my uh code uh editor i use oh sorry i think my oh dear can you hear me well i'm not sure if you if my audio is okay sorry sorry uh i hope you can still hear me when i switch the screen here so this is the code editor i use it's uh mac only and it's a premium software but i've been using it for years but there's plenty of code editors that you can use for free whether you're on windows or a mac there's visual code studio or sublime text editor or brackets there are many many free code editors but the what i think is oh thank you thank you someone just mentioned the sound is fine thanks okay so the for me the important part is being able to connect with my server through ftp okay so here i am connected with my flywheel hosting and i have two folders one with my main site and one with my staging staging site so if i go here these are the files from wordpress and then i just want to show you how to create the childhood manually directly on the server we could do that offline create the necessary files add them in a folder and zip that folder and upload to wordpress dashboard that's one way to do it but we can also simply create these files inside our wordpress on the server okay so in in the wp content we have themes folder and right now i have only one theme installed and i can simply create a new folder here playground okay and inside this um that would be my childhood folder and we really only need two files to make the childheme work so first file is a style css file okay and the second one is functions.php file so i created two new files like i said i could do that on my computer just you know just a standard new file and then uh change the file type to php and css and then zip it when i'm ready but right now i'm creating this directly on on the server so inside the style css file there is a header that we have to include to let the wordpress know which team is our parent team and let me show you back on in my chrome i have opened i i went to wordpress.org and just type child themes in the search bar and that's the first article you will get and obviously the wordpress codex is the best place to learn anything about wordpress so you have this lovely article that explains what is the intention of a child team why and when you might want to use it because it was created the functionality was created mainly to allow you to add your customizations to your theme without editing the parent theme files so when the parent theme is updated you don't lose the customizations because they are in a different place inside your child team okay so now just scrolling through the documentation it tells us exactly what to do to create a child team so we have to create a child importer folder we've done that and then in the style css file wordpress documentation says we should include this and not all of this is really needed let me i just pasted it inside coda here so not every line is needed but we do want to specify the template and in our case it's dv and uh well let's change the name obviously so my theme would be web design playground team url not needed description this is my childhood okay this is just something you can use for your clients you know so they see it nicely in the dashboard author it's me anya okay i could include a link to my website but that's not necessary we can leave the license and let's change the text domain if we were to add translations but not not worry about it now tags aren't necessary as well so i kind of left the main things i would use and if i save the file now the other thing i have to do is to make sure that the styles are are being used inside on the front end right so and that's why we use the functions php file and going back to back to wordpress documentation we have the code right here so all i need to do i will copy that from wordpress and back in coda inside my functions php i have to open php tag and then paste that code and let's look at that okay so we are adding the wp and queue we are hooking an action to to this action hook wp and q scripts and our action is called my theme and cue styles so let's call it playground and queue maybe not styles because i will enqueue scripts here as well but okay so this name can be changed and now we want to um enqueue dv uh dv uh dv style is the name of our parent theme oh sorry that would be no here dv style and this would be the name of our child team so let's call it playground style okay and notice we have the version here and this is important it will i will show you that in a moment but it even says here that it only works if you have version in the style header so the style header is here and we have our version of our child team is 1.0.0 okay so that's the first version and it's important because it will be shown inside the source of our website in a moment okay so we're enqueuing the parent styles and i saved both of these files okay and now back to back in the inside my dashboard appearance themes i have my web design playground here it doesn't have a screenshot so let's let's deal with that so back in comma i forgot that we can also add one file that's screenshot png or screenshot.jpg okay that's the it has to be named this way let me one second let me find my file i will upload it here playground images screenshot i'm using png okay so you see now it's it's here and it should if i refresh it should be available oh sorry let me take you back to my chrome okay i refresh the page and here we have my screenshot my childhood name version author description and all that and i can simply activate it i know i mentioned it but just so we are all clear i could create these files on my computer zip the folder and upload it just like any other theme and it would work the same way i just simply did that online on the server okay so i can now activate my my child theme and if i visit the site let's check okay my bet one second let's check this isn't right um one second let me check something real quick one moment hold on okay so that's the dv start and that's the child start let's see i think it should work let's check now i think it doesn't it loads the um the dv okay this is wrong this should be dv okay yes here in the [Music] um sorry now this is my phantom's php let's try maybe with this this also should work so let's try with this function okay i will get back to you on that because i think that should work not sure why it doesn't and i don't want to take up uh too much of your time trying to figure it out but let's just make it work with with this code so a parent handle it's dv style and we have to just change nothing really if this should this should this code should work too i refresh oh no i don't know why that doesn't work chinese time okay this didn't now it should no tv style that's odd and it should work i have functions php i was playing with earlier just let me copy that okay let's try with this oh sorry you don't you can't see what i'm doing so i just paste a different code in my let's maybe change that i don't think that should okay this is incorrect we have dv style loaded okay save that once again we have tv here that's odd why it doesn't work no okay guys i don't want to hold but i do want to know why this doesn't work so that's my i have my childhood here let's see i have my um oh okay i know one second that's my functions php i was editing the wrong file because i opened my staging copy of the website here so this is the function i was using on my staging copy and it should work and this is the functions.php from my main website okay let's refresh that one second let's try it with this once again i hope you don't hate me now that 2004 okay just bear with me we can get this to work that's the staging copy let's go back to my this one that's inside my okay okay so what do we have here parent handle that's tv style okay that's okay and child style okay themes playground that's the file i'm editing let's save that okay and now back here okay that let me refresh the page here okay so yeah we've got this i don't know why i will share the correct version in the blog post but as you can see now we have dv style i'm showing you this source of the of the website and the our wordpress site is loading the dv style css first with the dv style css and at the end it uses the dv version and then it uses the child style css and that's our css file within the playground folder and it uses our version 1.00 okay so everything loads correctly and now we can move the css from the theme options okay so i can copy it from here actually let's cut it we'll see okay i will save my changes and now back here let's open my style sheet file i will paste my my code i wrote in previous videos okay i saved the file and now let's all have our fingers crossed right let's refresh oh sorry let me show you okay once again no it doesn't work let's see okay so let's maybe try changing the version number with load the oh i didn't save the file okay sorry i just let me show you what i'm doing so here i change the version number okay i changed the version number and i saved my file because i think i might have not saved it earlier so again let's see yay okay okay and i forgot to show you okay but it didn't work this time so we are we are clear our css is being loaded if we refresh the page source you can see that i loaded the 1.0.1 version of my stylesheet and it's this one with all the code here so hooray and we can also enqueue our javascript okay and i could do that from the i'm sorry from the wordpress but let's use the thing i tried earlier so i have it here and i will explain what's what's in it so inside uh okay again here i'm here okay so again this enqueue scripts uh hook action hook works both with as styles and scripts so we can enqueue our our styles but we can also enqueue custom javascript right so if i create a new folder inside my childheme i will call it js for javascript and inside that folder i will create a new file and i will call it um playground scripts very long name but let's go with that okay so i have my playground scripts js inside the js folder and now i can use the nq function to load that javascript as well let me show you or well it's not to go into too many details but it basically that would be our name of the script the location this tells the wordpress to load it after jquery it's the dependency it depends on jquery being loaded sooner so it's important because i tend to use jquery inside my javascript we want to make it work so it has to load after the jquery this is the version number and true stands for load in a footer true or false so yes we do want to load that script inside footer okay so [Music] back here we have we have saved that let's now let's check our page source let me show you our page sort if i refresh and search for playground scripts there it is it's being loaded just before the closing body tag okay so it is being loaded and that means that i can also copy the javascript i use to add my um svg icons right so i can copy this remove it from here and this way have all my custom code in one place that's also why i like to use child themes so it's just easier for me to manage uh where i've been adding my custom code okay so inside the js file i can paste my code obviously i don't want to include the script tags here it's not necessary and inside code editor i can um i can make it look better like i can fold selections i'm not sure if it's like something i think many text editor would have this option so you see i can like fold pieces of code that i know i want to use right now and make my code a bit easier to read okay so it's just one of these nice things about using a separate software to write and edit your code instead of doing that inside the theme options okay so let's save that and hopefully i'm not sure if i saved the changes okay sorry i keep forgetting to so i sorry saved the changes here and now if i refresh i hope that everything will still be the same but it's not so let's change the version number here maybe that is the problem and let's make sure oh i didn't save i didn't save my functions php so now it's saved and now back here let's check the source again playground scripts okay that's um it's looking for that inside was this sorry i used the wrong nq function here that should do it yes oh no no no like that sorry i do need to give you the correct version of that at the end right no that's not it good um template url one second let me i'll get stash that's what i need here i need this sorry about that bear with me we are almost done let's refresh the page source playground scripts i think i okay let's see why it doesn't see that team's playground sorry okay this is what oh sorry my bed my bed bear with me guys i want this this this this only this and now it has to work my bed save that and back here now oh well i do want to get this working because i am very stubborn person yes exactly that is right the path is wrong because it the enqueue function is not correct for some reason and so this example this way an image that is sorted in them it should work get template get style sheet directory yes that's a very good question i would like to know that too let's try with get stylish it directory save that and let's look at our path now there might be some weirder direction with the subdomain i'm using i'm sorry guys i don't want to keep you here for too long so maybe let's just let's just say that it kind of worked and i will get back to you with the proper code because as you see it's it's always something first it's my microphone and then it's it's this but it shouldn't be that difficult i think it may be somehow connected with the redirection i have said on the the fact that it's on the subdomain and the www shouldn't be there i'm not sure so anyway let's agree that it almost worked i will definitely uh give you the correct version you should be using in the blog post when i upload the replay okay so let me just quickly see if we have um if we have uh some comments yes weinstein says the visual code is pretty good i agree i've i did try it and it definitely has the option to use ftp with some extensions i think you can install and then you are fine to to use the uh to work directly on the server michael says he uses a sublime text editor i know it's also very very popular i'm sure it has the same option as well so i i think we can all agree that it's much easier to work within the code editor so rather than inside the little boxes they gave us yes definitely it would be too easy right so so there's always something and you know it's basically what we do right it always the most important skill i always i always says that say that that the most important skill web developer can have is his google skills like if you can google well then sky is the limit right we can deal with with everything so it's uh it's all right i don't mind that it doesn't work like it's it's normal to be to need to troubleshoot and we have to uh you know don't get frustrated over it just part of the job i guess yes exactly it's it's friday so why should anything work right it's always the weekends that everything is not functioning how we would want right thank you rika for for joining me i'm very very grateful to have you all here yeah i did have it prepared a little bit i was testing it on my staging side in flywheel and it did work then so i think it's something to do with the fact that i'm using it on subdomain i'm not sure why it never happened to me before so i will um need to take a closer look at it right okay some someone is asking if uh there is any adventure to using dv project types instead of regular blog post types and for me yes definitely because you have basically different ways you can display projects rather than blog posts so for projects we have the portfolio module and the filterable portfolio so if your portfolio includes different um categories of projects that would be like for example web design or print design or some video work or something like that you could create project categories and then with a filterable portfolio you have a nice way to to display these projects and if you even if you're not using blog for blogging it's never you never know maybe you would want to use it in the future so i wouldn't devote the default blog post for my portfolio items but it's really it's up to you so if you are fine with using the blog module to display your projects then sure go for it but i think the portfolio module is a bit nicer nicer way especially the filterable one it's it's well it was designed for portfolio so why shouldn't we use it right okay i have i have some polish friends watching so jingku roughness versus me it's kind of confusing to think in two languages at once but thank you for joining me thank you michael and i am pretty excited about it too i think it's fun it's like you know you can uh watch someone do some coding or building website instead of some netflix show or something so so yeah i think uh i kind of like to watch this kind of tutorials as well so i i really hope it was fun and helpful even though we didn't get it 100 percent right i hope you guys uh kind of maybe learned something or if not just spend a nice time with me so i think we can continue this next week and maybe design that community page or homepage event we'll see if you have any suggestions on what should i do next then please let me know in the comments and i would love to work on that website in a way you would like me to work on it so enjoy your weekend and i'll see you next time bye you

Channel: Ania Romańska

Views: 591

Keywords: Divi theme tutorial, Divi Theme website, Building website, divi, divi footer template, divi child theme, divi css

Id: u2tWojhfY1Q

Length: 73min 7sec (4387 seconds)

Published: Mon Mar 08 2021