Long Page Example

One frustrating thing about paragraph bundles is that when you had a long page, it was difficult to locate specific content. You'd just see a bunch of collapsed paragraph bundles, each with the title of the paragraph bundle type, with no option to label it in a meaningful way.

In Layout Builder, there are now some great tools to organize the administrative side of your pages and to see a bird's eye view on long pages.

Content Preview

There is a checkbox at the top of the Layout Builder editing page that will toggle to show either the content of all your blocks or just their titles.

It is called the Show content preview checkbox below Save layout.

This option can be used to manage long pages. If you uncheck the Show content preview, you will see just the titles of all your blocks and can get a sense of the flow of the page. This will also allow you to more easily move content around.

Currently, sections can't be reordered, but you can move blocks to a different section to reorder the content.

If you label your sections and blocks carefully, then you can easily either click and drag or use the Move option to rearrange blocks.

Labeling Sections

If you click on Configure Section, there is a cog icon as one of the options in the editing side tray that appears. Once you click on the cog icon, there is a place to add an administrative title. This will only show up in the layout builder editing page. Meaningful titles will allow you to know what each sections contains.

Block Titles

All blocks require a title. You can toggle whether or not to display the title. By default, we fill out the title field automatically with a generic title of inline block and mark it to not display. However, you can replace that with a meaningful title that will make managing long pages much easier. It can be either hidden from the public side or displayed.

A title of a block is a Heading 2 by default and can't be changed. This works out well to section out your page. A page title is a Heading 1 and major sections of your page should be Heading 2s. Title each block heading with a meaningful heading and you will have a well organized and accessible webpage.

Moving Blocks

You can move blocks either by clicking and dragging them to their desired location or you can use the Move option.

When you click on the pencil icon to edit a block, one of the options from that contextual menu is Move. When you click on this, you will be given an overview of the structure of your page. If you have labeled your sections and blocks well, it will be easy to locate your target destination.

Below is an example from the Elements page in this Site Building guide.

Image

Quo voluptatibus neque aut explicabo incidunt eum beatae nostrum.

Ut saepe molestiae aut voluptate voluptatumAt cupiditate et voluptas numquam? Et voluptatem voluptatibusEum autem ut voluptatem tempora et dolor facilis eos fugiat totam et quae quia. Est iusto earum et ducimus exercitationemut dolorem! Ex perferendis minus non alias quiaEt aliquid et nihil veritatis qui aliquam repellat ut illo explicabo. In molestias cumqueSit atque 33 fuga dolorem 33 ipsum vitae qui tempore voluptatibus in quibusdam ipsum. Est possimus asperiores non nisi evenietVel voluptatibus et mollitia earum in labore dolorum aut libero accusantium sit iste dolore. Et quas doloribusIn necessitatibus ut maiores enim aut quod soluta ab consequuntur dolorum cum distinctio architecto est Quis quisquam. Aut omnis voluptasId aspernatur At distinctio enim et ratione tenetur. Vel reprehenderit aliquamSit esse At consequuntur reiciendis ad rerum reprehenderit.

Cum atque Quis sit distinctio cumque.

Est nostrum dolorem Vel debitis aut ipsum doloremque At enim aspernatur. Ut quibusdam atqueUt autem qui voluptatibus maxime a reprehenderit unde. Ut corporis excepturiIn dignissimos cum numquam aperiam non omnis repudiandae est suscipit vitae. Eum atque voluptatemEst temporibus in repellat internos est minima laborum in ullam nostrum. Sit consequatur architectoIn adipisci est porro voluptatem in eligendi placeat nam illo numquam. Ab repudiandae inventore est accusamus vitaeut quas non beatae tempore. Rem porro exercitationem est ipsam consequaturAut corrupti aut maxime deserunt aut blanditiis aperiam sit nihil reprehenderit. Sit voluptas molestiae id voluptas molestiaeAt harum et vero sequi aut molestiae beatae ut perspiciatis minima. Non molestiae temporibus 33 iure doloresAut quidem.

Sit excepturi optio et vero veniam.

Lorem ipsum dolor sit amet. Sed voluptate placeatEos nihil et repellat doloremque ut praesentium temporibus et dolorem accusamus ut reprehenderit consectetur aut iure voluptatum. Sit numquam molestiaeId delectus 33 eaque exercitationem. Sed maxime eius est distinctio inventorequi dolor ad ducimus laboriosam. Eum similique mollitia vel rerum necessitatibus Et dolor est illum ipsum non nihil quia sed nobis rerum. Cum pariatur minusEa quaerat non velit dicta vel amet omnis ut consequatur fugiat est vero nihil. Est consequatur laudantiumUt eius rem quis voluptatem est iusto rerum et distinctio architecto non voluptatum quae aut dolore accusantium. Et beatae culpaUt temporibus in officia exercitationem et tempore ratione hic earum odit et porro cumque eum culpa eaque. Ad aliquam quae et accusantium suscipitEst blanditiis. Nam fugit quidemVel nihil sit vitae incidunt est necessitatibus autem.

