Zion Builder: Building with WooCommerce Part 1

what's up everybody patrick from wp builder helper and in today's video we're going to be building a woocommerce store with zion builder we've already built some woocommerce stores before but now we're going to build it with zion and we're going to take it through and we're going to go through and i'm gonna walk you through each and every step i'm gonna try and not make these videos too long so let's get started what's up everybody so let's dive into this and let's go through it so first off i want to mention um something specifically i'll probably so i use crello uh to make the logo just because they had an easy logo maker generally i like glorify app or something like canva better than this because there's a lot of things that this is mentioned uh missing but you know that's my own personal opinion you can feel free to use whatever you want to when you're building your website also use jump story to get most of my images because jump story just has a really really good deal so i use them and then i use tiny png just to compress them um could have used probably something like short pixel or whatever but i wanted to use tiny png anyway because it just does a really good job of compressing and so it's just a basic website anyway we're not doing anything crazy with it uh on the back end in the settings tab of uh zion let's go in and look i think it's in this portion i did have some fonts that i've used because this logo that was originally set up uses uh naruto i'm gonna keep using that in naruto's hands for the body so this will be the headings that'll be the body i don't have any custom icons i don't have any permissions templates tools um i think in the general settings i was going to say i thought that i had somewhere it might have been in tools no it might be in system info i don't remember where i put it somewhere i've got some global colors uh i couldn't remember oh there they are so they're right here so these are the colors that are taken specifically from this logo so i'm just using the same colors that they use just to make it easy just makes the whole entire process a little bit more easy rather than hunting and pecking for fonts and colors and things like that as we go through it if i find other colors that i want probably white black things like that um i'm gonna add them here just so as we continue to go on like i said it'll just make it all easier so with that said let's get started and the first thing we're probably going to want to do is go to the theme builder and let's grab a header and a footer so we're going to add a new the entire site well this is for i'm sorry we're going to click right here add new component and we can go in here and we can edit and i'm also using like a default theme so there's no special theme with this just a very basic theme and from here we're going to go to library i like building when i'm building something that's basic like this i like building it from scratch using library items unless i'm doing something custom for somebody then i'll go through and i'll do something custom but for this i'm going to go through and just build it with library items because most of the library items that they have are really work quite well and i think i want to keep it like that so this one looks pretty good i'm not sure if i'd like that one i think i want more of this one because i want there to be a big giant image i don't know we might have to play with this let's can i preview this item so let me preview it first yeah i mean besides the colors being ugly i don't know why they have these lines either i think the lines you could do without having these borders they almost look like it's weird the borders almost give you the illusion that they're gradients but i don't think they are uh i don't mind this but i don't like all of that i don't want to go through all of that i mean that's not i'd rather just go with a basic so there's this one in this one and the only difference i can tell with this one is that this one's two let's go with this one let's go with the pro for this one let's build it with this and if i have to move me i will move me down to the bottom right here just to just to make it easier so let's see how they have this set up so we're going to go in and delete the social icons because for me we're not using any social icons for this and the logo is i believe a text logo we're not going to use that uh either although we probably should insert our other logo that's in here so let's pick an image image and let's go in there and select it and i think we can choose dynamic site logo but i don't know if we have our yeah see our site logo isn't set up so typically we would want to go in and we want to do that so for right now not gonna set it for site logo i'm just gonna go in here and pick city one and then once again i'm in the way i love when i get in the way it's such a pain in the butt when you're moving everything around that logo is a little bit too big so we're gonna shrink that down but i think we can just dump it down to about that maybe that um that still seems a little bit tall for what i want but i think that's because of the margin that's in here there's quite a lot of margin that's in this base so let's go in and let's edit this and let's change the margins should be in wrapper sizes and spacing you'll see it's got 30. let's change this to something like um let's change it to 10 maybe let's see if that works i don't even know do you have to put in pixels oh you do interesting so it didn't even see the 10 i noticed that it wasn't making hardly any changes it didn't see the 10 until i until i basically told it 10 pixels so that's pretty good to know and then this is fine i don't have any issue with this i do want to change the color of this because i think i want to change the color of this too i'm not into this color so uh i think that's first level menu items and then typography and then we're gonna choose one of our red colors okay and then go back in here and you should see the mobile we could look at the mobile just to see it let's see what it looks like so on mobile it just looks like that which i'm fine with i don't i don't have an issue this logo is still on mobile it's it's a bit too big i wonder if i can set it for a custom height and width i wonder if i could set it by percentage like can i just set it to a hundred percent and a hundred percent probably can't but yeah i didn't think that that would work so in order to style that that's not the way i wanted i don't want it custom but 150 is just entirely too big i wish that there was a way that you could style let's see let's look at image styles um and then we'll go to size and spacing and height and width so this might give me the ability ah this does so this is what we want to do we want to do with 100 and can we set that to this so maybe let's drop this down that's a little bit too small let's go 75 i don't mind that and then height 75 and we want to go with percentage two okay that's not bad it's better than it was certainly it's not bad it's and then is it still at that no it's not okay perfect so you can set custom style so i'm fine with that i don't have an issue with that let's change this button uh they do have these hover effects let me go back in and change the hover effects oh here we go so the place that you want to go to to get to this is actually right here it's hover there's before after active focus and all of that but hovers where you want to get to where you can see this other color so we're going to set it to red so that upon rollover i'm sure we'll have to exit out of this in order to get it to work so upon rollover it'll turn slightly red although you don't hardly see it but it's good enough for me for right now because it doesn't have to be anything crazy um this button i tell you what is bothering me let's look at this let's just select this from the button it's sometimes grabbing the elements um are not as easy as they could be so this tree paint this tree pane comes in quite helpful so in this we're gonna choose a background color i think i want the darker color instead even though it's it's mild of course we could do like a gradient um i don't hate that idea let's see if we can make our own gradient type so let's see so you have to select two colors so we would select this and then this it's very very subtle it's weird the red is i almost want it like that because it's so subtle that you can't even see it but at the same time can we add this to our can we add this red okay cool we're going to add that red so now we've got like three different types of reds and we might go back and edit that menu just to have an extra red that we could use but i like that and then we'll go back in and we'll go to the button we'll go to button style default hover and then on the background for this i just want to make it turn a certain color so i think just plain red is fine i don't think we need to do anything crazy it's probably not going to show in this all right so we're going to go back here go back to the menu tell it to edit because i screwed up on the styling change this back to hover and let's go with a darker red let's go with that i like that a lot more so now yeah it's you can kind of see it a lot more there's just a little bit more contrast there and i like that so that's perfect and this would essentially be our header it doesn't have to be anything complex um although we don't want to get in touch for this i don't mind the rest of this although we're going to add stuff to our menu items so it's kind of give or take i'll deal with the get in touch a little bit later when we go deeper when we go into a deep dive into it but so far i don't mind this this menu item though is a little bit funky the way it's set up uh mobile menu submenu indicator let's see what this does even let you see what this looks like it's kind of hard to click on yeah i can't click on it i have to go view it in the the front but that's all right that's not a big deal i could go into here and start looking at the styling that they have so i think mobile menu trigger is this and [Music] not sure if color makes a difference with this oh it does okay so we kind of want that for our mobile menu and then on hover we want to stick with the same type of uh same type of theme like we want it to go a little bit darker and then from here we're going to go mobile menu wrapper but there's not anything in there sub menu wrapper so we're going to see we're going to see where this goes there might be some stuff we have to adjust we'll adjust it on the uh the back end after we kind of look at it and see so from here we can go to save and publish page and then um and then we can close this component and that looks good i'm happy with that let's go to the footer let's edit the footer so we're building the whole point of this is we're building a whole entire woocommerce basically uh page with this and if you're somebody who's new to zion um just be aware that right now they are doing a special promo that is on the woocommerce that's on appsumo store so if you're somebody who's interested in getting zion i would highly recommend you take a look at it i bought it i think it's a really really good deal for what they're um what they're charging i think it's fair and i like the way that they're doing what they're doing it's um it's really cool it's neat to see businesses that kind of come out and they listen to their communities so if you're somebody who is thinking about getting into zion definitely if you're liking what you're seeing you're like hey this looks pretty neat definitely take in um you know do that take and jump in and take it for a ride and see what you think about it i know that not everybody it's not everybody's cup of tea but for me i've so far i've enjoyed it a lot it's got a lot of functionality and things that i really really like about it so this line above here i'm pretty sure i'm trying to see where that's coming from or anything that's there these are the only things so the green light here basically is telling you that there's something that's been touched by this and everything else is not so as you can see this hasn't been touched the border shadows the display none of that and so this is a bit different from your standard builders because your standard builders this is like more of like a traditional cms type builder where you're actually looking at the styling that you would from uh cms itself and it's pretty neat it's got a lot of different options that are in here as a matter of fact it's really really powerful if you're if you're somebody who can take and wrap your head around how some of this works then you're not going to have a hard time at all figuring this out this is also one of my favorite things that they've added this little column feature where i can go in and i can select here there's so many ways to get to what you want to get to i'm so used to the elements are old school where i typically want to click the toolbar but there's other ways that are more efficient like this and i've always thought that that's pretty cool i like the way that they did that um for the most part i can leave this alone i'm going to come back to this and see they've got like a styling something is stylized with this where it's got that little line on top and i'm sure i'll figure it out but i don't want to waste you guys time time is essential so this looks good for right now i'm going to go back in and i'll change up the contact info or whatever but i just wanted to make this very basic so we're going to go to uh save and publish and then we're going to close this out and now you can see we've got our head and body and footer saved well we don't have a body yet but we're going to have a body so one one thing to note always save your stuff and then if we go to the pages you'll see we already have some pages that are in here most of these are from most of these are from uh actual shop page from woocommerce but as you can see i was kind of playing with some things so we'll add in a new home page because we're gonna need a home page and we'll just call it home see once again it looks like there's it looks like there's a customization if i had to guess it's on the h1 because you can see right here it's got the same thing so if i had to guess there's somewhere in this i bet you i know what it is i bet you i know what it is so we're gonna go back to dashboard i know what's causing it okay i know what's causing this at first i was confused with what was causing this but i bet you i know what's causing this it's coming from here it's not coming from zion god i hate that see and that's one of the reasons that for me it's just easier to take and go with something like this because i'm going to install bloxy because bloxy doesn't come with that pre-styled that comes with wordpress i hate when they style stuff one of the things that you have to remember is that that should not be there um let's close that out um one of the things you have to remember with themes is they come with their own css and all of that jazz and sometimes those themes can put in their own stylings so here i am being an idiot thinking that it's actually zion and it's not xy on its box it's uh it's the actual default theme from wordpress amazing absolutely amazing so now if we go back into that page i'm not going to have to go full width and do it the way i was doing it i'm i'm just not going to have to do that because bloxy's a better theme overall so you don't have to worry about that i will have to change the background color though because as you can see this uses a default of like a gray and i'm not big on that whole entire gray but let's play around with this and at least get started because i know that you guys are interested in seeing what we end up doing let me move me over to the side over here and let's go to library again because like i said i'd rather go through the library and let's go for the hero headers and let's look for something so the thought process is we are building a winery obviously just looking at the logo it's a winery and so we want something that's pretty cool looking but it doesn't have to be uh obnoxious it could be something basic what is this blue ui oh these are some these are some different ui things it's weird there's there's some different there's home pages that are already here although this is a basic homepage i'd like to see more stuff from them like see some more stuff put out this isn't bad i mean this it's weird the way they did it was one green and ones are they the same exact thing but just one's green and one's black not exactly sure that's weird so that's not coming up let's go back let's see what this does does this come up nope that's not showing it coming up either which is a bit strange so let's start with something basic like let's get this like i like this even though this doesn't look like something that you would normally pick because we're going to go in here and we're going to change some of this out i don't think we need a computer let's grab a bottle of wine i think this one has no background yeah that one has no background let's add that wow that's a big bottle of wine let's set it to medium thumbnail nope nope okay let's set it to full and then go into image styling and like we did before max with okay wow um let's change the minimum width let's change the minimum width not to that because that seems scary bad um let's change the minimum width to [Music] something like that well we could always do like this but then that looks funky with the background it kind of looks like this still has a background on it i was almost sure that it didn't but it looks like it does let's go to view do we have view with so that's it but this looks like it has like a background or something on it and i don't want that i want something like maybe that let's go with this and see that still looks like that has a background on it too even with the styling so [Music] might end up having to play with this to get it exactly how i want it although that's pretty close i mean that wouldn't be bad i'll just have to crop this out which i can do inside of anything um so i can do that so i tell you what even though we haven't gotten very far let's stop right here i was worried about this being too long we'll pick it up in part two and part two we're going to be doing some major things working on the home page getting everything set up woocommerce is already set up on the back end i'm going to save this page just so we know but woocommerce is already set up on the back end i'm going to do some customizing so that everything looks nice and pretty and we don't have anything that's out of place and then we're going to go from there alright so i will pick up in part two which will be coming sooner than later thank you guys and i will see you guys next time [Music] you

Channel: wpbuilderhelper

Views: 611

Keywords: page builder, wordpress, zion builder, online shop, woocommerce wordpress, woocommerce tutorial

Id: 3eM4KdSaCQw

Length: 24min 15sec (1455 seconds)

Published: Mon Jul 19 2021