How to Build a WordPress Website Using AI - Lesson #07: WordPress Page Building

00:57:03
https://www.youtube.com/watch?v=sfjBWUeWypY

Resumo

TLDRIn hierdie video word jy stap-vir-stap gelei om 'n WordPress-webwerf met 'n professionele tuisblad te ontwerp. Die proses sluit die installeer van die Generate Blocks plugin, die opstel van kategorieë, en die uitleg van die tuisblad in, insluitend 'n hero beeld en kategorie voorbeelde. Die video beklemtoon die belangrikheid van 'n gestructureerde benadering en moedig aan om die vorige lesse te volg om 'n goeie basis vir jou webwerf te skep. Die les eindig met 'n vooruitblik op die laai van werklike inhoud.

Conclusões

  • 📚 Stap-vir-stap begeleiding op die pad na jou webwerf.
  • 🛠️ Begin met die instel van die Generate Blocks plugin.
  • 🖼️ Ontwerp 'n aanskoulike hero beeld vir jou tuisblad.
  • 📊 Organiseer jou inhoud in agt relevante kategorieë.
  • ⚙️ Voltooi jou tuisblad ontwerp met kategorie inskrywings.
  • 📲 Laai die werklike inhoud op in vorentoe video.
  • 💻 Gebruik Cloudways vir jou webhosting aanbiedinge.
  • ✍️ Volg die vorige lesse om jou voortgang te verbeter.

Linha do tempo

  • 00:00:00 - 00:05:00

    In die kursus oor die opstel van 'n WordPress-webwerf, word die stappe stap vir stap uitgevoer. 'n Niche is gekies, sleutelnavorsing is gedoen, en die werf se domein is ingeskryf by Cloudways. WordPress is geïnstalleer, met 'n tema wat reeds opgestel is. Die volgende stap is om die tuisblad te ontwerp en 'n blok-ingevoegde plugin, Generate Blocks, te installeer vir beter ontwerpskemas.

  • 00:05:00 - 00:10:00

    Die omgewing van die tuisblad word ingestel na 'n statiese bladsy. Verskeie kategorieë vir artikels word gelaai, wat die basis vorm van die inhoud wat op die webwerf geplaas gaan word. Die belangrikheid van 'n georganiseerde kategorie-struktuur word beklemtoon, en 'n oorsig oor die kategorieë wat in vorige lesse geskapen is, word gegee, met die fokus op die voorbereiding van werklike inhoud.

  • 00:10:00 - 00:15:00

    Beplan om 'n helde beeld met twee koptekste op die tuisblad te hê, gevolg deur 'n rooster van kategorieë en 'n lys van onlangs geposte artikels. 'n Oorsig van die beplanning van 'n visuele strategie vir die tuisblad lê voor. Die skep van beelde vir elke kategorie om die visuele aantrekkingskrag te verhoog, word bespreek, met voorstelle oor die gebruik van AI vir beeldgenerering.

  • 00:15:00 - 00:20:00

    Beelde vir elke kategorie word aanlyn soek en gegenereer, terwyl spesifieke eienskappe vir elke afbeelding gespesifiseer word. Die proses van beeldvorming met 'n fokus op moderne styl, seisoenale dekors en 'n huislike atmosfeer is die primêre ikoon. Dit sluit seisoenale themes in en hoe om die beelde te georganiseerd in die werf te plaas.

  • 00:20:00 - 00:25:00

    Na die bewerking van die beelde volgens grootte en kwaliteit, sal al die grafiese elemente vir die tuisblad weer in die ontwerpproses gebruik word. Die tuisblad se uitleg sal gebaseerd wees op hierdie beelde, en dit sal die oorgang van die visuele benadering na die inhoud van die werf behels. Dit sluit in om die beelde en die resulterende gebruikerservaring aan te pas.

  • 00:25:00 - 00:30:00

    Die ontwerp van die tuisblad begin met die skep van die struktuur vir die koptekste en die knoppies. Die eerste container vir die helde beeld word op die bladsye geplaas, en die afwerkings wat op die teks toegepas word om sigbaarheid en aantrekkingskrag te verbeter, word uitgevoer. Nadat verloopse nie teenwoordig is nie, sal die pad na 'n tegnies professionele uitstraling voltooi word.

  • 00:30:00 - 00:35:00

    Die ander elemente op die tuisblad, insluitend die inligting oor kategorieë en nuutste blogposte, is in spesifieke gridvorms georganiseer om 'n netjiese en visueel uitnodigende uitleg te verseker. Dit help ook om navigasie en toegang tot die inhoud vir gebruikers दृश्य te maak.

  • 00:35:00 - 00:40:00

    Soos die ontwerpe vir die ander kategorieë voltooi word, sal die finale aanpassings en stylveranderings toegepas word. Dit sluit die besprekings oor hoe om die skakels tussen kategorieë en ander bladsye te integreer, sowel as die aanpassing van die inhoudspoor in bykomende ontwerpelemente in.

  • 00:40:00 - 00:45:00

    Tydens die aanpassing van die menu-opsies is dit belangrik om die visuele aantrekkingskrag en die gebruikerservaring te balanseer. 'n Herontwerp van die menu is opgestel wat die nuwe kategorieë en oorgang na 'n professionele ogende webwerf ondersteun, wat gebruikers ook aanmoedig om meer inhoud te verken.

  • 00:45:00 - 00:50:00

    Die toenemende aanpassings van die hoofmenu en die voetnote bied 'n gestructureerde uitleg wat aanspraak maak op elke gebruikerservaring. 'n Fokus word geplaas op hoe al die elemente saamwerk om 'n samehangende en insiggewende navigasie te bied. Gebruik van nuutste posts om die inhoud vaartbelyn te hou, word ook beklemtoon.

  • 00:50:00 - 00:57:03

    In die volgende videolesson sal die fokus val op die werklike inhoudskaping, waar die vooraf gegeneerde artikels geplaas sal word om die webwerf volwaardig te maak. Die excitement vergroot solank die gebruiker meer betrokke raak in die proses, en die finale produk bied hulle 'n gevoel van prestasie en vervulling te wees, terwyl hulle hulle eie webwerf opstel.

Mostrar mais

Mapa mental

Vídeo de perguntas e respostas

  • Wat is die fokus van die kursus?

    Die fokus is om 'n WordPress-webwerf van nuuts af te skep.

  • Hoe kan ek aan die kursus deelneem?

    Die kursus is gratis en jy kan die lesse in die beskrywing vind.

  • Watter tipe hosting word gebruik?

    Cloudways word as die hosting platform gebruik.

  • Watter plugin word aanbeveel vir die ontwerp van die tuisblad?

    Die Generate Blocks plugin word aanbeveel.

  • Wat moet ek doen as ek nie die vorige lesse gevolg het nie?

    Stop en begin vanaf die eerste les in die beskrywing.

  • Hoeveel kategorieë moet ek hê?

    Jy moet agt kategorieë hê om die ontwerpproses te volg.

  • Wat is die volgende stap na die ontwerp van die tuisblad?

    Die volgende stap is om inhoud in die vorm van artikels op die webwerf te laai.

Ver mais resumos de vídeos

