The "Style" Menu

The Style menu (see Fig 1 below for a representative example) allows a general styling of the various elements that can be placed in a section grid, including other container elements such as a Flexbox, Grid, Carousel, Tab, etc. This article will discuss the more common Style menu features, and will serve as a linkable reference in other articles that cover specific elements (or "Widgets" as they are called in the Landing Page Builder).

Please note that not all features covered in this article may be available for a particular widget. In addition, in some cases certain Style features may be checked "on" as a default for a particular Widget, and be unchecked "off" as a default for a different Widget.

Fig 1

  • The z-index feature allows you to set the z-index of the Widgets within the section grid or the "child" Widgets inserted into a "parent" Widget such as a Grid or Carousel container.

    The z-index is a CSS property that allows an element to be rendered on top of, or behind, another element that shares the same spatial location. As a default, all elements start with the same z-index value, therefore, the order in which a Widget is inserted is the same order as how the elements are stacked: In other words, an element that is inserted second and placed on top of an existing element will be rendered on top of the initially placed element. However, by giving the second element a lower z-index number, it will be rendered behind the first element. As an example, Fig 2 below shows a large circle icon that was inserted as the second element. It has been placed so that it partially shares the location of the first element, a star icon. Given they have the same initial z-index value and the circle icon was inserted after the star, it partially covers the star.

Fig 2

Fig 3 below, however, shows the result of setting the z-index of the circle icon to a value lower than that of the star, therefore, the circle icon is now rendered behind the star.

Fig 3

  • The Widget Alignment feature allows you to align certain Widgets within their container both horizontally and vertically. To illustrate the effect of changing the alignment, we will use a star icon that has been set to a size of "120", but it's container has been made much larger. To better visualize the result of the alignment process, a dark blue border has been added to the icon's container. The default value for the horizontal alignment is "center" and the default value for the vertical alignment is "middle". See Figs 4 and 5 below.

Fig 4

Fig 5

Figs 6 and 7 below, however, show the result of setting the horizontal alignment to the "right" and the vertical alignment to "top".

Fig 6

Fig 7

  • The Padding feature, when checked, allows you to add padding between the contents of the Widget and the edges of the Widget's container. To illustrate, a dark blue border has been added to the Icon widget container and the square icon itself has been resized to the maximum size the container will accept. See Fig 8 below

    Please note that even though the Padding feature has been set to "0" for all four sides, there still exists some additional default padding around the Widget element and its container. See Fig 9 below.

Fig 8

Fig 9

Figs 10 and 11 below, however, show the result of setting the padding to "50" for all 4 sides. Because the Widget container has been set as a fixed size, the additional padding caused the icon itself to reduce in size.

Fig 10

Fig 11

The padding feature also allows you to set the padding for each respective side individually: top, right, bottom and left. See Fig 12 below.

Fig 12

  • The Border feature (see Fig 13 beow), when checked, allows you to add a border around the Widget container. See Fig 14 below illustrating a 5px dark blue border around the Icon container. As with the Padding feature, the border values can also be set for each respective side of the container. See Fig 15 below.

Fig 13

Fig 14

Fig 15

The border type can also be set to one of several designs. See Fig 16 below.

Fig 16

  • The Radius feature (see Fig 17 below), when checked, allows you to add a radius to the Widget container with or without a border. See Fig 18 below illustrating a 5px dark blue border with 15 degrees of radius added around the container. As with the Padding and Border features, the radius values can also be set for each respective side of the container. See Fig 19 below.

Fig 17

Fig 18

Fig 19

  • The Icon Color (or in some cases, "Color") feature (see Fig 20 below). Clicking the rectangle will bring up a pop-up color picker which will allow you to use one of several methods to change and elements color.  


Fig 20

Background sub-menu

The Background feature provides you with the ability to set the background color of a Widget, apply a gradient pattern to the background or use a background image. See Fig 21 below.

Fig 21

  • The Fill feature allows you to set the background color of the Widget container by clicking on the colored rectangle and using the pop-up color picker to select a color. See Fig 22 below. The sliding bar to the right of the colored rectangle allows you to set the opacity of the color from "0" (completely transparent) to "100" (completely opaque). See Figs 23, 24, 25 and 26 below.

Fig 22

Fig 23

Fig 24

Fig 25

