Design Specifications

Leaf Dark Dental

uabb-device-desktop

View template homepage in NEW One Drive

Customer Facing Example Site

Search and Replace
Grey 4c4c4c

Headings Font:
Raleway Extra Bold Uppercase

Text Font:
Raleway Normal

Scrolling Row Button

NOTE: The text column settings will need to be adjusted to 46.

New Patient Special Offer

/// {type:button} Thu Jul 28 2022 ///
{"text":"New Patient Special Offer","icon":"fas fa-angle-double-right","icon_position":"after","icon_animation":"disable","click_action":"link","link":"/special/","lightbox_content_type":"html","lightbox_content_html":"","lightbox_video_link":"","width":"auto","custom_width":"200","align":"right","text_color":"202020","text_hover_color":"ffffff","typography":{"font_family":"Default","font_weight":"700","font_size":{"length":"18","unit":"px"},"line_height":{"length":"","unit":""},"text_align":"","letter_spacing":{"length":".2"},"text_transform":"uppercase","text_decoration":"","font_style":"","font_variant":"","text_shadow":{"color":"","horizontal":"","vertical":"","blur":""}},"duo_color1":"","duo_color2":"","bg_color":"ffae00","bg_hover_color":"4c4c4c","style":"flat","button_transition":"disable","border":{"style":"","color":"","width":{"top":"","right":"","bottom":"","left":""},"radius":{"top_left":"0","top_right":"0","bottom_left":"0","bottom_right":"0"},"shadow":{"color":"","horizontal":"","vertical":"","blur":"","spread":""}},"border_hover_color":"","responsive_display":"","visibility_display":"","visibility_user_capability":"","visibility_logic":"[]","zindex":"","animation":{"style":"","delay":"0","duration":"1"},"container_element":"div","id":"","class":"","node_label":"","export":"","import":"","connections":{"text":"","link":"","lightbox_content_html":"","lightbox_video_link":"","text_color":"","text_hover_color":"","bg_color":"","bg_hover_color":"","border_hover_color":""},"link_target":"_self","link_nofollow":"no","link_download":"","link-search":"","custom_width_unit":"px","align_medium":"","align_responsive":"center","padding_top":"","padding_right":"","padding_bottom":"","padding_left":"","padding_top_medium":"","padding_right_medium":"","padding_bottom_medium":"","padding_left_medium":"","padding_top_responsive":"","padding_right_responsive":"","padding_bottom_responsive":"","padding_left_responsive":"","typography_medium":{"font_size":{"length":"15","unit":"px"},"line_height":{"length":"","unit":""},"text_align":"","letter_spacing":{"length":""},"text_transform":"","text_decoration":"","font_style":"","font_variant":"","text_shadow":{"color":"","horizontal":"","vertical":"","blur":""}},"typography_responsive":{"font_size":{"length":"","unit":"px"},"line_height":{"length":"","unit":""},"text_align":"","letter_spacing":{"length":""},"text_transform":"","text_decoration":"","font_style":"","font_variant":"","text_shadow":{"color":"","horizontal":"","vertical":"","blur":""}},"border_medium":{"style":"","color":"","width":{"top":"","right":"","bottom":"","left":""},"radius":{"top_left":"","top_right":"","bottom_left":"","bottom_right":""},"shadow":{"color":"","horizontal":"","vertical":"","blur":"","spread":""}},"border_responsive":{"style":"","color":"","width":{"top":"","right":"","bottom":"","left":""},"radius":{"top_left":"","top_right":"","bottom_left":"","bottom_right":""},"shadow":{"color":"","horizontal":"","vertical":"","blur":"","spread":""}},"margin_top":"0","margin_right":"0","margin_bottom":"0","margin_left":"0","margin_unit":"px","margin_top_medium":"5","margin_right_medium":"","margin_bottom_medium":"5","margin_left_medium":"","margin_medium_unit":"px","margin_top_responsive":"","margin_right_responsive":"","margin_bottom_responsive":"15","margin_left_responsive":"","margin_responsive_unit":"px","as_values_link-search":""}

Copy the Code

Standard Button

click here