Ea porro dolores est suscipit dolores et numquam corrupti?

Eos vitae dolorumNam galisum est corporis officia sed quaerat dolor. Est dolorem dicta et labore iste33 quia? 33 similique laborum eum aliquam quia Et similique nam nisi corrupti non placeat iusto qui provident molestiae. Aut deleniti eiusEst ipsam qui facilis esse qui voluptate suscipit vel provident impedit id internos neque quo expedita nisi! Ut quos voluptateEt ullam ut veniam culpa ab neque veritatis.

Sed tempora dignissimos sed ipsa deleniti.

Aut iure nisiEt incidunt non fuga quia! Aut laborum autemEos veritatis est velit dolorum eum molestias quos hic ipsam nostrum At itaque soluta eum accusantium ipsam? At dolorem blanditiis et veritatis quam Et dolore sit blanditiis ratione sit dolorem doloribus ut voluptate numquam. Non natus voluptatem in minus cupiditateEt quidem 33 reiciendis eaque aut aliquid eaque ut galisum obcaecati qui natus velit. Ut quae enim ut quia voluptatemEt iste est autem inventore in velit debitis aut distinctio harum qui iure aliquid.

1. In quia voluptatem sit nemo eius est molestiae accusantium ut totam dolor.
2. Qui debitis doloribus non voluptatibus iste quo minima neque est galisum eligendi.
3. Et exercitationem repellat vel excepturi natus est magni reprehenderit.
4. Ex numquam consequatur ea odio nisi et architecto eveniet.
5. Ex iusto consequatur et eligendi suscipit?

Non libero iste ad voluptas alias eos modi omnis.

Eum nesciunt rerum Est velit est dolores velit ut ratione doloremque et porro ullam cum veritatis alias aut explicabo debitis? Sit eaque solutaQuo omnis eum mollitia accusamus qui doloribus nihil eum repudiandae magnam At facilis quaerat in nostrum vitae. Eos quas quis aut quis internosEst consectetur ut distinctio minus non quia accusamus non laborum saepe et repudiandae magnam. Sed vitae maioresAut magnam qui voluptatibus fugiat est illo temporibus sed inventore dolores. Est voluptatibus rerum id earum dolorumab laudantium eum autem consequatur.

33 harum molestiae vel ipsam nobis.

Aut eligendi enimUt internos in quas excepturi qui unde velit. Aut neque molestiae est neque reiciendisnon laudantium sed error Quis in temporibus eveniet. Est aperiam similiqueUt doloremque et voluptas fugit 33 nostrum laboriosam in expedita exercitationem. Quo suscipit ametQui placeat nam sapiente voluptatem aut animi vitae. Hic rerum accusantium id internos undeSit saepe qui autem sunt ex delectus fuga et facilis dolore. Et accusantium magniUt autem eum commodi dignissimos qui illum quod est accusamus rerum eum ipsa sint. Quo dignissimos quibusdam cum accusamus quas Eos eveniet qui natus rerum 33 rerum cumque et unde consequatur.

Sed mehercule pergrata mihi oratio tua.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Estne, quaeso, inquam, sitienti in bibendo voluptas? Quem Tiberina descensio festo illo die tanto gaudio affecit, quanto L. Scaevola tribunus plebis ferret ad plebem vellentne de ea re quaeri. Quem ad modum quis ambulet, sedeat, qui ductus oris, qui vultus in quoque sit? Quis hoc dicit? Duo Reges: constructio interrete. Num quid tale Democritus? Et ais, si una littera commota sit, fore tota ut labet disciplina. Hoc dixerit potius Ennius: Nimium boni est, cui nihil est mali. Quid igitur, inquit, eos responsuros putas?

Zenonis est, inquam, hoc Stoici. Haec dicuntur fortasse ieiunius; Illi enim inter se dissentiunt. Tanta vis admonitionis inest in locis; Respondent extrema primis, media utrisque, omnia omnibus. Quamquam haec quidem praeposita recte et reiecta dicere licebit. Non autem hoc: igitur ne illud quidem. Inde igitur, inquit, ordiendum est. Quid ait Aristoteles reliquique Platonis alumni?

Hoc mihi cum tuo fratre convenit.

Dic in quovis conventu te omnia facere, ne doleas. Quid in isto egregio tuo officio et tanta fide-sic enim existimo-ad corpus refers? Res enim fortasse verae, certe graves, non ita tractantur, ut debent, sed aliquanto minutius. Si enim, ut mihi quidem videtur, non explet bona naturae voluptas, iure praetermissa est; Itaque a sapientia praecipitur se ipsam, si usus sit, sapiens ut relinquat. Quo modo autem optimum, si bonum praeterea nullum est? Poterat autem inpune; Qui autem esse poteris, nisi te amor ipse ceperit?