This is a unique styling feature of the Range Field. You can find it in the Range section of the Block Style settings tab. It helps you to set the width of the range. You can use pixels (PX) as the unit of measurement or choose to set the width as the percentage of the total column width. By default, it is set to 100%, so the range occupies the full width of the column to which you have put it.
All the settings that are connected to the appearance of the text are gathered here. All elements with text can be customized separately. For example, you can set the look of the label and the description of the field differently. Let’s take a closer look at all of the features that can be placed in the Typography section.
This feature defines the size of the letters. By default, it is set to 14 pixels but you can change it by moving the slider manually or typing the needed size into the bar.
The default units of measurement are pixels (PX) but you can change them to one of three others:
EM – this is the unit that allows you to set the size of the font relatively to the size of some parent element. The parent element can be defined in the CSS code;
REM – this unit sets the size of the font relatively to the size you set in the HTML code;VW – a very flexible unit of measurement. It sets the size of the text relative to the height of the browser window, so it always has the same proportions.
The height of the text line can be changed without changing the size of the letters. When you make it bigger, the space between the lines increases. By default, it is set to 1.2 and you can change it by dragging the slider or typing in the value.
NONE measurement unit defines the height of the line according to the height of the text. So, when you set it to 2, it means that the line generally will be twice the height of the text. You can change the measurement unit to pixels (PX) or the unit that depends on the size of some parent element set in CSS code (EM).
It is clear from the title that this feature allows you to set the space between the letters of the text. By default, it is set to 0, which means that the spacing is normal for the chosen font. When you change that value, either manually or by typing in the number, the normal spacing is multiplied by it. So, when you set the Letter Spacing to 5, it means that space will be five times bigger than normal.
In this drop-down menu, you can choose the font family for your text. The “Default” option means that the text will have a font that is defined by the website template. There are seven additional fonts that are the most popular among the users. The number and type of fonts are set in the JetStyleManager settings and can be changed via coding only.
Here you can choose the boldness of the text. In the drop-down menu, you can select the values from 100 to 900 and also one of the pre-sets:
This feature helps you define the case of the text’s letters. Default is the way the text looks after you type it in.
The Uppercase option makes all letters capitalized.
The Lowercase variant makes all the letters small.
If you choose the Capitalize option, it will capitalize every first letter of every word.
And the Normal option will capitalize only the first letter in every sentence.
As you can choose the boldness of the letters in the Weight feature, here you can select the tilt. The Default option leaves the text as it was inserted. The Normal option makes the text straight. The Italic and Oblique options make the text slanted. If you have no idea about the difference between those two styles, read this article.
In this drop-down menu, you can add some decorative elements that are not crucial for the appearance but could make the text more understandable. The Default option leaves the text you inserted untouched.
The Underline option will add the line under the text lines.
The Overline option will put the line over the text rows.
The Line Through option will create a line that goes over the text, crossing it out.
And the None option will remove all lines from the text, even if there were some in the default text.
This is the feature of Radio and Checkboxes Fields, so it can be found only in the Items style settings section. With its help, you can set the space between the options. Be aware that it doesn’t change the distance between the options and the edge of the field, the Margin or Padding features can help you with that. By default, this feature is set to 10 pixels but you can freely change that value by moving the slider or typing the needed number into the bar.
You will come across this feature in the style settings of the Checkbox/Radio Field only. It allows you to change the size of the radio buttons. By default, it is set to 0, which means that the size will be defined by the general design settings of the website’s template. However, you can choose the radius of the radio buttons or checkboxes in pixels by dragging the slider or typing in the numbers.
With the help of this feature, you will be able to change the size of the Range Field’s slider. It is a feature that can be found in the Slider section of the Range Field Block Style settings tab only. By default, it has the value of 18 pixels but you can play with the numbers until it fits your taste and needs.
This styling feature is unique for the Radio/Checkbox Field and can be found only in the Radio/Checkbox Block Style settings section of that field. By default, that toggle is enabled but if you turn it off, the radio buttons will hide.
Here’s how it looks like with the Show Radio/Checkbox toggle turned on:
And now let’s turn it off:
This is a unique styling feature of Select Field, so you will meet it in its Select settings section only. It defines the width of the select field as a percentage of the general form’s width or width of the column you placed it in.
By default, it is set to 50% but in fact, it will occupy the full width of the form or column. To set the select width to 50%, you will have to move the slider manually or type the needed value into the bar.
This styling feature allows you to set the height of the Range Field’s range. That’s why you can meet it only in the Range section of that field’s Block Style tab. The height is defined in pixels and set to 5 by default. However, you can type into the bar the number from 1 to 20 or choose the value by moving the slider.
Here’s how the range looks like when the height is set to 1:
And now let’s change it to 20:
Every element, be it the whole field or its parts, such as label or description, is placed in a box. That box becomes visible when you change the Background Color of the element. The Padding is a space between the edge of the box and the element it contains.
This is how the Text Field label looks like when its Padding is 0:
And now pay attention to how it looks like when the Padding is 20:
The measurement unit for Padding is the pixel. By default, all the sides of the padding are linked, and you can change all of them at once by typing the value into the bar. However, you can also set different values for different sides. Click on the little blue button with a chain-like icon on it. The four bars you will see are related to the top, left, bottom, and right sides of the padding.
To link the sides again, just click the same button. You can also reset the values to zero by clicking the “Reset” button.
Every part of the field is placed into a box. When you choose the Background Color, it is the box that changes the color according to the one you have selected. The Margin is a space between the border of the box and the surrounding elements.
Here’s how the Text Field label looks like when the margin is equal to zero:
And now let’s set it to 20:
The Margin is set in pixels. You can set the same value for the whole margin or choose different values for different sides of it. Press the “Unlink Sides” blue button on the right side of the value bar and you will see four cells for different sides of the margin. The cells correspond with the sides like that: the first one – top side, the second – right side, the third – bottom side, and the fourth – left side. The square-shaped icon in the left corner will show you which side you are working with right now.
If you need to cancel the changes, press the “Reset” button. You can also make the margin whole again by clicking on the “Link Sides” button.
You will stumble upon this feature in the Items settings section of Checkboxes and Radio Fields. Moreover, it works only if you choose the “Line” option in the Filters Position block. It defines the space between the radio button or checkbox and the previous option. By default, it is set to 0 but you can change that value by dragging the slider or typing the needed value in pixels.
You will find this styling feature in the Textarea and Group Break Fields; it is responsible for the general height of the element. In the case of Group Break, it is the height of the line that divides groups, and in the Textarea Field, it defines the height of the text area. The value is set in pixels and you can type the concrete number into the appropriate bar if you know exactly how high the element has to be. Or, you can play with the slider to find the perfect value manually.
These two features help you define the width of space before the Group Break line and after it. They are also used for the Form block rows. They can have the same values or you can make them different if it is better for the design. The gaps are set in pixels and you can specify them as a specific number in the bar or choose manually via the slider.
You can meet this styling feature in the Items settings section of the Radio and Checkboxes Field. It defines whether the options will be placed in a line or in a column.
Line position
Column position
The color of the field and its parts is the most eye-catching part of the design. There are different “color” features throughout the style settings that differ according to the element they are meant for like Background Color or Text Color. However, they look the same and have the same settings.
First of all, this feature offers you a set of default colors. Those colors will depend on the website template you are using and can change if you install a new skin. Besides that, you can select a custom color. Click on the “Custom color” link and you will see a palette. You can manually pick the fitting color from it or insert the coding into the bar. There are three ways to insert the code of the color that can be switched by pressing the “Change color format” button:
Individual settings of form fields have a bigger priority than more general ones. This means that if you do some changes in, for example, the design settings of a Text Field, the settings chosen for the whole form will affect the Text Field only partially or won’t affect it at all.The Style settings can be reached by clicking on the “Block Style” button. It is available when you click on the separate field while creating the form:
For the elements that can change color on hover, like the “Next Page” buttons, there can be additional tabs in this feature. For example, there can be a Hover tab that allows you to choose how the color of the element will change when the user places the pointer over it.
The Border feature creates a border around the element. It could surround different parts of the same field, so you will find it in different settings sections. For each element of the field, the border can be set independently.
Solid
Double
Dotted
Dashed
Groove
The width of the border is set in pixels. It can be set either for the whole border or separately for each of its sides.
To separate the values, click the “Unlink Sides” button (a little blue button with the chain-shaped icon). In this case, bars for each side will appear. The first cell is for the top side, the second is for the right side, the third is for the down side, and the fourth – for the left side. The little square-shaped icon in the left corner shows you what side you are setting now. If you want to undo all the changes, press the “Reset” button. You can also link the sides again by hitting the “Link Sides” button (it is the same button as the “Unlink Sides” but it became white now).
If you want to make the angles of the border curvy, you can set it with the help of the Border Radius feature. In the bar, you can type in the radius of curvature in pixels. You can set a similar radius for all angles or unlink them and define each of them separately.
To set different curvatures, click the “Unlink Sides” little blue button with a chain-shape icon.
The opened cells correspond with the angles like that: 1 – upper left corner, 2 – upper right corner, 3 – bottom right corner, 4 – bottom left corner. You can reset all the changes by clicking the “Reset” button or link the sides again by clicking the same button that became white – “Link Sides”.
All the Color features in the style settings are the same. It allows you to choose the color of the border, in this case. You can select one of the default colors or a custom one. Check the Color guide if you need more details.
The Alignment feature defines the position of an element or its part. Some parts of the field such as label, description, or content can have different alignment. That’s why this feature can be met in several style settings sections related to a single field.
Basically, there are three possible positions.
Left:
Center:
Right:
