Post Card - The Overlap Card | Avada Website Builder Tips

The Overlap Card

The inspiration for this card came from a block layout available from Qubely.

While this seems simple enough it does require a couple lines of custom CSS.

The elements

Two nested columns (1/1 and 90%)
Top column
- Post card image in the top.
- Custom css: z-index to 0.
Bottom Column
- Dynamic data for the category, title, meta element and content element set to excerpt.
- Top margin set to -80px,
- Padding set to 30px.
- Flex stretch (equal heights)
- Box shadow: 34px 0 28 -20 rgba(0,0,0,.15)
- Custom CSS: margin left and right auto

Copy to Clipboard

For information of the category labels see Adding and Styling Top-level Category Labels.

Customization

Taking Full Advantage of the Avada Image Element
Using CSS to overcome a major shortcoming of the image element,

Continue readingContinue reading

Overlap Card Code

Copy to Clipboard

[fusion_builder_column type="1_1" layout="1_1" background_blend_mode="overlay" first="true" last="true" min_height="" hover_type="none" link="" border_position="all" element_content="" background_color="rgba(0,0,0,0)" align_content="flex-start" content_layout="column"][fusion_builder_row_inner][fusion_builder_column_inner type="1_1" layout="1_1" align_self="auto" content_layout="column" align_content="flex-start" valign_content="flex-start" content_wrap="wrap" spacing="" center_content="no" link="" target="_self" min_height="" hide_on_mobile="small-visibility,medium-visibility,large-visibility" sticky_display="normal,sticky" class="" id="" order_medium="0" order_small="0" hover_type="none" border_color="" border_style="solid" box_shadow="no" box_shadow_blur="0" box_shadow_spread="0" box_shadow_color="" box_shadow_style="" background_type="single" gradient_start_position="0" gradient_end_position="100" gradient_type="linear" radial_direction="center center" linear_angle="180" background_color="" background_image="" background_image_id="" background_position="left top" background_repeat="no-repeat" background_blend_mode="none" filter_type="regular" filter_hue="0" filter_saturation="100" filter_brightness="100" filter_contrast="100" filter_invert="0" filter_sepia="0" filter_opacity="100" filter_blur="0" filter_hue_hover="0" filter_saturation_hover="100" filter_brightness_hover="100" filter_contrast_hover="100" filter_invert_hover="0" filter_sepia_hover="0" filter_opacity_hover="100" filter_blur_hover="0" animation_type="" animation_direction="left" animation_speed="0.3" animation_offset="" last="true" border_position="all" first="true"][fusion_post_card_image layout="static" show_title="yes" show_cats="yes" show_price="yes" show_rating="yes" show_sale="no" show_outofstock="no" show_buttons="yes" image_link="yes" image_link_target="_self" image_link_custom="" hide_on_mobile="small-visibility,medium-visibility,large-visibility" class="z-0" id="" crossfade_bg_color="" animation_type="" animation_direction="left" animation_speed="0.3" animation_offset="" border_radius_top_left="10" border_radius_top_right="10" border_radius_bottom_right="10" border_radius_bottom_left="10" /][/fusion_builder_column_inner][fusion_builder_column_inner type="90" layout="90" align_self="stretch" content_layout="column" align_content="flex-start" valign_content="flex-start" content_wrap="wrap" spacing="" center_content="no" link="" target="_self" min_height="" hide_on_mobile="small-visibility,medium-visibility,large-visibility" sticky_display="normal,sticky" class="m-auto" id="" order_medium="0" order_small="0" hover_type="none" border_color="" border_style="solid" box_shadow="yes" box_shadow_blur="28" box_shadow_spread="-20" box_shadow_color="rgba(0,0,0,0.15)" box_shadow_style="" background_type="single" gradient_start_position="0" gradient_end_position="100" gradient_type="linear" radial_direction="center center" linear_angle="180" background_color="#ffffff" background_image="" background_image_id="" background_position="left top" background_repeat="no-repeat" background_blend_mode="none" filter_type="regular" filter_hue="0" filter_saturation="100" filter_brightness="100" filter_contrast="100" filter_invert="0" filter_sepia="0" filter_opacity="100" filter_blur="0" filter_hue_hover="0" filter_saturation_hover="100" filter_brightness_hover="100" filter_contrast_hover="100" filter_invert_hover="0" filter_sepia_hover="0" filter_opacity_hover="100" filter_blur_hover="0" animation_type="" animation_direction="left" animation_speed="0.3" animation_offset="" spacing_left="" spacing_right="" margin_top="-80px" border_radius_top_left="10px" border_radius_top_right="10px" border_radius_bottom_right="10px" border_radius_bottom_left="10px" box_shadow_vertical="34px" box_shadow_horizontal="0" padding_top="30" padding_right="30" padding_bottom="30" padding_left="30" margin_bottom="" last="true" border_position="all" type_small="90" margin_top_small="-40" padding_top_small="12" padding_right_small="12" padding_bottom_small="12" padding_left_small="12" first="true"][fusion_text columns="" column_min_width="" column_spacing="" rule_style="default" rule_size="" rule_color="" font_size="14px" line_height="" letter_spacing="" text_color="" content_alignment_medium="" content_alignment_small="" content_alignment="" animation_type="" animation_direction="left" animation_speed="0.3" animation_offset="" hide_on_mobile="small-visibility,medium-visibility,large-visibility" sticky_display="normal,sticky" class="uppercase cat-label" id="" dynamic_params="eyJlbGVtZW50X2NvbnRlbnQiOnsiZGF0YSI6InBvc3RfdGVybXMiLCJ0eXBlIjoiY2F0ZWdvcnkiLCJzZXBhcmF0b3IiOiIiLCJsaW5rIjoieWVzIn19" fusion_font_variant_text_font="" fusion_font_family_text_font="BRCobane-SemiBold" margin_bottom="0"]Your Content Goes Here[/fusion_text][fusion_separator style_type="default" flex_grow="1" alignment="center" border_size="" sep_color="" icon="" icon_size="" icon_color="" icon_circle="" icon_circle_color="" hide_on_mobile="small-visibility,medium-visibility,large-visibility" sticky_display="normal,sticky" class="" id="" /][fusion_title title_type="text" rotation_effect="bounceIn" display_time="1200" highlight_effect="circle" loop_animation="off" highlight_width="9" highlight_top_margin="0" before_text="" rotation_text="" highlight_text="" after_text="" title_link="on" link_url="" link_target="_self" content_align_medium="" content_align_small="" content_align="left" size="2" font_size="28px" animated_font_size="" line_height="" letter_spacing="" text_shadow="no" text_shadow_blur="0" text_shadow_color="" dimensions_medium="" dimensions_small="" text_color="" animated_text_color="" gradient_font="no" gradient_start_color="" gradient_end_color="" gradient_start_position="0" gradient_end_position="100" gradient_type="linear" radial_direction="center center" linear_angle="180" highlight_color="" style_type="default" sep_color="" link_color="" link_hover_color="" animation_type="" animation_direction="left" animation_speed="0.3" animation_offset="" hide_on_mobile="small-visibility,medium-visibility,large-visibility" sticky_display="normal,sticky" class="" id="" dynamic_params="eyJlbGVtZW50X2NvbnRlbnQiOnsiZGF0YSI6InBvc3RfdGl0bGUiLCJpbmNsdWRlX2NvbnRleHQiOiJubyJ9fQ==" fusion_font_variant_title_font="" fusion_font_family_title_font="BRCobane-SemiBold" margin_top="4px"]Your Content Goes Here[/fusion_title][fusion_tb_meta meta="author,read_time,comments" layout="floated" separator="|" read_time="200" alignment="flex-start" stacked_vertical_align="flex-start" stacked_horizontal_align="flex-start" height="36" font_size="" text_color="" link_color="" text_hover_color="" background_color="" border_color="" item_background_color="" item_border_color="" hide_on_mobile="small-visibility,medium-visibility,large-visibility" class="" id="" animation_type="" animation_direction="left" animation_speed="0.3" animation_offset="" /][fusion_separator style_type="default" flex_grow="1" alignment="center" border_size="" sep_color="" icon="" icon_size="" icon_color="" icon_circle="" icon_circle_color="" hide_on_mobile="small-visibility,medium-visibility,large-visibility" sticky_display="normal,sticky" class="" id="" /][fusion_tb_content excerpt="yes" excerpt_length="25" strip_html="yes" hide_on_mobile="small-visibility,medium-visibility,large-visibility" class="" id="" content_alignment="" font_size="1rem" line_height="" letter_spacing="" text_color="" animation_type="" animation_direction="left" animation_speed="0.3" animation_offset="" fusion_font_variant_text_font="" margin_top="8px" /][/fusion_builder_column_inner][/fusion_builder_row_inner][/fusion_builder_column]

Taking Full Advantage of the Avada Image Element

Avada 7.11.7

Official Avada Resources

Taking Full Advantage of the Avada Image Element

Avada 7.11.7

Official Avada Resources

Post Card – The Overlap Card

The Overlap Card

Taking Full Advantage of the Avada Image Element

Overlap Card Code

This site is…

ABOUT COOKIES

THIRD PARTY EMBEDS

TRACKING COOKIES

Taking Full Advantage of the Avada Image Element

Avada 7.11.7

Official Avada Resources

Taking Full Advantage of the Avada Image Element

Avada 7.11.7

Official Avada Resources

Post Card – The Overlap Card

The Overlap Card

Taking Full Advantage of the Avada Image Element

Overlap Card Code

Avada on YouTube

ABOUT COOKIES

THIRD PARTY EMBEDS

TRACKING COOKIES