{"id":3411,"date":"2020-07-24T13:10:44","date_gmt":"2020-07-24T13:10:44","guid":{"rendered":"https:\/\/essentials.pixfort.com\/knowledge-base\/?p=3411"},"modified":"2024-04-07T20:19:52","modified_gmt":"2024-04-07T20:19:52","slug":"essentials-custom-css-classes","status":"publish","type":"post","link":"https:\/\/essentials.pixfort.com\/knowledge-base\/essentials-custom-css-classes\/","title":{"rendered":"Essentials custom CSS classes"},"content":{"rendered":"<div class=\"wpb-content-wrapper\"><p>[vc_row pix_particles_check=&#8221;&#8221;][vc_column][vc_column_text]CSS classes can be used to add additional styling to some elements (via several elements in WPBakery or on any element in Elementor).<\/p>\n<p>Essentials is built with Bootstrap 4, so all bootstrap classes can be used, a full list of bootstrap classes are available in <a href=\"https:\/\/getbootstrap.com\/docs\/4.5\/getting-started\/introduction\/\" target=\"_blank\" rel=\"noopener noreferrer\">bootstrap documentation site<\/a>.<\/p>\n<p>Essentials includes many great CSS styling classes that can be used for more advanced styling in some elements, we will provide here some of the most useful Essentials classes:[\/vc_column_text][\/vc_column][\/vc_row][vc_row pix_particles_check=&#8221;&#8221; el_id=&#8221;pix_section_background_colors&#8221;][vc_column]<div id=\"1605301388214-cbccb846-c404\" class=\"pix-feature-el  media \"><div class=\"rounded-circle d-inline-block mr-3 feature_img bg-primary-light \"   style=\" width:40px;height:40px;position:relative;line-height:40px;text-align:center;\"><span style=\"display:inline-block;font-size:20px;line-height:20px;\" class=\"text-primary align-middle\">1<\/span><\/div><div class=\"media-body text-left\"><h5 class=\"font-weight-bold   text-heading-default  \" style=\"padding-top:4px;\"  >Background colors<\/h5><div class=\"text-text-gray      \" style=\"padding-top:20px;\"  ><\/div><\/div><\/div>[\/vc_column][\/vc_row][vc_row pix_particles_check=&#8221;&#8221;][vc_column][vc_column_text]All background colors classes in Essentials starts with the prefix &#8220;bg-&#8221; followed by the name of the color for example &#8220;green&#8221;.<\/p>\n<p>You can use the dynamic colors (that can be changed via theme options) for example:<\/p>\n<ul>\n<li><span class=\"pix-badge-element h6 d-inline-flex mr-1 \"  ><span class=\"badge font-weight-normal bg-gradient-primary pix-bg-attachment-scroll text-bg-img   \" style=\" \"><span class=\"text-white\" style=\"\">bg-gradient-primary<\/span><\/span><\/span> The primary gradient background color of the theme.<\/li>\n<li><span class=\"pix-badge-element h6 d-inline-flex mr-1 \"  ><span class=\"badge font-weight-normal bg-primary   \" style=\" \"><span class=\"text-white\" style=\"\">bg-primary<\/span><\/span><\/span> The primary color of the theme.<\/li>\n<li><span class=\"pix-badge-element h6 d-inline-flex mr-1 \"  ><span class=\"badge font-weight-normal bg-secondary   \" style=\" \"><span class=\"text-white\" style=\"\">bg-secondary<\/span><\/span><\/span> The secondary color of the theme.<\/li>\n<\/ul>\n<p>Other static colors can be used:[\/vc_column_text]<div  class=\"pix-heading-el text-left \"><h6 class=\"text-heading-default font-weight-bold h6 heading-text el-title_custom_color mb-12\" style=\"\" data-anim-type=\"\" data-anim-delay=\"0\">Standard colors:<\/h6><\/div><span class=\"pix-badge-element h6 d-inline-flex mr-1 \"  ><span class=\"badge font-weight-bold secondary-font bg-green  vc_custom_1595599211069  \" style=\" \"><span class=\"text-white\" style=\"\">bg-green<\/span><\/span><\/span><span class=\"pix-badge-element h6 d-inline-flex mr-1 \"  ><span class=\"badge font-weight-bold secondary-font bg-blue  vc_custom_1595599232526  \" style=\" \"><span class=\"text-white\" style=\"\">bg-blue<\/span><\/span><\/span><span class=\"pix-badge-element h6 d-inline-flex mr-1 \"  ><span class=\"badge font-weight-bold secondary-font bg-yellow  vc_custom_1595599244747  \" style=\" \"><span class=\"text-white\" style=\"\">bg-yellow<\/span><\/span><\/span><span class=\"pix-badge-element h6 d-inline-flex mr-1 \"  ><span class=\"badge font-weight-bold secondary-font bg-white  vc_custom_1595599260954  \" style=\" \"><span class=\"text-heading-default\" style=\"\">bg-white<\/span><\/span><\/span><span class=\"pix-badge-element h6 d-inline-flex mr-1 \"  ><span class=\"badge font-weight-bold secondary-font bg-black  vc_custom_1595599282744  \" style=\" \"><span class=\"text-white\" style=\"\">bg-black<\/span><\/span><\/span><span class=\"pix-badge-element h6 d-inline-flex mr-1 \"  ><span class=\"badge font-weight-bold secondary-font bg-brown  vc_custom_1595599295964  \" style=\" \"><span class=\"text-white\" style=\"\">bg-brown<\/span><\/span><\/span><span class=\"pix-badge-element h6 d-inline-flex mr-1 \"  ><span class=\"badge font-weight-bold secondary-font bg-cyan  vc_custom_1595599307266  \" style=\" \"><span class=\"text-white\" style=\"\">bg-cyan<\/span><\/span><\/span><span class=\"pix-badge-element h6 d-inline-flex mr-1 \"  ><span class=\"badge font-weight-bold secondary-font bg-orange  vc_custom_1595599324120  \" style=\" \"><span class=\"text-white\" style=\"\">bg-orange<\/span><\/span><\/span><span class=\"pix-badge-element h6 d-inline-flex mr-1 \"  ><span class=\"badge font-weight-bold secondary-font bg-red  vc_custom_1595607157087  \" style=\" \"><span class=\"text-white\" style=\"\">bg-red<\/span><\/span><\/span><span class=\"pix-badge-element h6 d-inline-flex mr-1 \"  ><span class=\"badge font-weight-bold secondary-font bg-purple  vc_custom_1595599341128  \" style=\" \"><span class=\"text-white\" style=\"\">bg-pruple<\/span><\/span><\/span><div  class=\"pix-heading-el text-left  vc_custom_1595599885332\"><h6 class=\"text-heading-default font-weight-bold h6 heading-text el-title_custom_color mb-12\" style=\"\" data-anim-type=\"\" data-anim-delay=\"0\">Light variant colors:<\/h6><\/div><span class=\"pix-badge-element h6 d-inline-flex mr-1 \"  ><span class=\"badge font-weight-bold secondary-font bg-green-light  vc_custom_1595599398546  \" style=\" \"><span class=\"text-green\" style=\"\">bg-green-light<\/span><\/span><\/span><span class=\"pix-badge-element h6 d-inline-flex mr-1 \"  ><span class=\"badge font-weight-bold secondary-font bg-blue-light  vc_custom_1595599453338  \" style=\" \"><span class=\"text-blue\" style=\"\">bg-blue-light<\/span><\/span><\/span><span class=\"pix-badge-element h6 d-inline-flex mr-1 \"  ><span class=\"badge font-weight-bold secondary-font bg-yellow-light  vc_custom_1595599446833  \" style=\" \"><span class=\"text-yellow\" style=\"\">bg-yellow-light<\/span><\/span><\/span><span class=\"pix-badge-element h6 d-inline-flex mr-1 \"  ><span class=\"badge font-weight-bold secondary-font bg-brown-light  vc_custom_1595599472369  \" style=\" \"><span class=\"text-brown\" style=\"\">bg-brown-light<\/span><\/span><\/span><span class=\"pix-badge-element h6 d-inline-flex mr-1 \"  ><span class=\"badge font-weight-bold secondary-font bg-cyan-light  vc_custom_1595599493518  \" style=\" \"><span class=\"text-cyan\" style=\"\">bg-cyan-light<\/span><\/span><\/span><span class=\"pix-badge-element h6 d-inline-flex mr-1 \"  ><span class=\"badge font-weight-bold secondary-font bg-orange-light  vc_custom_1595599521830  \" style=\" \"><span class=\"text-orange\" style=\"\">bg-orange-light<\/span><\/span><\/span><span class=\"pix-badge-element h6 d-inline-flex mr-1 \"  ><span class=\"badge font-weight-bold secondary-font bg-red-light  vc_custom_1595607176711  \" style=\" \"><span class=\"text-red\" style=\"\">bg-red-light<\/span><\/span><\/span><span class=\"pix-badge-element h6 d-inline-flex mr-1 \"  ><span class=\"badge font-weight-bold secondary-font bg-purple-light  vc_custom_1595599539136  \" style=\" \"><span class=\"text-purple\" style=\"\">bg-pruple-light<\/span><\/span><\/span><div  class=\"pix-heading-el text-left  vc_custom_1595599896383\"><h6 class=\"text-heading-default font-weight-bold h6 heading-text el-title_custom_color mb-12\" style=\"\" data-anim-type=\"\" data-anim-delay=\"0\">Gray shades:<\/h6><\/div><span class=\"pix-badge-element h6 d-inline-flex mr-1 \"  ><span class=\"badge font-weight-bold secondary-font bg-gray-1  vc_custom_1595599644192  \" style=\" \"><span class=\"text-gray-9\" style=\"\">bg-gray-1<\/span><\/span><\/span><span class=\"pix-badge-element h6 d-inline-flex mr-1 \"  ><span class=\"badge font-weight-bold secondary-font bg-gray-2  vc_custom_1595599659271  \" style=\" \"><span class=\"text-gray-9\" style=\"\">bg-gray-2<\/span><\/span><\/span><span class=\"pix-badge-element h6 d-inline-flex mr-1 \"  ><span class=\"badge font-weight-bold secondary-font bg-gray-3  vc_custom_1595599718720  \" style=\" \"><span class=\"text-gray-9\" style=\"\">bg-gray-3<\/span><\/span><\/span><span class=\"pix-badge-element h6 d-inline-flex mr-1 \"  ><span class=\"badge font-weight-bold secondary-font bg-gray-4  vc_custom_1595599729537  \" style=\" \"><span class=\"text-gray-9\" style=\"\">bg-gray-4<\/span><\/span><\/span><span class=\"pix-badge-element h6 d-inline-flex mr-1 \"  ><span class=\"badge font-weight-bold secondary-font bg-gray-5  vc_custom_1595599739816  \" style=\" \"><span class=\"text-gray-9\" style=\"\">bg-gray-5<\/span><\/span><\/span><span class=\"pix-badge-element h6 d-inline-flex mr-1 \"  ><span class=\"badge font-weight-bold secondary-font bg-gray-6  vc_custom_1595599837054  \" style=\" \"><span class=\"text-gray-3\" style=\"\">bg-gray-6<\/span><\/span><\/span><span class=\"pix-badge-element h6 d-inline-flex mr-1 \"  ><span class=\"badge font-weight-bold secondary-font bg-gray-7  vc_custom_1595599848846  \" style=\" \"><span class=\"text-gray-2\" style=\"\">bg-gray-7<\/span><\/span><\/span><span class=\"pix-badge-element h6 d-inline-flex mr-1 \"  ><span class=\"badge font-weight-bold secondary-font bg-gray-8  vc_custom_1595599785463  \" style=\" \"><span class=\"text-gray-1\" style=\"\">bg-gray-8<\/span><\/span><\/span><span class=\"pix-badge-element h6 d-inline-flex mr-1 \"  ><span class=\"badge font-weight-bold secondary-font bg-gray-9  vc_custom_1595599824824  \" style=\" \"><span class=\"text-gray-1\" style=\"\">bg-gray-9<\/span><\/span><\/span><div  class=\"pix-heading-el text-left  vc_custom_1595599912247\"><h6 class=\"text-heading-default font-weight-bold h6 heading-text el-title_custom_color mb-12\" style=\"\" data-anim-type=\"\" data-anim-delay=\"0\">Dark and Light opacity colors:<\/h6><\/div><div class=\"pix-content-box card      vc_custom_1595600243964    rounded-lg bg- w-100  \"   ><div class=\"\" style=\"z-index:30;position:relative;\"><span class=\"pix-badge-element h6 d-inline-flex mr-1 \"  ><span class=\"badge font-weight-bold secondary-font bg-dark-opacity-1  vc_custom_1595599938496  \" style=\" \"><span class=\"text-gray-9\" style=\"\">bg-dark-opacity-1<\/span><\/span><\/span><span class=\"pix-badge-element h6 d-inline-flex mr-1 \"  ><span class=\"badge font-weight-bold secondary-font bg-dark-opacity-2  vc_custom_1595599950995  \" style=\" \"><span class=\"text-gray-9\" style=\"\">bg-dark-opacity-2<\/span><\/span><\/span><span class=\"pix-badge-element h6 d-inline-flex mr-1 \"  ><span class=\"badge font-weight-bold secondary-font bg-dark-opacity-3  vc_custom_1595599961624  \" style=\" \"><span class=\"text-gray-9\" style=\"\">bg-dark-opacity-3<\/span><\/span><\/span><span class=\"pix-badge-element h6 d-inline-flex mr-1 \"  ><span class=\"badge font-weight-bold secondary-font bg-dark-opacity-4  vc_custom_1595599981384  \" style=\" \"><span class=\"text-gray-9\" style=\"\">bg-dark-opacity-4<\/span><\/span><\/span><span class=\"pix-badge-element h6 d-inline-flex mr-1 \"  ><span class=\"badge font-weight-bold secondary-font bg-dark-opacity-5  vc_custom_1595600039560  \" style=\" \"><span class=\"text-light-opacity-7\" style=\"\">bg-dark-opacity-5<\/span><\/span><\/span><span class=\"pix-badge-element h6 d-inline-flex mr-1 \"  ><span class=\"badge font-weight-bold secondary-font bg-dark-opacity-6  vc_custom_1595600056377  \" style=\" \"><span class=\"text-light-opacity-8\" style=\"\">bg-dark-opacity-6<\/span><\/span><\/span><span class=\"pix-badge-element h6 d-inline-flex mr-1 \"  ><span class=\"badge font-weight-bold secondary-font bg-dark-opacity-7  vc_custom_1595600069728  \" style=\" \"><span class=\"text-light-opacity-8\" style=\"\">bg-dark-opacity-7<\/span><\/span><\/span><span class=\"pix-badge-element h6 d-inline-flex mr-1 \"  ><span class=\"badge font-weight-bold secondary-font bg-dark-opacity-8  vc_custom_1595600082268  \" style=\" \"><span class=\"text-light-opacity-9\" style=\"\">bg-dark-opacity-8<\/span><\/span><\/span><span class=\"pix-badge-element h6 d-inline-flex mr-1 \"  ><span class=\"badge font-weight-bold secondary-font bg-dark-opacity-9  vc_custom_1595600092264  \" style=\" \"><span class=\"text-light-opacity-9\" style=\"\">bg-dark-opacity-9<\/span><\/span><\/span><\/div><\/div><div class=\"pix-content-box card      vc_custom_1595600467698    rounded-lg bg- w-100  \"   ><div class=\"\" style=\"z-index:30;position:relative;\"><span class=\"pix-badge-element h6 d-inline-flex mr-1 \"  ><span class=\"badge font-weight-bold secondary-font bg-light-opacity-1  vc_custom_1595600486401  \" style=\" \"><span class=\"text-white\" style=\"\">bg-light-opacity-1<\/span><\/span><\/span><span class=\"pix-badge-element h6 d-inline-flex mr-1 \"  ><span class=\"badge font-weight-bold secondary-font bg-light-opacity-2  vc_custom_1595600491711  \" style=\" \"><span class=\"text-white\" style=\"\">bg-light-opacity-2<\/span><\/span><\/span><span class=\"pix-badge-element h6 d-inline-flex mr-1 \"  ><span class=\"badge font-weight-bold secondary-font bg-light-opacity-3  vc_custom_1595600498146  \" style=\" \"><span class=\"text-white\" style=\"\">bg-light-opacity-3<\/span><\/span><\/span><span class=\"pix-badge-element h6 d-inline-flex mr-1 \"  ><span class=\"badge font-weight-bold secondary-font bg-light-opacity-4  vc_custom_1595600504920  \" style=\" \"><span class=\"text-white\" style=\"\">bg-light-opacity-4<\/span><\/span><\/span><span class=\"pix-badge-element h6 d-inline-flex mr-1 \"  ><span class=\"badge font-weight-bold secondary-font bg-light-opacity-5  vc_custom_1595600511219  \" style=\" \"><span class=\"text-white\" style=\"\">bg-light-opacity-5<\/span><\/span><\/span><span class=\"pix-badge-element h6 d-inline-flex mr-1 \"  ><span class=\"badge font-weight-bold secondary-font bg-light-opacity-6  vc_custom_1595600365477  \" style=\" \"><span class=\"text-heading-default\" style=\"\">bg-light-opacity-6<\/span><\/span><\/span><span class=\"pix-badge-element h6 d-inline-flex mr-1 \"  ><span class=\"badge font-weight-bold secondary-font bg-light-opacity-7  vc_custom_1595600381563  \" style=\" \"><span class=\"text-heading-default\" style=\"\">bg-light-opacity-7<\/span><\/span><\/span><span class=\"pix-badge-element h6 d-inline-flex mr-1 \"  ><span class=\"badge font-weight-bold secondary-font bg-light-opacity-8  vc_custom_1595600394072  \" style=\" \"><span class=\"text-heading-default\" style=\"\">bg-light-opacity-8<\/span><\/span><\/span><span class=\"pix-badge-element h6 d-inline-flex mr-1 \"  ><span class=\"badge font-weight-bold secondary-font bg-light-opacity-9  vc_custom_1595600410694  \" style=\" \"><span class=\"text-heading-default\" style=\"\">bg-light-opacity-9<\/span><\/span><\/span><\/div><\/div><div  class=\"pix-heading-el text-left  vc_custom_1712521090481\"><h6 class=\"text-heading-default font-weight-bold h6 heading-text el-title_custom_color mb-12\" style=\"\" data-anim-type=\"\" data-anim-delay=\"0\">Dark and Light Blur:<\/h6><\/div><span class=\"pix-badge-element h6 d-inline-flex mr-1 \"  ><span class=\"badge font-weight-bold secondary-font bg-gray-9  vc_custom_1712521187478  \" style=\" \"><span class=\"text-gray-1\" style=\"\">bg-dark-blur<\/span><\/span><\/span><span class=\"pix-badge-element h6 d-inline-flex mr-1 \"  ><span class=\"badge font-weight-bold secondary-font bg-light-opacity-7  vc_custom_1712521158628  \" style=\" \"><span class=\"text-gray-9\" style=\"\">bg-light-blur<\/span><\/span><\/span>[\/vc_column][\/vc_row][vc_row pix_particles_check=&#8221;&#8221; el_id=&#8221;pix_section_text_colors&#8221;][vc_column]<div id=\"1605301390269-e73eb661-eec2\" class=\"pix-feature-el  media  vc_custom_1595600528854\"><div class=\"rounded-circle d-inline-block mr-3 feature_img bg-primary-light \"   style=\" width:40px;height:40px;position:relative;line-height:40px;text-align:center;\"><span style=\"display:inline-block;font-size:20px;line-height:20px;\" class=\"text-primary align-middle\">2<\/span><\/div><div class=\"media-body text-left\"><h5 class=\"font-weight-bold   text-heading-default  \" style=\"padding-top:4px;\"  >Text colors<\/h5><div class=\"text-text-gray      \" style=\"padding-top:20px;\"  ><\/div><\/div><\/div>[vc_column_text]To change the color of the text you can use the available CSS class which start with the prefix &#8220;text-&#8221; and followed by color name. You can use the same colors listed in the previous background colors section (except the light variant colors) and in addition to the <strong>dynamic text colors <\/strong>like &#8220;Body default&#8221;, &#8220;Heading default&#8221;, &#8220;Primary&#8221; and &#8220;Secondary&#8221; colors which can be changed via theme options:<\/p>\n<ul>\n<li>For <strong>Body<\/strong> color use <span style=\"color: #339966;\"><strong>text-body-default<\/strong><\/span><\/li>\n<li>For <strong>Heading<\/strong> color use <span style=\"color: #339966;\"><strong>text<\/strong><\/span><span style=\"color: #339966;\"><strong>-heading-default<\/strong><\/span><\/li>\n<li>For <strong>Primary<\/strong> color use <span style=\"color: #339966;\"><strong>text-primary<\/strong><\/span><\/li>\n<li>For <strong>Secondary<\/strong> color use <span style=\"color: #339966;\"><strong>text-secondary<\/strong><\/span><\/li>\n<\/ul>\n<p>Other <strong>Static text colors<\/strong>:<\/p>\n<ul>\n<li><span style=\"color: #339966;\"><strong>text-white<\/strong><\/span><\/li>\n<li><span style=\"color: #339966;\"><strong>text-blue<\/strong><\/span><\/li>\n<li><span style=\"color: #339966;\"><strong>text-green<\/strong><\/span><\/li>\n<li><span style=\"color: #339966;\"><strong>text-cyan<\/strong><\/span><\/li>\n<li><span style=\"color: #339966;\"><strong>text-yellow<\/strong><\/span><\/li>\n<li><span style=\"color: #339966;\"><strong>text-orange<\/strong><\/span><\/li>\n<li><span style=\"color: #339966;\"><strong>text-red<\/strong><\/span><\/li>\n<li><span style=\"color: #339966;\"><strong>text-brown<\/strong><\/span><\/li>\n<li><span style=\"color: #339966;\"><strong>text-purple<\/strong><\/span><\/li>\n<\/ul>\n<p>[\/vc_column_text][\/vc_column][\/vc_row][vc_row disable_element=&#8221;yes&#8221; pix_particles_check=&#8221;&#8221;][vc_column width=&#8221;1\/2&#8243;]<div class=\"pix-content-box card         rounded-lg bg- w-100  pix-dark-hover\"   ><div class=\"\" style=\"z-index:30;position:relative;\"><div id=\"1684534903081-3d0e8dde-55e7\" class=\"pix-feature-el text-left \"><h5 class=\"   text-dark-opacity-9 \" style=\"padding-top:20px;\"  >test<\/h5><div class=\"text-gray-1      \" style=\"padding-top:20px;\"  >test<\/div><\/div><\/div><\/div>[\/vc_column][vc_column width=&#8221;1\/2&#8243;][vc_column_text]To change the color of the text on hover you can use the following classes:<\/p>\n<ul>\n<li><code>pix-dark-hover<\/code> for <strong>light text<\/strong> color on <strong>dark background<\/strong>.<\/li>\n<li><code>pix-light-hover<\/code> for <strong>dark text<\/strong> color on <strong>light background<\/strong>.<\/li>\n<\/ul>\n<p>[\/vc_column_text][\/vc_column][\/vc_row][vc_row pix_particles_check=&#8221;&#8221;][vc_column]<a href=\"#pix_section_text-sizes\" ><div id=\"pix_section_text-sizes\" class=\"pix-feature-el  media  vc_custom_1648583374239\"><div class=\"rounded-circle d-inline-block mr-3 feature_img bg-primary-light \"   style=\" width:40px;height:40px;position:relative;line-height:40px;text-align:center;\"><span style=\"display:inline-block;font-size:20px;line-height:20px;\" class=\"text-primary align-middle\">3<\/span><\/div><div class=\"media-body text-left\"><h5 class=\"font-weight-bold   text-heading-default  \" style=\"padding-top:4px;\"  >Text sizes<\/h5><div class=\"text-text-gray      \" style=\"padding-top:20px;\"  ><\/div><\/div><\/div><\/a>[vc_column_text]To change the size of the text you can use the available CSS classes which start with the prefix &#8220;text-&#8221; and followed by size value or size name.<\/p>\n<p>Below the list of the available classes in the theme:<\/p>\n<ul>\n<li>For <strong>24px<\/strong> size use <span style=\"color: #339966;\"><strong>text-24<\/strong><\/span><\/li>\n<li>For <strong>20px<\/strong> size use <span style=\"color: #339966;\"><strong>text-20<\/strong><\/span><\/li>\n<li>For <strong>18px<\/strong> size use <span style=\"color: #339966;\"><strong>text-18<\/strong><\/span><\/li>\n<li>For <strong>14px<\/strong> size use <span style=\"color: #339966;\"><strong>text-small<\/strong><\/span><\/li>\n<li>For <strong>12px<\/strong> size use <span style=\"color: #339966;\"><strong>text-extra-small<\/strong><\/span><\/li>\n<\/ul>\n<p>If you&#8217;re looking to use other text size you can define your own class in the Theme options (<strong>Theme options &gt; Layout &gt; Advanced &gt; Custom css<\/strong>), for example:<\/p>\n<pre class=\"embercom-prosemirror-composer-code\" data-pm-slice=\"1 1 []\">.text-28 { font-size: 28px !important; line-height: 44px !important; }<\/pre>\n<p>[\/vc_column_text][\/vc_column][\/vc_row][vc_row pix_particles_check=&#8221;&#8221;][vc_column]<div id=\"1648579153936-8d3a34e9-cbd7\" class=\"pix-feature-el  media  vc_custom_1648580428212\"><div class=\"rounded-circle d-inline-block mr-3 feature_img bg-primary-light \"   style=\" width:40px;height:40px;position:relative;line-height:40px;text-align:center;\"><span style=\"display:inline-block;font-size:20px;line-height:20px;\" class=\"text-primary align-middle\">4<\/span><\/div><div class=\"media-body text-left\"><h5 class=\"font-weight-bold   text-heading-default  \" style=\"padding-top:4px;\"  >Animations<\/h5><div class=\"text-text-gray      \" style=\"padding-top:20px;\"  ><\/div><\/div><\/div><div class=\"pix-element-div w-100 text-center\"><span class=\"pix-badge-element h6 d-inline-flex mr-1 \"  ><span class=\"badge font-weight-bold secondary-font badge-pill bg-transparent  vc_custom_1598976879271  \" style=\" \"><span class=\"text-heading-default\" style=\"\">Fly animation<\/span><\/span><\/span><\/div><div class=\"pix-content-box card      vc_custom_1598976639125    rounded-lg shadow-sm shadow-hover-sm fly-sm bg- text-center  w-100  \"   ><div class=\"\" style=\"z-index:30;position:relative;\">[vc_row_inner content_placement=&#8221;middle&#8221; css=&#8221;.vc_custom_1598976327281{margin-top: 0px !important;margin-bottom: 0px !important;padding-top: 0px !important;padding-bottom: 0px !important;}&#8221;][vc_column_inner width=&#8221;1\/2&#8243;]<div class=\"pix-el-text w-100  \" ><p class=\"text-24 m-0 text-black  font-weight-bold\" >Fly small<\/p><\/div>[\/vc_column_inner][vc_column_inner width=&#8221;1\/2&#8243; css=&#8221;.vc_custom_1609715161720{margin-top: 20px !important;}&#8221;][vc_column_text css=&#8221;.vc_custom_1598977036066{margin-bottom: 0px !important;padding-bottom: 0px !important;}&#8221;]<\/p>\n<pre><strong>fly-sm<\/strong><\/pre>\n<p>[\/vc_column_text][\/vc_column_inner][\/vc_row_inner]<\/div><\/div><div class=\"pix-content-box card      vc_custom_1598976614438    rounded-lg shadow-sm shadow-hover fly bg- text-center  w-100  \"   ><div class=\"\" style=\"z-index:30;position:relative;\">[vc_row_inner content_placement=&#8221;middle&#8221; css=&#8221;.vc_custom_1598976327281{margin-top: 0px !important;margin-bottom: 0px !important;padding-top: 0px !important;padding-bottom: 0px !important;}&#8221;][vc_column_inner width=&#8221;1\/2&#8243;]<div class=\"pix-el-text w-100  \" ><p class=\"text-24 m-0 text-black  font-weight-bold\" >Fly medium<\/p><\/div>[\/vc_column_inner][vc_column_inner width=&#8221;1\/2&#8243; css=&#8221;.vc_custom_1609715177969{margin-top: 20px !important;}&#8221;][vc_column_text css=&#8221;.vc_custom_1598976542216{margin-bottom: 0px !important;padding-bottom: 0px !important;}&#8221;]<\/p>\n<pre><strong>fly<\/strong><\/pre>\n<p>[\/vc_column_text][\/vc_column_inner][\/vc_row_inner]<\/div><\/div><div class=\"pix-content-box card      vc_custom_1598976634887    rounded-lg shadow-sm shadow-hover-lg fly-lg bg- text-center  w-100  \"   ><div class=\"\" style=\"z-index:30;position:relative;\">[vc_row_inner content_placement=&#8221;middle&#8221; css=&#8221;.vc_custom_1598976327281{margin-top: 0px !important;margin-bottom: 0px !important;padding-top: 0px !important;padding-bottom: 0px !important;}&#8221;][vc_column_inner width=&#8221;1\/2&#8243;]<div class=\"pix-el-text w-100  \" ><p class=\"text-24 m-0 text-black  font-weight-bold\" >Fly large<\/p><\/div>[\/vc_column_inner][vc_column_inner width=&#8221;1\/2&#8243; css=&#8221;.vc_custom_1609715182799{margin-top: 20px !important;}&#8221;][vc_column_text css=&#8221;.vc_custom_1598976595123{margin-bottom: 0px !important;padding-bottom: 0px !important;}&#8221;]<\/p>\n<pre><strong>fly-lg<\/strong><\/pre>\n<p>[\/vc_column_text][\/vc_column_inner][\/vc_row_inner]<\/div><\/div>[\/vc_column][\/vc_row][vc_row pix_particles_check=&#8221;&#8221; css=&#8221;.vc_custom_1595688958236{padding-top: 40px !important;}&#8221;][vc_column]<div class=\"pix-element-div w-100 text-center\"><span class=\"pix-badge-element h6 d-inline-flex mr-1 \"  ><span class=\"badge font-weight-bold secondary-font badge-pill bg-transparent  vc_custom_1598977002185  \" style=\" \"><span class=\"text-heading-default\" style=\"\">Scale animation<\/span><\/span><\/span><\/div><div class=\"pix-content-box card      vc_custom_1598977090943    rounded-lg shadow-sm shadow-hover-sm scale-sm bg- text-center  w-100  \"   ><div class=\"\" style=\"z-index:30;position:relative;\">[vc_row_inner content_placement=&#8221;middle&#8221; css=&#8221;.vc_custom_1598976327281{margin-top: 0px !important;margin-bottom: 0px !important;padding-top: 0px !important;padding-bottom: 0px !important;}&#8221;][vc_column_inner width=&#8221;1\/2&#8243;]<div class=\"pix-el-text w-100  \" ><p class=\"text-24 m-0 text-black  font-weight-bold\" >Scale small<\/p><\/div>[\/vc_column_inner][vc_column_inner width=&#8221;1\/2&#8243; css=&#8221;.vc_custom_1609715187572{margin-top: 20px !important;}&#8221;][vc_column_text css=&#8221;.vc_custom_1598977042010{margin-bottom: 0px !important;padding-bottom: 0px !important;}&#8221;]<\/p>\n<pre><strong>scale-sm<\/strong><\/pre>\n<p>[\/vc_column_text][\/vc_column_inner][\/vc_row_inner]<\/div><\/div><div class=\"pix-content-box card      vc_custom_1598977263055    rounded-lg shadow-sm shadow-hover scale bg- text-center  w-100  \"   ><div class=\"\" style=\"z-index:30;position:relative;\">[vc_row_inner content_placement=&#8221;middle&#8221; css=&#8221;.vc_custom_1598976327281{margin-top: 0px !important;margin-bottom: 0px !important;padding-top: 0px !important;padding-bottom: 0px !important;}&#8221;][vc_column_inner width=&#8221;1\/2&#8243;]<div class=\"pix-el-text w-100  \" ><p class=\"text-24 m-0 text-black  font-weight-bold\" >Scale medium<\/p><\/div>[\/vc_column_inner][vc_column_inner width=&#8221;1\/2&#8243; css=&#8221;.vc_custom_1609715196742{margin-top: 20px !important;}&#8221;][vc_column_text css=&#8221;.vc_custom_1598977058458{margin-bottom: 0px !important;padding-bottom: 0px !important;}&#8221;]<\/p>\n<pre><strong>scale<\/strong><\/pre>\n<p>[\/vc_column_text][\/vc_column_inner][\/vc_row_inner]<\/div><\/div><div class=\"pix-content-box card      vc_custom_1598977254493    rounded-lg shadow-sm shadow-hover-lg scale-lg bg- text-center  w-100  \"   ><div class=\"\" style=\"z-index:30;position:relative;\">[vc_row_inner content_placement=&#8221;middle&#8221; css=&#8221;.vc_custom_1598976327281{margin-top: 0px !important;margin-bottom: 0px !important;padding-top: 0px !important;padding-bottom: 0px !important;}&#8221;][vc_column_inner width=&#8221;1\/2&#8243;]<div class=\"pix-el-text w-100  \" ><p class=\"text-24 m-0 text-black  font-weight-bold\" >Scale large<\/p><\/div>[\/vc_column_inner][vc_column_inner width=&#8221;1\/2&#8243; css=&#8221;.vc_custom_1609715202300{margin-top: 20px !important;}&#8221;][vc_column_text css=&#8221;.vc_custom_1598977065591{margin-bottom: 0px !important;padding-bottom: 0px !important;}&#8221;]<\/p>\n<pre><strong>scale-lg<\/strong><\/pre>\n<p>[\/vc_column_text][\/vc_column_inner][\/vc_row_inner]<\/div><\/div>[\/vc_column][\/vc_row][vc_row pix_particles_check=&#8221;&#8221; css=&#8221;.vc_custom_1595688958236{padding-top: 40px !important;}&#8221;][vc_column]<div class=\"pix-element-div w-100 text-center\"><span class=\"pix-badge-element h6 d-inline-flex mr-1 \"  ><span class=\"badge font-weight-bold secondary-font badge-pill bg-transparent  vc_custom_1598977115391  \" style=\" \"><span class=\"text-heading-default\" style=\"\">Scale inverse animation<\/span><\/span><\/span><\/div><div class=\"pix-content-box card      vc_custom_1598977243587    rounded-lg shadow-inverse-sm shadow-inverse-hover-sm scale-inverse-sm bg- text-center  w-100  \"   ><div class=\"\" style=\"z-index:30;position:relative;\">[vc_row_inner content_placement=&#8221;middle&#8221; css=&#8221;.vc_custom_1598976327281{margin-top: 0px !important;margin-bottom: 0px !important;padding-top: 0px !important;padding-bottom: 0px !important;}&#8221;][vc_column_inner width=&#8221;1\/2&#8243;]<div class=\"pix-el-text w-100  \" ><p class=\"text-24 m-0 text-black  font-weight-bold\" >Scale inverse small<\/p><\/div>[\/vc_column_inner][vc_column_inner width=&#8221;1\/2&#8243; css=&#8221;.vc_custom_1609715207579{margin-top: 20px !important;}&#8221;][vc_column_text css=&#8221;.vc_custom_1598977130927{margin-bottom: 0px !important;padding-bottom: 0px !important;}&#8221;]<\/p>\n<pre><strong>scale-inverse-sm<\/strong><\/pre>\n<p>[\/vc_column_text][\/vc_column_inner][\/vc_row_inner]<\/div><\/div><div class=\"pix-content-box card      vc_custom_1598977233111    rounded-lg shadow-inverse shadow-inverse-hover-sm scale-inverse bg- text-center  w-100  \"   ><div class=\"\" style=\"z-index:30;position:relative;\">[vc_row_inner content_placement=&#8221;middle&#8221; css=&#8221;.vc_custom_1598976327281{margin-top: 0px !important;margin-bottom: 0px !important;padding-top: 0px !important;padding-bottom: 0px !important;}&#8221;][vc_column_inner width=&#8221;1\/2&#8243;]<div class=\"pix-el-text w-100  \" ><p class=\"text-24 m-0 text-black  font-weight-bold\" >Scale inverse medium<\/p><\/div>[\/vc_column_inner][vc_column_inner width=&#8221;1\/2&#8243; css=&#8221;.vc_custom_1609715219782{margin-top: 20px !important;}&#8221;][vc_column_text css=&#8221;.vc_custom_1598977148793{margin-bottom: 0px !important;padding-bottom: 0px !important;}&#8221;]<\/p>\n<pre><strong>scale-inverse<\/strong><\/pre>\n<p>[\/vc_column_text][\/vc_column_inner][\/vc_row_inner]<\/div><\/div><div class=\"pix-content-box card      vc_custom_1598977206262    rounded-lg shadow-inverse-lg shadow-inverse-hover-sm scale-inverse-lg bg- text-center  w-100  \"   ><div class=\"\" style=\"z-index:30;position:relative;\">[vc_row_inner content_placement=&#8221;middle&#8221; css=&#8221;.vc_custom_1598976327281{margin-top: 0px !important;margin-bottom: 0px !important;padding-top: 0px !important;padding-bottom: 0px !important;}&#8221;][vc_column_inner width=&#8221;1\/2&#8243;]<div class=\"pix-el-text w-100  \" ><p class=\"text-24 m-0 text-black  font-weight-bold\" >Scale inverse large<\/p><\/div>[\/vc_column_inner][vc_column_inner width=&#8221;1\/2&#8243; css=&#8221;.vc_custom_1609715215427{margin-top: 20px !important;}&#8221;][vc_column_text css=&#8221;.vc_custom_1598977170384{margin-bottom: 0px !important;padding-bottom: 0px !important;}&#8221;]<\/p>\n<pre><strong>scale-inverse-lg<\/strong><\/pre>\n<p>[\/vc_column_text][\/vc_column_inner][\/vc_row_inner]<\/div><\/div>[\/vc_column][\/vc_row][vc_row pix_particles_check=&#8221;&#8221; css=&#8221;.vc_custom_1671142420248{padding-top: 40px !important;}&#8221; el_id=&#8221;pix_section_scale_in_animation&#8221;][vc_column]<div class=\"pix-element-div w-100 text-center\"><span class=\"pix-badge-element h6 d-inline-flex mr-1 \"  ><span class=\"badge font-weight-bold secondary-font badge-pill bg-transparent  vc_custom_1649680277870  \" style=\" \"><span class=\"text-heading-default\" style=\"\">Scale in animation<\/span><\/span><\/span><\/div><div class=\"pix-content-box card      vc_custom_1649680342102    rounded-lg shadow-inverse-sm shadow-inverse-hover-sm bg- text-center  w-100  mb-2 pix-scale-in-xs\"   ><div class=\"\" style=\"z-index:30;position:relative;\">[vc_row_inner content_placement=&#8221;middle&#8221; css=&#8221;.vc_custom_1598976327281{margin-top: 0px !important;margin-bottom: 0px !important;padding-top: 0px !important;padding-bottom: 0px !important;}&#8221;][vc_column_inner width=&#8221;1\/2&#8243;]<div class=\"pix-el-text w-100  \" ><p class=\"text-24 m-0 text-black  font-weight-bold\" >Scale in extra small<\/p><\/div>[\/vc_column_inner][vc_column_inner width=&#8221;1\/2&#8243; css=&#8221;.vc_custom_1609715207579{margin-top: 20px !important;}&#8221;][vc_column_text css=&#8221;.vc_custom_1649680440626{margin-bottom: 0px !important;padding-bottom: 0px !important;}&#8221;]<\/p>\n<pre><strong>pix-scale-in-xs<\/strong><\/pre>\n<p>[\/vc_column_text][\/vc_column_inner][\/vc_row_inner]<\/div><\/div><div class=\"pix-content-box card      vc_custom_1649680596924    rounded-lg shadow-inverse-sm shadow-inverse-hover-sm bg- text-center  w-100  mb-2 pix-scale-in-sm\"   ><div class=\"\" style=\"z-index:30;position:relative;\">[vc_row_inner content_placement=&#8221;middle&#8221; css=&#8221;.vc_custom_1598976327281{margin-top: 0px !important;margin-bottom: 0px !important;padding-top: 0px !important;padding-bottom: 0px !important;}&#8221;][vc_column_inner width=&#8221;1\/2&#8243;]<div class=\"pix-el-text w-100  \" ><p class=\"text-24 m-0 text-black  font-weight-bold\" >Scale in small<\/p><\/div>[\/vc_column_inner][vc_column_inner width=&#8221;1\/2&#8243; css=&#8221;.vc_custom_1609715207579{margin-top: 20px !important;}&#8221;][vc_column_text css=&#8221;.vc_custom_1649680450175{margin-bottom: 0px !important;padding-bottom: 0px !important;}&#8221;]<\/p>\n<pre><strong>pix-scale-in-sm<\/strong><\/pre>\n<p>[\/vc_column_text][\/vc_column_inner][\/vc_row_inner]<\/div><\/div><div class=\"pix-content-box card      vc_custom_1649680629760    rounded-lg shadow-inverse-sm shadow-inverse-hover-sm bg- text-center  w-100  mb-2 pix-scale-in\"   ><div class=\"\" style=\"z-index:30;position:relative;\">[vc_row_inner content_placement=&#8221;middle&#8221; css=&#8221;.vc_custom_1598976327281{margin-top: 0px !important;margin-bottom: 0px !important;padding-top: 0px !important;padding-bottom: 0px !important;}&#8221;][vc_column_inner width=&#8221;1\/2&#8243;]<div class=\"pix-el-text w-100  \" ><p class=\"text-24 m-0 text-black  font-weight-bold\" >Scale in normal<\/p><\/div>[\/vc_column_inner][vc_column_inner width=&#8221;1\/2&#8243; css=&#8221;.vc_custom_1609715219782{margin-top: 20px !important;}&#8221;][vc_column_text css=&#8221;.vc_custom_1649680459774{margin-bottom: 0px !important;padding-bottom: 0px !important;}&#8221;]<\/p>\n<pre><strong>pix-scale-in<\/strong><\/pre>\n<p>[\/vc_column_text][\/vc_column_inner][\/vc_row_inner]<\/div><\/div><div class=\"pix-content-box card      vc_custom_1649680622628    rounded-lg shadow-inverse-sm shadow-inverse-hover-sm bg- text-center  w-100  mb-2 pix-scale-in-lg\"   ><div class=\"\" style=\"z-index:30;position:relative;\">[vc_row_inner content_placement=&#8221;middle&#8221; css=&#8221;.vc_custom_1598976327281{margin-top: 0px !important;margin-bottom: 0px !important;padding-top: 0px !important;padding-bottom: 0px !important;}&#8221;][vc_column_inner width=&#8221;1\/2&#8243;]<div class=\"pix-el-text w-100  \" ><p class=\"text-24 m-0 text-black  font-weight-bold\" >Scale in large<\/p><\/div>[\/vc_column_inner][vc_column_inner width=&#8221;1\/2&#8243; css=&#8221;.vc_custom_1609715215427{margin-top: 20px !important;}&#8221;][vc_column_text css=&#8221;.vc_custom_1649680474244{margin-bottom: 0px !important;padding-bottom: 0px !important;}&#8221;]<\/p>\n<pre><strong>pix-scale-in-lg<\/strong><\/pre>\n<p>[\/vc_column_text][\/vc_column_inner][\/vc_row_inner]<\/div><\/div>[\/vc_column][\/vc_row][vc_row pix_particles_check=&#8221;&#8221; css=&#8221;.vc_custom_1671142420248{padding-top: 40px !important;}&#8221;][vc_column]<div class=\"pix-element-div w-100 text-center\"><span class=\"pix-badge-element h6 d-inline-flex mr-1 \"  ><span class=\"badge font-weight-bold secondary-font badge-pill bg-transparent  vc_custom_1684275575842  \" style=\" \"><span class=\"text-heading-default\" style=\"\">Infinite animation<\/span><\/span><\/span><\/div><div class=\"pix-content-box card      vc_custom_1684275912094    rounded-lg shadow-inverse-sm shadow-inverse-hover-sm bg- text-center  w-100  \"   ><div class=\"\" style=\"z-index:30;position:relative;\">[vc_row_inner content_placement=&#8221;middle&#8221; css=&#8221;.vc_custom_1598976327281{margin-top: 0px !important;margin-bottom: 0px !important;padding-top: 0px !important;padding-bottom: 0px !important;}&#8221;][vc_column_inner width=&#8221;1\/4&#8243;]<div class=\"pix-el-text w-100  \" ><p class=\"text-24 m-0 text-black  font-weight-bold\" >Rotate<\/p><\/div>[\/vc_column_inner][vc_column_inner width=&#8221;1\/4&#8243;]<div class=\"pix-img-element d-inline-block \" ><div class=\"pix-rotating \"><div class=\"pix-img-el    text-left d-inline-block   rounded-circle\"  ><img decoding=\"async\" class=\"card-img2 pix-img-elem rounded-circle  h-1002\" style=\"width:80px;height:auto;\" width=\"180\" height=\"180\" srcset=\"https:\/\/essentials.pixfort.com\/knowledge-base\/wp-content\/uploads\/sites\/33\/2020\/07\/green-favicon-2.png 180w, https:\/\/essentials.pixfort.com\/knowledge-base\/wp-content\/uploads\/sites\/33\/2020\/07\/green-favicon-2-150x150.png 150w, https:\/\/essentials.pixfort.com\/knowledge-base\/wp-content\/uploads\/sites\/33\/2020\/07\/green-favicon-2-75x75.png 75w\" sizes=\"(max-width: 180px) 100vw, 180px\" src=\"https:\/\/essentials.pixfort.com\/knowledge-base\/wp-content\/uploads\/sites\/33\/2020\/07\/green-favicon-2.png\" alt=\"Image link\" \/><\/div><\/div><\/div>[\/vc_column_inner][vc_column_inner width=&#8221;1\/2&#8243; css=&#8221;.vc_custom_1609715207579{margin-top: 20px !important;}&#8221;][vc_column_text css=&#8221;.vc_custom_1684276906857{margin-bottom: 0px !important;padding-bottom: 0px !important;}&#8221;]<\/p>\n<pre><strong>pix-rotating<\/strong><\/pre>\n<p>[\/vc_column_text][\/vc_column_inner][\/vc_row_inner]<\/div><\/div><div class=\"pix-content-box card      vc_custom_1684275912094    rounded-lg shadow-inverse-sm shadow-inverse-hover-sm bg- text-center  w-100  \"   ><div class=\"\" style=\"z-index:30;position:relative;\">[vc_row_inner content_placement=&#8221;middle&#8221; css=&#8221;.vc_custom_1598976327281{margin-top: 0px !important;margin-bottom: 0px !important;padding-top: 0px !important;padding-bottom: 0px !important;}&#8221;][vc_column_inner width=&#8221;1\/4&#8243;]<div class=\"pix-el-text w-100  \" ><p class=\"text-24 m-0 text-black  font-weight-bold\" >Rotate inversed<\/p><\/div>[\/vc_column_inner][vc_column_inner width=&#8221;1\/4&#8243;]<div class=\"pix-img-element d-inline-block \" ><div class=\"pix-rotating-inverse pix-duration-md\"><div class=\"pix-img-el    text-left d-inline-block   rounded-circle\"  ><img decoding=\"async\" class=\"card-img2 pix-img-elem rounded-circle  h-1002\" style=\"width:80px;height:auto;\" width=\"180\" height=\"180\" srcset=\"https:\/\/essentials.pixfort.com\/knowledge-base\/wp-content\/uploads\/sites\/33\/2020\/07\/green-favicon-2.png 180w, https:\/\/essentials.pixfort.com\/knowledge-base\/wp-content\/uploads\/sites\/33\/2020\/07\/green-favicon-2-150x150.png 150w, https:\/\/essentials.pixfort.com\/knowledge-base\/wp-content\/uploads\/sites\/33\/2020\/07\/green-favicon-2-75x75.png 75w\" sizes=\"(max-width: 180px) 100vw, 180px\" src=\"https:\/\/essentials.pixfort.com\/knowledge-base\/wp-content\/uploads\/sites\/33\/2020\/07\/green-favicon-2.png\" alt=\"Image link\" \/><\/div><\/div><\/div>[\/vc_column_inner][vc_column_inner width=&#8221;1\/2&#8243; css=&#8221;.vc_custom_1609715207579{margin-top: 20px !important;}&#8221;][vc_column_text css=&#8221;.vc_custom_1684276926424{margin-bottom: 0px !important;padding-bottom: 0px !important;}&#8221;]<\/p>\n<pre><strong>pix-rotating-inverse<\/strong><\/pre>\n<p>[\/vc_column_text][\/vc_column_inner][\/vc_row_inner]<\/div><\/div><div class=\"pix-content-box card      vc_custom_1684275912094    rounded-lg shadow-inverse-sm shadow-inverse-hover-sm bg- text-center  w-100  \"   ><div class=\"\" style=\"z-index:30;position:relative;\">[vc_row_inner content_placement=&#8221;middle&#8221; css=&#8221;.vc_custom_1598976327281{margin-top: 0px !important;margin-bottom: 0px !important;padding-top: 0px !important;padding-bottom: 0px !important;}&#8221;][vc_column_inner width=&#8221;1\/4&#8243;]<div class=\"pix-el-text w-100  \" ><p class=\"text-24 m-0 text-black  font-weight-bold\" >Fade<\/p><\/div>[\/vc_column_inner][vc_column_inner width=&#8221;1\/4&#8243;]<div class=\"pix-img-element d-inline-block \" ><div class=\"pix-fade pix-duration-md\"><div class=\"pix-img-el    text-left d-inline-block   rounded-circle\"  ><img decoding=\"async\" class=\"card-img2 pix-img-elem rounded-circle  h-1002\" style=\"width:80px;height:auto;\" width=\"180\" height=\"180\" srcset=\"https:\/\/essentials.pixfort.com\/knowledge-base\/wp-content\/uploads\/sites\/33\/2020\/07\/green-favicon-2.png 180w, https:\/\/essentials.pixfort.com\/knowledge-base\/wp-content\/uploads\/sites\/33\/2020\/07\/green-favicon-2-150x150.png 150w, https:\/\/essentials.pixfort.com\/knowledge-base\/wp-content\/uploads\/sites\/33\/2020\/07\/green-favicon-2-75x75.png 75w\" sizes=\"(max-width: 180px) 100vw, 180px\" src=\"https:\/\/essentials.pixfort.com\/knowledge-base\/wp-content\/uploads\/sites\/33\/2020\/07\/green-favicon-2.png\" alt=\"Image link\" \/><\/div><\/div><\/div>[\/vc_column_inner][vc_column_inner width=&#8221;1\/2&#8243; css=&#8221;.vc_custom_1609715207579{margin-top: 20px !important;}&#8221;][vc_column_text css=&#8221;.vc_custom_1684276939674{margin-bottom: 0px !important;padding-bottom: 0px !important;}&#8221;]<\/p>\n<pre><strong>pix-fade<\/strong><\/pre>\n<p>[\/vc_column_text][\/vc_column_inner][\/vc_row_inner]<\/div><\/div><div class=\"pix-content-box card      vc_custom_1684275912094    rounded-lg shadow-inverse-sm shadow-inverse-hover-sm bg- text-center  w-100  \"   ><div class=\"\" style=\"z-index:30;position:relative;\">[vc_row_inner content_placement=&#8221;middle&#8221; css=&#8221;.vc_custom_1598976327281{margin-top: 0px !important;margin-bottom: 0px !important;padding-top: 0px !important;padding-bottom: 0px !important;}&#8221;][vc_column_inner width=&#8221;1\/4&#8243;]<div class=\"pix-el-text w-100  \" ><p class=\"text-24 m-0 text-black  font-weight-bold\" >Bounce<\/p><\/div>[\/vc_column_inner][vc_column_inner width=&#8221;1\/4&#8243;]<div class=\"pix-img-element d-inline-block \" ><div class=\"pix-bounce-sm \"><div class=\"pix-img-el    text-left d-inline-block   rounded-circle\"  ><img decoding=\"async\" class=\"card-img2 pix-img-elem rounded-circle  h-1002\" style=\"width:80px;height:auto;\" width=\"180\" height=\"180\" srcset=\"https:\/\/essentials.pixfort.com\/knowledge-base\/wp-content\/uploads\/sites\/33\/2020\/07\/green-favicon-2.png 180w, https:\/\/essentials.pixfort.com\/knowledge-base\/wp-content\/uploads\/sites\/33\/2020\/07\/green-favicon-2-150x150.png 150w, https:\/\/essentials.pixfort.com\/knowledge-base\/wp-content\/uploads\/sites\/33\/2020\/07\/green-favicon-2-75x75.png 75w\" sizes=\"(max-width: 180px) 100vw, 180px\" src=\"https:\/\/essentials.pixfort.com\/knowledge-base\/wp-content\/uploads\/sites\/33\/2020\/07\/green-favicon-2.png\" alt=\"Image link\" \/><\/div><\/div><\/div>[\/vc_column_inner][vc_column_inner width=&#8221;1\/2&#8243; css=&#8221;.vc_custom_1609715207579{margin-top: 20px !important;}&#8221;][vc_column_text css=&#8221;.vc_custom_1684277161282{margin-bottom: 0px !important;padding-bottom: 0px !important;}&#8221;]<strong><small>Small<\/small><\/strong><\/p>\n<pre><strong>pix-bounce-sm<\/strong><\/pre>\n<p><strong><small>Medium<\/small><\/strong><\/p>\n<pre><strong>pix-bounce-md<\/strong><\/pre>\n<p><strong><small>Large<\/small><\/strong><\/p>\n<pre><strong>pix-bounce-lg<\/strong><\/pre>\n<p>[\/vc_column_text][\/vc_column_inner][\/vc_row_inner]<\/div><\/div><div class=\"pix-content-box card      vc_custom_1684275912094    rounded-lg shadow-inverse-sm shadow-inverse-hover-sm bg- text-center  w-100  \"   ><div class=\"\" style=\"z-index:30;position:relative;\">[vc_row_inner content_placement=&#8221;middle&#8221; css=&#8221;.vc_custom_1598976327281{margin-top: 0px !important;margin-bottom: 0px !important;padding-top: 0px !important;padding-bottom: 0px !important;}&#8221;][vc_column_inner width=&#8221;1\/4&#8243;]<div class=\"pix-el-text w-100  \" ><p class=\"text-24 m-0 text-black  font-weight-bold\" >Scale<\/p><\/div>[\/vc_column_inner][vc_column_inner width=&#8221;1\/4&#8243;]<div class=\"pix-img-element d-inline-block \" ><div class=\"pix-scale-md \"><div class=\"pix-img-el    text-left d-inline-block   rounded-circle\"  ><img decoding=\"async\" class=\"card-img2 pix-img-elem rounded-circle  h-1002\" style=\"width:80px;height:auto;\" width=\"180\" height=\"180\" srcset=\"https:\/\/essentials.pixfort.com\/knowledge-base\/wp-content\/uploads\/sites\/33\/2020\/07\/green-favicon-2.png 180w, https:\/\/essentials.pixfort.com\/knowledge-base\/wp-content\/uploads\/sites\/33\/2020\/07\/green-favicon-2-150x150.png 150w, https:\/\/essentials.pixfort.com\/knowledge-base\/wp-content\/uploads\/sites\/33\/2020\/07\/green-favicon-2-75x75.png 75w\" sizes=\"(max-width: 180px) 100vw, 180px\" src=\"https:\/\/essentials.pixfort.com\/knowledge-base\/wp-content\/uploads\/sites\/33\/2020\/07\/green-favicon-2.png\" alt=\"Image link\" \/><\/div><\/div><\/div>[\/vc_column_inner][vc_column_inner width=&#8221;1\/2&#8243; css=&#8221;.vc_custom_1609715207579{margin-top: 20px !important;}&#8221;][vc_column_text css=&#8221;.vc_custom_1684277367798{margin-bottom: 0px !important;padding-bottom: 0px !important;}&#8221;]<strong><small>Small<\/small><\/strong><\/p>\n<pre><strong>pix-scale-sm<\/strong><\/pre>\n<p><strong><small>Medium<\/small><\/strong><\/p>\n<pre><strong>pix-scale-md<\/strong><\/pre>\n<p><strong><small>Large<\/small><\/strong><\/p>\n<pre><strong>pix-scale-lg<\/strong><\/pre>\n<p>[\/vc_column_text][\/vc_column_inner][\/vc_row_inner]<\/div><\/div><div class=\"pix-content-box card      vc_custom_1684275912094    rounded-lg shadow-inverse-sm shadow-inverse-hover-sm bg- text-center  w-100  \"   ><div class=\"\" style=\"z-index:30;position:relative;\">[vc_row_inner content_placement=&#8221;middle&#8221; css=&#8221;.vc_custom_1598976327281{margin-top: 0px !important;margin-bottom: 0px !important;padding-top: 0px !important;padding-bottom: 0px !important;}&#8221;][vc_column_inner width=&#8221;1\/2&#8243;]<div class=\"pix-el-text w-100  \" ><div class=\"d-inline-block\" style=\"max-width:90%;\"><p class=\"text-24 m-0 text-black  font-weight-bold\" >Control infinite animation duration<\/p><\/div><\/div>[\/vc_column_inner][vc_column_inner width=&#8221;1\/2&#8243;][vc_column_text css=&#8221;.vc_custom_1684277061771{margin-bottom: 0px !important;padding-bottom: 0px !important;}&#8221;]<strong><small>Slow<\/small><\/strong><\/p>\n<pre><strong>pix-duration-slow<\/strong><\/pre>\n<p><strong><small>Medium<\/small><\/strong><\/p>\n<pre><strong>pix-duration-md<\/strong><\/pre>\n<p><strong><small>Fast<\/small><\/strong><br \/>\n<strong>By default<\/strong>[\/vc_column_text][\/vc_column_inner][\/vc_row_inner]<\/div><\/div>[\/vc_column][\/vc_row][vc_row pix_particles_check=&#8221;&#8221; css=&#8221;.vc_custom_1605745390606{padding-top: 40px !important;}&#8221; el_id=&#8221;pix_section_shadows&#8221;][vc_column]<div id=\"1605301394396-0f94dbf5-f6d3\" class=\"pix-feature-el  media  vc_custom_1648580435706\"><div class=\"rounded-circle d-inline-block mr-3 feature_img bg-primary-light \"   style=\" width:40px;height:40px;position:relative;line-height:40px;text-align:center;\"><span style=\"display:inline-block;font-size:20px;line-height:20px;\" class=\"text-primary align-middle\">5<\/span><\/div><div class=\"media-body text-left\"><h5 class=\"font-weight-bold   text-heading-default  \" style=\"padding-top:4px;\"  >Shadows<\/h5><div class=\"text-text-gray      \" style=\"padding-top:20px;\"  ><\/div><\/div><\/div><div class=\"pix-element-div w-100 text-center\"><span class=\"pix-badge-element h6 d-inline-flex mr-1 \"  ><span class=\"badge font-weight-bold secondary-font badge-pill bg-transparent  vc_custom_1598997251642  \" style=\" \"><span class=\"text-heading-default\" style=\"\">Default Shadows<\/span><\/span><\/span><\/div><div class=\"pix-content-box card      vc_custom_1598997285134    rounded-lg shadow-sm bg- text-center  w-100  \"   ><div class=\"\" style=\"z-index:30;position:relative;\">[vc_row_inner content_placement=&#8221;middle&#8221; css=&#8221;.vc_custom_1598976327281{margin-top: 0px !important;margin-bottom: 0px !important;padding-top: 0px !important;padding-bottom: 0px !important;}&#8221;][vc_column_inner width=&#8221;1\/2&#8243;]<div class=\"pix-el-text w-100  \" ><p class=\"text-24 m-0 text-black  font-weight-bold\" >Shadow small<\/p><\/div>[\/vc_column_inner][vc_column_inner width=&#8221;1\/2&#8243; css=&#8221;.vc_custom_1609715225949{margin-top: 20px !important;}&#8221;][vc_column_text css=&#8221;.vc_custom_1598997267199{margin-bottom: 0px !important;padding-bottom: 0px !important;}&#8221;]<\/p>\n<pre><strong>shadow-sm<\/strong><\/pre>\n<p>[\/vc_column_text][\/vc_column_inner][\/vc_row_inner]<\/div><\/div><div class=\"pix-content-box card      vc_custom_1598997305803    rounded-lg shadow bg- text-center  w-100  \"   ><div class=\"\" style=\"z-index:30;position:relative;\">[vc_row_inner content_placement=&#8221;middle&#8221; css=&#8221;.vc_custom_1598976327281{margin-top: 0px !important;margin-bottom: 0px !important;padding-top: 0px !important;padding-bottom: 0px !important;}&#8221;][vc_column_inner width=&#8221;1\/2&#8243;]<div class=\"pix-el-text w-100  \" ><p class=\"text-24 m-0 text-black  font-weight-bold\" >Shadow medium<\/p><\/div>[\/vc_column_inner][vc_column_inner width=&#8221;1\/2&#8243; css=&#8221;.vc_custom_1609715231632{margin-top: 20px !important;}&#8221;][vc_column_text css=&#8221;.vc_custom_1598997320144{margin-bottom: 0px !important;padding-bottom: 0px !important;}&#8221;]<\/p>\n<pre><strong>shadow<\/strong><\/pre>\n<p>[\/vc_column_text][\/vc_column_inner][\/vc_row_inner]<\/div><\/div><div class=\"pix-content-box card      vc_custom_1598997372792    rounded-lg shadow-lg bg- text-center  w-100  \"   ><div class=\"\" style=\"z-index:30;position:relative;\">[vc_row_inner content_placement=&#8221;middle&#8221; css=&#8221;.vc_custom_1598976327281{margin-top: 0px !important;margin-bottom: 0px !important;padding-top: 0px !important;padding-bottom: 0px !important;}&#8221;][vc_column_inner width=&#8221;1\/2&#8243;]<div class=\"pix-el-text w-100  \" ><p class=\"text-24 m-0 text-black  font-weight-bold\" >Shadow large<\/p><\/div>[\/vc_column_inner][vc_column_inner width=&#8221;1\/2&#8243; css=&#8221;.vc_custom_1609715236447{margin-top: 20px !important;}&#8221;][vc_column_text css=&#8221;.vc_custom_1598997401042{margin-bottom: 0px !important;padding-bottom: 0px !important;}&#8221;]<\/p>\n<pre><strong>shadow-lg<\/strong><\/pre>\n<p>[\/vc_column_text][\/vc_column_inner][\/vc_row_inner]<\/div><\/div>[\/vc_column][\/vc_row][vc_row pix_particles_check=&#8221;&#8221; css=&#8221;.vc_custom_1595688958236{padding-top: 40px !important;}&#8221;][vc_column]<div class=\"pix-element-div w-100 text-center\"><span class=\"pix-badge-element h6 d-inline-flex mr-1 \"  ><span class=\"badge font-weight-bold secondary-font badge-pill bg-transparent  vc_custom_1598997593304  \" style=\" \"><span class=\"text-heading-default\" style=\"\">Hover Shadows<\/span><\/span><\/span><\/div><div class=\"pix-content-box card      vc_custom_1598997707478    rounded-lg shadow-hover-sm bg- text-center  w-100  \"   ><div class=\"\" style=\"z-index:30;position:relative;\">[vc_row_inner content_placement=&#8221;middle&#8221; css=&#8221;.vc_custom_1598976327281{margin-top: 0px !important;margin-bottom: 0px !important;padding-top: 0px !important;padding-bottom: 0px !important;}&#8221;][vc_column_inner width=&#8221;1\/2&#8243;]<div class=\"pix-el-text w-100  \" ><p class=\"text-24 m-0 text-black  font-weight-bold\" >Hover shadow small<\/p><\/div>[\/vc_column_inner][vc_column_inner width=&#8221;1\/2&#8243; css=&#8221;.vc_custom_1609715241586{margin-top: 20px !important;}&#8221;][vc_column_text css=&#8221;.vc_custom_1598997699229{margin-bottom: 0px !important;padding-bottom: 0px !important;}&#8221;]<\/p>\n<pre><strong>shadow-hover-sm<\/strong><\/pre>\n<p>[\/vc_column_text][\/vc_column_inner][\/vc_row_inner]<\/div><\/div><div class=\"pix-content-box card      vc_custom_1598997725135    rounded-lg shadow-hover bg- text-center  w-100  \"   ><div class=\"\" style=\"z-index:30;position:relative;\">[vc_row_inner content_placement=&#8221;middle&#8221; css=&#8221;.vc_custom_1598976327281{margin-top: 0px !important;margin-bottom: 0px !important;padding-top: 0px !important;padding-bottom: 0px !important;}&#8221;][vc_column_inner width=&#8221;1\/2&#8243;]<div class=\"pix-el-text w-100  \" ><p class=\"text-24 m-0 text-black  font-weight-bold\" >Hover shadow medium<\/p><\/div>[\/vc_column_inner][vc_column_inner width=&#8221;1\/2&#8243; css=&#8221;.vc_custom_1609715246561{margin-top: 20px !important;}&#8221;][vc_column_text css=&#8221;.vc_custom_1598997657124{margin-bottom: 0px !important;padding-bottom: 0px !important;}&#8221;]<\/p>\n<pre><strong>shadow-hover<\/strong><\/pre>\n<p>[\/vc_column_text][\/vc_column_inner][\/vc_row_inner]<\/div><\/div><div class=\"pix-content-box card      vc_custom_1598997843551    rounded-lg shadow-hover-lg bg- text-center  w-100  \"   ><div class=\"\" style=\"z-index:30;position:relative;\">[vc_row_inner content_placement=&#8221;middle&#8221; css=&#8221;.vc_custom_1598976327281{margin-top: 0px !important;margin-bottom: 0px !important;padding-top: 0px !important;padding-bottom: 0px !important;}&#8221;][vc_column_inner width=&#8221;1\/2&#8243;]<div class=\"pix-el-text w-100  \" ><p class=\"text-24 m-0 text-black  font-weight-bold\" >Hover shadow large<\/p><\/div>[\/vc_column_inner][vc_column_inner width=&#8221;1\/2&#8243; css=&#8221;.vc_custom_1609715251864{margin-top: 20px !important;}&#8221;][vc_column_text css=&#8221;.vc_custom_1598997678582{margin-bottom: 0px !important;padding-bottom: 0px !important;}&#8221;]<\/p>\n<pre><strong>shadow-hover-lg<\/strong><\/pre>\n<p>[\/vc_column_text][\/vc_column_inner][\/vc_row_inner]<\/div><\/div>[\/vc_column][\/vc_row][vc_row pix_particles_check=&#8221;&#8221; css=&#8221;.vc_custom_1595688958236{padding-top: 40px !important;}&#8221;][vc_column]<div class=\"pix-element-div w-100 text-center\"><span class=\"pix-badge-element h6 d-inline-flex mr-1 \"  ><span class=\"badge font-weight-bold secondary-font badge-pill bg-transparent  vc_custom_1598997903850  \" style=\" \"><span class=\"text-heading-default\" style=\"\">Inverse Hover Shadows<\/span><\/span><\/span><\/div><div class=\"pix-content-box card      vc_custom_1598998020004    rounded-lg shadow-inverse-hover-sm bg- text-center  w-100  \"   ><div class=\"\" style=\"z-index:30;position:relative;\">[vc_row_inner content_placement=&#8221;middle&#8221; css=&#8221;.vc_custom_1598976327281{margin-top: 0px !important;margin-bottom: 0px !important;padding-top: 0px !important;padding-bottom: 0px !important;}&#8221;][vc_column_inner width=&#8221;7\/12&#8243;]<div class=\"pix-el-text w-100  \" ><p class=\"text-24 m-0 text-black  font-weight-bold\" >Inverse Hover shadow small<\/p><\/div>[\/vc_column_inner][vc_column_inner width=&#8221;5\/12&#8243; css=&#8221;.vc_custom_1609715258001{margin-top: 20px !important;}&#8221;][vc_column_text css=&#8221;.vc_custom_1598997948831{margin-bottom: 0px !important;padding-bottom: 0px !important;}&#8221;]<\/p>\n<pre><strong>shadow-inverse-hover-sm<\/strong><\/pre>\n<p>[\/vc_column_text][\/vc_column_inner][\/vc_row_inner]<\/div><\/div><div class=\"pix-content-box card      vc_custom_1598998015273    rounded-lg shadow-inverse-hover bg- text-center  w-100  \"   ><div class=\"\" style=\"z-index:30;position:relative;\">[vc_row_inner content_placement=&#8221;middle&#8221; css=&#8221;.vc_custom_1598976327281{margin-top: 0px !important;margin-bottom: 0px !important;padding-top: 0px !important;padding-bottom: 0px !important;}&#8221;][vc_column_inner width=&#8221;7\/12&#8243;]<div class=\"pix-el-text w-100  \" ><p class=\"text-24 m-0 text-black  font-weight-bold\" >Inverse Hover shadow medium<\/p><\/div>[\/vc_column_inner][vc_column_inner width=&#8221;5\/12&#8243; css=&#8221;.vc_custom_1609715263939{margin-top: 20px !important;}&#8221;][vc_column_text css=&#8221;.vc_custom_1598997979508{margin-bottom: 0px !important;padding-bottom: 0px !important;}&#8221;]<\/p>\n<pre><strong>shadow-inverse-hover<\/strong><\/pre>\n<p>[\/vc_column_text][\/vc_column_inner][\/vc_row_inner]<\/div><\/div><div class=\"pix-content-box card      vc_custom_1598998010399    rounded-lg shadow-inverse-hover-lg bg- text-center  w-100  \"   ><div class=\"\" style=\"z-index:30;position:relative;\">[vc_row_inner content_placement=&#8221;middle&#8221; css=&#8221;.vc_custom_1598976327281{margin-top: 0px !important;margin-bottom: 0px !important;padding-top: 0px !important;padding-bottom: 0px !important;}&#8221;][vc_column_inner width=&#8221;7\/12&#8243;]<div class=\"pix-el-text w-100  \" ><p class=\"text-24 m-0 text-black  font-weight-bold\" >Inverse Hover shadow large<\/p><\/div>[\/vc_column_inner][vc_column_inner width=&#8221;5\/12&#8243; css=&#8221;.vc_custom_1609715269028{margin-top: 20px !important;}&#8221;][vc_column_text css=&#8221;.vc_custom_1598998032089{margin-bottom: 0px !important;padding-bottom: 0px !important;}&#8221;]<\/p>\n<pre><strong>shadow-inverse-hover-lg<\/strong><\/pre>\n<p>[\/vc_column_text][\/vc_column_inner][\/vc_row_inner]<\/div><\/div>[vc_column_text]To remove the shadow you can use this class: <code>shadow-0<\/code>[\/vc_column_text][\/vc_column][\/vc_row][vc_row pix_particles_check=&#8221;&#8221; css=&#8221;.vc_custom_1605745400035{padding-top: 40px !important;}&#8221; el_id=&#8221;pix_section_spacing&#8221;][vc_column]<div id=\"1605301400774-41321d85-01bd\" class=\"pix-feature-el  media  vc_custom_1648580442844\"><div class=\"rounded-circle d-inline-block mr-3 feature_img bg-primary-light \"   style=\" width:40px;height:40px;position:relative;line-height:40px;text-align:center;\"><span style=\"display:inline-block;font-size:20px;line-height:20px;\" class=\"text-primary align-middle\">6<\/span><\/div><div class=\"media-body text-left\"><h5 class=\"font-weight-bold   text-heading-default  \" style=\"padding-top:4px;\"  >Spacing<\/h5><div class=\"text-text-gray      \" style=\"padding-top:20px;\"  ><\/div><\/div><\/div>[vc_column_text css=&#8221;.vc_custom_1609715276427{padding-top: 20px !important;}&#8221;]<\/p>\n<h6 class=\"pb-3\"><strong>How it works:<\/strong><\/h6>\n<p>Assign responsive-friendly\u00a0<code>margin<\/code>\u00a0or\u00a0<code>padding<\/code>\u00a0values to an element or a subset of its sides with shorthand classes. Includes support for individual properties, all properties, and vertical and horizontal properties. Classes are built from a default Sass map ranging from\u00a0<code>5px<\/code>\u00a0to\u00a0<code>200px<\/code>.<\/p>\n<h6 class=\"pb-3\"><strong>Notation:<\/strong><\/h6>\n<p>The classes are named using the format\u00a0<code class=\"highlighter-rouge\">pix-{property}{sides}-{size}<\/code>.<\/p>\n<p>For example: to add a 20px horizontal padding we can use the class:\u00a0<code class=\"highlighter-rouge\">pix-px-20<\/code>.<\/p>\n<p>Where\u00a0<em>property<\/em>\u00a0is one of:<\/p>\n<ul>\n<li><code class=\"highlighter-rouge\">m<\/code>\u00a0&#8211; for classes that set\u00a0<code class=\"highlighter-rouge\">margin<\/code><\/li>\n<li><code class=\"highlighter-rouge\">p<\/code>\u00a0&#8211; for classes that set\u00a0<code class=\"highlighter-rouge\">padding<\/code><\/li>\n<\/ul>\n<p>Where\u00a0<em>sides<\/em>\u00a0is one of:<\/p>\n<ul>\n<li><code class=\"highlighter-rouge\">t<\/code>\u00a0&#8211; for classes that set\u00a0<code class=\"highlighter-rouge\">margin-top<\/code>\u00a0or\u00a0<code class=\"highlighter-rouge\">padding-top<\/code><\/li>\n<li><code class=\"highlighter-rouge\">b<\/code>\u00a0&#8211; for classes that set\u00a0<code class=\"highlighter-rouge\">margin-bottom<\/code>\u00a0or\u00a0<code class=\"highlighter-rouge\">padding-bottom<\/code><\/li>\n<li><code class=\"highlighter-rouge\">l<\/code>\u00a0&#8211; for classes that set\u00a0<code class=\"highlighter-rouge\">margin-left<\/code>\u00a0or\u00a0<code class=\"highlighter-rouge\">padding-left<\/code><\/li>\n<li><code class=\"highlighter-rouge\">r<\/code>\u00a0&#8211; for classes that set\u00a0<code class=\"highlighter-rouge\">margin-right<\/code>\u00a0or\u00a0<code class=\"highlighter-rouge\">padding-right<\/code><\/li>\n<li><code class=\"highlighter-rouge\">x<\/code>\u00a0&#8211; for classes that set both\u00a0<code class=\"highlighter-rouge\">*-left<\/code>\u00a0and\u00a0<code class=\"highlighter-rouge\">*-right<\/code><\/li>\n<li><code class=\"highlighter-rouge\">y<\/code>\u00a0&#8211; for classes that set both\u00a0<code class=\"highlighter-rouge\">*-top<\/code>\u00a0and\u00a0<code class=\"highlighter-rouge\">*-bottom<\/code><\/li>\n<li>blank &#8211; for classes that set a\u00a0<code class=\"highlighter-rouge\">margin<\/code>\u00a0or\u00a0<code class=\"highlighter-rouge\">padding<\/code>\u00a0on all 4 sides of the element<\/li>\n<\/ul>\n<p>Where\u00a0<em>size<\/em>\u00a0is one of:<\/p>\n<ul>\n<li><code class=\"highlighter-rouge\">5<\/code>\u00a0&#8211; (by default) for classes that set the\u00a0<code class=\"highlighter-rouge\">margin<\/code>\u00a0or\u00a0<code class=\"highlighter-rouge\">padding<\/code>\u00a0to\u00a0<code class=\"highlighter-rouge\">5px<\/code><\/li>\n<li><code class=\"highlighter-rouge\">10<\/code>\u00a0&#8211; (by default) for classes that set the\u00a0<code class=\"highlighter-rouge\">margin<\/code>\u00a0or\u00a0<code class=\"highlighter-rouge\">padding<\/code>\u00a0to\u00a0<code class=\"highlighter-rouge\">10px<\/code><\/li>\n<li><code class=\"highlighter-rouge\">...<\/code><\/li>\n<li><code class=\"highlighter-rouge\">200<\/code>\u00a0&#8211; (by default) for classes that set the\u00a0<code class=\"highlighter-rouge\">margin<\/code>\u00a0or\u00a0<code class=\"highlighter-rouge\">padding<\/code>\u00a0to\u00a0<code class=\"highlighter-rouge\">200px<\/code><\/li>\n<\/ul>\n<p><strong>The available sizes are:<\/strong> 5, 10, 15, 20, 25, 30, 35, 40, 45, 50, 60, 70, 80, 90, 100, 120, 130, 150, 200.<\/p>\n<p>(You can add more sizes by adding entries to the\u00a0<code class=\"highlighter-rouge\">$spacings<\/code>\u00a0Scss map variable.)[\/vc_column_text][\/vc_column][\/vc_row]<\/p>\n<\/div>","protected":false},"excerpt":{"rendered":"Want to add custom styling? Use these awesome Essentials Framework classes.","protected":false},"author":1,"featured_media":3427,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[42,60],"tags":[146,44,46,147,47,148,45],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v22.4 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Essentials custom CSS classes - Essentials Knowledge base<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/essentials.pixfort.com\/knowledge-base\/essentials-custom-css-classes\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Essentials custom CSS classes - Essentials Knowledge base\" \/>\n<meta property=\"og:description\" content=\"Want to add custom styling? Use these awesome Essentials Framework classes.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/essentials.pixfort.com\/knowledge-base\/essentials-custom-css-classes\/\" \/>\n<meta property=\"og:site_name\" content=\"Essentials Knowledge base\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/pixfort\" \/>\n<meta property=\"article:published_time\" content=\"2020-07-24T13:10:44+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-04-07T20:19:52+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/essentials.pixfort.com\/knowledge-base\/wp-content\/uploads\/sites\/33\/2020\/07\/custom-css.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1200\" \/>\n\t<meta property=\"og:image:height\" content=\"800\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"pixfort\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@pixfort\" \/>\n<meta name=\"twitter:site\" content=\"@pixfort\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"pixfort\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"13 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/essentials.pixfort.com\/knowledge-base\/essentials-custom-css-classes\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/essentials.pixfort.com\/knowledge-base\/essentials-custom-css-classes\/\"},\"author\":{\"name\":\"pixfort\",\"@id\":\"https:\/\/essentials.pixfort.com\/knowledge-base\/#\/schema\/person\/ce28d19c64aa87116b0fc2685df067b6\"},\"headline\":\"Essentials custom CSS classes\",\"datePublished\":\"2020-07-24T13:10:44+00:00\",\"dateModified\":\"2024-04-07T20:19:52+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/essentials.pixfort.com\/knowledge-base\/essentials-custom-css-classes\/\"},\"wordCount\":6946,\"publisher\":{\"@id\":\"https:\/\/essentials.pixfort.com\/knowledge-base\/#organization\"},\"image\":{\"@id\":\"https:\/\/essentials.pixfort.com\/knowledge-base\/essentials-custom-css-classes\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/essentials.pixfort.com\/knowledge-base\/wp-content\/uploads\/sites\/33\/2020\/07\/custom-css.png\",\"keywords\":[\"button\",\"css\",\"custom\",\"hover\",\"html\",\"shadow\",\"styling\"],\"articleSection\":[\"Advanced\",\"Tips &amp; tricks\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/essentials.pixfort.com\/knowledge-base\/essentials-custom-css-classes\/\",\"url\":\"https:\/\/essentials.pixfort.com\/knowledge-base\/essentials-custom-css-classes\/\",\"name\":\"Essentials custom CSS classes - Essentials Knowledge base\",\"isPartOf\":{\"@id\":\"https:\/\/essentials.pixfort.com\/knowledge-base\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/essentials.pixfort.com\/knowledge-base\/essentials-custom-css-classes\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/essentials.pixfort.com\/knowledge-base\/essentials-custom-css-classes\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/essentials.pixfort.com\/knowledge-base\/wp-content\/uploads\/sites\/33\/2020\/07\/custom-css.png\",\"datePublished\":\"2020-07-24T13:10:44+00:00\",\"dateModified\":\"2024-04-07T20:19:52+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/essentials.pixfort.com\/knowledge-base\/essentials-custom-css-classes\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/essentials.pixfort.com\/knowledge-base\/essentials-custom-css-classes\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/essentials.pixfort.com\/knowledge-base\/essentials-custom-css-classes\/#primaryimage\",\"url\":\"https:\/\/essentials.pixfort.com\/knowledge-base\/wp-content\/uploads\/sites\/33\/2020\/07\/custom-css.png\",\"contentUrl\":\"https:\/\/essentials.pixfort.com\/knowledge-base\/wp-content\/uploads\/sites\/33\/2020\/07\/custom-css.png\",\"width\":1200,\"height\":800},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/essentials.pixfort.com\/knowledge-base\/essentials-custom-css-classes\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/essentials.pixfort.com\/knowledge-base\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Essentials custom CSS classes\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/essentials.pixfort.com\/knowledge-base\/#website\",\"url\":\"https:\/\/essentials.pixfort.com\/knowledge-base\/\",\"name\":\"Essentials Knowledge base\",\"description\":\"made by pixfort\",\"publisher\":{\"@id\":\"https:\/\/essentials.pixfort.com\/knowledge-base\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/essentials.pixfort.com\/knowledge-base\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/essentials.pixfort.com\/knowledge-base\/#organization\",\"name\":\"pixfort\",\"url\":\"https:\/\/essentials.pixfort.com\/knowledge-base\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/essentials.pixfort.com\/knowledge-base\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/essentials.pixfort.com\/knowledge-base\/wp-content\/uploads\/sites\/33\/2020\/07\/support-logo-dark-clean.png\",\"contentUrl\":\"https:\/\/essentials.pixfort.com\/knowledge-base\/wp-content\/uploads\/sites\/33\/2020\/07\/support-logo-dark-clean.png\",\"width\":322,\"height\":110,\"caption\":\"pixfort\"},\"image\":{\"@id\":\"https:\/\/essentials.pixfort.com\/knowledge-base\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/pixfort\",\"https:\/\/twitter.com\/pixfort\",\"https:\/\/www.instagram.com\/pixfort\/\",\"https:\/\/www.linkedin.com\/company\/pixfort\",\"https:\/\/www.youtube.com\/c\/Pixfort\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/essentials.pixfort.com\/knowledge-base\/#\/schema\/person\/ce28d19c64aa87116b0fc2685df067b6\",\"name\":\"pixfort\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/essentials.pixfort.com\/knowledge-base\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/f5c4155e987c6ab4b3e8278828fe024c?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/f5c4155e987c6ab4b3e8278828fe024c?s=96&d=mm&r=g\",\"caption\":\"pixfort\"},\"description\":\"Hey, this is pixfort support team, if you still need help you can always reach us via the chat messenger in your account on pixfort hub\",\"sameAs\":[\"http:\/\/hub.pixfort.com\"],\"url\":\"https:\/\/essentials.pixfort.com\/knowledge-base\/author\/pixfort\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Essentials custom CSS classes - Essentials Knowledge base","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:\/\/essentials.pixfort.com\/knowledge-base\/essentials-custom-css-classes\/","og_locale":"en_US","og_type":"article","og_title":"Essentials custom CSS classes - Essentials Knowledge base","og_description":"Want to add custom styling? Use these awesome Essentials Framework classes.","og_url":"https:\/\/essentials.pixfort.com\/knowledge-base\/essentials-custom-css-classes\/","og_site_name":"Essentials Knowledge base","article_publisher":"https:\/\/www.facebook.com\/pixfort","article_published_time":"2020-07-24T13:10:44+00:00","article_modified_time":"2024-04-07T20:19:52+00:00","og_image":[{"width":1200,"height":800,"url":"https:\/\/essentials.pixfort.com\/knowledge-base\/wp-content\/uploads\/sites\/33\/2020\/07\/custom-css.png","type":"image\/png"}],"author":"pixfort","twitter_card":"summary_large_image","twitter_creator":"@pixfort","twitter_site":"@pixfort","twitter_misc":{"Written by":"pixfort","Est. reading time":"13 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/essentials.pixfort.com\/knowledge-base\/essentials-custom-css-classes\/#article","isPartOf":{"@id":"https:\/\/essentials.pixfort.com\/knowledge-base\/essentials-custom-css-classes\/"},"author":{"name":"pixfort","@id":"https:\/\/essentials.pixfort.com\/knowledge-base\/#\/schema\/person\/ce28d19c64aa87116b0fc2685df067b6"},"headline":"Essentials custom CSS classes","datePublished":"2020-07-24T13:10:44+00:00","dateModified":"2024-04-07T20:19:52+00:00","mainEntityOfPage":{"@id":"https:\/\/essentials.pixfort.com\/knowledge-base\/essentials-custom-css-classes\/"},"wordCount":6946,"publisher":{"@id":"https:\/\/essentials.pixfort.com\/knowledge-base\/#organization"},"image":{"@id":"https:\/\/essentials.pixfort.com\/knowledge-base\/essentials-custom-css-classes\/#primaryimage"},"thumbnailUrl":"https:\/\/essentials.pixfort.com\/knowledge-base\/wp-content\/uploads\/sites\/33\/2020\/07\/custom-css.png","keywords":["button","css","custom","hover","html","shadow","styling"],"articleSection":["Advanced","Tips &amp; tricks"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/essentials.pixfort.com\/knowledge-base\/essentials-custom-css-classes\/","url":"https:\/\/essentials.pixfort.com\/knowledge-base\/essentials-custom-css-classes\/","name":"Essentials custom CSS classes - Essentials Knowledge base","isPartOf":{"@id":"https:\/\/essentials.pixfort.com\/knowledge-base\/#website"},"primaryImageOfPage":{"@id":"https:\/\/essentials.pixfort.com\/knowledge-base\/essentials-custom-css-classes\/#primaryimage"},"image":{"@id":"https:\/\/essentials.pixfort.com\/knowledge-base\/essentials-custom-css-classes\/#primaryimage"},"thumbnailUrl":"https:\/\/essentials.pixfort.com\/knowledge-base\/wp-content\/uploads\/sites\/33\/2020\/07\/custom-css.png","datePublished":"2020-07-24T13:10:44+00:00","dateModified":"2024-04-07T20:19:52+00:00","breadcrumb":{"@id":"https:\/\/essentials.pixfort.com\/knowledge-base\/essentials-custom-css-classes\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/essentials.pixfort.com\/knowledge-base\/essentials-custom-css-classes\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/essentials.pixfort.com\/knowledge-base\/essentials-custom-css-classes\/#primaryimage","url":"https:\/\/essentials.pixfort.com\/knowledge-base\/wp-content\/uploads\/sites\/33\/2020\/07\/custom-css.png","contentUrl":"https:\/\/essentials.pixfort.com\/knowledge-base\/wp-content\/uploads\/sites\/33\/2020\/07\/custom-css.png","width":1200,"height":800},{"@type":"BreadcrumbList","@id":"https:\/\/essentials.pixfort.com\/knowledge-base\/essentials-custom-css-classes\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/essentials.pixfort.com\/knowledge-base\/"},{"@type":"ListItem","position":2,"name":"Essentials custom CSS classes"}]},{"@type":"WebSite","@id":"https:\/\/essentials.pixfort.com\/knowledge-base\/#website","url":"https:\/\/essentials.pixfort.com\/knowledge-base\/","name":"Essentials Knowledge base","description":"made by pixfort","publisher":{"@id":"https:\/\/essentials.pixfort.com\/knowledge-base\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/essentials.pixfort.com\/knowledge-base\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/essentials.pixfort.com\/knowledge-base\/#organization","name":"pixfort","url":"https:\/\/essentials.pixfort.com\/knowledge-base\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/essentials.pixfort.com\/knowledge-base\/#\/schema\/logo\/image\/","url":"https:\/\/essentials.pixfort.com\/knowledge-base\/wp-content\/uploads\/sites\/33\/2020\/07\/support-logo-dark-clean.png","contentUrl":"https:\/\/essentials.pixfort.com\/knowledge-base\/wp-content\/uploads\/sites\/33\/2020\/07\/support-logo-dark-clean.png","width":322,"height":110,"caption":"pixfort"},"image":{"@id":"https:\/\/essentials.pixfort.com\/knowledge-base\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/pixfort","https:\/\/twitter.com\/pixfort","https:\/\/www.instagram.com\/pixfort\/","https:\/\/www.linkedin.com\/company\/pixfort","https:\/\/www.youtube.com\/c\/Pixfort"]},{"@type":"Person","@id":"https:\/\/essentials.pixfort.com\/knowledge-base\/#\/schema\/person\/ce28d19c64aa87116b0fc2685df067b6","name":"pixfort","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/essentials.pixfort.com\/knowledge-base\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/f5c4155e987c6ab4b3e8278828fe024c?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/f5c4155e987c6ab4b3e8278828fe024c?s=96&d=mm&r=g","caption":"pixfort"},"description":"Hey, this is pixfort support team, if you still need help you can always reach us via the chat messenger in your account on pixfort hub","sameAs":["http:\/\/hub.pixfort.com"],"url":"https:\/\/essentials.pixfort.com\/knowledge-base\/author\/pixfort\/"}]}},"_links":{"self":[{"href":"https:\/\/essentials.pixfort.com\/knowledge-base\/wp-json\/wp\/v2\/posts\/3411"}],"collection":[{"href":"https:\/\/essentials.pixfort.com\/knowledge-base\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/essentials.pixfort.com\/knowledge-base\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/essentials.pixfort.com\/knowledge-base\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/essentials.pixfort.com\/knowledge-base\/wp-json\/wp\/v2\/comments?post=3411"}],"version-history":[{"count":98,"href":"https:\/\/essentials.pixfort.com\/knowledge-base\/wp-json\/wp\/v2\/posts\/3411\/revisions"}],"predecessor-version":[{"id":7388,"href":"https:\/\/essentials.pixfort.com\/knowledge-base\/wp-json\/wp\/v2\/posts\/3411\/revisions\/7388"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/essentials.pixfort.com\/knowledge-base\/wp-json\/wp\/v2\/media\/3427"}],"wp:attachment":[{"href":"https:\/\/essentials.pixfort.com\/knowledge-base\/wp-json\/wp\/v2\/media?parent=3411"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/essentials.pixfort.com\/knowledge-base\/wp-json\/wp\/v2\/categories?post=3411"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/essentials.pixfort.com\/knowledge-base\/wp-json\/wp\/v2\/tags?post=3411"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}