[porto_carousel stage_padding=”0″ margin=”0″ show_nav=”yes” show_nav_hover=”yes” nav_pos=”nav-pos-inside” nav_type=”nav-style-4″ items=”1″ items_lg=”1″ items_md=”1″ items_sm=”1″ items_xs=”1″ el_class=”home-banner-slider mb-0″][porto_interactive_banner banner_image=”3157″ add_container=”yes” image_opacity=”1″ image_opacity_on_hover=”1″ banner_color_bg=”#d8dce5″ min_height=”36rem” el_class=”mb-0″][porto_interactive_banner_layer horizontal=”0″ vertical=”50″ el_class=”text-right” animation_type=”fadeInLeft”]
Find the Boundaries. Push Through!
Sunglasses
Starting At
$9999
[/porto_interactive_banner_layer][/porto_interactive_banner][porto_interactive_banner banner_image=”3158″ add_container=”yes” image_opacity=”1″ image_opacity_on_hover=”1″ banner_color_bg=”#d8dce5″ min_height=”36rem” el_class=”mb-0″][porto_interactive_banner_layer horizontal=”91″ vertical=”50″ el_class=”text-right pr-xl-5″]Take Your Chill Up a Level
Casual Wear
Starting At
$9999
[/porto_interactive_banner_layer][/porto_interactive_banner][/porto_carousel][porto_ultimate_heading main_heading=”Banner Features” alignment=”left” spacer=”line_only” spacer_position=”middle” line_height=”6″ line_color=”#0088cc” animation_delay=”300″ main_heading_porto_typography=”{“family“:“Poppins“,“variant“:“700“,“font_size“:“3rem“,“line_height“:“1“,“letter_spacing“:“-1.2px“,“text_transform“:“none“}” sub_heading_porto_typography=”{“family“:“Lora“,“variant“:“Default“,“font_size“:“16px“,“line_height“:““,“letter_spacing“:““,“text_transform“:“none“}” line_width=”120″ main_heading_margin_bottom=”20″ spacer_margin_bottom=”30″ animation_type=”fadeInUp”][/porto_ultimate_heading][porto_ultimate_heading main_heading=”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.” enable_typewriter=”yes” typewriter_delay=”600″ heading_tag=”div” alignment=”left” main_heading_porto_typography=”{“family“:“Lora“,“variant“:“Default“,“font_size“:“16px“,“line_height“:““,“letter_spacing“:““,“text_transform“:“none“}” el_class=”m-b-lg”][/porto_ultimate_heading]
[porto_ultimate_heading sub_heading_color=”#212529″ animation_delay=”500″ animation_type=”fadeInUp” sub_heading_porto_typography=”{“family“:“Poppins“,“variant“:“700“,“font_size“:“32px“,“line_height“:“1.2“,“letter_spacing“:“-1px“,“text_transform“:“none“}” el_class=”p-t-xxl px-4″]Background KenBurns Effect[/porto_ultimate_heading][porto_ultimate_heading heading_tag=”div” animation_delay=”700″ sub_heading_porto_typography=”{“family“:“Lora“,“variant“:“Default“,“font_size“:“15.4px“,“line_height“:““,“letter_spacing“:““,“text_transform“:“none“}” animation_type=”fadeInUp” el_class=”mb-4 mw-750 mx-auto px-4″]Here, you can see Kenburns effect. It adds perspective effect to your banner.[/porto_ultimate_heading][porto_interactive_banner banner_image=”3169″ add_container=”yes” banner_effect=”kenBurnsToRight” image_opacity=”1″ image_opacity_on_hover=”1″ min_height=”400px” el_class=”mb-0 custom-banner-1″][porto_interactive_banner_layer horizontal=”0″ vertical=”” el_class=”custom-style-1″]
[/porto_interactive_banner_layer][porto_interactive_banner_layer horizontal=”0″ vertical=”50″ el_class=”custom-style-2″][porto_ultimate_heading main_heading=”Mechanics Who Are Ready To Work For You” main_heading_color=”#969696″ heading_tag=”h4″ alignment=”left” animation_delay=”800″ main_heading_porto_typography=”{“family“:“Poppins“,“variant“:“700“,“font_size“:“1.35em“,“line_height“:“1.7“,“letter_spacing“:“-0.945px“,“text_transform“:“none“}” animation_type=”fadeInUp”][/porto_ultimate_heading][porto_ultimate_heading main_heading=”Reliable And Knowledgeable Mechanics Locate In Los Angeles, CA” heading_tag=”h3″ alignment=”left” animation_delay=”1100″ main_heading_porto_typography=”{“family“:“Poppins“,“variant“:“700“,“font_size“:“2.3em“,“line_height“:“44px“,“letter_spacing“:“-1.61px“,“text_transform“:“none“}” animation_type=”fadeInUp”][/porto_ultimate_heading][/porto_interactive_banner_layer][/porto_interactive_banner][porto_ultimate_heading sub_heading_color=”#212529″ animation_delay=”500″ animation_type=”fadeInUp” sub_heading_porto_typography=”{“family“:“Poppins“,“variant“:“700“,“font_size“:“32px“,“line_height“:“1.2“,“letter_spacing“:“-1px“,“text_transform“:“none“}” el_class=”p-t-xxl px-4″]A lot of Hover Effects[/porto_ultimate_heading][porto_ultimate_heading heading_tag=”div” animation_delay=”700″ sub_heading_porto_typography=”{“family“:“Lora“,“variant“:“Default“,“font_size“:“15.4px“,“line_height“:““,“letter_spacing“:““,“text_transform“:“none“}” animation_type=”fadeInUp” el_class=”mb-4 mw-750 mx-auto px-4″]There are many hover effects as you can see below. Please choose any effect to suit your need.[/porto_ultimate_heading]
[porto_interactive_banner banner_image=”3218″ banner_style=”effect-1″ image_opacity=”1″ image_opacity_on_hover=”1″ banner_color_bg=”#2b2b2b”][porto_interactive_banner_layer horizontal=”50″ vertical=”50″]
Effect 1
[/porto_interactive_banner_layer][/porto_interactive_banner][porto_interactive_banner banner_image=”3218″ banner_style=”zoom” image_opacity=”1″ image_opacity_on_hover=”0.8″ banner_color_bg=”#2b2b2b”][porto_interactive_banner_layer horizontal=”50″ vertical=”50″ width=”80%” el_class=”text-center”]
Opacity and Zoom
[/porto_interactive_banner_layer][/porto_interactive_banner][porto_interactive_banner banner_image=”3218″ banner_style=”effect-3″ image_opacity=”1″ image_opacity_on_hover=”1″ banner_color_bg=”#2b2b2b”][porto_interactive_banner_layer horizontal=”50″ vertical=”50″]
Effect 3
[/porto_interactive_banner_layer][/porto_interactive_banner][porto_interactive_banner banner_image=”3218″ banner_style=”zoom” image_opacity=”1″ image_opacity_on_hover=”1″ banner_color_bg=”#2b2b2b” el_class=”custom-hover-1 custom-hover-feature”][porto_interactive_banner_layer horizontal=”50″ vertical=”50″]
Zoom
[/porto_interactive_banner_layer][/porto_interactive_banner][porto_interactive_banner banner_image=”3218″ banner_style=”fadein” image_opacity=”1″ image_opacity_on_hover=”1″ banner_color_bg=”#2b2b2b” el_class=”custom-hover-1 custom-hover-fadein”][porto_interactive_banner_layer horizontal=”50″ vertical=”50″ width=”80%”]
Content Fade In
[/porto_interactive_banner_layer][/porto_interactive_banner][porto_interactive_banner banner_image=”3218″ banner_style=”overlay” overlay_opacity=”0.1″ image_opacity=”1″ image_opacity_on_hover=”1″ banner_color_bg=”#2b2b2b” overlay_color=”#fff”][porto_interactive_banner_layer horizontal=”50″ vertical=”50″]
Overlay
[/porto_interactive_banner_layer][/porto_interactive_banner][porto_interactive_banner banner_image=”3218″ banner_style=”effect-2″ image_opacity=”1″ image_opacity_on_hover=”1″ banner_color_bg=”#2b2b2b”][porto_interactive_banner_layer horizontal=”50″ vertical=”50″]
Effect 2
[/porto_interactive_banner_layer][/porto_interactive_banner][porto_interactive_banner banner_image=”3218″ banner_style=”fadeout” image_opacity=”1″ image_opacity_on_hover=”1″ banner_color_bg=”#2b2b2b” el_class=”custom-hover-1 custom-hover-fadeout”][porto_interactive_banner_layer horizontal=”50″ vertical=”50″ width=”80%”]
Content Fade Out
[/porto_interactive_banner_layer][/porto_interactive_banner][porto_interactive_banner banner_image=”3218″ banner_style=”effect-4″ image_opacity=”1″ image_opacity_on_hover=”1″ banner_color_bg=”#2b2b2b”][porto_interactive_banner_layer horizontal=”50″ vertical=”50″]
Effect 4
[/porto_interactive_banner_layer][/porto_interactive_banner][porto_ultimate_heading sub_heading_color=”#212529″ animation_delay=”500″ animation_type=”fadeInUp” sub_heading_porto_typography=”{“family“:“Poppins“,“variant“:“700“,“font_size“:“32px“,“line_height“:“1.2“,“letter_spacing“:“-1px“,“text_transform“:“none“}”]Use One layer Banner in Elementor[/porto_ultimate_heading][porto_ultimate_heading heading_tag=”div” animation_delay=”700″ sub_heading_porto_typography=”{“family“:“Lora“,“variant“:“Default“,“font_size“:“15.4px“,“line_height“:““,“letter_spacing“:““,“text_transform“:“none“}” animation_type=”fadeInUp” el_class=”mb-4 mw-750 mx-auto”]Easy to use. It reduces DOM nodes extremely. DOM optimization increases Google PageSpeed Insights of your site to 100. Please try.[/porto_ultimate_heading]
[porto_ultimate_heading main_heading=”Use it for optimization” heading_tag=”h3″ alignment=”left” animation_delay=”900″ main_heading_porto_typography=”{“family“:“Poppins“,“variant“:“700“,“font_size“:““,“line_height“:““,“letter_spacing“:““,“text_transform“:“none“}” sub_heading_porto_typography=”{“family“:“Lora“,“variant“:“Default“,“font_size“:““,“line_height“:““,“letter_spacing“:““,“text_transform“:“none“}” animation_type=”fadeInUp” main_heading_margin_bottom=”18″]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.[/porto_ultimate_heading]
[porto_ultimate_heading sub_heading_color=”#212529″ animation_delay=”500″ animation_type=”fadeInUp” sub_heading_porto_typography=”{“family“:“Poppins“,“variant“:“700“,“font_size“:“32px“,“line_height“:“1.2“,“letter_spacing“:“-1px“,“text_transform“:“none“}” el_class=”p-t-xxl mb-4″]Video Banner[/porto_ultimate_heading][porto_interactive_banner image_opacity=”1″ image_opacity_on_hover=”1″ animation_delay=”400″ min_height=”400px” banner_video=”https://www.portotheme.com/wordpress/porto/wp-content/uploads/videos/landing.mp4″ parallax=”1.5″ animation_type=”fadeIn”][/porto_interactive_banner]
[porto_ultimate_heading sub_heading_color=”#212529″ animation_delay=”500″ animation_type=”fadeInUp” sub_heading_porto_typography=”{“family“:“Poppins“,“variant“:“700“,“font_size“:“32px“,“line_height“:“1.2“,“letter_spacing“:“-1px“,“text_transform“:“none“}” el_class=”p-t-xxl”]Element Options Glossary[/porto_ultimate_heading][porto_ultimate_heading heading_tag=”div” animation_delay=”700″ sub_heading_porto_typography=”{“family“:“Lora“,“variant“:“Default“,“font_size“:“15.4px“,“line_height“:““,“letter_spacing“:““,“text_transform“:“none“}” animation_type=”fadeInUp” el_class=”mb-4 mw-750 mx-auto”]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.[/porto_ultimate_heading]
[porto_ultimate_content_box box_shadow=”horizontal:px|vertical:px|blur:px|spread:px|style:none|” el_class=”p-lg-5 p-4 bg-grey” hover_box_shadow=”horizontal:px|vertical:px|blur:px|spread:px|style:inherit|”]
Banner Options
[porto_info_list icon_color=”#0088cc” el_class=”custom-option”][porto_info_list_item list_icon=”fas fa-check”]Banner Image – Choose an image from media library.[/porto_info_list_item][porto_info_list_item list_icon=”fas fa-check”]Video Banner Url – Url for the video banner.[/porto_info_list_item][porto_info_list_item list_icon=”fas fa-check”]Background Color – Placeholder background color instead of image.[/porto_info_list_item][porto_info_list_item list_icon=”fas fa-check”]Link – The destination link for the banner.[/porto_info_list_item][porto_info_list_item list_icon=”fas fa-check”]Min Height – Min height of this banner.[/porto_info_list_item][porto_info_list_item list_icon=”fas fa-check”]Add Container – If banner is full width, you can add container in banner.[/porto_info_list_item][porto_info_list_item list_icon=”fas fa-check”]Parallax – Set parallax property.[/porto_info_list_item][porto_info_list_item list_icon=”fas fa-check”]Banner Effect – You can give Kenburns Effect to banner. It gives perspective effect.[/porto_info_list_item][porto_info_list_item list_icon=”fas fa-check”]Banner Effect Duration – Kenburns Effect duration. Mostly gives 30s.[/porto_info_list_item][porto_info_list_item list_icon=”fas fa-check”]Particle Effect – Niche effect. It makes to feel actually. In here you can see snow and sparkle effect.[/porto_info_list_item][porto_info_list_item list_icon=”fas fa-check”]Hover Effect – There are many hover effects. E.g zoom, fade in, fade out and so on.[/porto_info_list_item][porto_info_list_item list_icon=”fas fa-check”]Extra class name – Add your custom class without the dot. e.g: my-class[/porto_info_list_item][/porto_info_list][/porto_ultimate_content_box][porto_ultimate_content_box box_shadow=”horizontal:px|vertical:px|blur:px|spread:px|style:none|” el_class=”p-lg-5 p-4 bg-grey” hover_box_shadow=”horizontal:px|vertical:px|blur:px|spread:px|style:inherit|”]