/// {type:button} Tue Jul 05 2022 ///
{"text":"click here","icon":"","icon_position":"after","icon_animation":"disable","click_action":"link","link":"/","lightbox_content_type":"html","lightbox_content_html":"","lightbox_video_link":"","width":"auto","custom_width":"200","align":"left","text_color":"ffffff","text_hover_color":"ffffff","typography":{"font_family":"Raleway","font_weight":"600","font_size":{"length":"18","unit":"px"},"line_height":{"length":"","unit":""},"text_align":"","letter_spacing":{"length":".2"},"text_transform":"uppercase","text_decoration":"","font_style":"","font_variant":"","text_shadow":{"color":"","horizontal":"","vertical":"","blur":""}},"duo_color1":"","duo_color2":"","bg_color":"36ed45","bg_hover_color":"808080","style":"flat","button_transition":"disable","border":{"style":"","color":"","width":{"top":"","right":"","bottom":"","left":""},"radius":{"top_left":"0","top_right":"0","bottom_left":"0","bottom_right":"0"},"shadow":{"color":"","horizontal":"","vertical":"","blur":"","spread":""}},"border_hover_color":"","responsive_display":"","visibility_display":"","visibility_user_capability":"","visibility_logic":"[]","animation":{"style":"","delay":"0","duration":"1"},"container_element":"div","id":"","class":"","node_label":"","export":"","import":"","connections":{"text":"","link":"","lightbox_content_html":"","lightbox_video_link":"","text_color":"","text_hover_color":"","bg_color":"","bg_hover_color":"","border_hover_color":""},"link_target":"_self","link_nofollow":"no","link_download":"","link-search":"","custom_width_unit":"px","align_medium":"","align_responsive":"center","padding_top":"","padding_right":"","padding_bottom":"","padding_left":"","padding_top_medium":"","padding_right_medium":"","padding_bottom_medium":"","padding_left_medium":"","padding_top_responsive":"","padding_right_responsive":"","padding_bottom_responsive":"","padding_left_responsive":"","typography_medium":{"font_size":{"length":"15","unit":"px"},"line_height":{"length":"","unit":""},"text_align":"","letter_spacing":{"length":""},"text_transform":"","text_decoration":"","font_style":"","font_variant":"","text_shadow":{"color":"","horizontal":"","vertical":"","blur":""}},"typography_responsive":{"font_size":{"length":"","unit":"px"},"line_height":{"length":"","unit":""},"text_align":"","letter_spacing":{"length":""},"text_transform":"","text_decoration":"","font_style":"","font_variant":"","text_shadow":{"color":"","horizontal":"","vertical":"","blur":""}},"border_medium":{"style":"","color":"","width":{"top":"","right":"","bottom":"","left":""},"radius":{"top_left":"","top_right":"","bottom_left":"","bottom_right":""},"shadow":{"color":"","horizontal":"","vertical":"","blur":"","spread":""}},"border_responsive":{"style":"","color":"","width":{"top":"","right":"","bottom":"","left":""},"radius":{"top_left":"","top_right":"","bottom_left":"","bottom_right":""},"shadow":{"color":"","horizontal":"","vertical":"","blur":"","spread":""}},"margin_top":"0","margin_right":"","margin_bottom":"0","margin_left":"","margin_unit":"px","margin_top_medium":"5","margin_right_medium":"","margin_bottom_medium":"5","margin_left_medium":"","margin_medium_unit":"px","margin_top_responsive":"","margin_right_responsive":"","margin_bottom_responsive":"15","margin_left_responsive":"","margin_responsive_unit":"px","as_values_link-search":""}

Copy the Code

Other Colors Used
CTA: Gold #ffae00
Medium Grey #4c4c4c  (for gradient)
Dark Grey #202020 (for gradient)
Grey #d2d2d2

Additional Notes

  • If the client has a logo that can be used as a background image (a high quality icon for example) we can update the "tooth" in the background of the homepage.
  • If client has a horizontal 'about us' photo, the layout can be adjusted to accommodate it. See below for screenshots.

Adjusting template to accommodate a horizontal photo

Photoshop templates available in Dropbox for vertical and horizontal photos.

Once the single horizontal photo (680x500) is in place, adjust row settings to have a fixed width of 1280px and adjust the photo margins to -80 on the right.

Adjusting template to accommodate a horizontal photo

Photoshop templates available in Dropbox for vertical and horizontal photos.

