Landing Page Customization
  • Updated on 23 Apr 2019
  • 4 minutes to read
  • Contributors
  • Print
  • Share
  • Dark
    Light

Landing Page Customization

  • Print
  • Share
  • Dark
    Light

Document360 has a concept of customizing the landing page with the following capabilities which are ease for use.

  • Options are available to select the intuitive colors/pattern/gradient formats.
  • Ability to provide the title, promo text, header links, Search in the header section.
  • Alignment can be performed with different available options like, left/center/right.
  • The title and promo text edit capability are as well provided.
  • Additionally, plus icon indicates where the header custom URL and documentation icon can be added. It has the capability of drag and drop so that custom section can be easily swapped or rearranged.
Appearance Settings
You need to customize the appearance and navigation settings under the Settings section. You can refer the documentation for the Settings section here.

Example Scenarios:

I want to create a demo landing page for my user website and see how landing page can be customized. We need to add the following customizations in the portal to get it reflected in the user website.

Say I want to add title, promo text, documentation and custom URL to be added in the landing page. I have added Title and promo text. With help of header links, I have added documentation button and custom URL in the header and enabled search option in the portal.

Here is the example how my landing page looks in the portal

image.png

Heading color & Text

Heading Color
You can change the background Colours (custom color supported) and Text colour for the Header using the options provided.

image.png

You can customize your landing page by adding the following sections

  • Text section
  • Columns of Text
  • Custom HTML
  • Text and Media
  • Category section
Formatting
You can change the formatting style for the Header title and text using the custom CSS and custom tags settings.

Text Section:

I have added title, description text to the text section. I can add the required content to give some description to the landing page. This content can be aligned in left/right and center. If you want, you can add the title or title can be hidden using hide option. We can add "n" no.of text sections and can remove it if that section is not needed. There is also some formatting options provided for the description content.

Here's an example of how we can use the text section:

image.png

Formatting in text area
All the Landing pages Text area's supports Markdown formatting and general shorcuts

Column of Text:

I wanted to add some list of key features in my landing page. To customized this, I can prefer column of text option where I can add only my key features. I have added title and description. It also has the same option to add the multiple sections, remove the section and hide the title section. We have another option in column of text to add the set of icons/ font awesome icons and set the color to those icons. In this section also, contents can be aligned to left/right/center and drag and drop option is the one important enhancement which is available in this section, say I can easily swap or rearrange the first column in the fifth place using this drag option.

Here's an example of how we can use the column of text section.

image.png

Custom HTML:

Using Custom HTML, I can outline my own custom HTML code if none of the other options work for me. I have written my own piece of HTML code with the information I wanted to display in my landing page.

Here's an example of how we can use the custom HTML section:

image.png

The actual page will look like below

image.png

Text and media:

In addition to text section, i can create a nice essence to my landing page by adding relevant images specific to the content.

Here's an example of how i have customized the landing page with the text and media section

image.png

Enable/disable the landing page

Document360 allows the capability for users to enable/disable the landing page.

Landing Page
By default, the landing page will be enabled for every project.

To disable the landing page, toggle the icon to the "Disabled" state.

image.png

You will also notice a message on the top of the application as "Landing page is disabled" when you disable the landing page.

Remove any section of the landing page

You can remove any added section of the landing page by using the delete icon on the right hand side of the section.

Move any section in the landing page

You can move the sections about by using the up & down arrow keys on the left hand side of each section.

Save, Preview & Publish the landing page

The Landing page once published only then does it reflect with the actual changes made in the portal. You also have the capability to save your changes as you make it and preview them. Once all the changes are done, you can hit Publish for the landing page.

Was this article helpful?