{"id":707,"date":"2020-07-18T21:03:41","date_gmt":"2020-07-18T19:03:41","guid":{"rendered":"http:\/\/themedemos.webmandesign.eu\/eimear\/?page_id=26"},"modified":"2020-07-18T21:03:41","modified_gmt":"2020-07-18T19:03:41","slug":"helper-css-classes","status":"publish","type":"page","link":"https:\/\/takoyniexpress.gr\/index.php\/helper-css-classes\/","title":{"rendered":"Helper CSS Classes"},"content":{"rendered":"\n<div class=\"wp-block-group alignfull has-palette-5-background-color has-background has-no-margin-bottom\" id=\"typography\"><div class=\"wp-block-group__inner-container is-layout-flow\">\n<style>\n.wp-block-column { padding: .5rem 1rem; }\n.wp-block-column:first-child { background: rgba(0,0,0,.05); }\nh3 { text-transform: none; letter-spacing: 0; }\n<\/style>\n\n\n\n<div style=\"height:100px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2 class=\"has-text-align-center has-no-margin-top wp-block-heading\">Text &amp; typography classes<\/h2>\n\n\n\n<div style=\"height:100px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n<div class=\"alignwide-wrap\" data-block=\"columns\">\n<div class=\"wp-block-columns alignwide has-2-columns is-layout-flex wp-container-3\">\n<div class=\"wp-block-column is-layout-flow\">\n<h3 class=\"has-regular-font-size wp-block-heading\"><code>h1<\/code>, <code>h2<\/code>, <code>h3<\/code>, <code>h4<\/code><\/h3>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow\">\n<p>Styles the text the way H1, H2, H3 and H4 headings are styled. <\/p>\n<\/div>\n<\/div>\n<\/div>\n\n<div class=\"alignwide-wrap\" data-block=\"columns\">\n<div class=\"wp-block-columns alignwide has-2-columns is-layout-flex wp-container-6\">\n<div class=\"wp-block-column is-layout-flow\">\n<h3 class=\"has-regular-font-size wp-block-heading\"><code>has-widget-title-style<\/code><\/h3>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow\">\n<p>Styles the heading the way widget title is styled. <\/p>\n<\/div>\n<\/div>\n<\/div>\n\n<div class=\"alignwide-wrap\" data-block=\"columns\">\n<div class=\"wp-block-columns alignwide has-2-columns is-layout-flex wp-container-9\">\n<div class=\"wp-block-column is-layout-flow\">\n<h3 class=\"has-regular-font-size wp-block-heading\"><code>has-left\/center\/right-text-align<\/code><\/h3>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow\">\n<p>Apply on any element. Forces text alignment. <\/p>\n<\/div>\n<\/div>\n<\/div>\n\n<div class=\"alignwide-wrap\" data-block=\"columns\">\n<div class=\"wp-block-columns alignwide has-2-columns is-layout-flex wp-container-12\">\n<div class=\"wp-block-column is-layout-flow\">\n<h3 class=\"has-regular-font-size wp-block-heading\"><code>has-uppercase-text-transform<\/code><\/h3>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow\">\n<p>Transforms elements text to uppercase letters.<\/p>\n<\/div>\n<\/div>\n<\/div>\n\n<div class=\"alignwide-wrap\" data-block=\"columns\">\n<div class=\"wp-block-columns alignwide has-2-columns is-layout-flex wp-container-15\">\n<div class=\"wp-block-column is-layout-flow\">\n<h3 class=\"has-regular-font-size wp-block-heading\"><code>has-SIZE-font-size<\/code><\/h3>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow\">\n<p>Sets element&#8217;s font size.<br \/>Possible <strong>SIZE<\/strong> values: <code>extra-small<\/code>, <code>small<\/code>, <code>smaller<\/code>, <code>regular<\/code>, <code>large<\/code>, <code>extra-large<\/code>, <code>huge<\/code><\/p>\n<\/div>\n<\/div>\n<\/div>\n\n<div class=\"alignwide-wrap\" data-block=\"columns\">\n<div class=\"wp-block-columns alignwide has-2-columns is-layout-flex wp-container-18\">\n<div class=\"wp-block-column is-layout-flow\">\n<h3 class=\"has-regular-font-size wp-block-heading\"><code>has-100\/200...\/900-font-weight<\/code><\/h3>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow\">\n<p>Applies specific font weight on an element.<\/p>\n<\/div>\n<\/div>\n<\/div>\n\n<div class=\"alignwide-wrap\" data-block=\"columns\">\n<div class=\"wp-block-columns alignwide has-2-columns is-layout-flex wp-container-21\">\n<div class=\"wp-block-column is-layout-flow\">\n<h3 class=\"has-regular-font-size wp-block-heading\"><code>has-italic\/normal-font-style<\/code><\/h3>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow\">\n<p>Applies specific font style on an element.<\/p>\n<\/div>\n<\/div>\n<\/div>\n\n<div class=\"alignwide-wrap\" data-block=\"columns\">\n<div class=\"wp-block-columns alignwide has-2-columns is-layout-flex wp-container-24\">\n<div class=\"wp-block-column is-layout-flow\">\n<h3 class=\"has-regular-font-size wp-block-heading\"><code>has-SIZE-line-height<\/code><\/h3>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow\">\n<p>Sets element&#8217;s line height.<br \/>Possible <strong>SIZE<\/strong> values: <code>1<\/code>, <code>extra-small<\/code>, <code>small<\/code>, <code>regular<\/code><\/p>\n<\/div>\n<\/div>\n<\/div>\n\n\n<div style=\"height:100px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n<\/div><\/div>\n\n\n\n<div class=\"wp-block-group alignfull has-no-margin-bottom\" id=\"layout\"><div class=\"wp-block-group__inner-container is-layout-flow\">\n<div style=\"height:100px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2 class=\"has-text-align-center has-no-margin-top wp-block-heading\">Layout classes<\/h2>\n\n\n\n<div style=\"height:100px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n<div class=\"alignwide-wrap\" data-block=\"columns\">\n<div class=\"wp-block-columns alignwide has-2-columns is-layout-flex wp-container-28\">\n<div class=\"wp-block-column is-layout-flow\">\n<h3 class=\"has-regular-font-size wp-block-heading\"><code>megamenu<\/code> or <code>megamenu fullwidth<\/code><\/h3>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow\">\n<p>Use on a primary navigation top level menu item (<a href=\"https:\/\/easycaptures.com\/fs\/uploaded\/1404\/8369568540.png\" target=\"_blank\" rel=\"noreferrer noopener\">how to?<\/a>) to style the submenu as megamenu. Applying additional class of <code>fullwidth<\/code> will stretch the megamenu full width of the screen while keeping the megamenu content withing content width (set up in theme options).<\/p>\n\n\n\n<p>Check the theme documentation for more details on <a href=\"https:\/\/webmandesign.github.io\/docs\/eimear\/#megamenu\">how to create a megamenu<\/a>.<\/p>\n<\/div>\n<\/div>\n<\/div>\n\n<div class=\"alignwide-wrap\" data-block=\"columns\">\n<div class=\"wp-block-columns alignwide has-2-columns is-layout-flex wp-container-31\">\n<div class=\"wp-block-column is-layout-flow\">\n<h3 class=\"has-regular-font-size wp-block-heading\"><code>has-half\/phi\/full-screen-min-height<\/code>,<br \/><code>has-70\/75\/80\/85\/90\/95-percent-screen-min-height<\/code><\/h3>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow\">\n<p>Sets the minimum height of the element as a portion of browser window height (phi = 61.8%). Best applied on full width Cover block, for example. <\/p>\n<\/div>\n<\/div>\n<\/div>\n\n<div class=\"alignwide-wrap\" data-block=\"columns\">\n<div class=\"wp-block-columns alignwide has-2-columns is-layout-flex wp-container-34\">\n<div class=\"wp-block-column is-layout-flow\">\n<h3 class=\"has-regular-font-size wp-block-heading\"><code>has-wide-content-width<\/code><\/h3>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow\">\n<p>Apply on Cover or Group block to make the block content wider. <\/p>\n<\/div>\n<\/div>\n<\/div>\n\n<div class=\"alignwide-wrap\" data-block=\"columns\">\n<div class=\"wp-block-columns alignwide has-2-columns is-layout-flex wp-container-37\">\n<div class=\"wp-block-column is-layout-flow\">\n<h3 class=\"has-regular-font-size wp-block-heading\"><code>has-phi\/no-padding<\/code><\/h3>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow\">\n<p>Sets element&#8217;s padding (1.618em, 0). Can be applied on Column block to force a specific column padding.<\/p>\n<\/div>\n<\/div>\n<\/div>\n\n<div class=\"alignwide-wrap\" data-block=\"columns\">\n<div class=\"wp-block-columns alignwide has-2-columns is-layout-flex wp-container-40\">\n<div class=\"wp-block-column is-layout-flow\">\n<h3 class=\"has-regular-font-size wp-block-heading\"><code>has-SIZE-padding<\/code><\/h3>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow\">\n<p>Sets element&#8217;s padding size.<br \/>Possible <strong>SIZE<\/strong> values: <code>extra-small<\/code>, <code>small<\/code>, <code>regular<\/code>, <code>large<\/code>, <code>extra-large<\/code> <\/p>\n<\/div>\n<\/div>\n<\/div>\n\n<div class=\"alignwide-wrap\" data-block=\"columns\">\n<div class=\"wp-block-columns alignwide has-2-columns is-layout-flex wp-container-43\">\n<div class=\"wp-block-column is-layout-flow\">\n<h3 class=\"has-regular-font-size wp-block-heading\"><code>has-no-padding<\/code>, <code>has-no-padding-left\/right\/top\/bottom\/vertical\/horizontal<\/code><\/h3>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow\">\n<p>Removes any <code>padding<\/code>from an element.<\/p>\n<\/div>\n<\/div>\n<\/div>\n\n<div class=\"alignwide-wrap\" data-block=\"columns\">\n<div class=\"wp-block-columns alignwide has-2-columns is-layout-flex wp-container-46\">\n<div class=\"wp-block-column is-layout-flow\">\n<h3 class=\"has-regular-font-size wp-block-heading\"><code>has-regular-margin-bottom<\/code><\/h3>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow\">\n<p>Applies theme&#8217;s default bottom margin on the element.<\/p>\n<\/div>\n<\/div>\n<\/div>\n\n<div class=\"alignwide-wrap\" data-block=\"columns\">\n<div class=\"wp-block-columns alignwide has-2-columns is-layout-flex wp-container-49\">\n<div class=\"wp-block-column is-layout-flow\">\n<h3 class=\"has-regular-font-size wp-block-heading\"><code>has-no-margin<\/code>, <code>has-no-margin-left\/right\/top\/bottom\/vertical\/horizontal<\/code><\/h3>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow\">\n<p>Removes any margin from an element.<\/p>\n<\/div>\n<\/div>\n<\/div>\n\n<div class=\"alignwide-wrap\" data-block=\"columns\">\n<div class=\"wp-block-columns alignwide has-2-columns is-layout-flex wp-container-52\">\n<div class=\"wp-block-column is-layout-flow\">\n<h3 class=\"has-regular-font-size wp-block-heading\"><code>has-center-vertical-align<\/code> or <code>is-cascade<\/code><\/h3>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow\">\n<p>Use in Latest Posts or any WooCommerce products list block to align items horizontally to center (in a row). This creates interesting cascading layout.<\/p>\n<\/div>\n<\/div>\n<\/div>\n\n<div class=\"alignwide-wrap\" data-block=\"columns\">\n<div class=\"wp-block-columns alignwide has-2-columns is-layout-flex wp-container-55\">\n<div class=\"wp-block-column is-layout-flow\">\n<h3 class=\"has-regular-font-size wp-block-heading\"><code>has-no-gaps<\/code> or <code>has-no-gap<\/code><\/h3>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow\">\n<p>Use on Gallery block to remove gaps between images.<\/p>\n<\/div>\n<\/div>\n<\/div>\n\n<div class=\"alignwide-wrap\" data-block=\"columns\">\n<div class=\"wp-block-columns alignwide has-2-columns is-layout-flex wp-container-58\">\n<div class=\"wp-block-column is-layout-flow\">\n<h3 class=\"has-regular-font-size wp-block-heading\"><code>has-info-overlay<\/code><\/h3>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow\">\n<p>Use on any WooCommerce products list block to position product info as overlay over the product thumbnail.<\/p>\n<\/div>\n<\/div>\n<\/div>\n\n<div class=\"alignwide-wrap\" data-block=\"columns\">\n<div class=\"wp-block-columns alignwide has-2-columns is-layout-flex wp-container-61\">\n<div class=\"wp-block-column is-layout-flow\">\n<h3 class=\"has-regular-font-size wp-block-heading\"><code>has-info-on-hover<\/code><\/h3>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow\">\n<p>Use on any WooCommerce products list block to position product info as overlay over the product thumbnail and display it only when mouse hovers over the product thumbnail.<\/p>\n<\/div>\n<\/div>\n<\/div>\n\n<div class=\"alignwide-wrap\" data-block=\"columns\">\n<div class=\"wp-block-columns alignwide has-2-columns is-layout-flex wp-container-64\">\n<div class=\"wp-block-column is-layout-flow\">\n<h3 class=\"has-regular-font-size wp-block-heading\"><code>is-sticky-within-container<\/code><\/h3>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow\">\n<p>Use on a block that should stick while scrolling within its container. Best used on a Group block within a column block while other column(s) in the row contain long content. The Group block will stay stuck to the top of the screen while scrolling through the long content in other column(s). <a href=\"https:\/\/themedemos.webmandesign.eu\/eimear\/ideas\/idea\/#sticky\">See an example.<\/a><br \/>Works on large screens only.<\/p>\n<\/div>\n<\/div>\n<\/div>\n\n<div class=\"alignwide-wrap\" data-block=\"columns\">\n<div class=\"wp-block-columns alignwide has-2-columns is-layout-flex wp-container-67\">\n<div class=\"wp-block-column is-layout-flow\">\n<h3 class=\"has-regular-font-size wp-block-heading\"><code>has-order-first\/last<\/code><\/h3>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow\">\n<p>Use on Column block to force position a column first or last in a row on larger screens.<\/p>\n\n\n\n<p><strong>Example: <\/strong>This is useful if you would like to display a section heading on the right side of the actual section content. While keeping the logical HTML code order, you can actually visually reorder columns with these classes to your needs.<\/p>\n<\/div>\n<\/div>\n<\/div>\n\n\n<div style=\"height:100px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n<\/div><\/div>\n\n\n\n<div class=\"wp-block-group alignfull has-palette-4-background-color has-background\" id=\"decorations\"><div class=\"wp-block-group__inner-container is-layout-flow\">\n<div style=\"height:100px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2 class=\"has-text-align-center has-no-margin-top wp-block-heading\">Decorative classes<\/h2>\n\n\n\n<div style=\"height:100px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n<div class=\"alignwide-wrap\" data-block=\"columns\">\n<div class=\"wp-block-columns alignwide has-2-columns is-layout-flex wp-container-71\">\n<div class=\"wp-block-column is-layout-flow\">\n<h3 class=\"has-regular-font-size wp-block-heading\"><code>has-image-shape-1\/2\/3\/4<\/code><\/h3>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow\">\n<p>Use on Image, Gallery or Media &amp; Text block, or even on Latest Posts or any WooCommerce block listing products, to apply a blob shaped decoration on images of the block. (Note that this may not work in all browsers &#8211; <a href=\"https:\/\/caniuse.com\/#feat=css-masks\">check the support<\/a>. If browser does not support the feature, no decoration is applied on images.)<\/p>\n<\/div>\n<\/div>\n<\/div>\n\n<div class=\"alignwide-wrap\" data-block=\"columns\">\n<div class=\"wp-block-columns alignwide has-2-columns is-layout-flex wp-container-74\">\n<div class=\"wp-block-column is-layout-flow\">\n<h3 class=\"has-regular-font-size wp-block-heading\"><code>has-decorative-overlay<\/code><\/h3>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow\">\n<p>Use on any block to add a blob decorative overlay in the block&#8217;s bottom right corner.<\/p>\n<\/div>\n<\/div>\n<\/div>\n\n\n<div style=\"height:100px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n<\/div><\/div>\n","protected":false},"excerpt":{"rendered":"<div class=\"entry-summary\">\nApply a custom helper CSS class listed below <a href=\"https:\/\/technicalsupport.blog\/2019\/01\/04\/how-to-add-a-custom-css-class-to-gutenberg-blocks\/\">in block editor<\/a>, in page builder, or directly in HTML code.<br \/>\n<br \/>\n<a href=\"#typography\">Text &amp; typography<\/a> | <a href=\"#layout\">Layout<\/a> | <a href=\"#decorations\">Decorations<\/a>\n<\/div>\n<div class=\"link-more-container\"><a href=\"https:\/\/takoyniexpress.gr\/index.php\/helper-css-classes\/\" class=\"link-more\" aria-label=\"Continue reading Helper CSS Classes\">Continue reading&hellip;<\/a><\/div>\n","protected":false},"author":4,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":[],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/takoyniexpress.gr\/index.php\/wp-json\/wp\/v2\/pages\/707"}],"collection":[{"href":"https:\/\/takoyniexpress.gr\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/takoyniexpress.gr\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/takoyniexpress.gr\/index.php\/wp-json\/wp\/v2\/users\/4"}],"replies":[{"embeddable":true,"href":"https:\/\/takoyniexpress.gr\/index.php\/wp-json\/wp\/v2\/comments?post=707"}],"version-history":[{"count":0,"href":"https:\/\/takoyniexpress.gr\/index.php\/wp-json\/wp\/v2\/pages\/707\/revisions"}],"wp:attachment":[{"href":"https:\/\/takoyniexpress.gr\/index.php\/wp-json\/wp\/v2\/media?parent=707"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}