/// {type:photo} Mon Jan 25 2021 ///
{"photo_source":"library","photo":"15490","photo_url":"https://www.chiro.inceptionimages.com/wp-content/uploads/2019/10/Welcome-Meet-the-Team.jpg","title_hover":"no","url_title":"","show_caption":"0","caption":"Meet The Chiropractor","link_type":"","link_url":"","crop":"","width":"500","align":"right","border":{"style":"","color":"","width":{"top":"","right":"","bottom":"","left":""},"radius":{"top_left":"0","top_right":"100","bottom_left":"100","bottom_right":"0"},"shadow":{"color":"rgba(48,48,48,0.41)","horizontal":"","vertical":"","blur":"20","spread":""}},"caption_typography":{"font_family":"Default","font_weight":"default","font_size":{"length":"","unit":"px"},"line_height":{"length":"","unit":""},"text_align":"","letter_spacing":{"length":""},"text_transform":"","text_decoration":"","font_style":"","font_variant":"","text_shadow":{"color":"","horizontal":"","vertical":"","blur":""}},"responsive_display":"","visibility_display":"","visibility_user_capability":"","visibility_logic":"[]","animation":{"style":"","delay":"0","duration":"1"},"container_element":"div","id":"","class":"","export":"","import":"","connections":{"photo":"","link_url":""},"photo_src":"https://www.wyckoffchiropractor.com/wp-content/uploads/2020/11/Chiropractor-Wyckoff-NJ-Raymond-Lopez-D.C.jpg","link_url_target":"_self","link_url_nofollow":"no","link_url-search":"","width_unit":"px","width_medium":"","width_medium_unit":"px","width_responsive":"","width_responsive_unit":"px","align_medium":"center","align_responsive":"","border_medium":{"style":"","color":"","width":{"top":"","right":"","bottom":"","left":""},"radius":{"top_left":"","top_right":"50","bottom_left":"50","bottom_right":""},"shadow":{"color":"","horizontal":"","vertical":"","blur":"","spread":""}},"border_responsive":{"style":"","color":"","width":{"top":"","right":"","bottom":"","left":""},"radius":{"top_left":"","top_right":"","bottom_left":"","bottom_right":""},"shadow":{"color":"","horizontal":"","vertical":"","blur":"","spread":""}},"caption_typography_medium":{"font_size":{"length":"","unit":"px"},"line_height":{"length":"","unit":""},"text_align":"","letter_spacing":{"length":""},"text_transform":"","text_decoration":"","font_style":"","font_variant":"","text_shadow":{"color":"","horizontal":"","vertical":"","blur":""}},"caption_typography_responsive":{"font_size":{"length":"","unit":"px"},"line_height":{"length":"","unit":""},"text_align":"","letter_spacing":{"length":""},"text_transform":"","text_decoration":"","font_style":"","font_variant":"","text_shadow":{"color":"","horizontal":"","vertical":"","blur":""}},"margin_top":"0","margin_right":"-70","margin_bottom":"0","margin_left":"0","margin_unit":"px","margin_top_medium":"","margin_right_medium":"0","margin_bottom_medium":"","margin_left_medium":"","margin_medium_unit":"px","margin_top_responsive":"","margin_right_responsive":"30","margin_bottom_responsive":"","margin_left_responsive":"30","margin_responsive_unit":"px","as_values_link_url-search":""}

Top Photo Module - Copy the Code

/// {type:photo} Mon Jan 25 2021 ///
{"photo_source":"library","photo":"15491","photo_url":"https://www.chiro.inceptionimages.com/wp-content/uploads/2019/10/Welcome-Meet-the-Team.jpg","title_hover":"no","url_title":"","show_caption":"0","caption":"Meet The Chiropractor","link_type":"","link_url":"","crop":"","width":"500","align":"right","border":{"style":"","color":"","width":{"top":"","right":"","bottom":"","left":""},"radius":{"top_left":"100","top_right":"0","bottom_left":"0","bottom_right":"100"},"shadow":{"color":"rgba(48,48,48,0.41)","horizontal":"","vertical":"","blur":"20","spread":""}},"caption_typography":{"font_family":"Default","font_weight":"default","font_size":{"length":"","unit":"px"},"line_height":{"length":"","unit":""},"text_align":"","letter_spacing":{"length":""},"text_transform":"","text_decoration":"","font_style":"","font_variant":"","text_shadow":{"color":"","horizontal":"","vertical":"","blur":""}},"responsive_display":"","visibility_display":"","visibility_user_capability":"","visibility_logic":"[]","animation":{"style":"","delay":"0","duration":"1"},"container_element":"div","id":"","class":"","export":"","import":"","connections":{"photo":"","link_url":""},"photo_src":"https://www.wyckoffchiropractor.com/wp-content/uploads/2020/11/Chiropractor-Wyckoff-NJ-Dr-Dominic-Cirigliano-D.C.jpg","link_url_target":"_self","link_url_nofollow":"no","link_url-search":"","width_unit":"px","width_medium":"","width_medium_unit":"px","width_responsive":"","width_responsive_unit":"px","align_medium":"center","align_responsive":"","border_medium":{"style":"","color":"","width":{"top":"","right":"","bottom":"","left":""},"radius":{"top_left":"75","top_right":"","bottom_left":"","bottom_right":"75"},"shadow":{"color":"","horizontal":"","vertical":"","blur":"","spread":""}},"border_responsive":{"style":"","color":"","width":{"top":"","right":"","bottom":"","left":""},"radius":{"top_left":"50","top_right":"","bottom_left":"","bottom_right":"50"},"shadow":{"color":"","horizontal":"","vertical":"","blur":"","spread":""}},"caption_typography_medium":{"font_size":{"length":"","unit":"px"},"line_height":{"length":"","unit":""},"text_align":"","letter_spacing":{"length":""},"text_transform":"","text_decoration":"","font_style":"","font_variant":"","text_shadow":{"color":"","horizontal":"","vertical":"","blur":""}},"caption_typography_responsive":{"font_size":{"length":"","unit":"px"},"line_height":{"length":"","unit":""},"text_align":"","letter_spacing":{"length":""},"text_transform":"","text_decoration":"","font_style":"","font_variant":"","text_shadow":{"color":"","horizontal":"","vertical":"","blur":""}},"margin_top":"","margin_right":"-70","margin_bottom":"0","margin_left":"0","margin_unit":"px","margin_top_medium":"","margin_right_medium":"0","margin_bottom_medium":"","margin_left_medium":"","margin_medium_unit":"px","margin_top_responsive":"","margin_right_responsive":"30","margin_bottom_responsive":"","margin_left_responsive":"30","margin_responsive_unit":"px","as_values_link_url-search":""}

