{"id":22159,"date":"2021-02-17T09:24:17","date_gmt":"2021-02-17T09:24:17","guid":{"rendered":"https:\/\/crocoblock.com\/knowledge-base\/?post_type=article&#038;p=22159"},"modified":"2023-05-31T20:26:31","modified_gmt":"2023-05-31T20:26:31","slug":"jetstylemanager-block-style-settings-overview","status":"publish","type":"article","link":"https:\/\/crocoblock.com\/knowledge-base\/jetstylemanager\/jetstylemanager-block-style-settings-overview\/","title":{"rendered":"Block Style Overview"},"content":{"rendered":"\n<p>Gutenberg editor doesn\u2019t have its own styling options. The only way to change the appearance of the page is to change the template of the whole website. JetStyleManager is a <a aria-label=\"Gutenberg block styles plugin (opens in a new tab)\" href=\"https:\/\/crocoblock.com\/plugins\/jetstylemanager\/\" target=\"_blank\" rel=\"noreferrer noopener\">Gutenberg block styles plugin<\/a> that adds the design customization block for JetPlugins that work with Gutenberg. Though the options in the <strong>Block Style<\/strong> menu are mostly the same as the ones in the Elementor page builder\u2019s <strong>Style <\/strong>tab, users who have no experience with Elementor can be confused. This overview describes all the style settings to avoid that confusion.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"where-could-you-apply-the-style-settings\">Where could you apply the style settings?<\/h2>\n\n\n\n<p>JetStyleManager adds a \u201c<strong>Block Style<\/strong>\u201d button to the upper right corner of the editing window of the following blocks:<\/p>\n\n\n\n<ul>\n<li>JetEngine Dynamic blocks (Dynamic Field, Dynamic Link, Dynamic Image, Dynamic Repeater, and Dynamic Meta);&nbsp;<\/li>\n\n\n\n<li>JetEngine Listing Grid block;<\/li>\n\n\n\n<li>All JetSmartFilters blocks;<\/li>\n\n\n\n<li>JetFormBuilder plugin forms creation functionality;<\/li>\n\n\n\n<li>JetFormBuilder and JetEngine Form block.<\/li>\n<\/ul>\n\n\n\n<div class=\"wp-block-image aligncenter\"><img decoding=\"async\" src=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2020\/08\/block-style.png\" alt=\"Block Style button\" class=\"wp-image-21730\"\/><\/div>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"block-style-options\">Block Style options<\/h2>\n\n\n\n<p>Mostly, the styling settings are similar for different blocks, so we will list all the possible options here in alphabetical order.<\/p>\n\n\n\n<ul>\n<li><a href=\"#title1\">Alignment<\/a><\/li>\n\n\n\n<li><a href=\"#title2\"> Background Color<\/a><\/li>\n\n\n\n<li> <a href=\"#title3\">Border<\/a><\/li>\n\n\n\n<li><a href=\"#title4\"> Border Radius<\/a><\/li>\n\n\n\n<li><a href=\"#title5\"> Children Offset Left<\/a><\/li>\n\n\n\n<li> <a href=\"#title6\">Direction<\/a><\/li>\n\n\n\n<li><a href=\"#title7\"> Field Content Alignment<\/a><\/li>\n\n\n\n<li><a href=\"#title8\"> Field Content Width<\/a><\/li>\n\n\n\n<li><a href=\"#title9\"> Field Element Position<\/a><\/li>\n\n\n\n<li><a href=\"#title10\"> Filter Position<\/a><\/li>\n\n\n\n<li><a href=\"#title11\"> Horizontal Gap<\/a><\/li>\n\n\n\n<li><a href=\"#title12\"> Icon Color<\/a><\/li>\n\n\n\n<li><a href=\"#title13\"> Icon Gap<\/a><\/li>\n\n\n\n<li><a href=\"#title14\"> Icon Orientation<\/a><\/li>\n\n\n\n<li><a href=\"#title15\"> Icon Position<\/a><\/li>\n\n\n\n<li><a href=\"#title16\"> Icon Size<\/a><\/li>\n\n\n\n<li> <a href=\"#title17\">Margin<\/a><\/li>\n\n\n\n<li><a href=\"#title18\"> Offset Left<\/a><\/li>\n\n\n\n<li> <a href=\"#title19\">Padding<\/a><\/li>\n\n\n\n<li><a href=\"#title20\"> Points Width\/Height<\/a><\/li>\n\n\n\n<li><a href=\"#title21\"> Space Between<\/a><\/li>\n\n\n\n<li> <a href=\"#title22\">Stroke<\/a><\/li>\n\n\n\n<li><a href=\"#title23\"> Text Color<\/a><\/li>\n\n\n\n<li> <a href=\"#title24\">Typography<\/a><\/li>\n\n\n\n<li><a href=\"#title25\"> Vertical Gap<\/a><\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"alignment\">Alignment<\/h3>\n\n\n\n<div class=\"wp-block-image aligncenter\"><img decoding=\"async\" src=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2021\/02\/alignment.png\" alt=\"aligment feature\" class=\"wp-image-22160\"\/><\/div>\n\n\n\n<p>Here you can select an alignment for the element on the page. It can be <strong>Left<\/strong>, <strong>Center<\/strong>, or <strong>Right<\/strong>.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"background-color\">Background Color<\/h3>\n\n\n\n<div class=\"wp-block-image aligncenter\"><img decoding=\"async\" src=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2021\/02\/background-color.png\" alt=\"background color feature\" class=\"wp-image-22161\"\/><\/div>\n\n\n\n<p>This section allows you to choose the background color of the element. There are 12 default colors to choose from, or you can click on the \u201c<strong>Custom Color<\/strong>\u201d button and pick any you need.<\/p>\n\n\n\n<div class=\"wp-block-image aligncenter\"><img decoding=\"async\" src=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2021\/02\/custom-color.png\" alt=\"custom color window\" class=\"wp-image-22165\"\/><\/div>\n\n\n\n<p>In the separate pop-up window, you will be able to choose the color manually from the palette or insert the hex code into the <strong>Color value in hexadecimal<\/strong> bar. If you hit the \u201c<strong>Change color format<\/strong>\u201d button with the arrow-down icon next to the hex code bar, you can change the format of color code. There are also RGB and HSL formats.<\/p>\n\n\n\n<p>By clicking the \u201c<strong>Cancel<\/strong>\u201d button, you cancel the formatting and return the background to the default color.<\/p>\n\n\n\n<p>In some cases, this feature has several tabs, such as \u201cHover\u201d. It allows you to set the color of the element\u2019s background if you want it to change when the user hovers the pointer over it.&nbsp;<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"border\">Border<\/h3>\n\n\n\n<div class=\"wp-block-image aligncenter\"><img decoding=\"async\" src=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2021\/02\/border.png\" alt=\"border feature\" class=\"wp-image-22162\"\/><\/div>\n\n\n\n<p>This section allows you to set the border around the element\u2019s edge.<\/p>\n\n\n\n<ul>\n<li><strong>Border Type<\/strong>. There are five types of border you can choose from \u2013 <strong>Solid<\/strong>, <strong>Double<\/strong>, <strong>Dashed<\/strong>, <strong>Dotted<\/strong>, and <strong>Groove. <\/strong>All the other border settings appear if you choose any of them;<\/li>\n\n\n\n<li><strong>Border Width<\/strong>. Here you can set the width of the border. If it has to have different width on different sides, click the \u201c<strong>Unlink Sides<\/strong>\u201d button under the \u201c<strong>Reset<\/strong>\u201d button;<\/li>\n\n\n\n<li><strong>Border Color<\/strong>. Defines the color of the border.<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"border-radius\">Border Radius<\/h3>\n\n\n\n<div class=\"wp-block-image aligncenter\"><img decoding=\"async\" src=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2021\/02\/border-radius.png\" alt=\"border radius feature\" class=\"wp-image-22163\"\/><\/div>\n\n\n\n<p>This option allows you to round the corners of the border to create a softer, curvy look. The bigger number you set here, the more rounded the whole element will be. By default, you round all the corners at once. If you want to set the different radius for different corners, click the \u201c<strong>Unline Sides<\/strong>\u201d button under the \u201c<strong>Reset<\/strong>\u201d button.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"children-offset-left\">Children Offset Left<\/h3>\n\n\n\n<div class=\"wp-block-image aligncenter\"><img decoding=\"async\" src=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2021\/02\/children-offset-left.png\" alt=\"children offset left feature\" class=\"wp-image-22164\"\/><\/div>\n\n\n\n<p>If the filter contains the parent and children options, this feature can help you select the width of the offset for the children options. Set the necessary value by moving the slider or entering the width in pixels into the bar.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"direction\">Direction<\/h3>\n\n\n\n<div class=\"wp-block-image aligncenter\"><img decoding=\"async\" src=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2021\/02\/direction.png\" alt=\"direction feature\" class=\"wp-image-22166\"\/><\/div>\n\n\n\n<p>Here you can choose how the list of options placed in the field will be shown to the user. The <strong>Horizontal <\/strong>option means all of them will be placed in one row, and the <strong>Vertical <\/strong>option will locate the items in a form of a list \u2013 in a single column.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"field-content-alignment\">Field Content Alignment<\/h3>\n\n\n\n<div class=\"wp-block-image aligncenter\"><img decoding=\"async\" src=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2021\/02\/field-content-alignment.png\" alt=\"field content alignment feature\" class=\"wp-image-22167\"\/><\/div>\n\n\n\n<p>Here you can select the alignment of the content within its box. It can be <strong>Left<\/strong>, <strong>Center<\/strong>, or <strong>Right<\/strong>.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"field-content-width\">Field Content Width<\/h3>\n\n\n\n<div class=\"wp-block-image aligncenter\"><img decoding=\"async\" src=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2021\/02\/field-content-width.png\" alt=\"field content width feature\" class=\"wp-image-22168\"\/><\/div>\n\n\n\n<p>In the case of the multiline text, here you can choose how it will be filling the block box. If you choose the <strong>Auto <\/strong>option, the text will be wrapped as it is, and if you select the <strong>Fullwidth <\/strong>option, it will be wrapped in the way to fill the whole box without leaving the gaps near the border.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"field-element-position\">Field Element Position<\/h3>\n\n\n\n<div class=\"wp-block-image aligncenter\"><img decoding=\"async\" src=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2021\/02\/field-element-position.png\" alt=\"field element position feature\" class=\"wp-image-22169\"\/><\/div>\n\n\n\n<p>In this section, you choose the alignment of the element within the page. It can be placed on the right side, in the center, and on the left side.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"filter-position\">Filter Position<\/h3>\n\n\n\n<div class=\"wp-block-image aligncenter\"><img decoding=\"async\" src=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2021\/02\/filter-position.png\" alt=\"filter position feature\" class=\"wp-image-22170\"\/><\/div>\n\n\n\n<p>By choosing one of two buttons, you can place the filtering options in a line or into a column.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"horizontal-gap\">Horizontal Gap<\/h3>\n\n\n\n<div class=\"wp-block-image aligncenter\"><img decoding=\"async\" src=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2021\/02\/horizontal-gap.png\" alt=\"horizontal gap feature\" class=\"wp-image-22171\"\/><\/div>\n\n\n\n<p>By moving the slider or typing the value into the bar, you can set the width of the gap between the rows of a Listing Grid.<\/p>\n\n\n\n<h3 id=\"title12\">Icon Color<\/h3>\n\n\n\n<div class=\"wp-block-image aligncenter\"><img decoding=\"async\" src=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2021\/02\/icon-color.png\" alt=\"icon color feature\" class=\"wp-image-22172\"\/><\/div>\n\n\n\n<p>Here you can choose the color of the icon so it matches the color of the rest of the content. There are 12 default colors; or, you can press the \u201c<strong>Custom Color<\/strong>\u201d button to choose the one that fits the design.<\/p>\n\n\n\n<div class=\"wp-block-image aligncenter\"><img decoding=\"async\" src=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2021\/02\/custom-color.png\" alt=\"custom color window\" class=\"wp-image-22165\"\/><\/div>\n\n\n\n<p>In this case, you can choose any color manually from the palette or insert the hex code into the <strong>Color value in hexadecimal<\/strong> bar. If you hit the \u201c<strong>Change color format<\/strong>\u201d button with the arrow-down icon next to the hex code bar, you can change the format of color code. There are also RGB and HSL formats.<\/p>\n\n\n\n<p>By clicking the \u201c<strong>Cancel<\/strong>\u201d button, you cancel the formatting and return it to the default color.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"icon-gap\">Icon Gap<\/h3>\n\n\n\n<div class=\"wp-block-image aligncenter\"><img decoding=\"async\" src=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2021\/02\/icon-gap.png\" alt=\"icon gap feature\" class=\"wp-image-22173\"\/><\/div>\n\n\n\n<p>Here you can define the width of the gap between the icon and the rest of the content. Move the slider to do it manually or type in the number. The width of the gap is set in pixels.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"icon-orientation\">Icon Orientation<\/h3>\n\n\n\n<div class=\"wp-block-image aligncenter\"><img decoding=\"async\" src=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2021\/02\/icon-orientation.png\" alt=\"icon orientation feature\" class=\"wp-image-22174\"\/><\/div>\n\n\n\n<p>This feature allows you to define the positioning of the icon. The <strong>Horizontal <\/strong>option places the icon in the same row as the other content, and the <strong>Vertical <\/strong>option locates it above the other content.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"icon-position\">Icon Position<\/h3>\n\n\n\n<div class=\"wp-block-image aligncenter\"><img decoding=\"async\" src=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2021\/02\/icon-position.png\" alt=\"icon position feature\" class=\"wp-image-22175\"\/><\/div>\n\n\n\n<p>Here you can choose the position of the icon relative to the text in the field. <strong>Before Label<\/strong> will place the icon before the text and <strong>After Label<\/strong> \u2013 at the end of the row after the text.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"icon-size\">Icon Size<\/h3>\n\n\n\n<div class=\"wp-block-image aligncenter\"><img decoding=\"async\" src=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2021\/02\/icon-size.png\" alt=\"icon size feature\" class=\"wp-image-22176\"\/><\/div>\n\n\n\n<p>By using the slider or typing in a specific number into the bar, you can set the size of the icon in pixels here.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"margin\">Margin<\/h3>\n\n\n\n<div class=\"wp-block-image aligncenter\"><img decoding=\"async\" src=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2021\/02\/margin.png\" alt=\"margin feature\" class=\"wp-image-22177\"\/><\/div>\n\n\n\n<p>This number shows the width of the space between the edge of the element block and the edge of the section it is placed into. Setting it to the bigger value makes the whole section bigger.<\/p>\n\n\n\n<p>By default, all the sides of the padding are linked, and you change the width of them all. However, if you need to create the padding that will have different widths on different sides, click on the \u201c<strong>Unlink Sides<\/strong>\u201d and \u201c<strong>Reset<\/strong>\u201d buttons. This will open an option to set every side of the padding separately. When you click on one of the bars to change the value, the square in the left corner will show which side you are setting here.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"offset-left\">Offset Left<\/h3>\n\n\n\n<div class=\"wp-block-image aligncenter\"><img decoding=\"async\" src=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2021\/02\/offset-left.png\" alt=\"offset left feature\" class=\"wp-image-22178\"\/><\/div>\n\n\n\n<p>This feature allows you to set the gap between the interactive icon and its label in the <strong>Checkboxes <\/strong>and <strong>Radio <\/strong>filters. Change it via the slider or insert the necessary value in pixels.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"padding\">Padding<\/h3>\n\n\n\n<div class=\"wp-block-image aligncenter\"><img decoding=\"async\" src=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2021\/02\/padding.png\" alt=\"padding feature\" class=\"wp-image-22179\"\/><\/div>\n\n\n\n<p>This is the width of the space between the content and the edge of the block. If you set the visible background color, the bigger the Padding \u2013 the bigger the element will be. By clicking on the \u201c<strong>Reset<\/strong>\u201d button, you can roll the padding value back to default.&nbsp;<\/p>\n\n\n\n<p>By default, all the sides of the padding are linked and you change the width of all of them. However, if you need to create the padding that will have different widths on different sides, click on the \u201c<strong>Unlink Sides<\/strong>\u201d and \u201c<strong>Reset<\/strong>\u201d buttons. This will open an option to set every side of the padding separately. When you click on one of the bars to change the value, the square in the left corner will show which side you are setting here.<\/p>\n\n\n\n<div class=\"wp-block-image aligncenter\"><img decoding=\"async\" src=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2021\/02\/padding-margin-unlinked.png\" alt=\"padding\/margin unlinked\" class=\"wp-image-22180\"\/><\/div>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"points-widthheight\">Points Width\/Height<\/h3>\n\n\n\n<div class=\"wp-block-image aligncenter\"><img decoding=\"async\" src=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2021\/02\/points-width-heigth.png\" alt=\"points width\/heigth feature\" class=\"wp-image-22181\"\/><\/div>\n\n\n\n<p>The <strong>Range Filter <\/strong>block has two points, one for each of the scale edges. This feature helps you to define those points\u2019 height and width and can be set manually or via the entered number of pixels.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"space-between\">Space Between<\/h3>\n\n\n\n<div class=\"wp-block-image aligncenter\"><img decoding=\"async\" src=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2021\/02\/space-between.png\" alt=\"space between feature\" class=\"wp-image-22182\"\/><\/div>\n\n\n\n<p>You can control the width of space between the options of the filter by changing it manually via the slider or typing a specific number into the bar.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"stroke\">Stroke<\/h3>\n\n\n\n<div class=\"wp-block-image aligncenter\"><img decoding=\"async\" src=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2021\/02\/stroke.png\" alt=\"stroke feature\" class=\"wp-image-22183\"\/><\/div>\n\n\n\n<p>This feature allows you to change the width of the <strong>Range Filter<\/strong> scale line. It can be set by moving the slider or inserting a number of pixels into the bar.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"text-color\">Text Color<\/h3>\n\n\n\n<div class=\"wp-block-image aligncenter\"><img decoding=\"async\" src=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2021\/02\/text-color.png\" alt=\"text color feature\" class=\"wp-image-22184\"\/><\/div>\n\n\n\n<p>This option allows you to set the color of the text, which will be shown in the block. There are 12 default colors you can choose from, or you can press the \u201c<strong>Custom Color<\/strong>\u201d button.<\/p>\n\n\n\n<div class=\"wp-block-image aligncenter\"><img decoding=\"async\" src=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2021\/02\/custom-color.png\" alt=\"custom color window\" class=\"wp-image-22165\"\/><\/div>\n\n\n\n<p>In this case, you can choose any color manually from the palette or insert the hex code into the <strong>Color value in hexadecimal<\/strong> bar. If you hit the \u201c<strong>Change color format<\/strong>\u201d button with the arrow-down icon next to the hex code bar, you can change the format of color code. There are also RGB and HSL formats.<\/p>\n\n\n\n<p>By clicking the \u201c<strong>Cancel<\/strong>\u201d button, you cancel the formatting and return it to the default color.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"typography\">Typography<\/h3>\n\n\n\n<div class=\"wp-block-image aligncenter\"><img decoding=\"async\" src=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2021\/02\/typography.png\" alt=\"typography feature\" class=\"wp-image-22185\"\/><\/div>\n\n\n\n<p>Here you can define all the features of the text that will be shown in the block.<\/p>\n\n\n\n<ul>\n<li><strong>Size<\/strong>. You can choose the size of the font from 1 to 200 by moving the slider or typing the necessary value into the bar. By default, the size can be chosen in pixels (<strong>PX<\/strong>). You can also change the unit of measurement to:\n<ul>\n<li><strong>EM <\/strong>\u2013 the size of the font is set according to the size of the parent element. In the case of font, you can set the size according to the size of the default font. So, if you set it to 10 em it will always be 10 times larger than the default font. This unit of measurement works best for responsive sites;<\/li>\n\n\n\n<li><strong>REM <\/strong>\u2013 this one is almost the same as the EM but sets the size of the font according to the size set in HTML;<\/li>\n\n\n\n<li><strong>VW <\/strong>\u2013 one unit of this unit of measurement is equal to 1% of the general height of the browser window. When the user changes the size of the window, the font will become bigger\/smaller;<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><strong>Line Height<\/strong>. By moving the slider or typing in the direct number, you can choose the height of the text line and, therefore, the spacing between the lines. There\u2019s also an option to change the units of measurement to PX or EM;<\/li>\n\n\n\n<li><strong>Letter Spacing<\/strong>. With the help of this slider, you can set the width of the space between the letters. The available range is from -2 to 20;<\/li>\n\n\n\n<li><strong>Family<\/strong>. In this drop-down menu, you can choose the typeface;<\/li>\n\n\n\n<li><strong>Weight<\/strong>. Here you can choose the boldness of the font from 100 to 1000. Besides that, you can select it to be <strong>Default<\/strong>, <strong>Normal, <\/strong>or just <strong>Bold<\/strong>;<\/li>\n\n\n\n<li><strong>Transform<\/strong>. This drop-down menu allows you to change the case of the letters in words. The <strong>Uppercase <\/strong>option makes all letters capitalized, the <strong>Lowercase <\/strong>option makes all the letters in the word lower-cased, and <strong>Capitalize <\/strong>option transforms the first letter of every word into a capital letter;<\/li>\n\n\n\n<li><strong>Style<\/strong>. Here you can choose the <strong>Normal<\/strong>, <strong>Italic<\/strong>, or <strong>Oblique <\/strong>style of the font or leave it <strong>Default<\/strong>;<\/li>\n\n\n\n<li><strong>Decoration<\/strong>. In this drop-down list, you can choose to add the line to the text. You can select the <strong>Underline<\/strong>, <strong>Overline<\/strong>, or <strong>Line Through<\/strong>.&nbsp;<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"vertical-gap\">Vertical Gap<\/h3>\n\n\n\n<div class=\"wp-block-image aligncenter\"><img decoding=\"async\" src=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2021\/02\/vertical-gap.png\" alt=\"vertical gap feature\" class=\"wp-image-22186\"\/><\/div>\n\n\n\n<p>By moving the slider or typing the value into the bar, you can set the width of the gap between the columns of a Listing Grid.<\/p>\n\n\n\n<p>Those are all the main features of the <strong>Block Style<\/strong> in Gutenberg. You may meet some other, more specific options, but it will be easy to understand how to use them. Good luck creating great pages in Gutenberg and customizing their design.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>This overview describes the styling options that become available for you in the Gutenberg Editor after the activation of the JetStyleManager plugin.<\/p>\n","protected":false},"author":11,"featured_media":0,"template":"","format":"standard","builder-category":[],"article-category":[489],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v20.9 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>How to Style WordPress Gutenberg Blocks | Crocoblock<\/title>\n<meta name=\"description\" content=\"Discover all the details about the styling features JetStyleManager adds to the Gutenberg Editor functionality and learn how to use them for the block\u2019s appearance customization.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/crocoblock.com\/knowledge-base\/jetstylemanager\/jetstylemanager-block-style-settings-overview\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to Style WordPress Gutenberg Blocks | Crocoblock\" \/>\n<meta property=\"og:description\" content=\"Discover all the details about the styling features JetStyleManager adds to the Gutenberg Editor functionality and learn how to use them for the block\u2019s appearance customization.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/crocoblock.com\/knowledge-base\/jetstylemanager\/jetstylemanager-block-style-settings-overview\/\" \/>\n<meta property=\"og:site_name\" content=\"Help Center\" \/>\n<meta property=\"article:modified_time\" content=\"2023-05-31T20:26:31+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2020\/08\/block-style.png\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data1\" content=\"15 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/jetstylemanager\/jetstylemanager-block-style-settings-overview\/\",\"url\":\"https:\/\/crocoblock.com\/knowledge-base\/jetstylemanager\/jetstylemanager-block-style-settings-overview\/\",\"name\":\"How to Style WordPress Gutenberg Blocks | Crocoblock\",\"isPartOf\":{\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/#website\"},\"datePublished\":\"2021-02-17T09:24:17+00:00\",\"dateModified\":\"2023-05-31T20:26:31+00:00\",\"description\":\"Discover all the details about the styling features JetStyleManager adds to the Gutenberg Editor functionality and learn how to use them for the block\u2019s appearance customization.\",\"breadcrumb\":{\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/jetstylemanager\/jetstylemanager-block-style-settings-overview\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/crocoblock.com\/knowledge-base\/jetstylemanager\/jetstylemanager-block-style-settings-overview\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/jetstylemanager\/jetstylemanager-block-style-settings-overview\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/crocoblock.com\/knowledge-base\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Articles\",\"item\":\"https:\/\/crocoblock.com\/knowledge-base\/articles\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Block Style Overview\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/#website\",\"url\":\"https:\/\/crocoblock.com\/knowledge-base\/\",\"name\":\"Help Center\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/crocoblock.com\/knowledge-base\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/#organization\",\"name\":\"Help Center\",\"url\":\"https:\/\/crocoblock.com\/knowledge-base\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2025\/04\/invert-crocoblock-logo.svg\",\"contentUrl\":\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2025\/04\/invert-crocoblock-logo.svg\",\"caption\":\"Help Center\"},\"image\":{\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/#\/schema\/logo\/image\/\"}}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"How to Style WordPress Gutenberg Blocks | Crocoblock","description":"Discover all the details about the styling features JetStyleManager adds to the Gutenberg Editor functionality and learn how to use them for the block\u2019s appearance customization.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/crocoblock.com\/knowledge-base\/jetstylemanager\/jetstylemanager-block-style-settings-overview\/","og_locale":"en_US","og_type":"article","og_title":"How to Style WordPress Gutenberg Blocks | Crocoblock","og_description":"Discover all the details about the styling features JetStyleManager adds to the Gutenberg Editor functionality and learn how to use them for the block\u2019s appearance customization.","og_url":"https:\/\/crocoblock.com\/knowledge-base\/jetstylemanager\/jetstylemanager-block-style-settings-overview\/","og_site_name":"Help Center","article_modified_time":"2023-05-31T20:26:31+00:00","og_image":[{"url":"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2020\/08\/block-style.png"}],"twitter_card":"summary_large_image","twitter_misc":{"Est. reading time":"15 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/crocoblock.com\/knowledge-base\/jetstylemanager\/jetstylemanager-block-style-settings-overview\/","url":"https:\/\/crocoblock.com\/knowledge-base\/jetstylemanager\/jetstylemanager-block-style-settings-overview\/","name":"How to Style WordPress Gutenberg Blocks | Crocoblock","isPartOf":{"@id":"https:\/\/crocoblock.com\/knowledge-base\/#website"},"datePublished":"2021-02-17T09:24:17+00:00","dateModified":"2023-05-31T20:26:31+00:00","description":"Discover all the details about the styling features JetStyleManager adds to the Gutenberg Editor functionality and learn how to use them for the block\u2019s appearance customization.","breadcrumb":{"@id":"https:\/\/crocoblock.com\/knowledge-base\/jetstylemanager\/jetstylemanager-block-style-settings-overview\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/crocoblock.com\/knowledge-base\/jetstylemanager\/jetstylemanager-block-style-settings-overview\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/crocoblock.com\/knowledge-base\/jetstylemanager\/jetstylemanager-block-style-settings-overview\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/crocoblock.com\/knowledge-base\/"},{"@type":"ListItem","position":2,"name":"Articles","item":"https:\/\/crocoblock.com\/knowledge-base\/articles\/"},{"@type":"ListItem","position":3,"name":"Block Style Overview"}]},{"@type":"WebSite","@id":"https:\/\/crocoblock.com\/knowledge-base\/#website","url":"https:\/\/crocoblock.com\/knowledge-base\/","name":"Help Center","description":"","publisher":{"@id":"https:\/\/crocoblock.com\/knowledge-base\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/crocoblock.com\/knowledge-base\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/crocoblock.com\/knowledge-base\/#organization","name":"Help Center","url":"https:\/\/crocoblock.com\/knowledge-base\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/crocoblock.com\/knowledge-base\/#\/schema\/logo\/image\/","url":"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2025\/04\/invert-crocoblock-logo.svg","contentUrl":"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2025\/04\/invert-crocoblock-logo.svg","caption":"Help Center"},"image":{"@id":"https:\/\/crocoblock.com\/knowledge-base\/#\/schema\/logo\/image\/"}}]}},"_links":{"self":[{"href":"https:\/\/crocoblock.com\/knowledge-base\/wp-json\/wp\/v2\/article\/22159"}],"collection":[{"href":"https:\/\/crocoblock.com\/knowledge-base\/wp-json\/wp\/v2\/article"}],"about":[{"href":"https:\/\/crocoblock.com\/knowledge-base\/wp-json\/wp\/v2\/types\/article"}],"author":[{"embeddable":true,"href":"https:\/\/crocoblock.com\/knowledge-base\/wp-json\/wp\/v2\/users\/11"}],"wp:attachment":[{"href":"https:\/\/crocoblock.com\/knowledge-base\/wp-json\/wp\/v2\/media?parent=22159"}],"wp:term":[{"taxonomy":"builder-category","embeddable":true,"href":"https:\/\/crocoblock.com\/knowledge-base\/wp-json\/wp\/v2\/builder-category?post=22159"},{"taxonomy":"article-category","embeddable":true,"href":"https:\/\/crocoblock.com\/knowledge-base\/wp-json\/wp\/v2\/article-category?post=22159"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}