{"id":112,"date":"2016-01-13T13:24:12","date_gmt":"2016-01-13T13:24:12","guid":{"rendered":"http:\/\/flatsome.dev\/?page_id=3648"},"modified":"2016-01-13T13:24:12","modified_gmt":"2016-01-13T13:24:12","slug":"banner","status":"publish","type":"page","link":"https:\/\/kb.lagonet.vn\/?page_id=112","title":{"rendered":"Banners"},"content":{"rendered":"

[ux_slider]<\/p>\n

[ux_banner height=”700px” bg=”69″ bg_overlay=”rgba(0, 0, 0, 0.25)”]<\/p>\n

[text_box width=”51″ animate=”fadeInLeft” text_depth=”1″]<\/p>\n

Create Amazing Banners with Drag and Drop<\/h2>\n

[divider]<\/p>\n

[button text=”A button” color=”success” depth=”3″]<\/p>\n

[\/text_box]<\/p>\n

[\/ux_banner]
\n[ux_banner height=”700px” bg=”69″]<\/p>\n

[text_box width=”46″ animate=”fadeInRight” parallax=”1″ position_x=”5″]<\/p>\n

Lorem ipsum dolor sit amet<\/h2>\n

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat….<\/p>\n

[button text=”Buy now” color=”white”]<\/p>\n

[button text=”Learn more” color=”white” style=”outline”]<\/p>\n

[\/text_box]<\/p>\n

[\/ux_banner]<\/p>\n

[\/ux_slider]
\n[row v_align=”middle”]<\/p>\n

[col span=”7″]<\/p>\n

[ux_banner height=”600px” bg=”69″ bg_pos=”44% 39%”]<\/p>\n

[text_box width=”63″ width__sm=”78″ padding=”39px” position_x=”5″ position_x__sm=”50″ text_color=”dark” bg=”rgba(255, 255, 255, 0.85)” depth=”2″]<\/p>\n

Lorem ipsum dolor sit amet<\/h3>\n

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat….<\/p>\n

[button text=”Simple Link” style=”link” icon=”icon-play”]<\/p>\n

[button text=”Simple Button”]<\/p>\n

[\/text_box]<\/p>\n

[\/ux_banner]<\/p>\n

[\/col]
\n[col span=”5″ span__sm=”12″ align=”center”]<\/p>\n

Drag And Drop Banner System<\/h2>\n

Flatsome Banners<\/strong> is\u00a0the heart\u00a0of Flatsome. Our Banner System let you create beautiful responsive<\/strong> banners with drag and drop.<\/span><\/p>\n

\u00a0<\/p>\n

[ux_image id=”68″]<\/p>\n

[\/col]
\n[col span=”14″]<\/p>\n

[ux_banner height=”56.25%” height__sm=”50%” bg=”69″ bg_overlay=”rgba(22, 20, 16, 0.18)” hover=”glow”]<\/p>\n

[text_box width=”36″ position_x=”90″]<\/p>\n

Small Title<\/h3>\n

You can place a text box wherever you want on a Banner<\/p>\n

[button text=”Click me!”]<\/p>\n

[\/text_box]<\/p>\n

[\/ux_banner]<\/p>\n

[\/col]
\n[col span=”6″ span__sm=”12″ align=”center”]<\/p>\n

Banner Focus Point™<\/b><\/h2>\n

Set a focus point on the banner and the image will adjust to mobile a tablet screens. Perfect for resposnive Websites.<\/p>\n

[\/col]
\n[col span=”6″ span__sm=”12″]<\/p>\n

[ux_image id=”68″ image_size=”original”]<\/p>\n

[\/col]<\/p>\n

[\/row]
\n[title style=”center” text=”Banner Hover effects”]<\/p>\n

[row]<\/p>\n

[col span=”4″]<\/p>\n

[ux_banner height=”200px” bg=”69″ bg_size=”medium” bg_overlay=”rgba(22, 20, 16, 0.18)” hover=”glow”]<\/p>\n

[text_box width=”36″]<\/p>\n

Glow<\/h3>\n

[\/text_box]<\/p>\n

[\/ux_banner]<\/p>\n

[\/col]
\n[col span=”4″]<\/p>\n

[ux_banner height=”200px” bg=”69″ bg_size=”medium” bg_overlay=”rgba(22, 20, 16, 0.18)” hover=”zoom”]<\/p>\n

[text_box width=”36″]<\/p>\n

Zoom<\/h3>\n

[\/text_box]<\/p>\n

[\/ux_banner]<\/p>\n

[\/col]
\n[col span=”4″]<\/p>\n

[ux_banner height=”200px” bg=”69″ bg_size=”medium” bg_overlay=”rgba(22, 20, 16, 0.18)” hover=”zoom-fade”]<\/p>\n

[text_box width=”36″]<\/p>\n

Zoom Fade<\/h3>\n

[\/text_box]<\/p>\n

[\/ux_banner]<\/p>\n

[\/col]
\n[col span=”4″]<\/p>\n

[ux_banner height=”200px” bg=”69″ bg_size=”medium” bg_overlay=”rgba(22, 20, 16, 0.18)” hover=”blur”]<\/p>\n

[text_box width=”36″]<\/p>\n

Blur<\/h3>\n

[\/text_box]<\/p>\n

[\/ux_banner]<\/p>\n

[\/col]
\n[col span=”4″]<\/p>\n

[ux_banner height=”200px” bg=”69″ bg_size=”medium” bg_overlay=”rgba(22, 20, 16, 0.18)” hover=”fade-in”]<\/p>\n

[text_box width=”36″]<\/p>\n

Fade In<\/h3>\n

[\/text_box]<\/p>\n

[\/ux_banner]<\/p>\n

[\/col]
\n[col span=”4″]<\/p>\n

[ux_banner height=”200px” bg=”69″ bg_size=”medium” bg_overlay=”rgba(22, 20, 16, 0.18)” hover=”fade-out”]<\/p>\n

[text_box width=”36″]<\/p>\n

Fade Out<\/h3>\n

[\/text_box]<\/p>\n

[\/ux_banner]<\/p>\n

[\/col]
\n[col span=”4″]<\/p>\n

[ux_banner height=”200px” bg=”69″ bg_size=”medium” bg_overlay=”rgba(22, 20, 16, 0.18)” hover=”color”]<\/p>\n

[text_box width=”36″]<\/p>\n

Add Color<\/h3>\n

[\/text_box]<\/p>\n

[\/ux_banner]<\/p>\n

[\/col]
\n[col span=”4″]<\/p>\n

[ux_banner height=”200px” bg=”69″ bg_size=”medium” bg_overlay=”rgba(22, 20, 16, 0.18)” hover=”grayscale”]<\/p>\n

[text_box width=”36″]<\/p>\n

Grayscale<\/h3>\n

[\/text_box]<\/p>\n

[\/ux_banner]<\/p>\n

[\/col]
\n[col span=”4″]<\/p>\n

[ux_banner height=”200px” bg=”69″ bg_size=”medium” bg_overlay=”rgba(22, 20, 16, 0.18)” hover=”overlay-add”]<\/p>\n

[text_box width=”51″]<\/p>\n

Add Overlay<\/h3>\n

Overlay can be any color<\/span><\/p>\n

[\/text_box]<\/p>\n

[\/ux_banner]<\/p>\n

[\/col]<\/p>\n

[\/row]
\n[row]<\/p>\n

[col span__sm=”12″]<\/p>\n

You can also combine<\/strong> hover effects to create amazing hover effects<\/p>\n

[\/col]<\/p>\n

[\/row]
\n[row]<\/p>\n

[col span=”6″ span__sm=”12″]<\/p>\n

[ux_banner height=”200px” bg=”69″ bg_size=”medium” bg_overlay=”rgba(22, 20, 16, 0.18)” hover=”overlay-add” border=”3px 3px 3px 3px” border_margin=”10px 10px 10px 10px” border_hover=”zoom”]<\/p>\n

[text_box width=”51″]<\/p>\n

Add animated borders<\/strong><\/h3>\n

[\/text_box]<\/p>\n

[\/ux_banner]<\/p>\n

[\/col]
\n[col span=”6″ span__sm=”12″]<\/p>\n

[ux_banner height=”200px” bg=”69″ bg_size=”medium” bg_overlay=”rgba(22, 20, 16, 0.18)” hover=”overlay-add”]<\/p>\n

[text_box width=”51″]<\/p>\n

Add Overlay<\/h3>\n

Overlay can be any color<\/span><\/p>\n

[\/text_box]<\/p>\n

[\/ux_banner]<\/p>\n

[\/col]<\/p>\n

[\/row]
\n[ux_banner height=”500px” bg=”69″ parallax=”2″]<\/p>\n

[text_box width=”41″]<\/p>\n

BACKGROUND VIDEO<\/h2>\n

[\/text_box]<\/p>\n

[\/ux_banner]<\/p>\n","protected":false},"excerpt":{"rendered":"

[ux_slider] [ux_banner height=”700px” bg=”69″ bg_overlay=”rgba(0, 0, 0, 0.25)”] [text_box width=”51″ animate=”fadeInLeft” text_depth=”1″] Create Amazing Banners with Drag and Drop [divider] […]<\/p>\n","protected":false},"author":1,"featured_media":68,"parent":149,"menu_order":4,"comment_status":"closed","ping_status":"closed","template":"page-blank.php","meta":{"site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"class_list":["post-112","page","type-page","status-publish","has-post-thumbnail","hentry"],"_links":{"self":[{"href":"https:\/\/kb.lagonet.vn\/index.php?rest_route=\/wp\/v2\/pages\/112","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/kb.lagonet.vn\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/kb.lagonet.vn\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/kb.lagonet.vn\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/kb.lagonet.vn\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=112"}],"version-history":[{"count":0,"href":"https:\/\/kb.lagonet.vn\/index.php?rest_route=\/wp\/v2\/pages\/112\/revisions"}],"up":[{"embeddable":true,"href":"https:\/\/kb.lagonet.vn\/index.php?rest_route=\/wp\/v2\/pages\/149"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/kb.lagonet.vn\/index.php?rest_route=\/wp\/v2\/media\/68"}],"wp:attachment":[{"href":"https:\/\/kb.lagonet.vn\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=112"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}