CTA: Contact Options

Scroll to shortcode

Get in touch by selecting an option

Volutpat egestas nibh rhoncus mauris semper.

+1 800 123 456
hello@yourcompany.com

Shortcode

[section label="*CTA: Contact Options" bg_color="rgb(248, 246, 244)" padding="46px" padding__md="22px" class="cta-contact-options"]
[gap height="50px"]
[row]
[col span__sm="12"]
[row_inner style="collapse" width="custom" custom_width="612px"]
[col_inner span__sm="12" span__md="12" margin="0px 0px 72px 0px" margin__md="0px 0px 48px 0px" align="center"]
<h3 class="heading">Get in touch by selecting an option</h3>
<p class="no-margin">Volutpat egestas nibh rhoncus mauris semper.</p>
[/col_inner]
[col_inner span__sm="12"]
[row_inner_1 style="small"]
[col_inner_1 span__sm="12"]
[button text="Schedule appointment" letter_case="lowercase" padding="16px 24px 16px 24px" expand="true" link="#" class="no-margin"]
[/col_inner_1]
[col_inner_1 span="6" span__sm="12" align="center" bg_color="rgb(255,255,255)" bg_radius="8" border="1px 1px 1px 1px" border_radius="8" border_color="rgb(235, 235, 236)" class="card-hover"]
[featured_box img="4179" inline_svg="0" img_width="72" pos="center" icon_border="1" icon_color="rgb(57, 35, 150)" link="tel:+1800123456" class="icon-link first"]
[ux_text text_align="center"]
<h5 class="no-margin">+1 800 123 456</h5>
[/ux_text]
[/featured_box]
[/col_inner_1]
[col_inner_1 span="6" span__sm="12" align="center" bg_color="rgb(255,255,255)" bg_radius="8" border="1px 1px 1px 1px" border_radius="8" border_color="rgb(235, 235, 236)" class="card-hover"]
[featured_box img="4178" inline_svg="0" img_width="72" pos="center" icon_border="1" icon_color="rgb(255, 216, 3)" link="mailto:hello@yourcompany.com" class="icon-link second"]
[ux_text text_align="center"]
<h5 class="no-margin">hello@yourcompany.com</h5>
[/ux_text]
[/featured_box]
[/col_inner_1]
[/row_inner_1]
[/col_inner]
[/row_inner]
[/col]
[/row]
[/section]

CSS

/*---------- CTA: Contact Options ----------*/
.cta-contact-options h3.heading {
  font-size: 350%; /* 56px */
  line-height: 1.1;
}
.cta-contact-options .icon-box.icon-link {
  padding: 24px;
}
.cta-contact-options .icon-box.icon-link.first .icon-inner {
  background: #392396; /* First option background color */
}
.cta-contact-options .icon-box.icon-link.second .icon-inner {
  background: #ffd803; /* Second option background color */
}
.cta-contact-options .card-hover .col-inner {
  transition: all 200ms ease;
}
.cta-contact-options .card-hover .col-inner:hover {
  box-shadow: 0 4px 6px 0 rgb(0 0 0 / 10%);
  -webkit-transform: translate(0px, -6px);
  -ms-transform: translate(0px, -6px);
  transform: translate(0px, -6px);
}
@media screen and (max-width:549px) {
  .cta-contact-options h3.heading {
    font-size: 200%; /* 32px */
    line-height: 1.2;
  }
}

How to use Flatresources

Using Flatresources with your Flatsome website is easy as a breeze.

First, copy the provided Shortcode and paste it to the text page editor or directly to the UX Builder.

1. Copy and paste the Shortcode

Copying the Shortcode
Pasting the Shortcode using UX Builder import function
Pasting the Shortcode to the page text editor

2. Add the custom CSS code

Second, copy the CSS code (if provided) and paste it into your project to achieve the desired appearance.

There are multiple methods of adding and updating CSS code in WordPress, so let's look at each one of them.

Using a plugin (Simple Custom CSS and JS PRO)

This is our preferred method because it allows you to create multiple stylesheets to keep things neat and tidy. If you upgrade to the paid license, you will be able to apply the CSS code only to selected URLs, keep track of revisions, and much more.

Adding CSS using the Simple Custom CSS and JS plugin
WordPress Additional CSS

Appearance → Customize → Additional CSS

Adding CSS using the WordPress Additional CSS
Flatsome Custom CSS

Flatsome → Advanced → Custom CSS

Adding CSS using Flatsome Custom CSS
Theme style.css

Appearance → Theme Editor → style.css

Adding CSS using theme Stylesheet