How to build a landing page in Drupal with Dropsolid Rocketship

In this tutorial, we’ll build a landing page with the content planning tools in Dropsolid Rocketship. You’ll get an idea of how to work with Rocketship efficiently. 

• First, read the overview of Paragraphs in Dropsolid Rocketship: Get familiar with all the paragraph types available out of the box with Dropsolid Rocketship. 
• Then, build the landing page. Follow step-by-step instructions to create a landing page. 

Prerequisites and requirements

To get the most out of this tutorial, we expect you have some familiarity with content editing. We’ll follow a basic layout design, but you can adjust for your own needs. If you don’t have a Dropsolid Rocketship site, contact us for a free trial, and we can set your team up with a demo. Note: If you use your own site for this tutorial, it may see different options depending on your set up. See “Why are the Paragraphs on my site different?” in the Overview of Paragraphs. 

Getting the most out of Dropsolid Rocketship

By the end of this tutorial, you’ll have a good idea of how to plan the design of your site using Rocketship. Rocketship is designed so that you don’t change layouts on a page by page (node by node) basis. This encourages designers and content editors to think of the design as a whole system, and improves design consistency. There are also a number of things that work well out of the box, but if you want many changes you may be missing the point of Rocketship. 

In fact, our developer Nick Vanpraet said other developers usually don’t realize how much is already there in Rocketship. “I think that is the thing I run into the most,” Nick explained when he hears from developers about how they added various features to Rocketship sites he ends up saying “That functionality already existed there!” So we want to make sure you know what’s in there. 

Each Paragraph type identifies what content you can input and how it’s displayed. The Paragraphs are available and the appearance options will depend on how your own designers and developers have configured it. As Nick explained, the idea behind Rocketship is to “do as much as possible so developers can just get going and they don’t need to do the same stuff every time. But not do so much to the point where they have to spend a lot of time undoing the defaults.” 

By the end of this tutorial, you will have a good idea of how to use Rocketship efficiently. 

Step 1. Plan the landing page design. 

Think of your content in a modular way to help planning. Instead of putting everything into an unstructured text field, consider how you can combine text, videos, testimonials, headers, and FAQs to make the most of the formats available. Look at the Overview of Paragraphs Available in Rocketship for ideas. 

What Paragraph types will we use on this landing page?

We’re making a new landing page according to this design. 

Reviewing the wireframe, we can use these Paragraphs.  Story - We can add multiple stories and control whether the image is positioned on the left or right.  FAQs - We’ll add multiple FAQs.  Related items - We’ll keep people on the site by connecting to related content. This will pull in the Overview image and description for the content.

Step 2. Start the landing page

First, we’ll create the page and configure the essential settings. 

1. Go to Content > Add Content, and select “Page” to create a Landing Page. 
2. At a minimum, you need to add the Header, Page description (under Overview), and at least one Paragraph to make a Page. 
3. In the Overview, if you add an image, you will also need Alternative text
4. If you’d like to add this Landing Page to your menus, go to the Menu Settings > Provide a menu link to identify where this page should be in your navigation. 

Tip: In some cases, you might want to hide the breadcrumb for a Landing Page. De-select “Show breadcrumb” in the Header settings for this page.

Step 3. Configure the SEO settings

The page already includes sensible defaults for better search engine content. At this time, review if these defaults work for your landing page.  

• Page title includes the [node:title] | [site:name]. 
• Description includes the [node:field_description]
• Social sharing content such as the Open Graph and Twitter card type also include the [node:field_description]
• By default, the page URL will generate based on the page title, and the URL settings you have configured for your site. 

Tip: Learn more about getting SEO right from the start, in this video with the Dropsolid team.

Step 4. Build the page content with Paragraphs. 

Now you’ll add a paragraph. We’ll start by adding in the FAQ. We can re-order these components later. 

1. Scroll down to Paragraphs. Click “Add Paragraphs”.
   
   
   
   
2. In the Add Paragraph window, select the FAQ paragraph type.
   
   
   
   
3. Configure the FAQ heading. The title, subtitle, and teaser are optional for the FAQ section. 
4. Configure display options. If you have the option, you can also set a Background color at this time.
5. Add an FAQ item. At minimum, you need a least one FAQ item title. 

When published, FAQs display with the answer collapsed by default. Each item has a title and a body.

1. Click the button to “Add another item.” Repeat the steps to add as many FAQ items as you need. 
2. Optionally, add a button. Make a clear call to action or invite feedback or engagement.
3. When you’re done editing, you can “Collapse” this Paragraph. This makes it easier to arrange and rearrange your modular elements on the page. 

Tip: FAQs are a good way to optimize content for search engines in a helpful way, and encourage interaction from visitors. FAQs are commonly added to landing pages because they include natural language questions that draw people to your content by helping them solve problems. FAQs guide site visitors to important content and you can include a button link to encourage people to ask a question if it’s not answered there. 

Step 5. Add more Paragraphs. 

Next, we can complete the landing page with Related Items and Stories. The steps to add other Paragraph types are similar to adding an FAQ item. 

1. Add a Paragraph, select the type. Add any title or descriptive text if needed. 
2. Set the appearance options. 
   
   
   • Some have a background colour or a background image. 
   • In some, like the Story type, you can set the View mode to control layout.
     
     
     
3. Add more items, if needed.  
   
   • Some Paragraph types can include multiple items that each have their own settings. When you add a Gallery, you would add multiple images, and each of those would have their own Alt and Title text.  
   • In the case of Related Items, you’re adding multiple linked references.
     
     
4. Add a button if it’s available and needed. 
• The form is included on some paragraph types, but it’s optional. The button fields have an autosuggest for internal links. Start typing and options will display.
  
  
5. Collapse Paragraphs to make them easier to organize. You can also remove and duplicate them. 

Step 6. Preview and Save. You’re done!

By default, when you save a page, it is set to Published status. 

• Any unsaved changes will be marked with a warning sign. ⚠️
• If you want to Preview a page without publishing, de-select “Published” before you hit save.
  
• After you view the page, you can come back to edit it, and select Published again before saving.

Next steps

• Contact us for a demo of Dropsolid’s Platform and Rocketship.
• Find out more about our Drupal Training courses https://dropsolid.com/en/drupal-training 

Did this help?

We’d love your feedback. If you’d like to tell us where you’re stuck, contact us here.