3 CTA with Hover

Type Picture Description here

HEADING

Text

test

Type picture description here

HEADING

Text

Type picture description here

HEADING

Text


Below you will find the HTML mark up for this snippet, I have broken this down into small pieces you can edit:
1. <a href="#"> Place your link between the quotation marks. If you are using an external link (directing to a different website), add target="_blank" behind the last quotation mark (in bold).


2.<div style="background-color: #cfcfcf;" class="column -width-1/3 -width-1/3@lg -width-1/3@md -width-1/2@sm -width-1/1@xs">

The above line controls the background color of the box, you can use Hex color codes in this area: style="background-color: ADD HEX CODE HERE;"

You will also see the Column widths, 1/3 means you will have 3 rows, you can change this to increase or decrease the number of columns. 


3.<p><img style="opacity:.5" src="/uploads/agent-1/lightning-icon.png" onMouseover="this.style.opacity=1" onMouseout="this.style.opacity=.5" width="100%" alt="Type Picture Description here"></p></a>

The above line is where you would add your image, ignore the mouseover and opacity options (this makes the box change color when you hover your mouse over the image). To add your image locate src and place your image source between the quotations. Under alt make sure to type a brief description of your image, this is for accessibility and will help with SEO.

4.<h3 style="color: black;"><strong>HEADING</strong></h3>

The above line is responsible for the header under the image, you can use h1 through h5 for different sizes of headers. the <strong> element will bold the word placed between the opening and closing elements (see above). The style class is responsible for the text color, above you can see that it is labelled as black, you can also use hex colors in this area.


5. <p style="color: black; padding: 0px 10px 0px 10px;">Text</p>

The above HTML shows that this is where you can type your paragraph text. Within the first <p> you will see the style element which allows you to change the text color, and then also the margins for the text (0px 10px 0px 10px;), you can start type where you see the word 'text'.
6. <p style="text-align: center;"><a href="#"></a></p>

Above you will see another p element, this has a style tag that indicates the text will be centered (you can use left, right, center). and again you will see a new href tag, you can add the link again here if you wish. Type between the </a> and</p> tags and your text will become highlighted and a hyper link to your new page destination.
7. </div>

The above </div> closes the column.


VENDOR CTA


Heading 2

Paragraph Text goes here

Button

ABOUT CTA

#about-cta#

SEARCH OPTIONS CTA


BLOG POSTS

Living with Libby

Stay a while as you explore what I love, renovate, design and appreciate from my back yard to around the world!

Testimonials

See what my past clients have to say


Testimonials

See what my past clients have to say  




MODULE SNIPPETS

RSS READER

This snippet will show the most recent blog posts you have entered into the blog section of your website.

Latest From Our Blog...

Welcome to your real estate blog!

your First Blog Post Before you get started make sure to update your blog's title, metadata and hero image. You can find these... Read More


TESTIMONIALS

You can add client testimonials by visiting Content -> Tools -> testimonials. Place the snippet on any page you would like the testimonials to appear. This snippet is locked and we cannot edit it without a custom project, it is designed to be a round-robin, every time you refresh the page a different testimonial will appear near the top.

Testimonial

You access this item in the testimonials manager.

You can get there by logging into the /backend, selecting content from the 3 line menu, then click on "tools" on the left-hand side, select "Testimonials".  You can also click the big blue '+ Add New' button and choose 'Testimonial'. 

Use the WYSIWYG editor to add testimonials and rave reviews you've received from your clients. This featured is designed to show a new testimonial at the top of the page each time it is loaded. 

Stock Content

OFFICES

You can add your office location and pictures to this snippet by navigating to the Company module and then selecting Offices from the left menu. Anything you enter into this area will be displayed on pages using the offices snippet.

No Offices Found


MORTGAGE CALCULATOR

*This snippet will show you a basic mortgage calculator.

Payment Calculator

This mortgage calculator can be used to figure out monthly payments of a home mortgage loan, based on the home's sale price, the term of the loan desired, buyer's down payment percentage, and the loan's interest rate.

FEATURED OFFICES

If you have more then 1 office, you can use this snippet to display your first 2 offices.

No Offices Found


FEATURED COMMUNITIES

This will display your top 4 communities, the top 4 communities you enter into the communities module will appear here.


FEATURED AGENTS

This will show you, 4 agents, at a time, when a user refreshes the page new agents will load.


ENHANCED LISTINGS

You can enhance listings directly from your IDX feed, this can be done by visiting Listings and selecting enhanced from the left menu. Any listing you enhance will also be displayed by using this snippet on any content page. Listings that are enhanced will also be searchable through the IDX search and will have a small banner to indicate you've added something new to the listing.

Sort by:

AGENTS

This snippet will show you all of the agents you have entered into the Company module.


Content Formatting Test

Call To Action Communities

The above snippet is an easy way to add communities or organize links.

UI Style Guide

The below snippet will show you the types of button classes and highlights available for use.

Buttons

Notices

Hello World
Hello World
Hello World
Hello World

Heading 1

Heading 2

Heading 3

  • List Item 1
  • List Item 2
  • List Item 3
  1. List Item 1
  2. List Item 2
  3. List Item 3

Blockquote: Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus lorem. Aliquam erat volutpat. Aliquam sit amet massa. Phasellus non risus ut felis tincidunt vehicula. Proin mattis accumsan dolor.

Paragraph with class="highlight". Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus lorem. Aliquam erat volutpat. Aliquam sit amet massa. Phasellus non risus ut felis tincidunt vehicula. Proin mattis accumsan dolor.

You can also use a DIV with class="highlight" and put multiple paragraphs in it. (Or images, or whatever...)

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus lorem. Aliquam erat volutpat. Aliquam sit amet massa. Phasellus non risus ut felis tincidunt vehicula. Proin mattis accumsan dolor.

Paragraph with class="important". Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus lorem. Aliquam erat volutpat. Aliquam sit amet massa. Phasellus non risus ut felis tincidunt vehicula. Proin mattis accumsan dolor.

You can also use a DIV with class="important" and put multiple paragraphs in it. (Or images, or whatever...)

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus lorem. Aliquam erat volutpat. Aliquam sit amet massa. Phasellus non risus ut felis tincidunt vehicula. Proin mattis accumsan dolor.

Footnote: Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus lorem.