Styling Options

Overview

In this documentation, we will show you how to Style your Page with PageLayer

Firstly, you will need to access your Pagelayer Website Settings Page. Here, you will see different tabs for styling your web page. All these styling settings will be applied globally to your web page.

Pagelayer Website Settings

Typography

The Fonts settings applied to this Typography tab will be applied Globally to the body tag. There are list of Font Settings i.e. Font Family, Font Size, Font Style, Font Weight, Text Transform, Line Height, Text Spacing, Word Spacing.

  • Font Family: Set the Font Family to the body tag.
  • Font Size: Set the Font Size to the body tag in pixels.
  • Font Style: Set the Font Style to the body tag like Normal, Italic, Oblique.
  • Font Weight: Set the Font Weight to the body tag like Thin, Extra Thin, Light, Normal, Medium, Semi Bold, Bold, Extra Bold, Ultra Bold.
  • Text Transform: Set the Text Transform to the body tag like Capitalize, Uppercase, Lowercase.
  • Line Height: Set the Line Height to the body tag.
  • Text Spacing: Set the Space between Alphabets to the body tag.
  • Word Spacing: Set the Space between Words to the body tag.
Typography

Heading

The Fonts settings applied to this Heading tab will be applied Globally to the particular heading tag like h1, h2, h3, h4, h5 and h6

Heading

Color

  • Background Color: Set the Background Color of web page.
  • Text Color: Set the Text Color of the web page.
  • Link Color: Set the Color of the link on your web page.
  • Link Hover Color: Set the Color of the link on Hover to your web page.
  • Heading Color: Set the Heading Color (h1-h6)on your web page.
Note : By default the theme colors would be inherited. If you set any value here, it will override your theme values. These colors can be over-written by the individual elements as well !
Color

Container

  • Content Width: Set the custom width of the content area. The default width set is 1170px.
  • Tablet Breakpoint: Set the breakpoint for tablet devices. The default breakpoint for tablet layout is 768px.
  • Mobile Breakpoint: Set the breakpoint for mobile devices. The default breakpoint for mobile layout is 360px
  • Space Between Widgets: Set the Space Between Widgets. The default Space set is 15px.
container

Header and Footer

You can add custom code like HTML, JavaScript, CSS etc. which will be inserted throughout your site.

  • Header Code: This code will be printed in head Section.
  • Footer Code: This code will be printed before closing the body Section.
footer code
Was this helpful to you?

Leave a Reply