In today’s ticker . I’ll show you how to customize the Vblock module like a boss so here is the final design. we are aiming to achieve so let’s dive in and let’s get astern.
so first I’m taking here a block module and going to design tab. so here I’m going to layout and from here. I’m just changing it to quit layout okay . so this is the default design from DP here is by default three columns layout. so here I am going to change this basic East. I’m just going to changing this title here. I’m changing this font family to mom set up alignment to Center and depressing these font size – okay so 90 pigs in color two three three three.
okay okay looks good and then I’m going to content again and type in here lost count two seats or now I’m making its part length 255 word. so how looks like we can increase to 65 okay so. so now I’m going to change this for this time so yeah font family using same for once. Sara on to it to light and concise so here are decreasing font size to 14 pigs in on this okay . I’m leaving it in going to here. here I am changing the font family and using here something different and increasing the font size a bit a and going to eating our each model. and here I am making a text a negative center. so you look better now and and what this design. I don’t want these auto name here. so I’m just going to element and show Auto. I’m just switching off okay. now I’m going to change the date format here. so I’m going to again content and from here yeah. we can change our date format so. I am changing this date format okay so here is passed it and then month in short fun yeah. we can change our line height one game okay looks better then I’m going to customize this image.
so first I’m adding some border so this join with four pigs in and color to white and here I’m going to change our section background color.
so our images we focusing on this section. so I’m going to change the background color and add in your background product to something lighter. so I like to have white and again go to our row settings and from here. I’m going to design tab and going to slightly so here. I am decreasing our got a week to three to two okay so our spacing between posters is now decreases now. I want to remove this border. so I’m going to water and making it 2-0 and instead here. I’m easing box-shadow vertical position increasing nicely and using large strength and going to decrease it yes . it’s better and you can increase this border size bit more now. I’m going to add some whole body fit what this image and clicking on the image and going to blur effect so for this. I’m just going to add some life 8:01 fixin to fix in okay and I’m clicking on this icon and clicking on this over attend now.
I am defusing this to zero so when you hover on this image opacity or no effect will be normal and normal instead. I can see some larger picture and again you can add some image saturation effect in this inner way so and keep it to saturation 5% and almost it and just making it two hundred percent okay so just looking better there’s going to save it next time. I need I want to make this area to overlapping with this top section so. I’m just in and just now overlapping with this top banner. I’m going to save it and check it now how to apply it.
okay so it’s look great here is also image over effect it’s also nice perfect now I’m going to do some more.
customization here but these . I have to add some CSS code so first. I need to remove this spacing here is so much spacing so. I’m going to inspect element and from here. we can see here is the margin below our image I’m going to grab this image and here. we are going to decrease margin margin bottom.
we can see marching bottom here on the d30 pigs in so we are going to make it 10 pigs in and the important are increasing to 15 thick them is okay I’m going to copy this CSS yeah taste it your custom CSS options from DV. we’re going to save it changes next. I want to move this debt from here to top area so this. I’m going to add in this element here. I am going to grab these last names and what on post adding see this position to unity saving the CSS and now . I’m just grabbing this Ted from here getting this class name and adding some CSS here so first. I’m going to add in see this position to absolute and top one top area and on it type. it’s in and adding some background color to TTT the color white and here. I’m adding some adding 5 8 pixel increasing the font size to fit is okay now. I am setting some wheat here 200 pixel will be less yes it can be 65 . it then looks fit and adding some line height to 1.2 in just one a and some border one pixel just try with double.
now I’m just making it you talk more lips hey look much better now.
now I’m going to say this is this here we can see a line between this meta tag so. I want to just remove this by using thesis as you are only now category. so I’m going to remove it, but this time I have to apply some freak here so . first I’m going to grab this category class so. I’m adding here display blog and matching top.
– much in here now and round color matching with this content background color white and add in some position to unity okay now. we can see this line just hiding here.
so it can copy this thesis to save it okay. now I’m going to face it again yes so you have done one more thing. we can also expand these resonation from here so. we can also leave it I’m going to add some similar font color here here and using.
singing that font using similar text color okay. so it’s now Samina with this blog design. I’m going to save it and deface it again so here is all for today.