Creating Layouts and Landing Pages for Drupal 8

so today I'm going to talk a bit about creating layouts for Drupal 8 different techniques in terms of site building I'll talk a little bit about theming and I'm going to be talking largely from the perspective of making landing page type layouts just as an introduction um I work at evolving web in Montreal my name is Suzanne de Gotha and I'm one of the cofounders of evolving web and I work mainly at the femur and a site builder and I also do a lot of training so we do have some training coming up in Ottawa the week of September 12 so if you or someone on your team is trying to get into Drupal 8 and you want to learn Femi module development site building we have five days of training howto broken up into three parts so come ask me more if you're interested so the process of creating layouts and on any Drupal site really involves a lot of different parts of Drupal so often we start off with configuration we look at blocks and regions often which is where the theme system and the site building system is kind of neat there's often a large theming component especially if you're making a really customized site and if you're trying to make a site that's not just good looking good the day launch but also planning for the future creating layouts you might also think about applying some kind of design framework so that your your site will look good into the future as you add additional components so when we think about layout these days with a mobile first design and a really responsive focus a lot of sites are looking more and more like one column website does anyone noticed that like you're you're getting new designs for projects and there's no side bars anywhere everything's just all in one column so we often see a design that looked kind of like this especially for internal kind of content pages and so the layout isn't actually so complicated we are focusing more on designing the the components as you scroll down down on the page but we don't have to do so so much in terms of managing different sidebars or different columns in a grid but often on a home page or if you're designing some kind of section landing pages we do get a lot of columns and we get you know different types of grids that were expected to to build into our Drupal site and we have to think not just about the layout and how we're going to apply the CSS to create the layout but also about how we're going to get the right content into that layout is this a standalone page that we're building there's only one of them and we can create all these custom components or is this a template for many landing pages that are going to be built out over the lifetime of the site or is it a home page that has to be updated by authors and site administrators on a regular basis like does it have to be really flexible so depending on the content kind of requirements for the landing page that's going to have a big impact in terms of how you're going to build it so we'll talk through that during the coordinates accession you might also run into pages when you're building a design that are more traditional so more like the typical content two sidebars kind of layout and so it's important that whatever system you you use for building the layout of your site that it can accommodate that kind of layout as well so to start off with I'm going to talk about configuring different layout components so I'm going to take this really typical landing page layout I'm sure we've all seen dozens of websites that have this exact layout with the big banner at the top some calls to action some other full-width piece of content a bunch of content items in a grid I'm going to talk about how we could build this some different configuration options and then I'll talk more about kind of the theming and design side of things so to start with how would we build out the call to action so depending on whether it's a home page or an internal kind of landing page there's different solution but typically any call to action is going to have different field components so we're usually talking about it some kind of title a snippet of text probably an image to go in the background and maybe a link with another custom text with the actual call to action so to look at some examples you can imagine a page or three calls to action like this on a home page this example comes from the website all-seeing Alliance org so it's three audiences that the client defined and on the home page we wanted to have these three calls to action so that the different audiences could access a landing page that's more specific to their needs and we actually ended up building this out using views so because the three calls to action are always linking to the same type of content we could easily define a view to display this this content the four fields the title the text the image the the link those are all pulled from the node that's being linked to so this was a really easy implementation you might see calls to action that look more like this so in this case you have kind of three calls to action to major sections of this University website and our major is visited as tuition and Aid and then you have three things that look more like views I guess that are are linking to relevant content so you might have calls to action that are kind of interchangeable with other types of blocks and so in this example you'd have to have a bit of a more flexible approach to to how you're going to configure this this example comes from the McGill University Alumni website so on their homepage they have three internal calls to action for to the global network page the parents page the students page but then I also have this update your info link that links to a different system so this is not an internal link so if we were building this out with Drupal we wouldn't just be able to create a view of content because the first call to action isn't content we mean something more flexible so we'd want to create some kind of a some kind of reusable component that has the icon the title the text the link and we'd want to be able to create four of them and be able to link on-site or off-site so translating this into Drupal configuration talk I'd say the three main options I would see for creating calls to action like this would be using paragraphs how many of you have used paragraphs paragraphs is kind of like the the new kid on the block and it's really similar to a field collection but it's a more flexible and it seems to be a bit more reliable and so that's that's one option paragraphs allows you to create different paragraphs types which are kind of like mini nodes which you can attach to your content types so you can attach a paragraph field to a landing page and that kind of allow you to reference your your individual paragraphs and then each paragraph can be a call to action so I can define a paragraph type that has a title text link and image and then I can use those for all my landing pages so that's a really flexible option and it allows me to treat the calls to action kind of like content like just another field like nothing really special another approach would be block types so how many of you use block types in Drupal 8 or maybe you were using beans in Drupal 7 that was kind of like the pre block type module block types are basically like content types for blocks so instead of just having a custom block where you can add a title and a body you can attach all kinds of other fields to your block and you can define different types of blocks like you can have an advertisement block that has an image and a link you could have a video block that lets you display videos as blocks throughout your site and you just have to put in the video link or in this case we could have a call to action block type that has our image or text or title in our link and we can place those on our landing pages and the nice thing about using block types is that it's it's super flexible so you can interchange the your calls to action with other types of law so if you were trying to build out a page like this and you wanted to intermingle something that's really a call to action with a list with some lists of content then block types would be probably a great solution the one thing about block types though is that it's a bit more challenging for your authors in your site administrators because blocks are managed in a different part of the interface you can't just click Edit on your landing page to get to get to those block types and then finally we could maybe build it with views so depending on what your calls to action are if you can kind of describe in a view what your list of things is if I have three calls to action I mean to me that just looks like a list so of course you can build it with views and I think like as Drupal site builders a lot of us probably jumped to views because it's like you can do anything with views right so that's always an option as well so it's you if you do decide to go the paragraph approach this this is kind of what the interface is going to look like when you're editing a landing page if you attach a paragraph field to the landing page content type then you get this little mini form within your landing page edit form where you can edit the individual calls to action or in this case I'm calling them landing promos and one thing that paragraph gave paragraphs gives us that we didn't have with field collections is that with paragraphs we can have different types of paragraphs that we can reference all from the same all from the same landing page field so for example if I'm building out a site and I want to have three different calls to action on a landing page but I want to have one call to action that's video based and one that has a gallery of images and one that's just really basic text and an image then I can attach those three paragraph types using the same field so those are three options for my call to action another component that you often want to build out on landing pages but also just on on any page throughout your site would be a hero section so heroes kind of like the the term people use sometimes for the banner at the top of the page often in designs these days people making them really big sometimes like the full basically the full size of your laptop screen and that banner often has a call to action in it as well and often it's contextual to the page so if it's a landing page it might be built into the content but you might also have them just on your on your articles listing page or on a specific article page you might have this big section at the top with a background image so again there's lots of ways to build out this component on your site and so and so I'll talk about some options so just before we get into the configuration so some examples of hero banners sometimes you see banners that have some marketing text sometimes they're kind of functional like this one huh some information kind of about where you are in the website and the subsections sometimes they're purely marketing like you just got images and and promo text sometimes they are very visual like with a with a big splash color this one's from a museum website so it has also just like the gallery hours it's kind of like the most important information up there at the top this one is from the evolving web website so it has not just the title of the page but also some information about the blog post and then this one's from a home page so this one like it's a big banner up at the top that kind of looks like it's always there but if you look a bit closer you can see it's displaying like latest news kind of information so sometimes you'll get this kind of content in the hero section so there's different ways to build this out like it kind of when in our Drupal 7 minds we're thinking okay if I'm displaying the title of the page then it's got to be something that's connected to the page title which is printed out in the page dot TPL dot PHP but in Drupal 8 actually the page title is just a block so if we're building out this fancy banner section that includes the page title maybe we just have to customize that block you know maybe we just have to theme it so it looks a bit different or maybe if it's a hero section that's reused from page to page maybe we want to make it its its own block maybe we want to create a block type for Heroes that have the fields that you need like the background image and the title or maybe it's something that you want to create per page using the content from the node you're looking at so if you're looking at like in this example you're looking at an article you want to show an image from the article the title the the date and the author name well what easier tool then views you can use a contextual filter and you can build this out using views right so that's another option and then you could just customize the page title template so that's the approach of just using just using the existing templates that are used to display the page title link and customizing them so you can have a more configuration approach or a more kind of theming approach so I would recommend using a block type again if you want banners to be reusable so if you are looking at some kind of truly marketing banner like this and you're creating this for a landing page but you're planning ahead and you're thinking well I might have to create another landing page with this same banner then a block type might be a good idea because then you can configure in in blocks or in your context which banner is used if you're creating something that's more contextual then definitely a view or just customizing the page title would be a better approach and if you just have one page maybe the home page that has a banner like this then maybe you don't even need a block type maybe you just want to use a custom block so when you're when you're building a page like this and you're setting up the banner you really have to plan ahead and think not just about the page that you're integrating but all the future pages that might follow the same design and so finally um we have content items so let's say you have some kind of home page landing page and you get down to the bottom of the design and there's a grid of news items or you have like a couple news items on the left and a couple events on the right and they're all displayed in a grid right so this is a really typical thing that we see in designs and maybe you're showing news or events or a list of people maybe it's a conference website and you have different people's profile or maybe it's a combination of them and maybe your landing page is twice as long when you have all sorts of content types that have to just be displayed in different grids so you can imagine a grid looking like this or looking like this or maybe you have some taxonomy terms you're displaying in a grid like this and usually when we're displaying grids like this we're going to jump to using views which i think is a good I mean typically especially if it's a home page and you're aggregating content from throughout the site it's really your only option is to use views there is maybe another option though if you have content items that are related to the home page or related to your landing page you could build this out using fields so if this is your your home page and you want to have four featured items like in this example here with the four featured articles you could have a field on your home page for featured articles and just display those fields in a grid so that would be maybe another option and in views in Drupal 8 we have a few I think we have four for matters in views that come with Drupal core and those are the HTML list a table unformatted list and then we have a grid and how many of you use the grid format in Drupal 7 do anyone use that just like you needed a grid and you're like oh yeah great there's a grid format and then you turn it on and it turns out that the grid is actually a table which means that if you try and resize your screen it's going to squish all your content so now the grid in Drupal 8 we can all use it because it doesn't add a table it adds nice divs so it's kind of more like the responsive grid module what that gave us with Drupal 7 so it allows you to define for each of the items each of the results in your view what classes you want to add to the columns and rows of your grid so if you're using them if you're using a grid system like a bootstrap and have classes that you can use too if you have classes that you can use to apply the grid system you can just put those directly in your views configuration and you can say okay from here I've got my grid all set up so that makes it really easy to to set up a grid or if you're building your theme from scratch which I'll be talking about at a session this afternoon how you how you would do that then of course you can write your own CSS and add your own classes in there that you're using in your theme so other side by side blocks so when we're thinking about when we're thinking about creating a layout on a site we're not just we're not just talking about call to action and grids we also have other components that often need to sit next to each other in a layout so in this example we have the logo and menu up at the top and the header those are these separate sections that need to sit next to each other so the one big difference in terms of a blocks well there's a couple big differences in blocks in Drupal 8 but for theme earth a big difference is that everything is a block interpolate so if you were using Drupal 7 and you opened up the page template you saw all these regions being displayed but then you also had like the separate breadcrumbs being printed out and the page title and the logo and the site name you had all these things that weren't blocked they were just like theme elements that you had to deal with so now interpolate all those things are brought under the umbrella of blocks so if you open up your blocks layout page you'll see there's a site branding block for your logo in and site name there's a breadcrumb block there's a page title block there's even a tabs block for view/edit revisions those those management tabs so you can put those anywhere you want on the page just through configuration so that's really nice and it also makes things more consistent for us as steamers because it means that we just have to worry about the layout of our regions so we don't have to treat the logo and the bread comes separately we just have to say okay I'm going to make a region for each part of my layout and then the blocks can just fit into the regions and and then I'm done so if you're if you're implementing a design and you're looking at a design like this you would maybe create a separate region for the left part of the header and the right part of the header and then you could figure out whether you're using a grid system or you're writing custom CSS figure out how to get those elements to sit next to each other and work in a responsive way as well there might be some exceptions so if you've ever implemented a one of those big footers down at the bottom of the site people also want to have like all the menu items repeated in the footer and they want them to appear in columns or sometimes you have a footer block for your contact information and you want the map and the address to sit next to each other so in that case you might not you might have more than one column in your layout that appears in this as part of the same block so you might have one menu block but you want to have multiple columns so there's some other ways of dealing with that you could put you could implement your grid system directly in the block if it's a custom block by adding the mark-up adding the CSS classes in the mark-up of the block or you could divide up your your menus into separate sections using kind of special menu items and applying CSS to those so there's there's some situations where they'll be other components that need to be in a layout that aren't at the level of a region but almost everything in Drupal 8 you can you can fit into into a region type layout so some examples of side by side blocks so like obviously in the header we often have this type of design with the menu and the logo in the footer we often have different menus appearing in different columns or contact information this would be a use case where you might want to use special menu items to break up the menu into columns or you might just have like three blocks that you want to display in a row so for this I would maybe set this up as three separate regions or I would add a class to blocks in this region to have classes that put them in a three column grid so there's different approaches to kind of depending on how you're treating your grids and how consistent your layouts are from page to page I think the fact that everything the block does make things a lot easier so you'll see this if you look at the the block configuration so block specific classes can be useful there's the block class module so if you had some blocks that you wanted to show in a layout like this you could apply the block class module allows you to apply classes directly to the blocks so you could implement your grid system by applying the right classes if that's the approach you're taking so however you're building your land there's going to be some point at which you need the classes in your markup to match the classes that you have in your theme so there's many approaches to doing this you can use an existing grid system either by using a base theme that implements a grid system or by applying the grid system directly adding the assets to a scene so obviously bootstrap is a really popular one it's already for Drupal age and a lot of people are using it so that would be one easy approach to try how many of you are using bootstrap on one of your site who's using another grid system you guys are using that oh using time grids oh cool any other sorry white K cards awesome the old old wet yeah the ones named after famous Canadian go oh I knew any other ones any other grids anyone made their own grid system no no one wants to admit it in your basement late at night I'm going to make my own version so grid systems usually work by giving us a whole bunch of CSS that implements the grid system so it's it's got all the CSS we need the tricky part is usually taking the classes that that CSS applied to and getting those into into the markup and in Drupal this is a bit tricky because some of our markup comes in the form of templates but some of our markup is added through configuration like when you're adding a view or you're adding a block or you're customizing some kind of content type and there's classes being added just based on the configuration that we put into Drupal so the grid you know as an approach like this is is it seems really great but with true it can be a bit tricky and and that's why we use they seems like bootstrap because it makes it easier to add all the classes we need bootstrap pasting just a lot of that work for us another approach is the Zen grids approach which doesn't rely on adding a lot of specific classes to your markup instead great Zen grids works by providing a set of CSS that you apply by writing more CSS so it includes it uses sass so it comes with you know existing CSS it's really easy to plug in to your own selectors so you do have to write a like a layout CSS file but the style tends to be really simple and you know you don't have to worry about messing with Drupal's all Drupal's templates and adding a whole ton of classes you could also write your own CSS so rather than using all that CSS that Zen grids or bootstrap gives you you can just write your own and this you know might take a little bit more work upfront but has the benefit of you understanding all the CSS that's being added and if you are kind of the one in control of the project it might be a your preferred approach so implementing a grid system if you go with this approach you'll probably find documentation like for bootstrap for all the classes that you'll need to use even if you're using the bootstrap base theme they'll still be lots of places where you have to apply the classes yourself like in custom Twigg templates in your configuration abused and in your content if you have like a layer within a Content block if you build the approach of writing the CSS yourself it's worth it to create some generic selectors that you can reuse so to create kind of a mini grid system so rather than having rather than only using the classes that are provided with whatever theme you are using to add some classes that you can use to put things into a layout and that way if you ever have to create a layout kind of on the fly it'll become a lot easier to do that through configuration so it's important with this approach to keep responsive design in mind and to make sure that the set of CSS you come up with works primarily for smaller devices and then you're only applying the layout on the larger device where a layout makes sense and one article I would recommend if you go with this approach is from CSS tricks don't overthink it grids it's about creating your own grid system that's just really really basic and easy to maintain so one thing to keep in mind let's see when you're when you're when you're creating the if you're creating the theme yourself and you're and you're implementing the layout all kind of from scratch is to really do an approach where you're you're adding the layout just progressively so with this bit of CSS you know you're only adding the layout at a certain width where that makes sense and this is something that you'll have to adapt as you add content to your site and just continually test with all the combinations of layouts that you have one technique for adding a CSS to your blocks like I mentioned is adding using the block class module so if you just have three blocks in a region and you want to place these next to each other having a class that you can apply to those blocks is a really powerful tool even if you're not using a grid system you could set up that class in your own custom theme or of course you could just use a selector to indicate which blocks that you want to style for example if they're all in the same region the highlighted region maybe you just want to decide that any blocks in the highlighted region are going to be placed next to each other in a grid but we're adding CSS like this to our theme we're really making assumptions about how the configuration and theme work together so we do need to have some documentation that's going to tell the site builder hey if you put blocks into this region this is going to be the result you're going to have this layout so you know I think we have the temptation of site builders and themers to just think ok where we're launching the site it looks great the layouts are all working but of course people are going to come in and add new blocks and and want to expand on the content so you just have to keep in mind with whatever approach you take to have some documentation in place so adding I talked a little bit about adding classes to use so this is what the this is what the interface looks like for views grid in Drupal 8 in core so we can add classes for our rows and columns there's a little checkbox for automatic width but you'll see there that's checked off by default that actually inserts widths into the mark-up of the page which is probably not what you want because that in that case it won't be responsive it's going to apply the grid at whatever screen five you have so this is what you get just like out-of-the-box custom theme with zero CSS but you've selected the the grid and you're using that automatic whig checkbox so it's good for a demo but it's it's not good long term for for building a flexible grid I'll just move on a bit and talk but one last thing so um I mentioned at the beginning you know when we think about layouts we often think of these really fancy pages like the home page the section landing pages pages that are unique that aggregate a lot of content but you might have a site that also has some pages with a really standard sidebar layouts content and so one thing just to note about Drupal 8 is that we no longer get by default with a drupal the classes that tell us whether there are sidebars on the page so you know those classes no sidebars to sidebars sidebar for sidebar second you guys know what I'm talking about yeah those are gone so if you're just creating your own theme and you're using the core base things then you have to when you're implementing your layout decide do I want to have sidebars and if I do they're not going to look like sidebars unless I add some classes to my to my template so this is in the HTML HTML egg template it's really easy to add classes just based on what regions are appearing on your site so you'll want to make sure that you you do that step or you're going to be really frustrated and trying to use the selectors that you're used to and then just based on those selectors it's pretty easy to set up a layout this plenty of different techniques for creating a three column layer so finally just to keep in mind when you are implementing layouts when you're thinking about a new site unless the site has a really limited scope thinking ahead is a is a really good idea for you for your future self and your maybe your colleagues who you're passing the site off to so when you're planning out the layout for your site you want to be thinking about the future so you creating reusable classes for blocks and views something really to encourage so if you have a view that has a specific layout that you've applied it could be frustrating that you can't add a new view easily with the same layout so creating reusable classes that you apply in the configuration of your review rather than relying on the default classes that use spits out that's a really good approach for for thinking nob thinking towards the future nothing in your theme should be content specific so if you're designing this great layout and you're relying on all kinds of classes like it's front or a certain node ID or taxonomy term ID or something like that that's not very flexible right as soon as you maybe delete that content add new content or maybe you run a migration and everything's just broken so try and try and keep content specific stuff out of the theme create a separate layout CSS file so however you're organizing your CSS whether you're using sass whether you're creating separate layout files for different sizes of screen just keeping your layout CSS separate so that someone can look at it and try and understand what you're doing in terms of layout that's a good a good approach kind of deciding what types of layouts and grades your your design will allow for so if you're using a grid system there might be like many different grids that are possible but maybe you want to limit those options so maybe creating some kind of style guide for your site that indicates what kind of grids people can use and what the appropriate classes are that is a really good step and then documenting anything that's kind of like special about how your layout works like if you put blocks in this region they're going to go in a layout that's an important step the style guide module isn't ready yet for Drupal 8 but creating some sample HTML some sample Drupal components and making sure that your styling those Drupal specific components that's that's an important part of building your theme although not layout specific one last thing I just wanted to add on to this presentation is to talk about panels how many of you use panels you here at a session about layouts and landing pages then I didn't mention panels with how many loved panels so for Drupal 8 the panel's modules are all kind of ready to use so if you're excited about panels and you want to try it for eight it's a good time to to test that out so you need the panel's module there's the page manager module that's a separate that comes with page manager page manager UI and then there's another module that you need called layout plugin that allows you to actually build the layout in your in your panel and if you're using bootstrap there's a fourth module called bootstrap layout that pulls all the different options for bootstrap layouts and add those two panels so that when you're building your panels they can actually be responsive and and work with bootstrap so I think panels is often overkill you know panels allows you to take any page on your site whether it's a new page or an existing page and implement a totally different set of regions and block configuration but often you know if you're planning at your site and you're thinking oh I really need a flexible interface for my authors panels is is still a great option for that it makes it harder to implement consistency because it provides so much flexibility but for certain kinds of pages it's definitely a good approach so you could build out you know a page with a layout like this like we were looking at at the beginning very easily with with panels so I think that's all I have for you again the training coming up in September to let me know if you're interested in that and if you have any question feel free to shout them out if anyone if anyone excited about going and using paragraphs yeah so paragraphs for the win panel maybe yeah it's also possible to build it's also possible and very easy to build your custom layouts for panels so if you do decide to go to the panel's route that's a good option to make sure that the Lance that you put our responsive in the way that you want any other comments your shot or hungry you're just thinking about lunch you're not thinking about any of it so at the end of the day if you're still wake up four o'clock and you want to talk more about sort of front-end stuff I'm doing a talk about using base theme so if you're looking for like an alternative to the bootstrap approach for everything there's them I'm going to talk about using class T of the base theme which is one of the new core base themes in Drupal 8 ah this is like you're at all so exciting ice was too thin for classic so this actually all people selling glasses and all safley writing are stop and visit and stuff all you do over that like you're grabbing a Drupal site that very good Satan sauce and all stuff reasons so overriding everything so overwrite like not you know you're not we're just struggling a little bit you my sanity's so we're taking about that so far any other prices the wage yeah for very much about that yeah but I think the one thing that you lose like by doing a totally custom markup is that if someone new coming to your project delivers they're not going to have that familiarity like right now like if I go and look at any Drupal site if it's using a lot of the core group or if it's using a a kind of standard theme then you'll find lots of people familiar but but otherwise I mean it does work better with a lot of design workflows and allows you to set up a design framework that's very customized so if if you plan it from the start I mean it's a great approach so if you have other questions and you're too shy come talk to me afterwards I'll be around and thanks for thanks for coming

Channel: Evolving Web

Views: 24,010

Rating: 4.2156863 out of 5

Keywords: Drupal 8, Paragraphs, Landing Pages, Site Building, DrupalCamp Ottawa

Id: Wwsuze0jfZo

Length: 44min 15sec (2655 seconds)

Published: Thu Aug 04 2016