blog banner
School Website: Creating a Master Layout

School Website: Creating a Master Layout


Hi! My name is Derek and I’m part of the Strategic Content Development team here at Blackbaud. Let’s take a closer look at Master Layouts and how they help create awesome looking websites for your school. Master Layouts are the backbone to any great looking website. They allow you to establish a framework containing all content that webpages are created from. What’s great about this is that they set a consistent look and feel across your entire website. Each page can have editable regions that can be modified, while other elements like a menu or page header can be locked to prevent any edits by a designer. Start by going to School website, select Website management, edit an existing website, and then select Master layouts. From here, you can edit an existing one, but for this demo, we’re going to create a new one by selecting this. You’ll then be asked to name the new layout. The new layout then appears on the grid list and the system shows you how many pages use the layout. Select the name to start editing and customizing. If needed, you can also copy the layout, which is a common practice to make modifications to an existing layout. There is a delete option as well, but keep in mind that is the layout is currently being used, a lock icon appears and the layout can’t be removed until it is detached from all pages. When editing a new layout, you’ll first need to add a Region. A region spans the entire width of a page, with its height determined by the content that is put into it. Designers can create as many Regions as needed, but all layouts need at least one by default. Having multiple regions allows you to create a banner effect with styles; essentially multiple regions and adding different styles to each. Select Full browser width to have wall-to-wall content on your page. If you want the content on your page to stay within the middle of the screen (margin spaces to the outside of the page), then leave this option as no. Rows are added to create a new layout of columns on your page. You create new rows by dragging the + Add row into a Region. Inside of a Row, select Add column in the upper right corner of the lightbox you are working within. To resize columns, move your cursor to either side of your column and click & drag. You don’t actually need to cover all 24 grid lines. Leave some alone to create a spacing effect between added content. With the layout set, it’s time to add content. On the left side, drag over content from various content types, widgets, and navigational items like menus and breadcrumbs. Arguably the most important content to add is the widget called Page Content. Essentially, it enables faculty to add or modify content after a page is created from the master layout. Without it, any pages that use this layout will be locked and won’t have any editable areas. While editing, consider using the View page feature to see a preview of what you are creating. It’ll give you an idea of what the page will look like to a site visitor. With the content now set, it’s time to stylize the look and feel. Use this icon to open a preview screen of the current master layout. A blue container will appear over the various content items on the page within the layout as they’re selected, which indicates that styles can be added. Select an existing style to apply it to the selected content. If you wish to style the rows, regions, or the page background, select Edit styles from the bottom of the page. From here you can select the different layout elements to style. Repeat steps 1-3 as needed until your layout is fully styled the way you want. With layouts made, content added, and styles applied, your site designers can now create new webpages based on this Master Layout. For more information on building websites, make sure to stop by our online help. Before you leave, don’t forget to subscribe to stay up to date on all of our latest video content. As always, thanks for watching!

Leave a Reply

Your email address will not be published. Required fields are marked *