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 purpose-built 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 plug-in 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 plug-in 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 initial and hover background color or image.

Example

								
									
										Call to Action 1. One huge Action Link!
									
								
							

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.

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 huge 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.

Example

								
									

										

											

												

													

														
Call to Action 3: Stylish with a huge action button
													
												
											
											

												
													
														Find out more