How to Make Flexible Landing Pages in Drupal
Drupal 8 is great for marketers. We’ve talked about a number of the platform’s benefits on this blog before, such as its in-place editing, BigPipe technology and API-driven structure, just to name a few. One thing we haven’t touched on much is one of the most important tools in a marketer’s arsenal: the landing page.
At the most basic level, a landing page is any page of a website that a user can land on, be it the homepage or a specific page linked to from a digital ad. Landing pages are often a user’s first access point to your site, so what is on them (or not on them) and how it looks can be very influential.
Photo by Ricardo Gomez Angel
At Duo, we recognize the value of landing pages and the customization needs our clients require. That is why we strive to push the Drupal technology as far as we can while giving our clients the appearance and experience they want.
We’ve been using the Paragraphs module for some time now to help us build powerful landing pages. In fact, we refer to each of these pages as a “flexpage” rather than landing pages, simply because they can be used for any sort of page that needs a flexible layout.
What does a “flexpage” look like? Well, the basic structure is a collection of horizontal sections. A page could have one section; it could have 10. That depends on what you want the page to accomplish. You could have just one section with a headline, photo and call to action (CTA). You could also have a more elaborate page that features a hero section with a video background, blocks for text and testimonial quotes, a photo gallery and then a CTA. It all depends on your goals.
Not to get too detailed, but sections can also be broken into subsections. So, for example, you could have a section that features a headline subsection, body copy subsection, hyperlink subsection and image subsection. Does that make sense?
Let’s take a look at an example. https://figopetinsurance.com/new-figo-pet-cloud-mobile-app
This page is a flexpage that showcases the mobile app for a pet insurance company. Notice all the horizontal sections. This is just a small, straightforward example of what you can do with a flexpage. You can have different layout settings, different backgrounds and spacing, all with no coding needed. Allow me to give you a tour of the page and highlight some of the many things you can do with this type of page.
The headline text (“Introducing the next generation …”) is a body component within the “flexpage”. This component is much like any website text editor; it features a WYSIWYG editor and allows you to change the size and color of the component’s content.
The large cell phone below the headline is an image component. Now on this page, the image is static, but there is a lot you can do with this component, ranging from adjusting the image’s width to linking it out to a new window.
Below the phone are those two boxes promoting “Pet Cloud’s availability in the App Store and on Google Play. This section provides an example of a flexblock. You can add a block component with multiple columns in order to control the layout for multiple columns in a section. So, each image lives within a flexblock column, which creates the side-by-side effect.
As we continue down the page, we find a testimonial quote. Just like the page’s headline, this is a body component. For this client, we provided a library of different components and set look and feel, so that every time they create a pull quote, those blue quotation marks appear automatically. That way, the client doesn’t need to worry about any coding, sizing or color matching of the icon. With this modular, component-based approach, we can ensure that various elements within components match with the client’s brand standards.
Below the pull quote is another body component, this time with text that again serves as a headline for the section. Right below that is another flexblock. This time there are three columns to highlight different screenshots of the app. Notice that in this use of a flexblock, each column contains an image that has a caption below it, so that text can be incorporated.
I mentioned that you can do a lot of customizing of background and appearances on “flexpages.” Notice, for example, that while the previous body component and flex blocks are two different components, they appear as one because of the common white background.
This next section, which is separated by using a gray background, utilizes a flexblock in a slightly different way. Below the section headline (a body component once again), there is once again a two-column flexblock. Instead of only using images in both columns, however, this section features an image in the left column (the cell phone) and a body component within the right column.
By now you should start to be able to recognize what components are being used. This next section has a body component at the top for the headline (“Access the important stuff …”), followed by a three-column flexblock containing images and captions below them.
Take a look at this last section, which essentially serves as a closing CTA to the page. Can you tell whatcomponent is being used? It’s actually just another body component, only this time, instead of a solidcolored background, an image is used behind the text. It’s a simple change, but it creates an entirely different appearance.
Now, one of the most important elements of a landing page — or really any web page — that goes unseen is the analytics. What are your metrics telling you your users are doing? At Duo, we ensure that any site we create — particularly landing pages with CTAs — is properly integrated with Google Analytics. That way, our clients are able to understand what their users are doing on their site and what adjustments may be needed to help steer the user to do what the site owner wants.
We’re also focused on introducing personalization to our components, so that certain components would show based on available information about the user. One CTA may make more sense for a given persona than another, for example.
We are constantly working to find new, innovative ways to leverage “flexpages” for our clients. Thanks to Drupal, the options are virtually limitless.