Call to Action Sections

Call to Action

Provoke a response from your users by using call to action section. Each of our templates come with three predesigned call to action sections that are defined by the class .call-to-action-X, where X represents the call to action section type (1-3) as shown below.

Note: call to action sections employ the Horizon plugin for animating call to action content once the section is in view. Simply add the .horizon class to the call to action content wrapper and the .data-animate-in attribute to determine how the content should enter as shown in the examples below. Read more on the Horizon plugin settings and animation attributes here.

Example
								
									
...
CSS For Retina Displays

For call to action sections that have a background image we serve a higher resolution background image by using the media queries below. Note: The CSS targeting below is just an example, refer to each individual feature section for exact CSS targeting.

								
									.call-to-action-X{
										background-image:url(../images/slider/call-to-action-bkg-image.jpg);
									}

									@media
									only screen and (-webkit-min-device-pixel-ratio: 2),
									only screen and (		min--moz-device-pixel-ratio: 2),
									only screen and (			-o-min-device-pixel-ratio: 2/1),
									only screen and (				min-device-pixel-ratio: 2),
									only screen and (					min-resolution: 192dpi),
									only screen and (						min-resolution: 2dppx) { 
											.call-to-action-X{
												background-image:url(../images/slider/[email protected]);
											}
									}
								
							

Call to Action Section One Updated

A full width call to action link. Target .call-to-action-1 a and .call-to-action-1 a:hover to set intial and hover background color or image.

call-to-action example 1
Example

Call to Action Section Two

A call to action section with action button. Target the .call-to-action-2 class to set background color or image.

call-to-action example 2
Example
								
									

Call to Action 2. Elegant and effective. Get Started with Timber Today!


Call to Action Section Three

A full width call to action section with gigantor action button. Target the .call-to-action-3 class to set background color or image. For button target the .call-to-action-3 .call-to-action-button .button class to set background color or alternatively use Timber background color classes.

call-to-action example 3
Example
								
									

Call to Action 3: Stylish with a gigantor action button