Landing pages

This is a collection of some tricks and advice for building landing pages in Saltcorn

Landing Page Pack

There is a pack (pre-made content you can install from the module store) called Landing Page. this contains the same page that you can see on https://landingpage.saltcorn.com/, except that packs don't store files so you don't see the hero image which is the background at the top.

If you install this pack and want to see it with the image:

  • upload an image to the Files (menu: Settings -> Files). For instance you can pick a landscape-aspect image with a dark background from unsplash, and upload that to Saltcorn's files on your app.
  • Then change the role to access this file to "public", still in Saltcorn's file manager. Otherwise users who have not logged in will not be able to access this file
  • Now go to edit the LandingPage page
  • Click the large blank container at the top
  • In the Container settings on the right, click the Contents accordion section. 
  • Under Background section, pick the file you have uploaded

Tip: View in Private tabs

To see what visitors to your site sees, open in an Private (Firefox) or Incognito (Chrome) browser tab. Alternatively, use one browser to build the site and use another browser (where you are not logged in) to show the page.

Tip: Use material-design theme

The material-design theme is at this point the theme that gives the best outcomes for graphical design. If you have a hero image at the top try the transparent light / transparent dark navbar options

Building Hero Image containers

Here is one way to build a hero section with an image as the background (you should have a suitable image in your file manager with role to access set to public; see above in the pack description): 

  1. add a container as the first element in your page
  2. using the box settings under container set the minimum height to e.g. 500px. to set this in the container settings, click on the Box accordion and then click on the blue inner area. This is where you set not just height and width but also minimum height etc
  3. Under display settings choose full screen width
  4. In the Contents section of the container settings set both vertical and horizontal alignment to be centered
  5. set the background type to image, choose your large public accessible image under the file and set the size to cover
  6. Drag one or more text elements into the container