Obtenha acesso instantâneo a resumos gratuitos de vídeos do YouTube com tecnologia de IA!
Legendas
en
Rolagem automática:
  • 00:00:00
    hey welcome back to our course on
  • 00:00:01
    creating a WordPress website from
  • 00:00:02
    scratch I'm walking you through the
  • 00:00:04
    entire process step by step we're going
  • 00:00:07
    through it methodically because the end
  • 00:00:08
    result of what we're doing is to have a
  • 00:00:10
    WordPress website with hundreds of
  • 00:00:11
    Articles and affiliate links showing you
  • 00:00:14
    exactly over the shoulder how to do it
  • 00:00:16
    and I hope you're working along with me
  • 00:00:17
    I hope you have picked out your Niche
  • 00:00:19
    like I taught in the first video I've
  • 00:00:21
    hope you you have done some keyword
  • 00:00:22
    clustering some keyword research and
  • 00:00:24
    then converted those into blog post
  • 00:00:26
    titles I hope that you've picked a
  • 00:00:28
    domain I taught you all how to do that
  • 00:00:29
    in the previous lessons and then we set
  • 00:00:32
    up a a cloudways account for our host we
  • 00:00:35
    connected our domain that we bought to
  • 00:00:36
    Cloud flare as our content delivery
  • 00:00:38
    Network and our firewall connected that
  • 00:00:41
    to to cloudways we installed WordPress
  • 00:00:44
    last video we did some basic setup to
  • 00:00:46
    create our our layout for our site we
  • 00:00:48
    installed our theme and in this video
  • 00:00:50
    we're going to design our homepage now
  • 00:00:52
    if you have not done any of that stuff
  • 00:00:54
    no worries at all this is a completely
  • 00:00:56
    free course you can find all of the
  • 00:00:58
    lessons in it in the description down
  • 00:01:00
    below please if you have not followed
  • 00:01:02
    along stop watching right now go to the
  • 00:01:04
    description start the first lesson and
  • 00:01:06
    go from there because it's so empowering
  • 00:01:08
    to have a finished site when we're all
  • 00:01:09
    said and done I want you to have that
  • 00:01:11
    that feeling of accomplishment when we
  • 00:01:14
    finish this so please I encourage you to
  • 00:01:15
    do that but if you have been following
  • 00:01:17
    along then we're going to pick up where
  • 00:01:18
    we left off in the last lesson we're
  • 00:01:20
    going to pick up and design our homepage
  • 00:01:22
    right now so I want to First install our
  • 00:01:25
    block plugin the theme that we're using
  • 00:01:27
    that we installed in the last lesson is
  • 00:01:28
    called bloxy now contrary to its name
  • 00:01:31
    it's not a block plugin we need a block
  • 00:01:34
    plugin so we can design our homepage so
  • 00:01:36
    let's go to our
  • 00:01:38
    dashboard and let's go to our plugins
  • 00:01:40
    and add a new plugin now this plugin
  • 00:01:43
    we're going to add is called generate
  • 00:01:44
    blocks there's lots of block plugins out
  • 00:01:47
    there but I like generate blocks because
  • 00:01:50
    the team that has built it is taking a
  • 00:01:52
    very methodical approach to their plugin
  • 00:01:56
    unlike other plugins other block plugins
  • 00:01:58
    that have like 200 100 different blocks
  • 00:02:00
    or 300 different blocks generate blocks
  • 00:02:03
    has I believe six they have a container
  • 00:02:04
    block a grid block a headline block a
  • 00:02:07
    button block query loop block and image
  • 00:02:09
    block you can build just about anything
  • 00:02:12
    you want with these six blocks other
  • 00:02:14
    plugins that have lots of blocks the
  • 00:02:16
    problem for them is they have to
  • 00:02:18
    maintain all of those generate blocks
  • 00:02:21
    focuses on these six blocks and it's
  • 00:02:24
    very easy for them to maintain them and
  • 00:02:27
    also to extend the functionality of them
  • 00:02:28
    so even though this does not look like a
  • 00:02:30
    lot trust me it's incredibly powerful
  • 00:02:33
    now this is the free plugin that we're
  • 00:02:35
    using if you want to get the paid plugin
  • 00:02:38
    you can go to generate press let's see
  • 00:02:41
    generate or you can actually just search
  • 00:02:42
    for Generate blocks on
  • 00:02:44
    Google and here it is right here the pro
  • 00:02:47
    version the big thing that pro version
  • 00:02:49
    offers is it gives you this pattern
  • 00:02:50
    Library so if you're doing a lot of page
  • 00:02:52
    builds like custom page builds that you
  • 00:02:55
    would normally need to use like a page
  • 00:02:56
    builder for the the pattern Library can
  • 00:02:59
    really help help you there's all kinds
  • 00:03:00
    of different patterns that you can kind
  • 00:03:02
    of mess with now we're not going to
  • 00:03:04
    we're not going to need that for what
  • 00:03:05
    we're doing but maybe you might so this
  • 00:03:07
    might be something to look into and it's
  • 00:03:09
    not expensive I think it's about $100 a
  • 00:03:10
    year for Generate blocks Pro and that's
  • 00:03:13
    what I use but we're going to use the
  • 00:03:14
    free plugin and we just installed it and
  • 00:03:17
    we'll use it to create our homepage so
  • 00:03:19
    what I want to do right now is I want to
  • 00:03:21
    go to our pages and add a new page and
  • 00:03:25
    we're going to call this page home and
  • 00:03:27
    we'll just publish it and we'll view the
  • 00:03:30
    page now this is our home our homepage
  • 00:03:34
    but when we click on our site it's not
  • 00:03:36
    displayed as our homepage so let's make
  • 00:03:38
    sure that that home that page that
  • 00:03:40
    homepage is actually displayed as our
  • 00:03:42
    homepage so we'll click the customize
  • 00:03:44
    button you should be getting familiar
  • 00:03:46
    with this button and we'll scroll down
  • 00:03:49
    to homepage settings and instead of our
  • 00:03:52
    latest posts being on this homepage
  • 00:03:54
    we're going to choose a static page and
  • 00:03:56
    the homepage is going to be home nice
  • 00:03:58
    and simple publish
  • 00:04:00
    cool now problem is we have no content
  • 00:04:04
    here so we need to put some content here
  • 00:04:06
    before we do that we need to load up
  • 00:04:08
    some categories now in the previous
  • 00:04:10
    video we loaded up some some Dum I call
  • 00:04:13
    them dummy or fake posts just to
  • 00:04:15
    populate the layout but now we've
  • 00:04:16
    deleted all that stuff and it's time to
  • 00:04:18
    load up our real categories so let's go
  • 00:04:21
    back to the back end we'll click on
  • 00:04:22
    posts and we'll click on categories now
  • 00:04:24
    if you remember back to I believe it was
  • 00:04:26
    our second video in this series we
  • 00:04:29
    created some different Excel
  • 00:04:31
    spreadsheets and in those spreadsheets
  • 00:04:34
    dispersed amongst them were post
  • 00:04:37
    corresponding to different categories so
  • 00:04:39
    we have eight categories here we had
  • 00:04:41
    Thrifty room makeovers DIY decor and
  • 00:04:44
    small room Solutions all of those were
  • 00:04:46
    from our our topical Authority
  • 00:04:48
    generation that we did and then we had a
  • 00:04:51
    holiday uh Decor category this was for
  • 00:04:55
    like all of the different holidays like
  • 00:04:56
    Christmas Easter New Year's Day all that
  • 00:04:58
    stuff and then we had the seasons the
  • 00:05:00
    four uh categories one category for each
  • 00:05:02
    season and then we're going to have a
  • 00:05:04
    special category for product reviews but
  • 00:05:06
    these are the eight categories we need
  • 00:05:08
    this is a ninth but we're not including
  • 00:05:09
    that right now we need eight categories
  • 00:05:11
    for this layout that I'm going to show
  • 00:05:12
    you I encouraged you in the second video
  • 00:05:14
    to create eight categories to to come up
  • 00:05:17
    with titles blog post titles and
  • 00:05:19
    keywords for each one hopefully you did
  • 00:05:20
    that so you have your eight categories
  • 00:05:22
    if you don't no big deal just go back to
  • 00:05:25
    that second video and rewatch it and
  • 00:05:27
    learn how to create some more categories
  • 00:05:29
    so that you can replicate what I'm going
  • 00:05:31
    to do right now so what we're going to
  • 00:05:32
    do is we're going to take those
  • 00:05:33
    categories on this list that I created
  • 00:05:36
    over here and just add them into the
  • 00:05:37
    site so Thrifty room
  • 00:05:39
    makeovers DIY
  • 00:05:42
    Decor small space
  • 00:05:45
    Solutions holiday home
  • 00:05:48
    decor spring home
  • 00:05:53
    decor summer home
  • 00:05:56
    decor B what's your favorite season I
  • 00:05:58
    tell you what
  • 00:06:00
    oh I spelled that wrong fall home decor
  • 00:06:02
    let's check that really quick a quick
  • 00:06:04
    edit let's change the slug and the title
  • 00:06:08
    I I like fall a lot I really so I live
  • 00:06:10
    in Ohio and I get the Four Seasons I
  • 00:06:12
    like my Four Seasons because the time by
  • 00:06:14
    the time you get tired of one season
  • 00:06:16
    it's time for the next season so I do
  • 00:06:18
    like Ohio um in the Four Seasons but if
  • 00:06:20
    I had to pick a favorite to season it
  • 00:06:22
    would probably be fall because it's not
  • 00:06:23
    too hot not too cold and it's just
  • 00:06:26
    insanely beautiful with the leaves
  • 00:06:27
    changing colors so we have our
  • 00:06:29
    categories right now now what we're
  • 00:06:31
    going to do is we need to create some
  • 00:06:33
    let me tell you my vision first and that
  • 00:06:34
    way you'll understand what I'm I'm going
  • 00:06:36
    to do we're going to create a hero image
  • 00:06:38
    up here and in the middle of it we're
  • 00:06:40
    going to have some text the text we're
  • 00:06:42
    going to have is timeless home decor
  • 00:06:43
    Inspirations like a kind of a call to
  • 00:06:45
    action for our visitors and then we're
  • 00:06:47
    going to have a a sub headline that says
  • 00:06:50
    create inviting spaces throughout your
  • 00:06:52
    home so we'll have our main headline our
  • 00:06:54
    sub headline all overlaying on top of a
  • 00:06:58
    featured image
  • 00:07:00
    then below that we're going to have four
  • 00:07:01
    Columns of two rows and each of those
  • 00:07:04
    cells is going to represent a different
  • 00:07:06
    category so we'll have our eight
  • 00:07:07
    categories on here and then below that
  • 00:07:10
    below that we'll have a list of our most
  • 00:07:12
    recent posts now we don't have any posts
  • 00:07:14
    right now we deleted all of our dummy
  • 00:07:15
    posts but we'll populate that in the
  • 00:07:17
    next coming videos so the rest of this
  • 00:07:19
    video we'll focus on building this
  • 00:07:21
    homepage right here and the first thing
  • 00:07:23
    we need to do is get some images for
  • 00:07:25
    each of these we need a one by one
  • 00:07:27
    square image aspect R so 1 by one aspect
  • 00:07:30
    ratio Square image for each one of these
  • 00:07:32
    so I'm going to go over here to Mid
  • 00:07:34
    Journey now you might not be using mid
  • 00:07:36
    Journey you can use any AI program you
  • 00:07:38
    want heck you can even go find some
  • 00:07:39
    stock photos if you want it really
  • 00:07:41
    doesn't matter I prefer using um AI
  • 00:07:43
    images and I prefer using mid Journey so
  • 00:07:46
    the first image we need is for a Thrifty
  • 00:07:48
    Room Makeover Thrifty Room Makeover so
  • 00:07:52
    what kind of image would represent that
  • 00:07:53
    actually let's just type this into
  • 00:07:55
    Google and see what Google shows us that
  • 00:07:57
    way we can get something similar
  • 00:08:00
    images uh okay we'll say a before and
  • 00:08:06
    after image of a room makeover we'll
  • 00:08:10
    just copy this I like mid Journey
  • 00:08:12
    because I can number one is is
  • 00:08:14
    subscriptions with chat GPT I can use it
  • 00:08:16
    a lot when I need it before I hit my
  • 00:08:18
    limits and I can generate 16 images at a
  • 00:08:21
    I can even generate more if I want to
  • 00:08:23
    but you can generate a lot of images
  • 00:08:24
    very quickly so it's very efficient for
  • 00:08:26
    what we're
  • 00:08:27
    doing all right let's so there's some
  • 00:08:29
    before and after here but honestly these
  • 00:08:31
    don't really look very good so let's see
  • 00:08:33
    if we can find something cool I just
  • 00:08:35
    like the way this looks that could just
  • 00:08:37
    be our first image right there now we
  • 00:08:39
    need DIY
  • 00:08:41
    Decor
  • 00:08:44
    um some of this stuff's pretty
  • 00:08:48
    cool it's a lot of stuff in a room but I
  • 00:08:50
    like this stuff this very if I had a I
  • 00:08:54
    don't know what the vibe is and like an
  • 00:08:56
    Arizona Vibe
  • 00:08:58
    almost I I don't know let's just take
  • 00:09:01
    this right here I like this kind of
  • 00:09:03
    looks cool so a small space an image of
  • 00:09:07
    a uh small room
  • 00:09:12
    professionally
  • 00:09:15
    decorated I wish I I knew all the
  • 00:09:17
    different like decoration oh Farmhouse
  • 00:09:19
    there we go an image of small
  • 00:09:22
    farmhouse house room professionally
  • 00:09:23
    decorated shiplap right all everybody
  • 00:09:26
    loves shiplap let's just put the word
  • 00:09:27
    shiplap in there shiplap
  • 00:09:31
    fantastic sure we'll get some good stuff
  • 00:09:33
    that's like the magic buzzword right
  • 00:09:35
    there shiplap my we bought our house and
  • 00:09:38
    we wanted to build a house but it's just
  • 00:09:40
    it was just so hard to find land and so
  • 00:09:42
    we bought a house needed a lot of
  • 00:09:44
    Renovations and we put shiplap
  • 00:09:46
    everywhere it was I put shiplap
  • 00:09:48
    everywhere she told me where to put it
  • 00:09:50
    but I put it everywhere lot of work it
  • 00:09:53
    looks great though it really
  • 00:09:55
    does what this is way too small right
  • 00:09:58
    here this this is I don't know the whole
  • 00:10:00
    slip covers on the couch I don't know if
  • 00:10:02
    you can see that not really what I would
  • 00:10:04
    call amazing I like this this is cool a
  • 00:10:08
    Cool vibe right
  • 00:10:10
    here it is a small room
  • 00:10:14
    man let's just go although this could be
  • 00:10:18
    like a mud room right
  • 00:10:19
    here let's go with that it's crazy like
  • 00:10:23
    it almost looks like there's like
  • 00:10:24
    unevenness in the ceiling where the
  • 00:10:26
    shiplap needs the ceiling it's amazing
  • 00:10:28
    what the AI has been able to to do so
  • 00:10:30
    that's small space
  • 00:10:32
    solutions that will work for there
  • 00:10:34
    holiday home
  • 00:10:36
    decor this looks
  • 00:10:38
    cool we'll just take this again we're
  • 00:10:41
    not going to spin our wheels on this we
  • 00:10:44
    got that done spring home
  • 00:10:47
    decor
  • 00:10:49
    a professionally
  • 00:10:53
    decorated let's just keep let's keep
  • 00:10:55
    going with this Farmhouse Vibe Farm
  • 00:11:00
    house kitchen like seen in a magazine
  • 00:11:04
    for
  • 00:11:09
    spring and we'll speed this up a little
  • 00:11:12
    bit
  • 00:11:13
    or
  • 00:11:16
    summer and we'll do not kitchen we'll do
  • 00:11:18
    a family
  • 00:11:22
    room so we got spring and we got we have
  • 00:11:26
    summer going right now
  • 00:11:29
    oh this is oh this is great oh
  • 00:11:34
    wow that's
  • 00:11:39
    cool let's just take that I like it we
  • 00:11:43
    have
  • 00:11:44
    spring now let's go to
  • 00:11:47
    summer these just look like living
  • 00:11:50
    rooms it's just like a clean living room
  • 00:11:53
    where are the decorations all right oh
  • 00:11:55
    it all just looks the same all right
  • 00:11:57
    let's take this it has flowers in it
  • 00:11:58
    perfect
  • 00:12:00
    summer home decor how do you decorate
  • 00:12:02
    for the summer I don't know all right
  • 00:12:04
    there's our summer home decor fall home
  • 00:12:06
    decor
  • 00:12:08
    let's take this
  • 00:12:11
    for
  • 00:12:12
    fall
  • 00:12:15
    large large open concept dining room
  • 00:12:18
    yeah everything's open concept I forgot
  • 00:12:20
    about that open concept and then we have
  • 00:12:22
    winter professionally decorate Farmhouse
  • 00:12:23
    large open concept family room area for
  • 00:12:26
    winter see this is again this is why I
  • 00:12:28
    love mid Journey can just do like just
  • 00:12:30
    bulk generation and and find one out of
  • 00:12:32
    the 16 that I
  • 00:12:35
    like let's go with this cool it has some
  • 00:12:37
    like distressed chairs and everything
  • 00:12:39
    that's perfect fantastic fall home
  • 00:12:44
    decor now we need winter home decor so
  • 00:12:46
    let's see what we had for that so what
  • 00:12:48
    our results are perfect we'll just take
  • 00:12:51
    that fantastic and we don't need an
  • 00:12:52
    image for product reviews now the last
  • 00:12:54
    thing we're going to need is a featured
  • 00:12:56
    image we need to get a featured image
  • 00:12:58
    for this just this entire Vibe of a site
  • 00:13:01
    that we're creating
  • 00:13:04
    so let's think of something right
  • 00:13:07
    here a an image of a
  • 00:13:12
    ESS
  • 00:13:13
    Farmhouse kitchen
  • 00:13:17
    interior
  • 00:13:18
    with classic
  • 00:13:22
    whitewashed
  • 00:13:24
    brick ship lap large island and and
  • 00:13:29
    Farmhouse Vibes whatever the heck that
  • 00:13:31
    means oh crud you know what and we want
  • 00:13:34
    a 16x9 for this one so let's just cancel
  • 00:13:39
    this we don't need
  • 00:13:42
    that bunch of images now what we're
  • 00:13:44
    going to want to do is for all of these
  • 00:13:46
    like right now these are properties
  • 00:13:48
    these are huge files they like half a
  • 00:13:50
    megabyte and they're also wait let's go
  • 00:13:53
    back to properties they're also way too
  • 00:13:56
    big so they're 1,24 by 1024 I'm going to
  • 00:13:59
    need to resize these down to
  • 00:14:02
    300 right 300 by 300 resolution and then
  • 00:14:06
    also we'll put them all through that
  • 00:14:07
    jpeg compressor that we used yesterday
  • 00:14:09
    so we got to compress all of these we
  • 00:14:11
    got to resize all these and then
  • 00:14:12
    compress all these now I don't know what
  • 00:14:14
    tool you're going to use to do it I'm I
  • 00:14:16
    have different tools to do all that
  • 00:14:17
    stuff but you can you can find an online
  • 00:14:19
    converter you can probably let's see
  • 00:14:22
    bulk image
  • 00:14:24
    resize online maybe there's just
  • 00:14:27
    something online that's free we can just
  • 00:14:29
    try that let's see here
  • 00:14:35
    uh a lot of these look fake like in here
  • 00:14:38
    it's yeah we have the whitewashed brick
  • 00:14:40
    and we have this where's the
  • 00:14:42
    sink you know we're trying to get the A
  • 00:14:44
    out do too much hey this is cool but
  • 00:14:46
    it's like literally open to the
  • 00:14:49
    outside like
  • 00:14:52
    what what in the world oh I accidentally
  • 00:14:57
    didn't use the right text for this
  • 00:14:59
    that's that's just a dud right there
  • 00:15:02
    let's see
  • 00:15:11
    here some of this stuff is
  • 00:15:14
    too old
  • 00:15:18
    school oh let's forget the let's forget
  • 00:15:21
    the
  • 00:15:24
    kitchen
  • 00:15:25
    an an image of a living
  • 00:15:30
    modern living
  • 00:15:34
    room
  • 00:15:36
    minimalistic
  • 00:15:38
    shiplap
  • 00:15:40
    fireplace
  • 00:15:45
    sunlight see what the AI can come up
  • 00:15:47
    with wasn't happy with what we got so
  • 00:15:50
    far so let's see what this bulk imagery
  • 00:15:53
    Sizer is
  • 00:15:59
    see we're
  • 00:16:02
    uploading cool andent this is so this is
  • 00:16:05
    neat let's see if it works maybe they'll
  • 00:16:07
    be like enter your emails that we can
  • 00:16:09
    get money from
  • 00:16:11
    you
  • 00:16:17
    export is this really going to work for
  • 00:16:19
    free download all images no way cool we
  • 00:16:22
    found a site to do this that's fantastic
  • 00:16:25
    so the site we are on is called
  • 00:16:27
    imageresizer
  • 00:16:30
    let's check our images out oh they're
  • 00:16:32
    super small too this is fantastic DIY to
  • 00:16:35
    core
  • 00:16:37
    always exactly what we want cool guys so
  • 00:16:41
    go to the site imageresizer docomo them
  • 00:16:44
    all down to 300 by 300 that's fantastic
  • 00:16:48
    so here are our eight categories they're
  • 00:16:50
    already resized
  • 00:16:52
    fantastic and so again 300 by 300 and
  • 00:16:56
    then um let's wow that
  • 00:17:01
    there is our minimalistic modern living
  • 00:17:05
    room
  • 00:17:07
    what why is this so hard what in the
  • 00:17:10
    world seriously it's a little too
  • 00:17:13
    minimalistic let's try this again an
  • 00:17:15
    image of a modern Farmhouse of a
  • 00:17:19
    farmhouse house living
  • 00:17:22
    room like one found in a magazine
  • 00:17:28
    and
  • 00:17:31
    staged stag is when they like they make
  • 00:17:34
    it look all like it's somebody's house
  • 00:17:36
    but no one's really living there because
  • 00:17:37
    honestly when people live in a house it
  • 00:17:38
    gets all messy but yeah staged is is
  • 00:17:40
    what they would do so let's see if we
  • 00:17:43
    get any success with this oh there we go
  • 00:17:45
    hey that's perfect all right that will
  • 00:17:47
    work perfect now this particular image
  • 00:17:50
    we might actually have to crop it I'm
  • 00:17:53
    not sure let's put this in here so this
  • 00:17:57
    one my note
  • 00:17:59
    say 1,400 by 933 add our image
  • 00:18:04
    1,400 by 933 that's what I want so we'll
  • 00:18:09
    put this right in the center we'll crop
  • 00:18:11
    it it saves our cropped image last thing
  • 00:18:14
    we're going to do because this image is
  • 00:18:16
    still let's see it's still pretty large
  • 00:18:19
    it's 2 megabytes we want to go to Tiny
  • 00:18:24
    jpeg tiny JPEG and we'll put this in
  • 00:18:27
    here
  • 00:18:37
    there we
  • 00:18:38
    go so we download
  • 00:18:41
    this and it is
  • 00:18:44
    now a lot smaller 565 kilobytes not as
  • 00:18:47
    small as I would like but hey it's going
  • 00:18:49
    to be it's going to be good enough now
  • 00:18:50
    you can always like reduce it more if
  • 00:18:52
    you really want to but it's good enough
  • 00:18:53
    for what we're
  • 00:18:54
    doing so now we can close all this stuff
  • 00:18:57
    we have all of the images we want let's
  • 00:18:59
    call this
  • 00:19:01
    design Affair hero we're back on our
  • 00:19:05
    homepage we'll click edit page first
  • 00:19:07
    thing we want to do is we want to not
  • 00:19:09
    display the word home on our page let's
  • 00:19:12
    actually open a new tab we don't want
  • 00:19:14
    this word this the the title of the page
  • 00:19:16
    displayed here so we'll go over here to
  • 00:19:18
    to Blacky and you'll see this setting
  • 00:19:21
    that says page title click it and we're
  • 00:19:23
    going to click disabled and we'll click
  • 00:19:26
    save so now on our homepage the word
  • 00:19:29
    home is no longer displayed we just have
  • 00:19:30
    this blank page now we're going to start
  • 00:19:32
    using generate blacks the first thing I
  • 00:19:35
    want you to do is click this little
  • 00:19:36
    slanted hamburger menu up here just so
  • 00:19:39
    you can see the outline as we created we
  • 00:19:41
    going to come over here and we're going
  • 00:19:42
    to type forward slash type
  • 00:19:46
    container now this is the one of the
  • 00:19:48
    generate blocks containers so here's our
  • 00:19:51
    container so we have a little container
  • 00:19:52
    right here going to click it again so
  • 00:19:54
    we've selected the container and we'll
  • 00:19:55
    click this plus because we want to add
  • 00:19:56
    something to The Container we're going
  • 00:19:58
    to add another container a container
  • 00:20:01
    inside of a container now inside of this
  • 00:20:03
    inner container we'll click this plus
  • 00:20:05
    again and we're going to
  • 00:20:07
    add headline and then we'll add our
  • 00:20:09
    title that we have over here our title
  • 00:20:11
    for this page and I pulled this title I
  • 00:20:14
    just pieced it together from our Niche
  • 00:20:16
    ideas remember we use that Niche idea
  • 00:20:18
    generator inside a zim writer see format
  • 00:20:21
    column width I just took some of this
  • 00:20:23
    stuff to mash together what I think the
  • 00:20:25
    blog is going to be about so Timeless
  • 00:20:27
    home decor inspirations create inviting
  • 00:20:29
    spaces throughout your home so that's
  • 00:20:30
    what we're going to have for these these
  • 00:20:32
    headings so we'll take that first one
  • 00:20:34
    and I'm going to put it right here now
  • 00:20:36
    what we want to do is Click these three
  • 00:20:38
    dots over here and press duplicate okay
  • 00:20:42
    so now we have two headings so down here
  • 00:20:44
    this is going to be our subheading and
  • 00:20:45
    we're going to put down create inviting
  • 00:20:48
    spaces throughout your
  • 00:20:49
    home so Timeless home decor Inspirations
  • 00:20:53
    create inviting spaces now we'll press
  • 00:20:54
    enter now we're still inside see this is
  • 00:20:57
    why I like this little outline view over
  • 00:20:58
    here you can see where you are we're
  • 00:20:59
    still inside of this container over here
  • 00:21:01
    what I want to do is I want we press
  • 00:21:03
    enter and we created a paragraph don't
  • 00:21:04
    want a paragraph I want another
  • 00:21:06
    container so we'll press plus and we'll
  • 00:21:09
    select container so now we have a
  • 00:21:11
    container that contains a container that
  • 00:21:14
    contains our heading or headline another
  • 00:21:16
    headline and another container and then
  • 00:21:18
    in this container I want a button and
  • 00:21:21
    we're going to type learn about us
  • 00:21:25
    fantastic now we'll save it right now
  • 00:21:27
    and let's see what it looks like
  • 00:21:30
    Timeless home decor Inspirations create
  • 00:21:32
    inviting spaces okay doesn't look like
  • 00:21:34
    much definitely does not look
  • 00:21:35
    professional but we're on our way watch
  • 00:21:37
    what we're going to do so first I want
  • 00:21:39
    you to click on this topmost container
  • 00:21:41
    right here then we'll go over here and
  • 00:21:43
    press this menu icon to bring up this
  • 00:21:47
    menu of generate blocks settings for
  • 00:21:50
    this particular container now click on
  • 00:21:52
    the
  • 00:21:53
    layout and the position is going to be
  • 00:21:56
    relative and the Overflow is going to to
  • 00:21:58
    be hidden and hidden and the block
  • 00:22:01
    alignment we're going to select full
  • 00:22:03
    over here because we want the image
  • 00:22:05
    going across our entire page then we're
  • 00:22:07
    going to close this layout and go over
  • 00:22:10
    here to backgrounds now we're still
  • 00:22:11
    again we're still modifying all these
  • 00:22:13
    settings are modifying this outer
  • 00:22:15
    container right here we want to give
  • 00:22:16
    this an image URL and then we'll upload
  • 00:22:19
    our
  • 00:22:20
    file that we just created the widescreen
  • 00:22:24
    file and you give this a name you can
  • 00:22:27
    say design affair.com and call it
  • 00:22:30
    whatever you
  • 00:22:32
    want so right now we can't see our text
  • 00:22:34
    so what I want you to do is Click use
  • 00:22:36
    gradient all right make sure your
  • 00:22:38
    direction is set to 120 and then select
  • 00:22:42
    pseudo element right then we want to
  • 00:22:45
    choose for our color one our darker
  • 00:22:47
    color it can be uh let's just choose
  • 00:22:49
    that one right there and for color two
  • 00:22:51
    what we want to do is change the opacity
  • 00:22:54
    so we'll change this I guess let's
  • 00:22:57
    actually just go all the way to Z I
  • 00:22:58
    guess it doesn't really matter and now
  • 00:23:00
    we'll have to change our font color over
  • 00:23:02
    here so that it's white but we should be
  • 00:23:04
    able to see it then let's save this
  • 00:23:06
    right now and see what it looks like on
  • 00:23:07
    the front
  • 00:23:08
    end doesn't look like much right now but
  • 00:23:11
    don't worry we'll fix it all so let's go
  • 00:23:13
    back to our editor over here now let's
  • 00:23:15
    click on our first heading and let's go
  • 00:23:18
    over here to colors for our text we're
  • 00:23:21
    going to choose our our light color
  • 00:23:24
    right here you still can't see it but
  • 00:23:26
    don't worry we're going to fix this in
  • 00:23:27
    just one second actually let's choose a
  • 00:23:29
    white we just want the pure white color
  • 00:23:31
    that we
  • 00:23:32
    have and then we'll do the same thing
  • 00:23:34
    for our
  • 00:23:36
    subheading pure white color now we still
  • 00:23:39
    can't see everything really well so what
  • 00:23:41
    we need to do is click on this container
  • 00:23:43
    not the outer container but this inner
  • 00:23:45
    container right here and set our Z index
  • 00:23:47
    watch what happens when we set our Z
  • 00:23:48
    index to one now we can see everything
  • 00:23:52
    pretty cool what we got to do now is we
  • 00:23:54
    got to change our font sizes our font
  • 00:23:57
    sizes in in generate blocks are
  • 00:23:59
    inheriting from Block C but they're
  • 00:24:01
    still just too big so let's first go
  • 00:24:03
    over here and change this to our H1 we
  • 00:24:05
    want this to be an H1 element and then
  • 00:24:07
    we'll let's go over here to
  • 00:24:10
    typography and we're going to reduce our
  • 00:24:12
    font size down let's try
  • 00:24:16
    30 35 cool 35 and we want it to have uh
  • 00:24:21
    Center alignment now this right here we
  • 00:24:23
    don't want this to be a heading we're
  • 00:24:24
    going to change the style of this to a
  • 00:24:27
    paragraph so it's still headline element
  • 00:24:31
    it's still a headline element from
  • 00:24:33
    generate blocks but we're changing the
  • 00:24:35
    headline element to a paragraph okay and
  • 00:24:37
    now we want what we want to do is change
  • 00:24:39
    the text alignment to the center looking
  • 00:24:41
    looking a lot better isn't it now we
  • 00:24:43
    need our our button over here so we'll
  • 00:24:44
    click on our container element for our
  • 00:24:46
    button and we'll just change it to a
  • 00:24:49
    center alignment and we'll click save
  • 00:24:52
    let's see what it looks like now looks
  • 00:24:54
    pretty good now what we got to do is
  • 00:24:56
    change our padding around here we'll so
  • 00:24:58
    we got to change the colors and the size
  • 00:24:59
    of this button too we'll do that in a
  • 00:25:01
    second but let's change our padding
  • 00:25:02
    around here so we'll go back over here
  • 00:25:04
    and the padding is probably where we
  • 00:25:06
    need to change it is probably for this
  • 00:25:08
    container element in here the the
  • 00:25:10
    container element inside of the main
  • 00:25:12
    container element and we'll click on
  • 00:25:14
    spacing now right now we're going to be
  • 00:25:16
    configuring this for it's going to
  • 00:25:18
    inherit we'll configure this for desktop
  • 00:25:20
    first though so for our top padding
  • 00:25:22
    let's put in 200 pixels for a lower
  • 00:25:24
    padding we'll have 120 and for the left
  • 00:25:27
    and the right we'll just put in 40 let's
  • 00:25:30
    go back to our homepage and see what it
  • 00:25:32
    looks like that looks pretty good now
  • 00:25:35
    doesn't it now let's click F12 so you
  • 00:25:39
    can see we might have a little bit of
  • 00:25:40
    problem if we go to a an iPad Pro for
  • 00:25:44
    instance this is taking up a little bit
  • 00:25:46
    too much space right here so for an iPad
  • 00:25:49
    let's dial this down a little bit so
  • 00:25:51
    we'll go back over here and we'll click
  • 00:25:54
    the the tablet and we'll change this CU
  • 00:25:56
    it's inheriting so we because we first
  • 00:25:59
    did this on our desktop both of these
  • 00:26:01
    child because this is obviously smaller
  • 00:26:04
    resolution than desktop right they would
  • 00:26:06
    inherit this unless we specifically
  • 00:26:08
    override it so we're going to override
  • 00:26:10
    this to
  • 00:26:13
    125 and 90 oops not
  • 00:26:17
    980 we'll click save and we'll check
  • 00:26:21
    this out again yeah that looks a little
  • 00:26:23
    bit more reasonable on a tablet now
  • 00:26:25
    we'll go back to this and we'll switch
  • 00:26:27
    to mobile let's see what this looks like
  • 00:26:30
    on mobile real quick so this is an
  • 00:26:31
    iPhone 12 way too big not a big fan of
  • 00:26:34
    this way way too big so let's let's
  • 00:26:37
    modify this let's say
  • 00:26:40
    50 and 50 now remember most of the
  • 00:26:43
    people visiting our site are going to be
  • 00:26:44
    visiting on mobile so I think we need to
  • 00:26:46
    adjust the font size a little bit on our
  • 00:26:49
    tablet this looks pretty good but on
  • 00:26:52
    mobile I think our font size for this H1
  • 00:26:54
    is just too big so we'll click on this
  • 00:26:56
    element over here and we'll go down to
  • 00:26:59
    typography now it's this is like a light
  • 00:27:02
    color right here 35 because it's showing
  • 00:27:04
    us what we set what what's been
  • 00:27:06
    inherited from the desktop we set 35 and
  • 00:27:09
    it's inheriting that unless we override
  • 00:27:10
    it so we're going to override it right
  • 00:27:11
    now if we put 35 nothing would happen
  • 00:27:13
    because that would be the same as what
  • 00:27:15
    it's receiving from the parent so we'll
  • 00:27:17
    dial this down to let's say 20 no let's
  • 00:27:22
    say
  • 00:27:24
    25 I like that and then the line height
  • 00:27:26
    let's reduce this down to
  • 00:27:30
    1.2 and let's change our subheading
  • 00:27:33
    right here
  • 00:27:34
    to
  • 00:27:37
    14 yeah like 14 that I think that works
  • 00:27:40
    now let's get off of this so we can see
  • 00:27:44
    now it looks good but I think our button
  • 00:27:46
    is a little bit too big so let's click
  • 00:27:48
    on our button element over here let's
  • 00:27:51
    click on spacing and you can see it's 15
  • 00:27:54
    for the top and the bottom and 20 for
  • 00:27:55
    the left and right but right now we're
  • 00:27:56
    looking at mobile so let's go back to
  • 00:27:57
    our desktop and take a look at it so
  • 00:28:00
    desktop it's still 15 20 20 let's take
  • 00:28:02
    this down to
  • 00:28:06
    14 and actually let's make it a little
  • 00:28:09
    wider 24 24 that's a little bit more
  • 00:28:11
    generous for our desktop see what it
  • 00:28:13
    looks like on our tablet I think that
  • 00:28:15
    still looks pretty good now on mobile
  • 00:28:17
    though I think this is way too big so
  • 00:28:19
    let's click on our button make sure
  • 00:28:20
    you're clicked on the right element and
  • 00:28:22
    let's take this down to 10 and 10 and 18
  • 00:28:29
    let's also reduce our font size so we
  • 00:28:31
    did 14 over here let's take this down
  • 00:28:33
    just a little bit also so our typography
  • 00:28:36
    we're going to take this down to
  • 00:28:39
    14 right we'll save this and let's look
  • 00:28:42
    at what it looks like the front here I
  • 00:28:44
    like that this looks a lot more
  • 00:28:46
    professional now one thing I'm noticing
  • 00:28:48
    is there's this Gap here see if you so
  • 00:28:51
    you should really get used to getting
  • 00:28:53
    into this you press F12 you get into
  • 00:28:55
    this like developers mode right here if
  • 00:28:57
    you click this this Arrow you can hover
  • 00:29:00
    over things and see different things now
  • 00:29:02
    this is more of an advanced tool but
  • 00:29:04
    when we hover over this we can see that
  • 00:29:06
    there's this green bar up top and down
  • 00:29:08
    below and I want to get rid of this at
  • 00:29:10
    least get rid of it up here I I don't
  • 00:29:12
    there's just way too much of a gap
  • 00:29:13
    between this and up here so let's go in
  • 00:29:16
    here and so the way to do that and for
  • 00:29:18
    our homepage we could do it on a global
  • 00:29:20
    level but we just want to override it
  • 00:29:22
    for our homepage right here so we're
  • 00:29:23
    going to click on Blacky over here and
  • 00:29:27
    content area vertical spacing so it's
  • 00:29:30
    inheriting right now from our Global
  • 00:29:32
    Styles so again just showing you where
  • 00:29:34
    we are we left the settings for these
  • 00:29:36
    particular elements and we clicked on
  • 00:29:38
    our Block C configuration for this
  • 00:29:40
    particular page we're scrolling down and
  • 00:29:43
    right now we're inheriting the global
  • 00:29:45
    setting in our customize menu for the
  • 00:29:47
    vertical spacing but we're actually
  • 00:29:48
    going to change this right now so we
  • 00:29:50
    click on custom and then we don't want
  • 00:29:53
    any vertical spacing we only want it on
  • 00:29:55
    the bottom and we can change that too we
  • 00:29:56
    can just eliminate it totally but we
  • 00:29:58
    just want it on the bottom not the top
  • 00:30:00
    before it was on the top and the bottom
  • 00:30:01
    so we'll click save and Watch What
  • 00:30:04
    Happens watch this space go
  • 00:30:06
    away all right space goes away looks a
  • 00:30:08
    lot better now remove mobile look at
  • 00:30:11
    that is that starting to look more
  • 00:30:13
    professional I hope it is now the last
  • 00:30:15
    thing we got to do for our hero image up
  • 00:30:18
    here is change this color of let's there
  • 00:30:20
    we go change the color of the button for
  • 00:30:22
    both the just the standard color and
  • 00:30:23
    then the hover color we're we're clicked
  • 00:30:25
    on the button but we can't see any
  • 00:30:27
    colors option options and that's because
  • 00:30:29
    we're on this mobile device thing right
  • 00:30:31
    here so we need to see the options for
  • 00:30:33
    all devices when we click that then we
  • 00:30:35
    can see our colors so we'll click on
  • 00:30:37
    colors over here and then we want to
  • 00:30:38
    change this color to our button color I
  • 00:30:41
    believe we were using the lighter color
  • 00:30:43
    and the hover color becomes the darker
  • 00:30:45
    color click save and we'll check this
  • 00:30:48
    out look at that that looks really good
  • 00:30:52
    actually Timeless home decor
  • 00:30:53
    Inspirations create inviting spaces
  • 00:30:55
    throughout your home I really like that
  • 00:30:58
    so the last thing we have to do up here
  • 00:30:59
    and I forgot about this is configure
  • 00:31:01
    where this button goes now we don't need
  • 00:31:02
    a button up here but having it up here
  • 00:31:04
    adds to that professionalism of the
  • 00:31:06
    website so we want this actually to link
  • 00:31:08
    to our about us page and that is
  • 00:31:10
    actually a page that I forgot to create
  • 00:31:12
    so we're going to create that real quick
  • 00:31:14
    just this just the placeholder we're
  • 00:31:15
    going to come back while the articles
  • 00:31:17
    for our site are being created and
  • 00:31:19
    create some of these filter Pages like
  • 00:31:21
    our privacy page or terms of service and
  • 00:31:23
    stuff so right now we're just going to
  • 00:31:25
    create a placeholder for our about us
  • 00:31:27
    page so we're on pages you can see we
  • 00:31:29
    made our contact page our privacy page
  • 00:31:31
    terms of use our typography page and
  • 00:31:34
    then also the homepage which we were
  • 00:31:35
    just working on so we'll click add new
  • 00:31:38
    page and this is going to be our about
  • 00:31:41
    us page publish visit page now here is
  • 00:31:44
    the URL you're going to take this and
  • 00:31:46
    copy it and we're going to go back to
  • 00:31:49
    our
  • 00:31:49
    dashboard back to our pages and then
  • 00:31:53
    edit our homepage we're going to click
  • 00:31:56
    on this button right here going to click
  • 00:31:58
    on this link right here and paste this
  • 00:32:01
    in that's all you got to do then click
  • 00:32:04
    save now we'll go to our homepage and
  • 00:32:06
    and refresh and now it's a button and
  • 00:32:08
    when we click it takes us to our about
  • 00:32:11
    us page how cool is that so this part is
  • 00:32:13
    all done now we can let's check it out
  • 00:32:15
    as it
  • 00:32:17
    resizes looks good to me you can always
  • 00:32:19
    come back in here and modify it however
  • 00:32:21
    you want you can see our button is is
  • 00:32:23
    big and then it gets smaller so I'm just
  • 00:32:26
    showing you the basics right now if you
  • 00:32:27
    want to come in and modify this however
  • 00:32:29
    you want you can definitely do that it's
  • 00:32:30
    not a problem at all so what we want to
  • 00:32:32
    do now is we want to create our grid of
  • 00:32:34
    categories down here so in the homepage
  • 00:32:37
    we're going to again go back to the
  • 00:32:39
    outline view so we can see everything
  • 00:32:41
    we're going to create another container
  • 00:32:42
    everything everything basically just
  • 00:32:44
    goes into a container if you're building
  • 00:32:45
    a page now we want to do a headline
  • 00:32:47
    element and then we need just some kind
  • 00:32:50
    of a a fancy phrase let's go with our
  • 00:32:53
    main keyword home decor that was a
  • 00:32:55
    really big SEO keyword so we'll put that
  • 00:32:58
    again on our homepage we'll say home
  • 00:33:00
    decor
  • 00:33:02
    Inspirations designer inspiration and
  • 00:33:04
    this will be an H2 but we want to dial
  • 00:33:06
    this down this is a this is too big
  • 00:33:08
    compared to our H1 up here so our H1 was
  • 00:33:11
    a font size 35 so let's dial this down
  • 00:33:14
    to maybe a 30 or maybe let's do it 25
  • 00:33:18
    all right 25 kind of works and we want
  • 00:33:21
    this in the center and we'll check out
  • 00:33:24
    again how this looks on mobile let's see
  • 00:33:27
    this became 25 so we'll dial this down
  • 00:33:29
    on mobile to let's try
  • 00:33:32
    18 18 works perfect so we need another
  • 00:33:36
    Block in here so right now it defaults
  • 00:33:38
    to a parag paragraph block but we're
  • 00:33:39
    going to actually change this to a grid
  • 00:33:42
    block type in Grid and select there
  • 00:33:45
    we'll see two in here the blue
  • 00:33:47
    represents generate blocks so we're
  • 00:33:49
    going to select this generate blocks
  • 00:33:50
    grid right here and we want a four-way
  • 00:33:53
    grid because we're going to do four up
  • 00:33:54
    here and we'll do four down below so the
  • 00:33:56
    first thing we want to do is check out
  • 00:33:58
    what this built for us so we have this
  • 00:33:59
    grid block and it created four
  • 00:34:01
    containers go figure so get very
  • 00:34:03
    familiar with containers cuz you're
  • 00:34:04
    going to use them a lot if you're
  • 00:34:05
    building a page now in each grid I want
  • 00:34:08
    an image of the category that we created
  • 00:34:11
    all our images over here and then I want
  • 00:34:13
    a one word representation of the
  • 00:34:15
    category so let's think about the order
  • 00:34:17
    that we want to put these in first of
  • 00:34:18
    all let's put holiday home decor first
  • 00:34:21
    because that has the majority of our
  • 00:34:23
    articles that's all the different
  • 00:34:24
    holidays in there then let's do the
  • 00:34:26
    seasons in the order that they normally
  • 00:34:29
    appear spring summer fall and then
  • 00:34:32
    winter and then let's see I like that
  • 00:34:35
    we'll just keep it like that now we need
  • 00:34:36
    one word to represent each holiday
  • 00:34:40
    spring summer fall winter
  • 00:34:45
    Thrifty DIY and we'll say small
  • 00:34:51
    space Thrifty ax so let's go to our
  • 00:34:54
    first container we'll click on it we'll
  • 00:34:56
    click the Plus and we're going to add an
  • 00:34:59
    image now you again you'll see a normal
  • 00:35:02
    black image option and our blue image
  • 00:35:05
    option let's select that because that's
  • 00:35:06
    generate blocks select image click on
  • 00:35:09
    media library because we're going to
  • 00:35:10
    upload all of our files right now so
  • 00:35:13
    let's just take all of the files that we
  • 00:35:15
    have not uploaded and upload them now
  • 00:35:17
    feel free at your own Leisure to modify
  • 00:35:19
    the alt text in the title of each of
  • 00:35:21
    these if you want to and we're going to
  • 00:35:23
    select the holiday that was this one
  • 00:35:26
    holiday home DEC so we'll select that
  • 00:35:29
    that goes right there now we need
  • 00:35:31
    another block inside of this container
  • 00:35:33
    so we'll click the image we'll press
  • 00:35:35
    enter and that will create us a
  • 00:35:36
    paragraph block but we actually want
  • 00:35:38
    that paragraph block to be a headline so
  • 00:35:40
    you can either type in headline or
  • 00:35:41
    scroll down till you find it headline
  • 00:35:44
    and it's in this container remember
  • 00:35:45
    that's what we're doing we're creating
  • 00:35:46
    in this container both an image block
  • 00:35:49
    and a headline block and we want this to
  • 00:35:51
    say holiday and we want this to be an H3
  • 00:35:54
    because all of these are going to be
  • 00:35:55
    contained within this H2 2 so H2 H3 now
  • 00:36:00
    we got to dial down the size a little
  • 00:36:01
    bit so right now this size is let's see
  • 00:36:04
    over here
  • 00:36:06
    typography uh font
  • 00:36:08
    size let's go
  • 00:36:11
    20 25 I think
  • 00:36:16
    22 maybe would work 22 all right and
  • 00:36:21
    let's Center this now what I don't like
  • 00:36:24
    is there's too much of a gap here
  • 00:36:25
    between these two so let's dial down our
  • 00:36:27
    line height to zero and that will reduce
  • 00:36:29
    the Gap here so let's check out how this
  • 00:36:32
    looks on the different resolutions first
  • 00:36:34
    of all and I think it looks pretty
  • 00:36:38
    good on uh mobile right now we want it
  • 00:36:41
    to actually wrap like it's doing right
  • 00:36:43
    now on mobile so I like all that so what
  • 00:36:45
    we're going to do is just to save some
  • 00:36:47
    time I'm going to click on this holiday
  • 00:36:48
    home decor and then hold down shift and
  • 00:36:51
    also click on holiday then I'm going to
  • 00:36:53
    come over here and I'm going to press
  • 00:36:55
    this duplicate it's also control shift d
  • 00:36:57
    let's actually just press control shift
  • 00:36:59
    d so highlight both contrl shift d
  • 00:37:03
    duplicate so we'll take the duplicated
  • 00:37:05
    ones and we'll drag them over to our
  • 00:37:08
    container over here and then
  • 00:37:11
    we'll uh duplicate again and drag them
  • 00:37:14
    over to this container and we'll
  • 00:37:16
    duplicate them again and drag them over
  • 00:37:19
    to this container and the reason we're
  • 00:37:21
    doing that is because we've set up some
  • 00:37:22
    different styles we've reduced the line
  • 00:37:24
    height of this we've set the different
  • 00:37:25
    font size uh for this so we've saved a
  • 00:37:27
    little bit of time but now we need to
  • 00:37:29
    change these images out so when we've
  • 00:37:30
    selected this image we can press the
  • 00:37:32
    replace button and open media library
  • 00:37:35
    and where's Spring so I'm looking over
  • 00:37:37
    here looking for spring winter Thrifty
  • 00:37:41
    summer spring there's our Spring right
  • 00:37:43
    so we have spring and we'll change this
  • 00:37:45
    to
  • 00:37:46
    Spring and then I'll select this replace
  • 00:37:49
    and we're going to find Summer right
  • 00:37:52
    let's find
  • 00:37:55
    Summer where is it
  • 00:37:59
    there it is it's like that matching game
  • 00:38:01
    where you try to remember where it was
  • 00:38:04
    summer and then we're going to have
  • 00:38:08
    fall and this let's see where's the
  • 00:38:13
    there we go there's the pumpkins fall
  • 00:38:14
    that looks pretty good now I want to
  • 00:38:16
    click save first of all it's really
  • 00:38:17
    important click save and we'll view this
  • 00:38:19
    on the front
  • 00:38:21
    end cool looks pretty good
  • 00:38:24
    right not really so it looks like
  • 00:38:27
    actually
  • 00:38:28
    the the text even though it looks over
  • 00:38:29
    here and you'll run into this sometimes
  • 00:38:31
    this text looks fine in relationship to
  • 00:38:33
    the image it it looks like it got sucked
  • 00:38:35
    up too much so let's fix our line
  • 00:38:37
    spacing let's go to
  • 00:38:39
    30 usually you do this with padding you
  • 00:38:42
    don't modify the line height but I
  • 00:38:43
    forget what we initially
  • 00:38:47
    had yeah that looks all that looks fine
  • 00:38:50
    now what I want to do is give some gap
  • 00:38:52
    between each of these These are
  • 00:38:53
    obviously way too grouped together so
  • 00:38:56
    we'll go over here to our grid click
  • 00:38:57
    this grid option over here and click on
  • 00:39:00
    layout all right now let's give some
  • 00:39:02
    horizontal and vertical gaps so let's
  • 00:39:04
    say 60 no that's too much let's say 40
  • 00:39:07
    20 maybe all right 20 looks
  • 00:39:10
    good let's go over here and and see what
  • 00:39:13
    we have that looks pretty good now you
  • 00:39:15
    might be thinking like why do I need
  • 00:39:16
    vertical Gap there's they're all
  • 00:39:18
    horizontal right now you'll need
  • 00:39:19
    vertical when we go to Mobile so we want
  • 00:39:21
    a vertical Gap so let's go over here and
  • 00:39:24
    set this up at 40 and see what we get
  • 00:39:28
    refresh right I like the Gap so we'll
  • 00:39:30
    come back over here and we will click on
  • 00:39:33
    our image first of all and we'll click
  • 00:39:35
    on this block settings we're going to
  • 00:39:37
    set the width and the height to
  • 00:39:40
    85% I'm on the wrong
  • 00:39:43
    actually
  • 00:39:45
    85% so that's this one right here and
  • 00:39:47
    we're actually going to set it to a line
  • 00:39:50
    Center and let's click on this image and
  • 00:39:52
    we'll set it to
  • 00:39:54
    85% 85
  • 00:39:58
    five so we're going to do it for each of
  • 00:39:59
    these images and this will also align to
  • 00:40:02
    the center align to the
  • 00:40:05
    center align Center withd
  • 00:40:08
    85 got to change these to percentages by
  • 00:40:11
    default they're all stuck on uh pixels
  • 00:40:14
    85 percentage
  • 00:40:16
    85 percentage and then we'll click save
  • 00:40:19
    and we'll go back over here but still a
  • 00:40:21
    little messed up right now so if we look
  • 00:40:23
    at this we see that there's this this
  • 00:40:25
    green area which is called padding if if
  • 00:40:27
    you can see I can't you can't see my
  • 00:40:29
    finger on the screen but there is this
  • 00:40:30
    padding element over here it just exists
  • 00:40:33
    on mobile when it's in this column view
  • 00:40:35
    so we'll go back over here and we'll
  • 00:40:36
    click on our grid and make sure that
  • 00:40:39
    we're in this this view over here for
  • 00:40:41
    mobile devices and we want to set this
  • 00:40:44
    column Gap to
  • 00:40:46
    zero right and we'll go over here and
  • 00:40:48
    we'll
  • 00:40:49
    refresh and now everything looks
  • 00:40:51
    centered but we still have this last one
  • 00:40:54
    which is a little bit messed up I think
  • 00:40:55
    it's because we forgot to do Center
  • 00:41:01
    alignment that looks pretty good now so
  • 00:41:04
    let's let's check it out Timeless home
  • 00:41:06
    decor Inspirations designer inspiration
  • 00:41:09
    may we have inspiration in there twice
  • 00:41:10
    let's just fix that home decor
  • 00:41:14
    inspiration designer let's do this
  • 00:41:16
    designer Inspirations how about that I
  • 00:41:19
    like that home decor designer
  • 00:41:22
    Inspirations
  • 00:41:24
    fantastic uh home decor designer
  • 00:41:26
    inspiration that looks really good let's
  • 00:41:29
    kind of mess with the sizing a little
  • 00:41:32
    bit so on a tablet it ends up looking a
  • 00:41:36
    little
  • 00:41:37
    wonky CU it converts to to one column a
  • 00:41:42
    little bit early in my opinion so let's
  • 00:41:44
    see if we can fix that let's go back
  • 00:41:46
    over here and we'll click on this tablet
  • 00:41:48
    view now it looks fine on this tablet
  • 00:41:50
    view but why does it look messed up on
  • 00:41:52
    this tablet view that's because there's
  • 00:41:55
    no like standard resolution for a tablet
  • 00:41:58
    an iPad width so to speak is going to be
  • 00:42:02
    different than a Galaxy tablet width so
  • 00:42:04
    there's no really quote unquote agreed
  • 00:42:06
    upon standard for what constitutes a
  • 00:42:08
    tablet resolution but there will be
  • 00:42:10
    people with tablets that will be looking
  • 00:42:12
    at it like this and it will look messed
  • 00:42:14
    up we don't want that so we'll come in
  • 00:42:16
    here and we'll select our container for
  • 00:42:18
    each one of these grids so we'll select
  • 00:42:19
    our first container and we'll go over
  • 00:42:21
    here to layout and for the the display
  • 00:42:25
    option instead of default we're going to
  • 00:42:26
    select
  • 00:42:27
    flex and we want a column Flex now right
  • 00:42:30
    now we're on mobile view we're not going
  • 00:42:32
    to do this on tablet view or anything
  • 00:42:34
    we're on mobile view right now so column
  • 00:42:36
    align Center and justify Center we'll
  • 00:42:39
    save this this is what it's going to
  • 00:42:41
    look like right now so we have that that
  • 00:42:44
    nice desktop view and then when we get
  • 00:42:46
    down it kind of splits and kind of looks
  • 00:42:48
    like this if you want this image to fill
  • 00:42:51
    the entire screen then you'll end up
  • 00:42:52
    with a big image like this but if you
  • 00:42:54
    want a more realistic image then you'll
  • 00:42:55
    have something like this so there's no
  • 00:42:57
    any perfect solution but I like this
  • 00:43:00
    this size a lot better than the
  • 00:43:02
    unrealistic version of this but again
  • 00:43:04
    how many people you have to think about
  • 00:43:06
    this how many people are actually going
  • 00:43:07
    to be viewing your site at this
  • 00:43:09
    particular resolution most of them will
  • 00:43:11
    be on mobile like this or desktop like
  • 00:43:14
    this so it's never going to be perfect
  • 00:43:15
    for everybody but good enough is all
  • 00:43:17
    we're shooting for so click on this
  • 00:43:19
    container and we'll select flex and
  • 00:43:22
    we'll select column
  • 00:43:25
    Center over here Flex column Center over
  • 00:43:30
    here Flex column
  • 00:43:33
    Center let's check it out
  • 00:43:37
    now perfect and that is called
  • 00:43:40
    responsive design now the last thing I
  • 00:43:43
    want to add uh to this this particular
  • 00:43:45
    grid is I'd like rounded Corners I'd
  • 00:43:48
    also like a drop shadow for each of
  • 00:43:50
    these images but we can't do that on the
  • 00:43:51
    free version of generate blocks so if
  • 00:43:54
    you want effects like like Drop shadows
  • 00:43:56
    and other kinds of cool effects you're
  • 00:43:58
    going to have to get that paid version
  • 00:44:00
    so let's just round our Corners so we'll
  • 00:44:01
    go to the the grid and we'll click on
  • 00:44:03
    the first image and then we'll click on
  • 00:44:05
    borders and let's just add a border
  • 00:44:07
    radius of 10 so you can see that let's
  • 00:44:10
    check it out before we duplicate it I
  • 00:44:11
    like that looks nice right let's do that
  • 00:44:14
    for each one so we'll go over here Order
  • 00:44:18
    radius
  • 00:44:22
    save and Border radius
  • 00:44:30
    save yeah I like that look that looks
  • 00:44:32
    really nice looks professional and
  • 00:44:34
    honestly we should probably add a little
  • 00:44:36
    bit of a radius not 10 but a little bit
  • 00:44:37
    of a radius to this right here let's see
  • 00:44:40
    [Music]
  • 00:44:41
    borders five maybe five
  • 00:44:45
    five I like that now I think this grid
  • 00:44:49
    is done but this is only four categories
  • 00:44:51
    so now it's time to add our other four
  • 00:44:53
    categories so select the grid and we
  • 00:44:56
    will press d duplicate and now we
  • 00:45:00
    have eight categories but we don't have
  • 00:45:03
    eight different categories so let's go
  • 00:45:05
    over here and modify these so I believe
  • 00:45:07
    we had
  • 00:45:08
    winter and then we
  • 00:45:12
    had I can't spell when I'm on camera th
  • 00:45:15
    h r fty y Thrifty hacks there we go I
  • 00:45:19
    believe this was with
  • 00:45:21
    DIY and then this was small spaces and
  • 00:45:26
    let's change our images for each of
  • 00:45:28
    these replace save check it
  • 00:45:32
    out look at that isn't that it's
  • 00:45:34
    starting to look a lot more professional
  • 00:45:35
    isn't it then when you're on mobile this
  • 00:45:38
    is what most people will see it
  • 00:45:43
    as and again most people won't even be
  • 00:45:46
    visiting your homepage because they'll
  • 00:45:48
    be at Pinterest or they'll be at Google
  • 00:45:50
    and they'll see a blog post and they'll
  • 00:45:51
    click on the blog post and go directly
  • 00:45:52
    to that blog post so most people won't
  • 00:45:54
    even be visiting your homepage this is
  • 00:45:56
    more
  • 00:45:57
    for if a Google reviewer visits your
  • 00:45:59
    homepage or someone uh else professional
  • 00:46:01
    visits your homepage maybe someone that
  • 00:46:03
    wants to give you a backlink visits your
  • 00:46:05
    homepage they'll be like oh this is a
  • 00:46:06
    professional looking company now what we
  • 00:46:08
    need to do is we need to make these
  • 00:46:10
    actually link to the category pages
  • 00:46:13
    right now these aren't links they don't
  • 00:46:14
    go anywhere so we got to do that right
  • 00:46:15
    now linking it out is actually really
  • 00:46:17
    easy all we do is we click on the image
  • 00:46:19
    we're going to make a each of these
  • 00:46:20
    images is going to turn into a link and
  • 00:46:22
    we'll press this link button now we need
  • 00:46:25
    holiday so holiday
  • 00:46:27
    see holiday home why do we have two
  • 00:46:30
    category holiday home decor we shouldn't
  • 00:46:31
    have two categories so this one should
  • 00:46:34
    be spring spring home
  • 00:46:38
    decor
  • 00:46:39
    fantastic this should be summer this
  • 00:46:41
    should be fall home
  • 00:46:44
    decor this should be winter Thrifty room
  • 00:46:48
    makeovers DIY and small spaces let's
  • 00:46:52
    check it
  • 00:46:54
    out so here's our homepage we click on
  • 00:46:57
    Spring yep category spring home
  • 00:47:00
    decor summer home decor well this is
  • 00:47:05
    great it's good to just check all these
  • 00:47:07
    just to be
  • 00:47:11
    safe now we had our menu going up here
  • 00:47:13
    but then we obviously erased our dummy
  • 00:47:16
    categories so now we have our actual
  • 00:47:18
    categories so let's remake the menu and
  • 00:47:20
    then also put our about us down here too
  • 00:47:22
    so we'll go back to our back end and
  • 00:47:24
    we'll go over here to appearance and
  • 00:47:27
    then menus we want to find our footer
  • 00:47:29
    menu and we want to add a page and the
  • 00:47:33
    page is the about us page so add to menu
  • 00:47:35
    and where do we want it let's put it
  • 00:47:38
    first and let's see our contact can be
  • 00:47:41
    last let's move stuff around a little
  • 00:47:43
    bit see how this
  • 00:47:46
    looks
  • 00:47:47
    save
  • 00:47:49
    refresh that looks pretty good let's see
  • 00:47:51
    how it looks on mobile
  • 00:47:53
    F12 and checking it out on mobile right
  • 00:47:56
    now we get this wrapping it doesn't look
  • 00:47:59
    very good so let's go ahead and fix that
  • 00:48:02
    right now so let's open up another
  • 00:48:04
    window with our site and we'll press
  • 00:48:09
    customize and let's turn it
  • 00:48:12
    on mobile view
  • 00:48:15
    and edit this menu right here so let's
  • 00:48:19
    click on
  • 00:48:20
    menu and we'll check it out let's see
  • 00:48:25
    design fonts so right now it's at 12 we
  • 00:48:29
    could bring it down to to a font size of
  • 00:48:31
    10 if we wanted to let's try that first
  • 00:48:34
    of all we could bring this down to a
  • 00:48:36
    10 but also this the spacing is I think
  • 00:48:39
    a little bit too generous item spacing
  • 00:48:40
    so let's bring this down to 10 also no
  • 00:48:45
    15 I like that now while we're at it
  • 00:48:47
    because we we brought the font size down
  • 00:48:49
    to 10 for this it looks a normal with
  • 00:48:51
    this being at whatever it is so let's
  • 00:48:53
    bring this down to also oh we got to
  • 00:48:55
    click copyright we go click it and click
  • 00:48:58
    design and we'll bring this down to 10
  • 00:49:02
    also and we still have a lot of padding
  • 00:49:05
    in here Road vertical spacing let's
  • 00:49:07
    bring this down to 20
  • 00:49:09
    maybe so that's what it looks like on
  • 00:49:11
    mobile now let's go back up to
  • 00:49:16
    30 all right that's what it looks like
  • 00:49:18
    on the tablet and desktop I'm happy with
  • 00:49:21
    that so we fixed that now let's change
  • 00:49:24
    our header menu up so we need to we'll
  • 00:49:27
    stay in here but we'll go over to our
  • 00:49:29
    other tab on the back end and let's pull
  • 00:49:32
    up our main menu for our header now we
  • 00:49:35
    have eight categories but remember we we
  • 00:49:37
    removed all of the dummy categories and
  • 00:49:39
    so there's really none left in this main
  • 00:49:41
    menu right now so let's add them all
  • 00:49:43
    back in again so here's our
  • 00:49:45
    categories and let's just let's just
  • 00:49:48
    select all but not the uncategorized and
  • 00:49:51
    not product reviews We'll add them to
  • 00:49:53
    the menu and the order that we want them
  • 00:49:55
    Let's see we want holiday first then we
  • 00:49:58
    want
  • 00:49:59
    spring then
  • 00:50:02
    summer Then
  • 00:50:04
    Fall then winter Thrifty DIY small
  • 00:50:08
    spaces now because these are going to be
  • 00:50:11
    menu items we also want to stick to that
  • 00:50:13
    one word so let's go over here and
  • 00:50:15
    change this to
  • 00:50:16
    Holiday all right change this to
  • 00:50:20
    Spring otherwise as a menu up here it
  • 00:50:23
    will just take up way too much space so
  • 00:50:25
    we're going to condense all this down to
  • 00:50:26
    one word and we'll click save
  • 00:50:28
    menu and let's see what this looks like
  • 00:50:31
    now let's make this a little bit
  • 00:50:36
    bigger that's cool let's see here what
  • 00:50:40
    can we do to modify this a little bit so
  • 00:50:43
    let's let's click on our main row let's
  • 00:50:45
    remove search first of all just remove
  • 00:50:48
    that there's a little bit of an offset
  • 00:50:50
    here you guys see how this is like a
  • 00:50:51
    little bit lower let's put a if we put a
  • 00:50:54
    bottom margin on here will that bring it
  • 00:50:55
    up
  • 00:50:57
    oops let's unlink this reset it unlink
  • 00:51:00
    it that brings it up so bring that up by
  • 00:51:04
    10 and let's see what we can do here so
  • 00:51:07
    we click on our menu over here and
  • 00:51:09
    you'll have different menu options so we
  • 00:51:11
    can say like the normal menu which is
  • 00:51:13
    just you hover on stuff and it changes
  • 00:51:15
    color we can have this kind of a menu
  • 00:51:18
    where you move over stuff and there's
  • 00:51:19
    like this underline that happens at the
  • 00:51:22
    bottom there's this where we get
  • 00:51:24
    something on top and that's interesting
  • 00:51:26
    but then there's
  • 00:51:29
    this but did it maybe it didn't uh
  • 00:51:33
    accept the change let's
  • 00:51:38
    see there we go it just didn't refresh
  • 00:51:41
    we had to hit the refresh button click
  • 00:51:43
    menu I like this this is pretty cool
  • 00:51:46
    looking this is one of the reasons why I
  • 00:51:47
    really love Blacky you can do all kinds
  • 00:51:50
    of stuff with it so we've changed the
  • 00:51:51
    menu to here but you can say I want like
  • 00:51:53
    more spacing between these items right I
  • 00:51:56
    want to collapse non-fitting items and
  • 00:51:59
    that's just awesome you can modify the
  • 00:52:01
    hover the reveal
  • 00:52:04
    effect an inner reveal what's that
  • 00:52:07
    do I don't even know there's just so
  • 00:52:10
    much cool stuff that you can modify with
  • 00:52:12
    this you can get into the design and you
  • 00:52:14
    can do radiuses and stuff you can
  • 00:52:17
    modify just all kinds of stuff in here
  • 00:52:19
    but I like that I like the way that this
  • 00:52:21
    this looks now the other thing we got to
  • 00:52:23
    do and I actually didn't talk about this
  • 00:52:24
    before is when we have this menu right
  • 00:52:26
    here but when we go over here and we
  • 00:52:28
    click on tablet and we see this
  • 00:52:29
    hamburger menu watch what happens when I
  • 00:52:30
    select it we no longer see that that
  • 00:52:32
    main header menu we see that footer menu
  • 00:52:34
    or we just see some kind of random menu
  • 00:52:36
    so this needs to be fixed reason is we
  • 00:52:39
    have this off canvas area so this is
  • 00:52:41
    like the tablet mobile header and this
  • 00:52:43
    is the desktop header so on tablet
  • 00:52:45
    mobile header you have this thing that
  • 00:52:47
    we're going to see over here when we
  • 00:52:49
    expand it that's this right here is this
  • 00:52:52
    and this right here is just like this
  • 00:52:54
    hamburger trigger so we can mod ify the
  • 00:52:56
    way the trigger works like we can put
  • 00:52:59
    that if we want to but then if we want
  • 00:53:00
    to modify the stuff in the menu that's
  • 00:53:03
    what this is for over here so select
  • 00:53:05
    this and then we got to choose our main
  • 00:53:08
    menu and then when we open it up we have
  • 00:53:12
    a different categories in here see how
  • 00:53:13
    that works so you just select the menu
  • 00:53:15
    that you want there's all kinds of other
  • 00:53:17
    options you can toggle what colors you
  • 00:53:19
    want for this what you want an X or do
  • 00:53:21
    you want different types of things very
  • 00:53:24
    amazing functionality so let's let's are
  • 00:53:26
    we done
  • 00:53:27
    with are we done with this so far I
  • 00:53:31
    think it's looking really
  • 00:53:34
    good think this is just looking
  • 00:53:36
    absolutely incredible now the next thing
  • 00:53:38
    we need to do is we don't have any posts
  • 00:53:40
    anymore we deleted all of our dummy
  • 00:53:41
    posts and we're going to add our real
  • 00:53:43
    posts but we're going to need a one more
  • 00:53:45
    section down here of our most recent
  • 00:53:48
    posts so we'll go over here and we're
  • 00:53:50
    just going to prep this because we can't
  • 00:53:51
    really see this right now we'll go over
  • 00:53:53
    here to our pages
  • 00:53:56
    and we'll edit the
  • 00:54:00
    homepage and we'll come down we got to
  • 00:54:02
    open up our menu again and there's this
  • 00:54:04
    paragraph down here we're going to
  • 00:54:05
    convert this into take a guess take a
  • 00:54:08
    guess a container in the container the
  • 00:54:11
    first thing we want is a headline is
  • 00:54:12
    something simple like latest home decor
  • 00:54:17
    articles something simple like that and
  • 00:54:19
    so we need one more Block in here select
  • 00:54:20
    our container again we'll click the plus
  • 00:54:23
    and we're going to type
  • 00:54:25
    Advanced post posts and we want to
  • 00:54:27
    inherit from the customizer right we
  • 00:54:30
    just have this hello world post right
  • 00:54:31
    now you want a limit of five posts we
  • 00:54:33
    want
  • 00:54:34
    pagination and we also want to exclude
  • 00:54:38
    the
  • 00:54:38
    category of
  • 00:54:41
    product reviews we don't want product
  • 00:54:43
    reviews to show up in here we just want
  • 00:54:45
    our normal category post to show up in
  • 00:54:47
    here so we're not going to see anything
  • 00:54:48
    unfortunately right now it's just going
  • 00:54:49
    to appear pretty blank but it will fill
  • 00:54:52
    up as we start building our posts so oh
  • 00:54:54
    we got to make this in go in the center
  • 00:54:56
    let's go do that really quick we want a
  • 00:54:59
    align text
  • 00:55:01
    Center
  • 00:55:04
    and right that looks pretty good again
  • 00:55:06
    there's no image for this we it will we
  • 00:55:08
    actually we can just create something
  • 00:55:10
    really quick just to show you how this
  • 00:55:11
    looks let's just go to our dummy content
  • 00:55:13
    generator generate posts let's generate
  • 00:55:16
    six posts because our pagination is set
  • 00:55:19
    to
  • 00:55:20
    five making the post right now it's
  • 00:55:24
    already done
  • 00:55:26
    and let's
  • 00:55:28
    refresh so that's what it will look
  • 00:55:31
    like that's what our homepage will look
  • 00:55:33
    like and then if we want to look at it
  • 00:55:35
    on
  • 00:55:36
    mobile okay so I'll go ahead and I'll
  • 00:55:38
    delete these dummy
  • 00:55:40
    posts don't need that and I'll go back
  • 00:55:43
    into the media library we have to delete
  • 00:55:44
    that those images that we just got I
  • 00:55:46
    don't know where they get these images
  • 00:55:47
    from I just like to delete them in case
  • 00:55:48
    they are licensed images are something I
  • 00:55:50
    just don't want them floating around on
  • 00:55:51
    my site and I think that's it we are
  • 00:55:55
    done with our landing page now now some
  • 00:55:57
    things we have not configured yet but
  • 00:55:59
    we'll configure them after we start
  • 00:56:01
    loading posts onto our site our category
  • 00:56:04
    Pages we don't want the the page to look
  • 00:56:07
    like this so we're going to do some more
  • 00:56:08
    customizations in a future video but in
  • 00:56:11
    the very next video we're going to start
  • 00:56:13
    loading some content onto our site the
  • 00:56:16
    moment we've finally been waiting for
  • 00:56:18
    we're going to take all of that stuff
  • 00:56:19
    that we generate those 300 what was it
  • 00:56:21
    300 or 6 600 I forget how many articles
  • 00:56:24
    we queued up but we have hundreds of
  • 00:56:26
    articles Les just about ready to go so
  • 00:56:29
    we're going to finish the processing of
  • 00:56:31
    these to create a a nice queue and then
  • 00:56:35
    start loading articles up and then start
  • 00:56:36
    filling our site with this stuff so
  • 00:56:39
    that's what's happening next I hope you
  • 00:56:41
    are excited I'm excited and hey if you
  • 00:56:43
    like this video if it's helping you if
  • 00:56:45
    you're following along you're getting a
  • 00:56:46
    lot of value out drop a comment down
  • 00:56:47
    below subscribe sub share it with your
  • 00:56:49
    friends all that good stuff there's
  • 00:56:50
    links down below to a lot of the
  • 00:56:52
    software that I'm using there's also a
  • 00:56:54
    link to our 13,000 member Facebook group
  • 00:56:56
    group definitely join hey good luck with
  • 00:56:58
    your content generation and I will see
  • 00:57:00
    you in the next video
Etiquetas
  • WordPress
  • webwerfontwikkeling
  • blokplugins
  • cloudways
  • tuinontwerp
  • kategorieë
  • inhoudgenerering
  • DIY
  • tuisdecorasie
  • blogskrif