How to Create a Landing Page
SWT

SJU Web Team

Created Apr 17, 2025

How to Create a Landing Page

246
    s

How to Create a Landing Page

6 Steps

Tes

1

Log into Drupal and then click on Manage

Log into Drupal and then click on Manage
2

Click on Content

Click on Content
3

Click on Add content

Click on Add content
4

Click on Landing Page

Click on Landing Page
5

Enter the title of your page

Enter the title of your page
6

Select your School or Minisite Theme

Here, I'm selecting Department of Biology from "School Theme." That's the theme my test account has access to. If you don't see your entity in "School Theme," then try "Minisite Theme." If you still can't find your theme, please put in a ticket.

Select your School or Minisite Theme

#

Adding a Hero Image

5 Steps

How to add a Hero image to pages through the site editor.

7

Click on the arrow under Hero

Click on the arrow under Hero
8

Click Add Mini Site Hero in the dropdown

All Heros are available. The Mini Site Hero is the traditional Hero for departments, offices, centers, et. al.

Click Add Mini Site Hero in the dropdown
9

Type the title of your page

For this Hero, your Title will appear a crimson font color.

Type the title of your page
10

In Title Highlight type any words you would like to emphasize in your Titl

In Title Highlight type any words you would like to emphasize in your Titl
11

Add text in the description box

This adds a bit of text to the Hero's text box below both the Title and the optional Subheading. You also have the option of adding a button in the description box as well through the WYSIWYG editor. See more in the Web Guide's section on using the WYSIWYG editor.

Add text in the description box

#

Adding an Image to a Component

8 Steps
12

Click on Image to add the required image to the component.

Click on Image to add the required image to the component.
13

Click on Select entities

Click on Select entities
14

To select and image from the Media Library, click on Browse in the Pop-Up

Browse is selected when you want to insert an image from the site's Media Library. Clicking Upload allows you to upload an image to the Media Library from your hard drive.

To select and image from the Media Library, click on Browse in the Pop-Up
15

Type "3200x1600" (the required size for this Hero)

Every component using an image, including Heros, has a required width and height that assures optimal resolution for all types of systems and browsers. This Hero image happens to require a 3200x1600 image. Go to the images section of the Web Guide to find out where to get these dimensions.

Type "3200x1600" (the required size for this Hero)
16

Click on Apply

Click on Apply
17

Click on the image you want to select from your search results

You'll get the first page of your search results. Use the numbers at the bottom of the grid to navigate through your results. Click on an image to select it and a green checkmark will appear. Be sure that only one image is checked at a time.

Click on the image you want to select from your search results
18

Click on Select entities, and you are done!

Click on Select entities, and you are done!
19

To upload your own image to the site, click the grey Chooe File button rather than Browse when the image popup comes up. Navigate to the location of the file and uploaded. Be sure to fill out the pop-up for ALT text when it's presented. See Web Guide Image Section.

You will be asked to select an image from your local storage.

To upload your own image to the site, click the grey Chooe File button rather than Browse when the image popup comes up. Navigate to the location of the file and uploaded. Be sure to fill out the pop-up for ALT text when it's presented. See Web Guide Image Section.

#

Adding a New Componet

5 Steps
20

To add a component to the main body click the arrow under Landing Page Paragraphs

To add a component to the main body click the arrow under Landing Page Paragraphs
21

Select a component

Here were a starting off with a WYSIWYG, which is typically the first component that comes after the HERO on most landing pages.

Select a component
22

Add your text to the WYSIWYG editor

Add your text to the WYSIWYG editor
23

To add a heading, start by clicking the Paragraph dropdown

To add a heading, start by clicking the Paragraph dropdown
24

Click on Heading 2

Click on Heading 2

#

Adding an Additional New Component

37 Steps
25

Add another component by clicking the dropdown arrow and selecting a component to add

Add another component by clicking the dropdown arrow and selecting a component to add
26

Click on Add Stats Bar

Here, we're adding a Stats Bar to showcase numbers and percentages associated with page content.

Click on Add Stats Bar
27

Type your optional heading

Red is the standard background color for Stat Bars, but you also have the option of choosing gray in the Color dropdown.

Type your optional heading
28

Click on Add Stat Block

Now that we have our heading and the background color, we're going to start adding the actual stats blocks to the page.

Click on Add Stat Block
29

Type "100%"

We're going to add sample stats for illustrative purposes.

Type "100%"
30

Enter your stat description

This is the content you wish to appear under your statistic. The content frames the content in a way that makes visitors want to come to or learn more about Saint Joseph's.

Enter your stat description
31

