Layout Builder in Nex-Gen CMS

Aaron Coleman Author

06/12/2023 Added

194 Plays

Description

An introduction to Layout Builder in the Next-Gen CMS showing how to add sections and components to build a page.

Searchable Transcript

Search:

[00:00:00.210]In this demo we're going to talk about Builder pages
[00:00:03.960]which include Layout Builder,
[00:00:06.720]probably the most powerful page building.
[00:00:13.440]In this demo we're going to talk about Builder pages
[00:00:15.870]which contain Layout Builder.
[00:00:22.999]In this demo we're going to talk about Builder pages
[00:00:27.030]which for the most part should replace
[00:00:28.860]Basic page as your most used content type
[00:00:31.560]for building pages.
[00:00:33.510]With this content type,
[00:00:34.440]you have the ability to build basic pages,
[00:00:37.968]but it also comes with Layout Builder,
[00:00:40.098]an advanced feature for building out complex layouts
[00:00:42.120]on your site.
[00:00:43.440]So, we're gonna get started with one,
[00:00:44.850]and I'm gonna show you how it works.
[00:00:47.850]Once you're logged in, go to Content, Add Content,
[00:00:50.670]Builder page.
[00:00:53.880]This interface should look pretty familiar.
[00:00:56.342]It looks a lot like a Basic page on UNLCMS.
[00:00:59.490]If I click here, I can add a hero.
[00:01:01.950]I have a title for my page here,
[00:01:04.800]a body, I can format text and add images.
[00:01:08.040]And then, there's some
[00:01:10.519]of the typical menu settings, Page Options
[00:01:14.340]and URL alias stuff.
[00:01:16.200]So, I'm gonna say, "Test Page for Layout Builder Demo."
[00:01:20.850]And I'm not gonna put any text there.
[00:01:24.420]And I'm gonna hit Save.
[00:01:26.520]So, I have a page with nothing on it.
[00:01:29.940]And you'll see the tabs look pretty familiar,
[00:01:31.710]except for there's a new one here called Layout.
[00:01:34.710]So I'm gonna click into that,
[00:01:35.753]so we go ahead and get into Layout Builder.
[00:01:38.850]So when you first open this page,
[00:01:40.110]there's kind of a lot of stuff.
[00:01:42.030]And this box right here is a placeholder
[00:01:45.210]for if I would've added text
[00:01:48.330]or any information into the body field
[00:01:50.370]on the screen that I was just on.
[00:01:52.380]This menu will show up by default if you do that,
[00:01:55.702]just as a way to help fill out the page.
[00:01:58.260]But, we don't want to do any of that.
[00:02:00.585]We wanna work on Layout Builder.
[00:02:03.360]So, I could add a section above or below.
[00:02:06.180]It doesn't really matter,
[00:02:07.957]because none of them are showing up right now.
[00:02:09.766]I'm gonna go ahead and add one right here.
[00:02:11.700]Now, when I add a section, it asks me
[00:02:13.950]what to choose which layout I want to use,
[00:02:17.160]you know, how many columns.
[00:02:19.277]I'm gonna go ahead and choose Two.
[00:02:22.230]And when you choose two, you're gonna get
[00:02:24.630]an option for the Column Widths
[00:02:26.670]that you wanna use on that page.
[00:02:28.710]So, I'm gonna say 50 50.
[00:02:31.260]You can also add an optional heading here.
[00:02:33.390]So, I'm gonna go ahead and say, "Column Two Heading,"
[00:02:38.790]I'm gonna go ahead and show that heading.
[00:02:41.070]I'm gonna make an H2 styled like an H2.
[00:02:45.540]There's also an advanced setting here,
[00:02:48.600]if you need to make an anchor tag to a section on a page.
[00:02:52.590]So, I can add an ID here,
[00:02:54.300]and then use that later to anchor directly to
[00:02:57.270]that section on a page.
[00:02:58.860]So, I'm just gonna call it, "Column Two Section".
[00:03:05.370]I probably won't use it, but it's good to know it's there.
[00:03:10.440]For this section, which previously we've referred to
[00:03:13.590]as bands, because it covers the entire width
[00:03:17.430]of this section,
[00:03:20.010]you can choose a background, a background color.
[00:03:23.940]And then, you can choose whether it's a standard wrapper
[00:03:27.810]which is similar to DCF wrapper,
[00:03:30.180]or Edge to Edge which is similar to DCF Bleed.
[00:03:34.080]So, I'm gonna choose a standard wrapper.
[00:03:36.960]I'm gonna use a lighter gray background.
[00:03:41.730]And these background patterns,
[00:03:43.590]you're probably familiar with Grit
[00:03:45.060]if you've been developing before.
[00:03:47.917]We've also added some repeatable SVG patterns,
[00:03:50.765]Campus, Landmarks and Majors.
[00:03:53.640]And those will layer with any background color
[00:03:55.890]that you use as well.
[00:03:57.750]So, we have our widths,
[00:04:00.360]our heading, our background, our wrapper
[00:04:05.280]and then this spacing is a multi-select box
[00:04:08.940]that determines the spacing
[00:04:11.550]above the padding and
[00:04:12.840]above and below the layout that you're building
[00:04:15.390]in this box.
[00:04:17.385]I'm not gonna do any of these, but you know,
[00:04:19.380]you could hold down your Command key
[00:04:22.500]and choose to remove all padding
[00:04:26.160]or to add extra padding to each.
[00:04:29.550]So, I'm gonna go ahead and add this section.
[00:04:34.110]Now that I've added this section,
[00:04:35.430]you can see that I have two new boxes
[00:04:37.410]where I can add components to those boxes.
[00:04:40.200]So, in this second box
[00:04:41.520]I'm gonna go ahead and click that,
[00:04:44.427]and you can see all the different things
[00:04:46.740]that you can add here.
[00:04:48.660]Now, the nice part about this is all these components
[00:04:52.230]you can just build with fields.
[00:04:54.750]There's no HTML involved,
[00:04:57.179]and you can just add them in here.
[00:04:58.080]So I'm gonna go ahead and add an accordion
[00:05:01.050]which is details and summary.
[00:05:02.970]And I'm just gonna say, "Accordion Title,
[00:05:07.950]Accordion Item One," little text in here.
[00:05:17.670]And then, I'm gonna go ahead and add two.
[00:05:20.250]So, all right, so I'm gonna add
[00:05:27.180]this accordion block component with two items in it.
[00:05:35.370]You can click those, and you can see that they drop down.
[00:05:38.940]And then over here,
[00:05:41.378]I'm gonna go ahead and add something else.
[00:05:42.211]How about a slideshow?
[00:05:44.490]So again, you can see there's no coding involved.
[00:05:47.400]You just get to choose the things
[00:05:49.590]that you're adding to the slideshow.
[00:05:51.749]So, I'm gonna go ahead,
[00:05:53.158]I've already uploaded a few photos here to use
[00:05:55.017]this nice photo of Love Library.
[00:06:00.984]It already has the alt text, 'cause I've uploaded it.
[00:06:04.230]So, I'm just gonna say,
[00:06:06.189]"I know that Craig Chandler took this photo."
[00:06:10.950]And then I'm gonna go ahead and add another slideshow item.
[00:06:14.580]And I'm gonna say
[00:06:16.387]"Now these students in the classroom look good."
[00:06:20.670]So I might want to add, you know,
[00:06:23.917]"This is College of Business Entrepreneurship,"
[00:06:34.050]or something like that.
[00:06:35.310]So, I'm gonna go ahead and add that block.
[00:06:37.860]It looks a little weird when you add it,
[00:06:39.270]but when you save the page,
[00:06:42.840]you'll see that it pops into place.
[00:06:46.110]If there's a caption or a credit,
[00:06:47.970]you just click that button and it shows.
[00:06:50.460]And then I can cycle through those items there,
[00:06:54.360]and you can see my accordion to the right.
[00:06:56.850]Well the other nice thing about Layout Builder is
[00:06:59.220]that I can come in here,
[00:07:02.130]and I can say,
[00:07:03.701]"Well actually I would prefer
[00:07:05.130]if the slideshow was on the right."
[00:07:08.250]So, I can drag that over there,
[00:07:11.280]and I can drag the accordion over here,
[00:07:14.670]and then I can click Save Layout.
[00:07:19.110]And you can see that I switch those two things.
[00:07:22.230]And I can even come in,
[00:07:24.360]and I can add another section, say,
[00:07:26.287]"Okay, actually maybe I want something else
[00:07:28.590]in this column, and I want the slideshow to be big."
[00:07:30.690]So, I'm gonna add a new section.
[00:07:33.120]One column.
[00:07:36.930]And this all looks fine, standard wrapper.
[00:07:38.940]I don't need a background on this,
[00:07:40.350]'cause I want it to contrast with what's above it.
[00:07:43.350]So, I'm gonna go ahead and add that.
[00:07:46.230]And now, it's asking for a component.
[00:07:48.510]I can either add a new one,
[00:07:50.938]or I could just drag this down here.
[00:07:54.600]Again, it looks a little weird
[00:07:56.901]when you the slideshow
[00:07:57.734]because it's using absolute positioning,
[00:08:00.150]but if I click save,
[00:08:02.610]you can see that I have my accordion title here,
[00:08:04.440]nothing in this right column.
[00:08:06.630]And now, I have a slideshow that takes
[00:08:08.070]up the whole width of the page.
[00:08:10.170]So, once you get into the Layout Builder,
[00:08:17.310]I apologize for the sirens.
[00:08:19.950]Once you get into Layout Builder,
[00:08:21.780]adding components adding backgrounds,
[00:08:24.390]and sort of mixing and matching,
[00:08:26.760]and you can drag and drop to rearrange them,
[00:08:29.130]you can see that it's actually a pretty powerful tool
[00:08:31.200]for building pages.
[00:08:34.290]Click Save to save that, and now it's viewable.
[00:08:37.620]So that is a very basic demo of Layout Builder.
[00:08:42.210]We'll be doing videos on the individual components
[00:08:44.790]as we move forward.
[00:08:46.200]But as I said, they're pretty self-explanatory.

The screen size you are trying to search captions on is too small!

You can always jump over to MediaHub and check it out there.

Comments

0 Comments

Layout Builder in Nex-Gen CMS

Description

Searchable Transcript

Comments icon comment

Related Channels

Comments