Fig 26

  • The Gradient feature, when checked, provides you with the ability to set the background gradient of the Widget by clicking on the colored rectangle and using the popup color picker to select a color, various control tools, or selecting a predefined gradient pattern. The sliding bar to the right of the colored rectangle allows you to set the opacity of the gradient from "0" (completely transparent) to "100" (completely opaque). See Fig 27 below.

    Please note: making the gradient itself transparent only removes the gradient, but not the underlying fill color your have selected.

Fig 27

Clicking on the checkered rectangle to the right of "Gradient" will bring up the gradient color picker. See Fig 28 below.

Fig 28

  • At the very top of the gradient pop-up color picker is a slider control that allows you to determine where the gradient shading starts. The default, "0", means the shading will begin at a certain point in the Widget container. Sliding the control icon to the right increases the slider's value, which starts the shading at a different location, until the value reaches "100" and there is no shading effect.
  • Just below the large slider is a smaller slider and two gradient pattern options. The small slider allows you to orient the direction of the shading in a clockwise / counter-clockwise pattern, depending on which way you move the slider control. The pattern option "linear" will be checked by default. This means the gradient shading will start as a straight line across a given axis of the Widget and extend to the other side. Checking "radial" will cause the shading to wrap around the outside edges of the Widget and fade towards the center. You will also see two new controls pop up if "radial" is checked. They will be set by default to "50" and "50". Changing the default values will alter the amount of shading. You can achieve an almost endless variety of patterns by altering the values.
  • At the bottom of the color picker you will see a collection of preset gradient design colors and patterns which you can also select from.
  • The Background Image feature allows you to apply a background image to the Widget container by clicking on the checkered rectangle and selecting an existing image from your image library or uploading a new one. Clicking on the little gear icon will allow you to set various background coverage properties. See Fig 29 below.

Fig 29

  • The Size option has three possible values:
  • Auto - the image will retain its native size and aspect ratio, and will be cropped to fit within the Widget container. This option does not work well with images where the image's native size dimensions are materially larger or smaller than the Widget container dimensions.
  • Contain - the entire image will be displayed in its native aspect ratio, therefore, based on the width and height dimensions of your image versus your Widget container, part of the Widget container background may be visible behind the image.
  • Cover - the entire Widget container background will be covered by the image. The image will be scaled up or down to achieve this. Depending on the width and height dimensions of your image versus your Widget container, part of the image may be cropped to fit the dimensions of your Widget container. Native aspect ratio of the image is maintained.
  • The Position option has nine possible values - see Fig 30 below. The various positional options are made up of two values. The first value represents vertical alignment of the background image within the container. The second value represents the horizontal alignment. The Position property is set to "center center" by default.

Fig 30

  • The Repeat option has four possible values - see Fig 31 below. The Repeat property is set to "no-repeat" by default.

Fig 31

  • No-repeat - as the name implies, the image will only be shown once within the container regardless of any other property settings.
  • Repeat - the image will be repeated along the x- and y-axis based on the other background image property settings and the native size of the image.
  • Repeat-x - the image will be repeated along the x- axis only based on the other background image property settings and the native size of the image.
  • Repeat-y - the image will be repeated along the y- axis only based on the other background image property settings and the native size of the image.
  • The Parallax option has two values: "none" (or if set to "fixed", can be reset to "none" with "reset"), or "fixed".
  • None (and Reset) - The background image will scroll with the normal flow of the landing page when rendered in the browser.
  • Fixed - The background image will be fixed on the browser viewscreen as the landing page is scrolled.
  • The Shadow feature (See Fig 32 below) provides you with the ability to add a shadow effect to the Widget. Clicking on the "+" icon to the right will bring up the control sub-menu shown in Fig 31.

Fig 32

  • The Inset option, when checked, will move the shadow effect from the outside of the Widget container (the default operation) to the inside of the container.
  • Clicking the checkered rectangle will pop up the color picker, allowing you to set the color of the shadow effect. The default color is a medium gray.
  • The four input fields to the right of the checkered rectangle represent four separate shadow effects:
  • The first input field allows you to set the shadow's distance it will extend from the Widget container on the x-axis. Negative values are allowed.
  • The second input field allows you to set the shadow's distance it will extend from the Widget container on the y-axis. Negative values are allowed.
  • The third input field allows you to set the shadow's blur effect.
  • The fourth input field allows you to set the shadow's spread effect.

Fig 33 below illustrates a gray shadow effect with a 25px x- and y-axis distance, with a 10px blur and a 5px spread.

Fig 33

Fig 34 below illustrates a gray shadow effect with a -7px x- and y-axis distance, with a 0px blur and a 0px spread.

Fig 34