{"id":231,"date":"2020-04-22T06:24:33","date_gmt":"2020-04-22T06:24:33","guid":{"rendered":"https:\/\/localhost\/bricksacademy\/?post_type=bricks_article&#038;p=231"},"modified":"2021-07-06T09:39:36","modified_gmt":"2021-07-06T09:39:36","slug":"gradient-control","status":"publish","type":"bricks_article","link":"https:\/\/academy.bricksbuilder.io\/article\/gradient-control\/","title":{"rendered":"Gradient Control"},"content":{"rendered":"\n<p>The gradient control lets you define an unlimited number of gradients that you can apply to text, background, and as an overlay. <\/p>\n\n\n\n<p>You can set the CSS selector in the control, adjust the angle between 0 and 360\u00b0, and set a color stop for each color.<\/p>\n\n\n\n<pre class=\"wp-block-code prettyprint\"><code>class Prefix_Element_Gradient extends \\Bricks\\Element {\n  \/\/ Set builder controls\n  public function set_controls() {\n    $this->controls&#91;'exampleGradient'] = &#91;\n      'tab' => 'content',\n      'label' => esc_html__( 'Gradient', 'bricks' ),\n      'type' => 'gradient',\n      'css' => &#91;\n        &#91;\n          'property' => 'background-image',\n        ],\n      ],\n    ];\n  }\n\n  \/\/ Render element HTML\n  public function render() {\n    echo get_bloginfo( 'name' );\n  }\n}<\/code><\/pre>\n\n\n\n<p class=\"callout-blue\">All sections, rows, columns, and elements already have a <strong>CSS Gradient<\/strong>&nbsp;control under the Style tab Gradient \/ Overlay group.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>The gradient control lets you define an unlimited number of gradients that you can apply to text, background, and as an overlay. You can set the CSS selector in the control, adjust the angle between 0 and 360\u00b0, and set a color stop for each color. All sections, rows, columns, and elements already have a [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"menu_order":160,"template":"","format":"standard","meta":{"footnotes":""},"_links":{"self":[{"href":"https:\/\/academy.bricksbuilder.io\/api\/wp\/v2\/bricks_article\/231"}],"collection":[{"href":"https:\/\/academy.bricksbuilder.io\/api\/wp\/v2\/bricks_article"}],"about":[{"href":"https:\/\/academy.bricksbuilder.io\/api\/wp\/v2\/types\/bricks_article"}],"author":[{"embeddable":true,"href":"https:\/\/academy.bricksbuilder.io\/api\/wp\/v2\/users\/1"}],"version-history":[{"count":0,"href":"https:\/\/academy.bricksbuilder.io\/api\/wp\/v2\/bricks_article\/231\/revisions"}],"wp:attachment":[{"href":"https:\/\/academy.bricksbuilder.io\/api\/wp\/v2\/media?parent=231"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}