Building a website with bootstrap 4 - direct output template strategy

Posted 15th Oct 2017

#bootstrap4 #completeguide #templatestrategy

So now we have the templates sorted, we can add a few pages to our website. We don't need to worry about rendering them just yet, just create some content.

Home > Edit

We can add some stuff to our homepage now, title, alternate title, image and a summary.

Editing the home page
Editing the home page Zoom

Notice how the fields can be collapsed or expanded. You can set the defaults when editing a field at 'Admin > Setup > Fields > Input (tab)' in the field visibility section. You can also set conditions which have to be met in order for a field to be shown in the editor, for example, you could set up a checkbox 'Show main image', that when checked shows the 'Featured image' field. It's sometimes useful to hide a field when it doesn't always need a value.

Setting field visibility
Setting field visibility Zoom

Home (hover) > New

Create an about page using the 'basic-page' template, edit the fields and save the page.

Home (hover) > New

Create a 'Services' page using the 'services-index' template. Only needed a page title here.

Services (hover) > New

Create a few child pages of 'Services' using the 'services-entry' template, edit the fields and save the pages.

You should now have a structure like this.

Structure of the simple website
Structure of the simple website Zoom

So we're done with this part. Next we have to create a few template files in order to render this all out.

Feedback & support

I hope you enjoyed this tutorial. You can support pwtuts by following on @pwtuts. You can also donate at to help support the site which would be awesome!

Related tutorials / See all

Suggest a tutorial

Please note: I do not store any of this information, it's simply used to send me an email. Your email address is required so I can get clarification on your request if needed.