Styling

Styling Guide

.
A universal styling guide for all the widgets of The Plus Addons for Gutenberg

The styling guide for The Plus Addons for Gutenberg is a simple , very precise and easy to understand documentation which provides terminology and guidelines for the styling components which are provide by us. This documentation will help you to customise and change the visual display of any element we provide by yourself.

Styling Guide is Always Under Development

We accurately design & develop our components and we always make sure that you don’t need to wait for any update in our widgets you asked for. Also wordpress and Gutenberg updates themselves very often. We also check for the dependent plugins and themes which users might use as a base of our product.

So we frequently update all the documents which we provides for The Plus Addons for Gutenberg. And we always make sure you never return empty handed if you came finding something valuable for your online presence. Customise our widgets using the following tools :

Table Of Contents

Alignment

Alignment property is used to align items into pages in directions left, right or centre. Alignment mostly works with text. But we have added support for the elements which we considered worth aligned. We have added mostly 4 options for alignment :

Left : Aligns content to left side.
Right : Aligns content to right side.
Centre : Aligns content to the centre.
Justify : Justify is used in text items only. Letter-spacing would be managed as Text is aligned like left margin and right margin would be the same for each sentence in paragraph.

Background

Background property is used to set background for any element. We have provided support to set color, gradient, image & video as background for any layout. Support for responsive layout is also added where it is necessary.

Color : Set any color as a background for chosen element, or if you have HEX or RGB values, you can simply add it in the input box we have provided.
Gradient : Gradient is a smooth transition between two colours. You can choose both colors and choose type, linear or radial. We have provided options for color-1 & color-2 starting point sliders and, so you can easily manage color transition from there. And also gradient angle for linear and radial point for radial type.
Image : You can set image as a background from here. After you upload an image, you’ll have options for background like Position, Attachment, Repeat & Size.
Video : You can set video as a background choosing this option. Choosing option from local or external, you can add video source & poster image accordingly.

Border

Border is an essential css property which is used widely styling any component not just in CSS, in any kind of design things. We have proved full border package in our border styling element. Support for responsive layout is also added where it is necessary.

Box Border : Box border is a selection for border type. Solid, dotted, dashed & doubled are the basic border types which we have proved here.
Border Color : Choose color for border here.
Border Width : Border width is the most important part of this whole pack. If you don’t choose any, it’ll simply apply effects for 1px. Removal of that can lead to disappearance of border, even if you’ve selected type and color for it.

Box-Shadow, Text Shadow, Drop Shadow

Box-shadow/ Text-shadow/ Drop-shadow CSS are used to add shadow effect on any element. According to their names, they are useful for different kind of shadow effects for different elements accordingly.

X : X is horizontal offset which will move shadow on left/ right side of the element depending on input value.
Y : Y is vertical offset which will move shadow on up/ down side of the element depending on input value.
Blur : Blur radius is set for sharpness of the shadow. 0 will create sharpest shadow and increase in value will blur it accordingly.
Spread : Spread will increase the size of shadow extended from blur.
Color : Simple color picker for selection of color of shadow.
Inset/ Outset : As name suggests, inset will create shadow inside or over the element & outset will create shadow outside or below the element.

Color

Color picker allows you to choose any color you want to have. Mostly color picker is used to color borders, texts, set as a background and shadow colors.

Dimension

Dimension is a component with 4 number filed in it. Mostly we have used it for selection of padding, margin & border radius. It takes 4 individual inputs for fields which take top/ right/ bottom/ left as a input. A linked input which is added at the end of 4 input boxes will help you to keep the same value for all of them, and by un-linking them you can have different values for each of them. We have provided px, em & % as output value units for the values selected in the boxes.

Gradient Color

Gradient is a smooth transition between two colours. You can choose both colors and choose type, linear or radial. We have provided options for color-1 & color-2 starting point sliders and, so you can easily manage color transition from there. And also gradient angle for linear and radial point for radial type.

Heading Tags

By default HTML provided 6 different types of heading tags from H1 to H6. Each of them can be selected for different types of heading selections. H1 will provide the highest font-size where H6 will be the lowest. We have also added Div, Span & P tags additionally if you want to use their properties in a title tag as well.

Media

Media is a file upload/ drop zone kind of component which would allow you to upload files directly for the selected input. Currently we provide all the types of image file types including SVGs. Video upload support is also added where needed. Multiple file upload option is also enabled where we felt necessity.

Typography

Typography is a collection of CSS items for a typed text design. Our typography component contains all of the CSS transformations which can be applied to ant text. Support for responsive layout is also added where it is necessary.

Font size : Selection of text/ font size in px, em & % units.
Font family : All the font families supported by wide range of browsers are listed here.
Font weight : Making font stronger makes them seek attention. You can assign them weight here.
Line height : Line height is a space between two lines of any paragraph. You can change it from here.
Letter Spacing : Letter spacing is a space between two letters. You can set it from here.
Font Style : Font style consist of Bold, Italic, oblique and none type of styles.
Text Transform : Text transform will help you convert case of sentence without changing original text. You can have upper/ lower/ sentence cases from here.
Text Decoration : Text decoration will allow you to sketch the line under/ over/ through the text.

Icon List

Icon are always eye catching. Use of them will be make your text more readable. We have provided a whole component as a list of icons which are provided by Fontawesome icon library. You can search in a panel your icon of wish. If you have purchased pro package for Fontawesome then you can use pro icons as well. Click Here to know more about it.

Was this article helpful?
0 out of 5 stars
5 Stars 0%
4 Stars 0%
3 Stars 0%
2 Stars 0%
1 Stars 0%
How can we improve this article?