Hey there, what's going on I'm Tim Martin and this is Real Website Hints.
This is a web design tutorial all about this
awesome band page that I made. And I want to show you guys how I did it, so you can
maybe use some of these design ideas in your next website. So the first thing
that I've put into this webpage was this full height header area here. So we got
this entire background image filling up the whole screen with one clear message
about what our website's all about. Then as you scroll down we've got some media
files here. So we've got some audio clips that your viewers can play with. Then as you
scroll down a little bit farther, we've got this video background section where I've got
a countdown timer. I'll show you how to build that section and then down here
near to the very bottom, I've got this bio section where I put the bio text
above the images of the different people. So a lot of fun things we're gonna learn
and I also offer this as a free template that you can download through my website
so I'll link to that down below. If you're excited about this and you want
to learn how I made this website maybe incorporate some of these things in your
website, let's go ahead and do it!
Okay so this tutorial assumes that you already have your website set up. That
you've got WordPress installed and I'm using the Divi theme. Now if you don't
have those things set up yet, I've got a free tutorial series where I'll walk you
through exactly how I did that. And I'll link to it right up here. It's a really
easy to follow tutorial series, because it's my mission to help people find the
best and easiest ways of building websites. So I'll show you guys
step-by-step exactly how to get your website set up so you can start building
a page just like this. Now one other thing is that I use the Divi theme for
almost all of my tutorials, because I definitely believe the Divi theme is one
of the easiest ways to build a great looking website. So you don't have the
Divi theme yet go ahead and check out my affiliate link down below. It'll connect
you up with the Divi theme, and if you decide to buy it it provides me with a
small commission which I use to make tutorials like this and then to provide
free Divi website templates on my website. So let's go ahead and get started
and I'll show you guys exactly how I built this website. Let's do it! Okay so
let's go ahead and get started. So the first thing we need to do is go over the
dashboard and create a new page. You go to pages add new. So now I already know
that I want this page to not have a menu at the top of it. So in order to
accomplish that we need to use the blank setting. So go over here to page
attributes, and then template. Right here. And then we'll select blank page. That's
gonna take the menu away from the page, so we won't have that on this page. And
then let's give this page a title. Alright, and then let's go ahead and use
the Divi builder. Click on use builder. And so the very first thing we already
have a section set up here. And what I like to do when I have a section
especially if I already know what the background is gonna be or at least what
the colors gonna be so I just go ahead and put that background in. So as I'm
designing that section I can see whether the text and the elements are working,
and whether they're visible or not. Just go ahead and add in that first
background image. Okay so I'm go to the section settings here this gear icon the
blue bar around it. The blue is the sections the green is the rows and the gray are
the modules. Go ahead and add a background in. Now I've already added in
the images for this, and I've already optimized them. It's really important
when you're building your website to have optimized images. So I've got a little video
on how I up my images. You just wanna make sure the
images are the right size for your website and that they've been compressed
down as much as possible a load as quickly as possible. That's kind of one
of the main things that's gonna help your site load faster, is making sure that
the images are optimized properly. Okay so I'm gonna click on the little picture
icon here, and then the plus icon. I'm using this sort of dark grey
intersection as the background. I'm going to upload image. You can see the sort of that some
of the text here's a little bit crazy. That's because on this site here I
already know that I want to use the rocksalt font as the main header font.
so I've already changed a lot of the settings in Divi to sort of match the
things I already know I want for this site. So I changed the header font to
rock salt, because I know I want to use that and I've also changed some of the
colors and the color palette so it's all automatically load for me. T hat's
something that I talked about in my full tutorial on how to make a website and
how to get started with Divi. Is how to sort of set things up so it helps you
build your pages faster. If you already have your color palette, and I have a
video on how to make a color palette I'll link to that at the top of the
screen. And so using Divi and setting it up ahead
of time if you already know what your colors are and you know what the fonts
you want, can really be a time-saver in building your website. Okay there we go.
So first row here I'm just going to use a single column. And we're gonna use an
image. And that image is gonna be the logo for our band. There it is right
there. And then we want to make sure that it' s centered. So we've got the image
alignment here. Just click on centered. And there we go. And then down below that
we're gonna add a button which is basically just gonna link down below
farther on our website, but it's just... we're going to encourage people to link down
so we'll make this top section here full height section. I'm going to show you how
to do that. All right so let's just throw in a button here real quick. And as you
can see here the button color I've changed the default color to show up as
this red which is the same red here that's part of the logo. And in this case
I don't want it to be red I want it to be white, but it's kind of nice to have
it automatically default to a color that you might want to use. Change the
alignment here to center. Change the text color to light. And then for this button
here I'm going to use custom style. So you click on button and then
custom styles. Text size, let's make it a little bit better... bigger. And the
button text color is already good. Button background color, just want to make this
sort of a translucent ish dark grey. I'm gonna go with a dark grey and then,
I'm gonna drive the translucent slider here tell us a little bit translucent
but you can still see it. Let me get rid of the border altogether. Just go here to
the border width and just make that zero. That takes that outta there. And now if you
want to adjust the curve that you have on the corner of the button you can
scroll down here to the border radius. As you can see there it's making it sort of
more rounded or less rounded. I'm gonna go with the default which is two. There something
like that there we go. And just for fun let's make the text design it's like the
text italicized. There we go. All right and now below this I want to add a
couple of arrows. I'm gonna use the Divi blurb module for that, because it already
has access to a bunch of different icons. You can just type in blurb and then
we're not gonna use any text because I just want the image. We're gonna use an
icon and use the double down arrow right here. And then the only thing I really
want to do with this is make it white. And now for this button and for the
button and for this icon here I want them both to link it down to the next
section. So under content here, I'm gonna change the
the link and I'm gonna make it #ourmusic because I already know the next
section I'm going to call our music. And this is how we link it down to the next
section. I'll show you how to set that up. Let me just make sure I do that with the
button here too. Just change the link to #ourmusic. Okay so now let's make this a
full height section. And you can and you can vary this up we can have it either
be full height half height three-quarters height whatever you want.
And I'll show you how to set that up. So we can go over here to the settings for
this section. And then I go over to advanced. Now we do need to use a little
bit of code here it's really pretty simple. And one thing I'm gonna make
really clear I am NOT a code genius. I just look stuff up and I figure it out.
So I'll show you where I learned about this code. And I don't
remember this stuff usually I always just have to look it up when I want to
use it. And that's how I sort of get around some of the things that Divi
might not offer natively. It's still pretty easy to do by just pasting in the
code right in these code sections. So for this. The code's really simple here it's
just height and then colon and then 100 VH. And you wanna make sure it's in the
main elements section if you do it before or after it's not gonna work. And
then you need to put a semicolon at the end of it, and now that's gonna make this
section take up the full height here. And then to get this awesome band logo a
little bit closer down to the middle... So what what options me you could just drag
it in like this, but I want to be a little bit more precise and make it a
little bit more flexible for different devices. So I'm gonna do is going to go
over to the settings here and then under design, spacing. I'm going to change this
padding here to 10%. Let's make it 15%. 15% there we go, and then
the bottom don't really need any so I'm just gonna leave that alone.
One thing I already know from doing testing, is that need to have different
spacing for mobile devices and tablets, and so to do that you just need to click
on the little phone icon over here and then you can set up the different
padding for the different devices. So let's make this 20 for tablets just just get
it down a little bit farther. And then for smart phones let's make it 30. And
then you want to just keep testing this and make sure that it looks right and
works right. And you might want to change like for example, the text size here on
this button, and you can do it exactly the same way just by using the little
phone icon. Okay so let's go ahead and work on the next section down here. We're
going to do + to add a new section. A regular section and I'd start out with a
single row. And the first thing is gonna be actually the first thing I like to do
is just put in my background image. What I want to have is I want to have a
gradient. Divi has a built in gradient feature I'm going to show you how that
works, but I actually want to do a slightly
different designed gradient feature. So let's go ahead to content, background and
then this little button here allows you to create a gradient. See? You can just
do gradient plus you can select a color can
see here I've already got my color palette in here already. So I'm gonna go
with dark purple to black. I actually want to go the other way around
black to dark purple whoops black to dark purple, but what I want
this gradient to do is I want it to go from black to purple to black again and
that's something that you can't do in Divi, but I'll show you a really easy way
to get the code on how to do that. So let's go ahead and do that right now.
So again as I said I am NOT a code genius, but I am pretty good at finding
ways of figuring out how to do the code. So I found this cool gradient tool right
here. It's a gradient generator, and so you just pick your colors so on the
outsides here, and you can... You've got all sorts of different settings here.
We've got orientation you can show the size the. Size just gives you an idea so
you can see an idea of a preview of what it's going to look like, and then you can
move these sliders around and all sorts of things and you've got all these
custom designs that you can do. I sort of already like the default designs. I'm
going to go with that. So I'm going to start here by making this color black,
and then I'm going to do the same on the outside here. And the code for black is
zero. And in the middle I want to be the purple from my from my color palette so
I've got my color palette here so I'm gonna copy this color over here. Alright,
it's gonna make the first middle that color make the second middle that color
also. I might need to adjust that as I bumped it over a little bit, there we go.
And then you can sort of adjust these things and I'm gonna drag these into the
black so it starts a little bit sooner. It might be a little bit hard to tell but
the black sort of move as you move these sliders in it makes the purple section
shorter and the black section bigger. And then I also already know, because I've
already built this page that I'm gonna slide these sliders downs that are a
little bit more down towards the bottom of the section here. Then all you got to
do is just copy this code here, and then we're gonna paste it into the background
code here. So go back to the section settings and then under advanced custom
CSS and then main element and then just paste that in.
And I think I actually I have to get rid of that background they added here. So
just click the trash icon there we go. So, now you can see that it's got that code
that I entered in. Now as you're working on it you see that the code doesn't
quite match what you want... You'll see under the advanced section here custom
CSS that you've got a link right here. Just highlight it right there and that
link, links right back to that page so you can sort of just adjust that
settings without today without having to go back and enter everything back in
again. So it's really convenient. Okay so there we go! We've got that let's go
ahead and start adding in our modules. Text module here,
gonna make this an h1 tag, as you can see the font is already defaulting to the
default font that I set it up as which is the rock salt font. I think I want this
lowercase. Alright, and then we'll go over here to design. We'll change the text
color to light, because we want it to be light and then it's a header text so we
need to use the header text thing. Set the alignment to center, and let's just
change the size. Someplace right around there, and then underneath this we just want
to add a divider module. Just to give it sort of an underline. You do show
visibility, yes, and then under design we've got sizing so we can change the divider
weight, or how thick it is. And make it three px, and then the width want to
bring it down a little bit, and then we want to center it. Let's bring it down
something like that like 50 - 51 % something like that. So it's the
percentage on either side that it's going to be. Now let's just clean up the
spacing a little bit so the margin doesn't and the spacing doesn't really
do much on the divider, but on the text it does so just gonna go over here to
spacing. I'm gonna make the margin on the bottom a little bit less, maybe just go
with 5, and let's go with 10 so it's 10 px. There, and there we go. For the next
part I'm going to add some album covers that I've created, and I use created those
using a really cool tool which is called canva. It's a great way of getting design
ideas and if quickly designing graphic
elements, because basically they give you a bunch of different layouts for all
sorts of different kinds of formats. And then you can just enter in your own text
modify it. Add the images that you want, it's really easy and really love using
it, because it makes it look like I'm really good at designing when actually
just really good at finding cheats and hacks. Okay so for this next section I
know I've got four music files and four album covers that I want to use. This is
one of the things with Divi that I really love is the fact that you can see
what you're doing as you're doing it. Sometimes these little bubble modules,
like this one here , it gets like right on top of the other one. Usually for me what
works is sort of just fidgeting with it until it gets... There or you can always
click on this three dot icon here, and then use the wireframe view and then you
can just add a new section. This way it sort of alleviates all of that. It's
really easy to go back, and you just click back here and there you go. So
these album covers I made, are images, so just add an image module. It's got a
scroll back down here and I've already uploaded them and optimize them. So the
first one is this one here and then, let's go with the design. Put a border on it,
just like that. It's cool. And then I want these to be a little bit bigger I want
to kind of spread it out a little bit. So in the row sections here, I'm gonna go to
the settings for the row section your design and then sizing. And then you use
custom width set this to percent and 80% is what I liked and that's kind of the default.
Let's just go ahead and set that. So you can see it allowed this image to get a
little bit bigger because it's got a little bit more space around it, and sort
of spread everything out. And now let's go ahead and add the player module below
this. So we've got an audio player module, it's part of Divi. You can see it's
defaulting here to the default color I have. We're gonna change that in just a
minute. We're actually gonna make it a little bit transparent just to add um a
nice element here. And you'd obviously want to put in... you obviously want to
put in the actual title name and artist name, but just for this demo I'm going to do it like
this. And then you need to put in an audio file so the player shows up
so I've already got an audio file here. There we go.
Okay let's go ahead and change the background of this, and I just want to
use dark gray, gray color again. Let's go with, let's try black actually, and then I
want to use the transparency slider just sort of make it slightly transparent. So
you can see it's make it a little bit lighter. No, let's go with black and then
use the transparency slider. So you can kind of see some of the gradient behind
there. And then let's add a border around it. And I'm going to put these two
together so that it looks like there one thing. I'll show you how to do that right
now. So here we're gonna get a border you can add a white border, BAM, automatically
happens. And then on the image module here let's just change the spacing below
it to zero, and there we go. Now it looks like it's all one piece even though it's
two. And then the one thing you might want to do just to make this easier to
read since it's kind of small font. Is just in the design here the title text
you might want to change the font to a more uh, easier font to read. That's sort of
that's sort of up to you there and then since we have four of these the easiest
thing I find to do is to just copy them drag them over them because everybody's
gonna retain all the settings that you set the border just all the different
settings that you have and then you just I'm just going to do this real quick
okay now all we've got to do is just change the images so that matches the
other album covers that we've got
all right there we go sand I've got a cool section here where our band can
show off some of the music that is created and obviously you'd want to
change the tracks down here okay let's go ahead and add in a section that's
gonna show off the events that are coming up for our band gonna add a new
section add a single row here and then again I want to add in my background
first it's gonna close that section settings and the background we're going
to use for this I've got a star background a lot of these images I got i
got from unsplash unsplash is a great resource or you can find free images
i've also got a whole blog post on my website where i talk about different
places you can get free images so on this website actually got some of the
free images from unsplash and then some of them I got from pixabay so those are
some two good resources to add some great-looking images that will help your
website look better all right so for this the background image I'm gonna add
is sort of the star background and now you can see here I've got two different
star background images and there's a little bit hard to see because they're
small thumbnails but one I found was a little bit too bright so in Photoshop I
darkened it just go ahead and upload that and then I'm gonna add in there we
go so I'm gonna add in a header for this
section and I'm going to use the basically the same font and the same
divider here so I'm gonna copy these and drag them down it's one of the great
things about Divi it makes it really easy if you've got something you've
already done to just copy it and drag it down if you find it hard to drag it down
using this method you can always go back over here to the wireframe method and
it's a lot faster and easier to do it that way so there we go so let's go back
to our desktop view here there we go that was nice and easy and then got
three different posters that I made again using canva and I'm going to sort
of highlight those as events that are coming up for our band
all right there we go and then down below this I'm just gonna add a little
heading and I'm gonna make it kind of fun by adding we can use a blurb module
and we're gonna sort of animate these into you have the title I'm gonna give
it the title of the name of the poster and we're gonna deal with this here in a
moment and I also want to change this font but we'll do that in just a moment
here and then for the content I'm gonna put in where these events are happening
okay so there we go and then we want to use a icon here it's going to use this
up arrow icon that's the color that I want it to be but I want it to be on the
left hand side let's go ahead back here to design image an icon icon placement
left and then let's do an icon font size that we can make it bigger something
like that and then the header text let's get a different font here and let's make
this a little bit bigger do a center alignment and let's change the text
color to our sort of hero color here there we go and change the regular text
color to light so it's a little bit easier to read on that dark background
let's change the body text size make that a little bit bigger a little bit
easier to read also and let's just change up the text there's not this big
space here sometimes got a push shift and then enter to get that spacing a
little bit tighter like that this - all I did was just push shift and an enter
and you know what let's center this text here they can't center it here or you
can go to design body text and then center it there either way it works
alright cool and then let's I don't know if I talked
about the animation on this if you over here to design and then animation you
can have the whole thing animate in just like this or we can have the image icon
animate in someone just have it just like that so it just bounces in a little
bit just draw us a little bit of attention - it's kind of fun and then
under this I'm just gonna add a quick description of the events paste this in
right here go and we'll just change the text color to lights again so it's
easier to read and now I want this to line up underneath here so what I'm
gonna do and do that it's gonna go over here to
spacing change the left spacing to 50 just like that all right and there we go
and then to add these to these other posters I'm just gonna do what I've done
before which is just copy it paste it and then just change the text as it
applies I'm just can go ahead and do that now and then just fast-forward
through this real quick
okay there we go and then to add a button down then below this case there's
another page here for a full calendar so just gonna put in a button real simple
real easy and then you can add the link to whatever page that you made just add
that here under link design lineman Center let's just change the button text
color to white there we go all right cool
so the next section I'm gonna highlight the next concert that's coming up so I'm
gonna have countdown timer to it I'm gonna show you guys how to add in a
video background let's go ahead and work on that now the key here with a video
background is you want to make the file as small as possible you wanted to be
really small so that means that your video is gonna be a little bit blocky
it's not gonna you're not trying to make you know the best looking high quality
like cinematic video resolution and it's not what's important what's really
important is sort of the idea of the video and making sure that it loads fast
so your viewers actually get a chance to see it okay so let's go ahead and add
that section in here alright so we're gonna create a new section for this and
one thing that you really need to keep in mind with backgrounds in general but
particularly video backgrounds is that because Divi is a responsive theme and
what responsive means is that as you drag your website around back and forth
the width of the frame is gonna change so whatever is important in your video
or whatever is important in your background or image really needs to be
down in the middle because you your viewers might lose the edges of the
video as depending on which size window they open it up on what size device they
open it up on another thing is that video backgrounds don't tend to work on
mobile devices so that's something to keep in mind if you have a mobile device
you probably want to want to provide just a still image background for mobile
devices okay so we've got just a standard row here
and again I want to put in my background first so we can see it so let's go ahead
and do that so here we're gonna use background and then we're gonna use this
little play button icon to add a video background I've already uploaded this
got a couple of different options here I have an mp4 video but there's
cover a couple of other options let's go ahead and upload this and I so you can
see here we've got the video length is really short it's just 15 seconds and
then the size is also really small it's 971 kilobytes so really small so that
it's gonna load fast and Beall the place that our viewers are gonna be able to
see it go ahead and upload the video there we go and unless you to do a
little preview of it if you want to it's got our video in here now let's go ahead
and add in some texts
okay and the next thing we're gonna do is going to add in this next thing we do
is we're gonna add in this countdown module so it's gonna set a date here at
a time that sounds plausible so go with Saturday the 9th and then make it or
something like that there we go and go back to the front end here
and let's go ahead we think they'd really like about working with the Divi
theme is that on the elegant themes blog it's got a lot of tips and tutorials on
how to style and use their theme and you can see a lot of cool ideas one of the
things that I found was a way of styling the countdown module and so I'll link to
that down below and you get all got to do is just add in a little bit of code
and it gives you a completely different style so let's go ahead and check that
out first thing we want to do though is just
change a couple of things here on the design of this let's air where is it
should be down here background don't want any background color at all so just
click no and then for the number text want to change that fonts here and I
found this font special elite that I like there it is
so I thought that was kind of fun make it a little bit bigger here and you know
what I just before we do anything else make sure it's centered I'm gonna give
us selves a little bit of space between this and one above something like that
okay there we go now so instead of having these colons in here want to have
lines as what this tutorial have found on the elegant themes blog where she's
gonna show us how to do so here's the blog post scroll down here they sort of
explain everything how to do it but basically all you got to do is just
scroll down it's a lot of other things they're talking about here scroll down
find this code here and then just copy it and paste it in so just a couple
things that they're doing here one is that we're gonna set this custom
countdown five is gonna be what we're gonna call this section or what the is
we're gonna change this I think we're gonna change the idea of this so instead
of putting it directly into this section we're actually put it into the
entire page thus custom CSS code so I just add in this CSS ID here and then go
back to that then we're gonna copy the rest of this code here I'm gonna put
this on the main page custom CSS so to do that you just scroll down here to the
bottom click on this click on click on the little gear icon click on advanced
let's just go ahead and add this custom CSS in here then I copy this again there
since we've got that for this module and then I'm gonna change no actually that
should have worked so we got to change the class I put this in the wrong place
this is why I am NOT a coder there we go so put that in the class don't put it in
the ID and then you can see here it's completely changed the colons in two
lines so that's really really handy and kind of fun and then just add a little
bit more spacing below this just it's nice to have a little bit of extra space
around the things we're working on there we go and then the final thing I want to
do is just add a biography section and I just remembered that I did forget to
tell you how to link that button let's do that first how to link this so it
comes down and links to this section here it's really easy all you do is you
go here to the gear icon for this top section go to advanced CSS ID classes
and you give this our music and that's where to CSS ID for this is gonna be and
then if we save it should be able to just click on this button there we go
and you can see how it jumps down like that if we publish this page and we exit
the visual builder and you click on the button it's gonna get kind of a smooth
or roll down so you get that nice sort of smooth roll down there so that's how
you do that sorry I should have mentioned that earlier alright so let's
go back and let's do this last section where we're gonna do a biography of our
band and a fast-forward through a little bit of this you already know how to add
titles and copy and drive things around so it's gonna do that real quick and
I'll just show you the exciting parts
okay so now one of things I want to do is we've got this tech section but
obviously it's really hard to read even if we made it light it would be a little
bit easy to read but there's a lot of distracting aspects to the image that's
behind it so what I want to do is want to make I want to make the background
white just for around the text so it's pretty easy to do we just go to the
settings on the text here okay so I'm gonna go here back to the content area
and background and make the background color white then we need to add some
spacing around it so it doesn't look quite so bad I'm going to add a custom
padding which is gonna give us a space around the text that's gonna maintain
keep it white it's gonna do 3% all the way around and this is something you
know you might have to play with until you find exactly what you what you like
and I'm gonna add a little bit of margin between the section above so we've got
some space between the biography and the sections I'm going to add top margin of
10% just like that there we go okay so the next section we're going to add this
kind of cool effect where we're gonna have the image of the artist and then
the text is gonna sort of like overlay in front of it and I think this is a
really cool feature it is definitely kind of an advanced coding feature it
shouldn't be too hard to do but I have had some times or it doesn't work and I
don't really know why again not a code expert but 90% of the time it works but
if you find it frustrating if it doesn't work you might just want to try a
different technique or a different visual way of doing this let's go ahead
and dive in and I'll show you how I did it on this page all right so to do this
we're gonna add a new row because we need four column width here and the
first thing we're gonna do is add an image module for the first section add a
sort of biopic here's gonna use this one here first image what the pictures to be
a little bit bigger on the easier easiest way to do that is to make this
row a little bit wider so again I'm gonna use that
80% that I like to use let's go over here to settings design sizing custom
width set of pixels use percents automatically you can see the image gets
bigger make this image stand out from the
background I'm gonna use a border turn the border on right there
okay so an ad in a text module here go ahead and paste in this text
okay so again I want to have the background here be white so under
contents backgrounds color whites and then the spacing here is kind of what's
gonna allow this to be in front versus not in front so if I go over to spacing
start out with custom padding to get some white space around this it's gonna
do 10% all the way around and then the margin we're gonna make it 20% on top
just to give us a little bit of space sort of move it down below the top of
the image here and the left we're gonna use - 60% now key thing on this is that
this works great on desktops it doesn't work so good on mobile devices so my
recommendation is that you either make another section or make either make
another section or another row that's designed just for mobile devices I'll
just quickly show you how you turn on and off a section for mobile versus
desktop okay so that that's got us the effect that we want it's gonna be a
little bit different on the other side I'll show you sort of the official
technique that we need to do but first let me show you how you set up either
this I would actually do a whole new section for mobile just so you can
really design it with mobile in mind but what you do is you would make a new
section a duplicate section here and then on this section here click on the
gear icon you go to advanced and then visibility and then you disable it on
phone and tablet and that way it will only show up on desktop and then you'd
create a new section maybe just copy this change it around so that it looks
good on phone and tablet and then disable that on desktop okay so back
here so we've got this sort of overlapped section here and and then
let's do the other side so on the other side do a new text section
when it's put in that background color and all those other things okay and I'm
gonna add the image first before we try to overlap it and we're gonna have to
definitely have to add in some custom code here you might have to add this
custom code in on the other side if it's not working for you I'll show you how to
do that and where I found it and it's just add the border around it's a little
bit easier to see you go okay so to start the overlap we need to use that
negative spacing feature again so this time right over here sign right sizing
spacing top margin we're gonna bump it down again 20% and then this time the
right we're gonna do minus 60 percent so now we've got the overlap but it's going
the wrong way we've got the text behind when we want the text in front so to
make this work what we need to do is add in some custom CSS so you know go ahead
and paste this in here so what we have here we've got position:relative this is
one of the functions that you need to have in order to make this work as this
position function and then underneath that we've got the z-index and so that's
the height so one should work I just put 100 because sometimes the one didn't
work and then we might want to also put in the z-index if it's not working you
might also want to put the z-index on the other side and make it either minus
one or zero just make it a lower number for the
image so you go under design advanced rather custom CSS and then make this one
just another number so that it goes down below now the best thing to do here is
you want to just duplicate this entire row so you don't have to deal with all
those settings again and then just paste in your information for your other band
members I'm just gonna go ahead and do that right now just fast-forward to it
so you can see how that works
okay there we go so that's pretty fun section let's add a little bit of
spacing around it below it can either just drag it here you can go into the
settings and maybe add a percentage if you'd like to do that whoops I don't
know what I didn't mean to do this twice it's just delete that's okay there we go
okay well I hope that you enjoyed this video if you did give it a thumbs up if
you have any questions be sure to leave them down in the comments below and if
you have any suggestions for new videos leave those in the comments below also
and for more tips tricks on how to build your website as easily as possible be
sure to subscribe to my youtube channel and visit me at real website hints.com
thanks for watching
For more infomation >> Dallas Cowboys Safety Blitz Team America Tee - Duration: 7:07. 
For more infomation >> Hello, Birmingham - Duration: 7:59. 
For more infomation >> SHOPPING PER LA CASA!! #1 - Duration: 5:39. 
For more infomation >> Officially Licensed NFL "Wayfarer" Sunglasses - Duration: 4:48. 
For more infomation >> Officially Licensed NFL 102" x 90" Raschel Throw Cowboys - Duration: 11:15. 
Không có nhận xét nào:
Đăng nhận xét