Shortcode
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 |
[section label="Hero 3 - Slider" class="hero-3-slider" padding="0px"] [ux_slider type="fade" nav_style="simple" bullet_style="dashes-spaced"] [ux_banner height="700px" height__sm="450px" height__md="550px" bg="https://www.flat.sebdelaweb.com/wp-content/uploads/2018/08/flatelements-hero-sample-male-with-had.jpg" bg_color="#2a2a2a" bg_overlay="rgba(0, 0, 0, 0.44)" bg_pos="61% 52%"] [text_box width="40" width__sm="70" scale="110" scale__sm="120" scale__md="110" position_x="15" position_y="20" text_align="left"] <p>Let's start a conversation</p> <h2>We help your business grow</h2> [button text="Get in touch"] [/text_box] [/ux_banner] [ux_banner height="700px" height__sm="450px" height__md="550px" bg="https://www.flat.sebdelaweb.com/wp-content/uploads/2018/08/flatelements-hero-sample-female-with-had.jpg" bg_color="#2a2a2a" bg_overlay="rgba(0, 0, 0, 0.44)" bg_pos="58% 35%"] [text_box width="40" width__sm="70" scale="110" scale__sm="120" scale__md="110" position_x="15" position_y="20" text_align="left"] <p>Let's start a conversation</p> <h2>We help your business grow</h2> [button text="Get in touch"] [/text_box] [/ux_banner] [/ux_slider] [/section] [section label="Hero 3 - Buttons" class="hero-3-buttons" padding="0px"] [row style="collapse" width="full-width"] [col span__sm="12" class="hero-3-buttons-col"] [row_inner style="collapse" col_style="solid" width="full-width"] [col_inner span="4" span__sm="12" span__md="12" color="light"] [ux_image_box style="overlay" image_height="180px" image_overlay="rgb(42, 42, 42)" image_hover="overlay-add" link="/" text_pos="middle"] [featured_box img="https://www.flat.sebdelaweb.com/wp-content/uploads/2018/08/user.png" pos="left" title="Book an" title_small="Appointment" link="/"] [gap height="1px"] [/featured_box] [/ux_image_box] [/col_inner] [col_inner span="4" span__sm="12" span__md="12" color="light"] [ux_image_box style="overlay" image_height="180px" image_overlay="rgb(42, 42, 42)" image_hover="overlay-add" link="#" text_pos="middle"] [featured_box img="https://www.flat.sebdelaweb.com/wp-content/uploads/2018/08/conversation.png" pos="left" title="Get a free" title_small="Consultation" link="#"] [gap height="1px"] [/featured_box] [/ux_image_box] [/col_inner] [col_inner span="4" span__sm="12" span__md="12" color="light"] [ux_image_box style="overlay" image_height="180px" image_overlay="rgb(42, 42, 42)" image_hover="overlay-add" link="/" text_pos="middle"] [featured_box img="https://www.flat.sebdelaweb.com/wp-content/uploads/2018/08/handshake.png" pos="left" title="Find your" title_small="Perfect match" link="/"] [gap height="1px"] [/featured_box] [/ux_image_box] [/col_inner] [/row_inner] [/col] [/row] [/section] |
CSS
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 |
/* HERO 3: Slider */ .hero-3-slider .flickity-page-dots { bottom: 210px; } .hero-3-slider .flickity-prev-next-button svg { top: 0px; } @media screen and (max-width: 849px) { .hero-3-slider .flickity-page-dots { bottom: 20px; } } /* HERO 3: Buttons */ .hero-3-buttons .row-solid .col:before { border-left: 1px solid #ddd; /* Border Settings: Left */ } .hero-3-buttons { z-index: 20; margin-top: -180px; border-top: 1px solid #ddd ; /* Border Settings: Top */ border-bottom: 1px solid #ddd ; /* Border Settings: Bottom */ } .hero-3-buttons .row-solid .col-inner { padding: 0px; } @media screen and (max-width: 849px) { .hero-3-buttons { margin-top: 0px; background:#2a2a2a; /* Background Buttons: Mobile */ } } .hero-3-buttons .image-cover img { display: none; visibility: hidden; } .hero-3-buttons .icon-box-text h6 { font-size: 150%; opacity:1; } .hero-3-buttons .box-overlay.dark .box-text { text-shadow:none; padding: 0; } .hero-3-buttons .box-text-inner { display: inline-block; margin-left: -10px; } @media screen and (max-width: 849px) { .hero-3-buttons .overlay { display: none; visibility: hidden; } } .hero-3-buttons .icon-box-left .icon-box-img+.icon-box-text { padding-left:30px; } |