Click on Add Stat Block to add another

Typically, Stat Blocks are presented in a row of four. We're going to make three more stat blocks the same way we did our first.

Click on Add Stat Block to add another
32

Type "85%"

Type "85%"
33

Add a description

Add a description
34

Click on Add Stat Block when you are done.

Add two more Stat Blocks and fill them out as you did the first two.

Click on Add Stat Block when you are done.
35

Add another component by clicking the down arrow and selecting one

Add another component by clicking the down arrow and selecting one
36

Click on Add Teaser Blocks

Here, we're going to add Teaser Blocks, which are a useful way of highlighting specific sections of your website you wish to drive visitors to.

Click on Add Teaser Blocks
37

Type in your section title (optional)

Type in your section title (optional)
38

Choose your Block Style

"Normal" keeps the blocks so all of their edges are aligned. "Staggered" offsets the rows of blocks for a more dynamic look. Below is an example of the "Staggered" look.


Here is a live example of the "Normal" look featuring 6 teaser blocks: https://www.sju.edu/academics/graduate

Here is a live example of the staggered look: https://www.sju.edu/college-arts-and-sciences

Choose your Block Style
39

Click on Add Teaser Block

Like the Stats Bar component, Teaser Blocks are composed of individual Blocks that you will have to add. Users typically use 4 blocks, but you are not limited to that as a hard and fast rule. When using the staggered layout, more than 4 blocks can, however, be problematic.

Click on Add Teaser Block
40

Type the heading for the teaser block

Type the heading for the teaser block
41

Type in your description

Type in your description
42

Type in the Path Name of the page you want your teaser block to resolve to when clicked,

Type in the Path Name of the page you want your teaser block to resolve to when clicked,
43

Type in the Link Text

Type in the Link Text
44

Click on Image

Now we are going to put in the background image.

Click on Image
45

Click on Select entities

Click on Select entities
46

Click on Browse

Click on Browse
47

Type "1600x800"

These are the dimensions that a teaser blocks uses.

Type "1600x800"
48

Click on Apply

Click on Apply
49

Click on and image to select it

Once selected, a green checkmark will appear.

Click on and image to select it
50

Click on Select entities

Click on Select entities
51

Add another teaser block the same way.

Add another teaser block the same way.
52

Type the heading you want to appear on your Teaser Block,

Type the heading you want to appear on your Teaser Block,
53

Type your description

Type your description
54

Enter the path name of the URL you wish to send visitors to

Enter the path name of the URL you wish to send visitors to
55

Fill the URL Link and Link Text input fields then click Image.

Fill the URL Link and Link Text input fields then click Image.
56

Click on Browse

Click on Browse
57

Click on Apply

Click on Apply
58

Type "1600x800"

Type "1600x800"
59

Click the image you want to use

Click the image you want to use
60

Click on Select entities

Click on Select entities
61

Add two more teaser blocks

Add two more teaser blocks

#

Adding a 50-50 Split CTA

7 Steps
62

Click on the down arrow

We're going to add another component to our landing page.

63

Select 50-50 Split CTA from the dropdown after clicking the arrow.

Select 50-50 Split CTA from the dropdown after clicking the arrow.
64

Give your new 50-50 Split CTA component a Title. Enter Text in the topic field if you would like a small section label to appear about your title.

Give your new 50-50 Split CTA component a Title. Enter Text in the topic field if you would like a small section label to appear about your title.
65

Add content to the Description area

Add content to the Description area
66

Click on Image and select an appropriate image.

For this particular component, the required dimensions are 1440 x 1440. We'll asume you're ablt to find one correctly.

Click on Image and select an appropriate image.
67

Enter a Path Name for your button

Enter a Path Name for your button
68

Enter tet for button

Enter tet for button

#

Setting URL Alias

4 Steps
69

Go the the URL Alias button in the sidebar and uncheck "Generate automatic URL alias"

Before we preview the page, we want to set the full URL of our final page.

Go the the URL Alias button in the sidebar and uncheck "Generate automatic URL alias"
70

Type in the path name of your URL

As stated in the Web Guide, this can generally be found by examing the URLs of other pages on your site,

Type in the path name of your URL
71

To preview your Landing Page click on Save

To preview your Landing Page click on Save
72

Voila! You now have a Landing page with a Hero along with WYSIWYG, Stat Bar, Teaser Block and 50-50 Split CTA components.

Voila! You now have a Landing page with a Hero along with WYSIWYG, Stat Bar, Teaser Block and 50-50 Split CTA components.
Well done!
Create how-to guides like this in a snap. Get Tango now.