Bottom Photo Module - Copy the Code

Create horizontal photos (500x325) for both doctors.

Copy module settings from the buttons above. Select new photos from media library.

Adjust photo column to 45% with margins set to -50 on the top for desktop. Colum width is 100% on tablet and mobile with top margin set to 0.

Adjusting template to accommodate multiple photos (Slideshow)

Photoshop templates available in Dropbox for photos. Note these files need to be exported as PNGs.

/// {type:uabb-image-carousel} Thu Dec 02 2021 ///
{"photos":"[15420,15421,15418]","photo_size":"medium","scroll_effect":"fade","slides_to_scroll":"","photo_spacing":"","grid_column":"4","medium_grid_column":"4","responsive_grid_column":"4","show_captions":"0","click_action":"none","click_action_target":"_blank","click_action_nofollow":"0","autoplay":"yes","animation_speed":"4000","pause_on_hover":"no","infinite_loop":"yes","lazyload":"no","enable_arrow":"no","enable_dots":"no","dots_size":"","dots_color":"","enable_arrow_resp":"no","arrow_position":"outside","arrow_style":"circle","arrow_color":"","arrow_background_color":"","arrow_background_color_opc":"","arrow_color_border":"","arrow_border_size":"1","hover_effects":"none","overlay_color":"000000","overlay_color_opc":"70","icon":"0","overlay_icon":"","overlay_icon_size":"","overlay_icon_color":"","tag_selection":"h3","img_typo":{"font_family":"Default","font_weight":"default","font_size":{"length":"","unit":"px"},"line_height":{"length":"","unit":""},"text_align":"","letter_spacing":{"length":""},"text_transform":"","text_decoration":"","font_style":"","font_variant":"","text_shadow":{"color":"","horizontal":"","vertical":"","blur":""}},"color":"","caption_bg_color":"","caption_bg_color_opc":"","uabb_helpful_information":"","responsive_display":"","visibility_display":"","visibility_user_capability":"","visibility_logic":"[]","zindex":"","animation":{"style":"","delay":"0","duration":"1"},"container_element":"div","id":"","class":"","node_label":"","export":"","import":"","connections":{"photos":"","dots_color":"","arrow_color":"","arrow_background_color":"","arrow_color_border":"","overlay_color":"","overlay_icon_color":"","color":"","caption_bg_color":""},"img_typo_medium":{"font_size":{"length":"","unit":"px"},"line_height":{"length":"","unit":""},"text_align":"","letter_spacing":{"length":""},"text_transform":"","text_decoration":"","font_style":"","font_variant":"","text_shadow":{"color":"","horizontal":"","vertical":"","blur":""}},"img_typo_responsive":{"font_size":{"length":"","unit":"px"},"line_height":{"length":"","unit":""},"text_align":"","letter_spacing":{"length":""},"text_transform":"","text_decoration":"","font_style":"","font_variant":"","text_shadow":{"color":"","horizontal":"","vertical":"","blur":""}},"margin_top":"0","margin_right":"-80","margin_bottom":"0","margin_left":"0","margin_unit":"px","margin_top_medium":"","margin_right_medium":"20","margin_bottom_medium":"-20","margin_left_medium":"20","margin_medium_unit":"px","margin_top_responsive":"-20","margin_right_responsive":"15","margin_bottom_responsive":"-20","margin_left_responsive":"20","margin_responsive_unit":"px"}

Carousel Module - Copy the Code

Create photos for all doctors using template.

Export images as PNGs

Copy module settings from the button above. Select photos from media library.

Use UABB Image Carousel Module

Additional CSS

Remove Row Shapes on Tablet and Mobile

/* Remove Row Shapes Tablet-Mobile */
@media only screen and (max-width: 1250px) {
div#row-shape .fl-builder-shape-layer {
display:none;
}

Home
Creative Area

Your Feedback
Is Appreciated

clip board