df-image-pg-top class to modify image at top of pages
Logo and Color
Project Color 1
Project Color 2
Project Color 3
Page Headline Color
Site Button Color
Site Button Hover
White Site Button Icon and Text
Site Icon Button and Text Hover
Link Color
Link Hover Color
Icon Color
Page Text Color
App Nav Button
App Nav Button Hover
White App Icon and Text
App Button Hover Text and Icon
Typography
Heading 1 Lorem ipsum dolor sit amet
Heading 2 Lorem ipsum dolor sit amet
Heading 3 Lorem ipsum dolor sit amet
Heading 4 Lorem ipsum dolor sit amet
Heading 5 Lorem ipsum dolor sit amet
Heading 6 Lorem ipsum dolor sit amet
Section - Masonry Card Grid
Re-usable part. Photos display properly on front end.
Uses a CSS grid, not columns. May need adjustment for various breakpoints.
Masonry Card Heading
Mauris blandit aliquet elit, eget tincidunt nibh pulvinar a. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed porttitor lectus nibh. Pellentesque in ipsum id orci porta dapibus. Vivamus magna justo, lacinia eget consectetur sed, convallis at tellus. Vivamus magna justo, lacinia eget consectetur sed, convallis at tellus. Sed porttitor lectus nibh.
Masonry Card Heading
Mauris blandit aliquet elit, eget tincidunt nibh pulvinar a. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed porttitor lectus nibh. Pellentesque in ipsum id orci porta dapibus. Vivamus magna justo, lacinia eget consectetur sed, convallis at tellus. Vivamus magna justo, lacinia eget consectetur sed, convallis at tellus. Sed porttitor lectus nibh.
Masonry Card Heading
Mauris blandit aliquet elit, eget tincidunt nibh pulvinar a. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed porttitor lectus nibh. Pellentesque in ipsum id orci porta dapibus.
Masonry Card Heading
Mauris blandit aliquet elit, eget tincidunt nibh pulvinar a. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed porttitor lectus nibh. Pellentesque in ipsum id orci porta dapibus.
Masonry Card Heading
Mauris blandit aliquet elit, eget tincidunt nibh pulvinar a. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed porttitor lectus nibh. Pellentesque in ipsum id orci porta dapibus.
Masonry Card Heading
Mauris blandit aliquet elit, eget tincidunt nibh pulvinar a. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed porttitor lectus nibh. Pellentesque in ipsum id orci porta dapibus.
The above pulls the city and phone number from the DF Client Sheet. The shortcode in the reuseable part may need to be modified if there are multiple locations. The shortcode being used by default is displayed below:
Icon List Style 1 Heading
Sed porttitor lectus nibh. Curabitur arcu erat, accumsan id imperdiet et, porttitor at sem. Cras ultricies ligula sed magna dictum porta. Cras ultricies ligula sed magna dictum porta. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec velit neque, auctor sit amet aliquam vel, ullamcorper sit amet ligula.
Proin eget tortor risus. Pellentesque in ipsum id orci porta dapibus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent sapien massa, convallis a pellentesque nec, egestas non nisi. Nulla porttitor accumsan tincidunt.
Icon List Style 2 Heading
Sed porttitor lectus nibh. Curabitur arcu erat, accumsan id imperdiet et, porttitor at sem. Cras ultricies ligula sed magna dictum porta. Cras ultricies ligula sed magna dictum porta. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec velit neque, auctor sit amet aliquam vel, ullamcorper sit amet ligula.
Proin eget tortor risus. Pellentesque in ipsum id orci porta dapibus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent sapien massa, convallis a pellentesque nec, egestas non nisi. Nulla porttitor accumsan tincidunt.
Superbox Grid - Re-usable part
Dental Service
This is a block of text. Double-click this text to edit it.
Dental Service
This is a block of text. Double-click this text to edit it.
Icon Box Example - Re-usable part
Feature list re-useable part example
df-box-shadow class
df-box-shadow assigned to images, logos and info boxes like this one throughout the site.
Not in use on:
- Top Page Images
Only adjust effects -> box shadow on the df-box-shadow class
Other adjustments should be made on the specific item ID class
Section - FAQ - reuseable part
Question Text ... ?
FAQ Answer text ... Curabitur non nulla sit amet nisl tempus convallis quis ac lectus. Proin eget tortor risus. Vestibulum ac diam sit amet quam vehicula elementum sed sit amet dui.
Question Text ... ?
FAQ Answer text ... Curabitur non nulla sit amet nisl tempus convallis quis ac lectus. Proin eget tortor risus. Vestibulum ac diam sit amet quam vehicula elementum sed sit amet dui.
Question Text ... ?
FAQ Answer text ... Curabitur non nulla sit amet nisl tempus convallis quis ac lectus. Proin eget tortor risus. Vestibulum ac diam sit amet quam vehicula elementum sed sit amet dui.
Question Text ... ?
FAQ Answer text ... Curabitur non nulla sit amet nisl tempus convallis quis ac lectus. Proin eget tortor risus. Vestibulum ac diam sit amet quam vehicula elementum sed sit amet dui.
Question Text ... ?
FAQ Answer text ... Curabitur non nulla sit amet nisl tempus convallis quis ac lectus. Proin eget tortor risus. Vestibulum ac diam sit amet quam vehicula elementum sed sit amet dui.
Question Text ... ?
FAQ Answer text ... Curabitur non nulla sit amet nisl tempus convallis quis ac lectus. Proin eget tortor risus. Vestibulum ac diam sit amet quam vehicula elementum sed sit amet dui.
Question Text ... ?
FAQ Answer text ... Curabitur non nulla sit amet nisl tempus convallis quis ac lectus. Proin eget tortor risus. Vestibulum ac diam sit amet quam vehicula elementum sed sit amet dui.
Question Text ... ?
FAQ Answer text ... Curabitur non nulla sit amet nisl tempus convallis quis ac lectus. Proin eget tortor risus. Vestibulum ac diam sit amet quam vehicula elementum sed sit amet dui.
Question Text ... ?
FAQ Answer text ... Curabitur non nulla sit amet nisl tempus convallis quis ac lectus. Proin eget tortor risus. Vestibulum ac diam sit amet quam vehicula elementum sed sit amet dui.
Question Text ... ?
FAQ Answer text ... Curabitur non nulla sit amet nisl tempus convallis quis ac lectus. Proin eget tortor risus. Vestibulum ac diam sit amet quam vehicula elementum sed sit amet dui.
Frequently Asked Questions
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
class df-section-1-background
class df-section-2-background
class df-section-3-background
The above CTA should primarily be modified using the DF Client Sheet for the Meta Data Details section near the bottom of the client sheet. The "Meta Data Area" should be the area or areas served and the "Meta Data Area Served" should typically be _area_ or _areas_ depending on if a single or multiple areas apply. In some cases the shortcode in the reuseable part may need to be modified, but only if changes beyond what can be done in the DF Client sheet are needed. The Meta fields are also used for Meta Descriptions on each page, so be sure any changes to the client sheet work properly for those as well. The shortcode being used by default is shown below: