How to Create a Landing Page

How to Create a Landing Page

1. 1. Log into Drupal and then click on Manage

   

2. 2. Click on Content

   

3. 3. Click on Add content

   

4. 4. Click on Landing Page

   

5. 5. Enter the title of your page

   

6. 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.

   

Adding a Hero Image

1. 7. Click on the arrow under Hero

   

2. 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.

   

3. 9. Type the title of your page

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

   

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

   

5. 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.

   

Adding an Image to a Component

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

   

2. 13. Click on Select entities

   

3. 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.

   

4. 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.

   

5. 16. Click on Apply

   

6. 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.

   

7. 18. Click on Select entities, and you are done!

   

8. 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.

   

Adding a New Componet

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

   

2. 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.

   

3. 22. Add your text to the WYSIWYG editor

   

4. 23. To add a heading, start by clicking the Paragraph dropdown

   

5. 24. Click on Heading 2

   

Adding an Additional New Component

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

   

2. 26. Click on Add Stats Bar

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

   

3. 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.

   

4. 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.

   

5. 29. Type "100%"

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

   

6. 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.

   

7. 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.

   

8. 32. Type "85%"

   

9. 33. Add a description

   

10. 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.

    

11. 35. Add another component by clicking the down arrow and selecting one

    

12. 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.

    

13. 37. Type in your section title (optional)

    

14. 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

    

15. 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.

    

16. 40. Type the heading for the teaser block

    

17. 41. Type in your description

    

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

    

19. 43. Type in the Link Text

    

20. 44. Click on Image

    Now we are going to put in the background image.

    

21. 45. Click on Select entities

    

22. 46. Click on Browse

    

23. 47. Type "1600x800"

    These are the dimensions that a teaser blocks uses.

    

24. 48. Click on Apply

    

25. 49. Click on and image to select it

    Once selected, a green checkmark will appear.

    

26. 50. Click on Select entities

    

27. 51. Add another teaser block the same way.

    

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

    

29. 53. Type your description

    

30. 54. Enter the path name of the URL you wish to send visitors to

    

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

    

32. 56. Click on Browse

    

33. 57. Click on Apply

    

34. 58. Type "1600x800"

    

35. 59. Click the image you want to use

    

36. 60. Click on Select entities

    

37. 61. Add two more teaser blocks

    

Adding a 50-50 Split CTA

1. 62. Click on the down arrow

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

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

   

3. 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.

   

4. 65. Add content to the Description area

   

5. 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.

   

6. 67. Enter a Path Name for your button

   

7. 68. Enter tet for button

   

Setting URL Alias

1. 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.

   

2. 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,

   

3. 71. To preview your Landing Page click on Save

   

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