Banners

[vc_row no_padding=“yes“ el_class=“mt-5 pt-5″][vc_column]

Entrance Effect for Entire and Individuals
Now we provide lots of animations in banner and other elements. It makes your site more beautiful than ever before. Please purchase Porto without hesitation.
home slide
home slide
[/vc_column][/vc_row][vc_row content_placement=“middle“ wrap_container=“yes“ css=“.vc_custom_1620693210912{padding-top: 120px !important;padding-bottom: 80px !important;background-color: #f7f7f7 !important;}“][vc_column width=“5/12″]

Banner Features

With the Porto, you can design stunning banner without any coding knowledge. Porto gives you ability to make better design than the other sites. Please try! More people will visit your site, because Porto is wonderful.
[vc_btn title=“Below Example“ shape=“rounded“ size=“xl“ skin=“dark“ animation_delay=“500″ link=“url:%23example“ animation_type=“fadeInUp“ el_class=“hash-scroll-wrap“][/vc_column][vc_column width=“7/12″][vc_single_image image=“3247″ img_size=“full“ alignment=“center“ style=“vc_box_rounded“ floating_start_pos=“none“ floating_speed=“9.8″ floating_duration=“1000″ el_class=“mb-0 custom-feature-shadow“][vc_single_image image=“3248″ img_size=“full“ style=“vc_box_rounded“ floating_start_pos=“bottom“ floating_speed=“9.6″ el_class=“position-absolute custom-img-pos-1 mb-0 custom-feature-shadow“ floating_duration=“1000″][/vc_column][/vc_row][vc_row no_padding=“yes“ el_id=“example“][vc_column]
Background KenBurns Effect
Here, you can see Kenburns effect. It adds perspective effect to your banner.
A lot of Hover Effects
There are many hover effects as you can see below. Please choose any effect to suit your need.
[vc_row_inner wrap_container=“yes“][vc_column_inner width=“1/3″ offset=“vc_col-xs-6″]
slide
[/vc_column_inner][vc_column_inner width=“1/3″ offset=“vc_col-xs-6″]
slide
[/vc_column_inner][vc_column_inner width=“1/3″ offset=“vc_col-xs-6″]
slide
[/vc_column_inner][vc_column_inner width=“1/3″ offset=“vc_col-xs-6″]
slide
[/vc_column_inner][vc_column_inner width=“1/3″ offset=“vc_col-xs-6″]
slide
[/vc_column_inner][vc_column_inner width=“1/3″ offset=“vc_col-xs-6″]
slide
[/vc_column_inner][vc_column_inner width=“1/3″ offset=“vc_col-xs-6″]
slide
[/vc_column_inner][vc_column_inner width=“1/3″ offset=“vc_col-xs-6″]
slide
[/vc_column_inner][vc_column_inner width=“1/3″ offset=“vc_col-xs-6″]
slide
[/vc_column_inner][/vc_row_inner][/vc_column][/vc_row][vc_row no_padding=“yes“ el_class=“home-banner-slider“][vc_column]
Niche Particle Effects
Snow and Sparkle effects, only you click once.
slide
slide
[/vc_column][/vc_row][vc_row content_placement=“middle“ wrap_container=“yes“ css=“.vc_custom_1620709960716{background-color: #f4f4f4 !important;}“ el_class=“p-t-xxl p-b-xxl“][vc_column offset=“vc_col-md-8″ el_class=“mx-auto“]
Use One layer Banner in Elementor
Easy to use. It reduces DOM nodes extremely. DOM optimization increases Google PageSpeed Insights of your site to 100. Please try.
[/vc_column][vc_column offset=“vc_col-md-8″ el_class=“mb-4 mb-lg-0″][vc_single_image image=“3328″ img_size=“full“ alignment=“center“ animation_delay=“300″ el_class=“mb-0″ animation_type=“fadeIn“][/vc_column][vc_column offset=“vc_col-md-4″]

Use it for optimization

Elementor is #1 WordPress page builder which is proved its 5,000,000+ people. But it has a important disadvantage. Lots of dom elements have influenced speed. One-Layer Banner solves this problem.
[/vc_column][/vc_row][vc_row wrap_container=“yes“ el_class=“m-b-xxl“][vc_column]
Video Banner
[/vc_column][vc_column]
Element Options Glossary
This element gives you style options and content options that are unique and will stand out from the rest of the site. Please try! Each option works smoothly, perfectly and well.
[/vc_column][vc_column width=“1/2″ el_class=“mb-4 mb-md-0″]
[vc_custom_heading text=“Banner Options“ font_container=“tag:h3|text_align:left“ use_theme_fonts=“yes“ font_weight=“700″]
  • Banner Image – Choose an image from media library.
  • Video Banner Url – Url for the video banner.
  • Background Color – Placeholder background color instead of image.
  • Link – The destination link for the banner.
  • Min Height – Min height of this banner.
  • Add Container – If banner is full width, you can add container in banner.
  • Parallax – Set parallax property.
  • Banner Effect – You can give Kenburns Effect to banner. It gives perspective effect.
  • Banner Effect Duration – Kenburns Effect duration. Mostly gives 30s.
  • Particle Effect – Niche effect. It makes to feel actually. In here you can see snow and sparkle effect.
  • Hover Effect – There are many hover effects. E.g zoom, fade in, fade out and so on.
  • Extra class name – Add your custom class without the dot. e.g: my-class
[/vc_column][vc_column width=“1/2″]
[vc_custom_heading text=“Banner Layer Options“ font_container=“tag:h3|text_align:left“ use_theme_fonts=“yes“ font_weight=“700″]
  • Width – The Width of layer. e.g: 50%, 100px, 100rem, 50vw, etc.
  • Height – The height of layer. e.g: 50%, 100px, 100rem, 50vw, etc.
  • Horizontal Position – 50 is center, 0 is left and 100 is right.
  • Vertical Position – 50 is middle, 0 is top and 100 is bottom.
  • Animation Type – Give animation-name to banner layer.
  • Animation Duration – Duration of animation. numerical value (unit: milliseconds)
  • Animation Delay – Delay of animation.
  • Extra class name – Add your custom class without the dot. e.g: my-class
[/vc_column][/vc_row]