The style panel is where you can customize the look of your website.
You can style individual elements, or save styles as classes and reuse them throughout your project.
Whether you want to change the layout, typography, spacing, size or color of an element, you can do it all in the Style panel.
The style panel is not enabled for all users by default. Give other users permission to use it if you need help with the design of your website.
Applying Styles
To open the style panel click on an item on the page. To select a nested element make another click on the nested element. Now you can apply styles using the Style Panel interface.
Deleting Styles
Hold down the Alt key and Click on label to reset/remove a css rule.
Classes
CSS classes enable you to apply unique style properties to groups of HTML elements or PAGEGRID items.
Creating or applying a class
You can add custom classes to any PAGEGRID item on your page. Type a class name in the selector field and press the "return" or "space" key. The class will be added to your item.
Assigning values to a class
Click on a class to activate it. The class will turn blue. All the styles you apply now will be added to that class.
Updating a class
Right click a class in the Style Panel and click "update class". All CSS properties of an item will be copied to that class.
Deleting a class
Right click a class in the Style Panel and click "delete class".
Breakpoints
Customize your designs for small and large screens using PAGEGRID's built-in responsive breakpoints. You can switch between different breakpoints using the device icons located in the top menu bar. Layout changes made by dragging/resizing or styles set via the style panel are applied only to the selected breakpoint.
BaseStyles set on the base breakpoint will affect all screen sizes (cascade up and down). |
|
MediumStyles set on the medium breakpoint will affect screens smaller then 960px and will be carried over to the mobile breakpoint. You can override any styles inherited from a higher breakpoint. |
|
MobileStyles set on the mobile breakpoint will affect screens smaller then 640px. You can override any styles inherited from a higher breakpoint. By default, grid elements are automatically stacked and span all columns. |
|
LargeStyles set on the large breakpoint will affect screens larger then 1600px. You can override any styles inherited from the base breakpoint. |
|