Web Design Tutorial, How To Make A Website For Awesome Band a Divi theme tutorial

Web Design Tutorial, How To Make A Website For Awesome Band a Divi theme tutorial

August 10, 2019 6 By Bernardo Ryan


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