loading..
< View all articles in Landing Page Design.

How to Provide Background in Blocks? (Normal Landing Pages)

You use this procedure to provide background color to the blocks in your landing page.

Note: This article is related to the Normal Landing Page Designer which has been discontinued w.e.f. 24th August, 2016. The Responsive Designer will act as the main landing page designer. If you have landing pages already created in normal designer then you will be able to edit the pages in the same designer. For creation of new pages, the responsive designer will be the default.

Prerequisites

  • You have logged in to LeadSquared.
  • You have navigated to Dashboard > Marketing > Landing Pages > Create Landing Page. You have selected a landing page template or a blank landing page.
  • You have completed the Select Landing Page Template step (Step 1).

Procedure

1. Click on the block to which you want to give background color. The properties panel on the right side displays the Block Properties tab.

Select Block

2. The Background settings tab in block properties allows you to select the type of background of the block.

  • If you select None, then the background remains plain.
  • If you select Solid, then you cam choose the background color by selecting the desired color in the color mixer pop up. (Alternatively you can specify the color by entering the HTML code for the color.)

Block

  • If you select Gradient, then you can select the color of the block by specifying the hue, saturation, lightness and puffiness using the respective sliders. Hue, saturation, and brightness are aspects of color in the red, green, and blue ( RGB ) scheme. Click here, for more information on Hue, Saturation and Lightness.

Gradient

  • If you select Background Image, then you can insert an image as the background for the block. You can specify the position and tiling too. In the Image URL field, you can specify the path where the image is located. The URL points to the location where the image is stored. It may be located in LeadSquared image library or in an external location.

BG Image

Examples

1. The image below illustrates an example of a form block with background gradient color settings .

Gradient

2. The image below illustrates an example of a block with background color settings with background image settings.

Background image