Using Module Styling

The demos in this section are styled using Content Intense’s Module Settings

Atlas

The Atlas style for Content Intense features a vertical, 3-column layout. Atlas starts with the featured image (thumbnail) at top, the author’s avatar, meta data, content and Read More button.

Meta data content and styling are fully adjustable. This example has “Show Comments” turned off, along with a custom meta data separator. The “Read More” button has custom text, and is positioned in the center. The date is shown as “time ago” instead of an actual date.

[et_pb_content_n10s admin_label=”Content Intense 1″ _builder_version=”3.0.64″ post_type=”post” offset_number=”0″ show_thumbnail=”on” show_author=”on” show_date=”on” show_time_ago=”on” show_categories=”on” show_comments=”off” read_more=”on” read_more_style=”on” read_more_text=”View More” read_more_position=”flex-start” show_pagination=”on” pagination_style=”on” pagination_prev=”Next” pagination_next=”Previous” feed_style=”ci-style-1″ use_dropshadow=”off” use_overlay=”on” background_layout=”light” header_font_size_tablet=”51″ header_line_height_tablet=”2″ body_font_size_tablet=”51″ body_line_height_tablet=”2″ meta_font_size_tablet=”51″ meta_line_height_tablet=”2″ border_style=”solid” custom_button=”on” button_letter_spacing=”3″ button_icon_placement=”right” button_letter_spacing_hover=”3″ overlay_icon_color=”#ffffff” hover_overlay_color=”rgba(0,0,0,0.6)” hover_icon=”%%43%%” header_font=”Raleway|on||on|” header_font_size=”18″ header_letter_spacing=”3px” header_line_height=”1.1″ body_font=”Merriweather||||” body_font_size=”13″ body_line_height=”1.8″ meta_font=”Merriweather||on||” meta_font_size=”12″ meta_text_color=”#9b9b9b” button_text_size=”12″ button_text_color=”#ffffff” button_bg_color=”#000000″ button_border_color=”#000000″ button_border_radius=”0″ button_font=”Raleway|on||on|” button_text_color_hover=”#000000″ button_bg_color_hover=”#ffffff” button_border_color_hover=”#000000″ button_border_radius_hover=”0″ button_use_icon=”off” meta_letter_spacing=”1px” meta_separator=”-” /]

Alps

The Alps style for Content Intense features a horizontal, 1-column layout. Alps starts with the featured image (thumbnail) at left, then meta data, content and Read More button. This layout alternates with each row.

Meta data content and styling are fully adjustable. The “Read More” button is positioned to the right. Pagination at the bottom is set to “Use Text”. The “Advanced” tab in the module will allow you to further style that text.

[et_pb_content_n10s admin_label=”Content Intense 2″ _builder_version=”3.0.64″ post_type=”post” offset_number=”0″ show_thumbnail=”on” show_author=”on” show_date=”on” show_time_ago=”off” show_categories=”on” show_comments=”on” read_more=”on” read_more_style=”on” read_more_text=”Read More” read_more_position=”flex-start” show_pagination=”on” pagination_style=”on” pagination_prev=”Next” pagination_next=”Previous” feed_style=”ci-style-2″ use_dropshadow=”off” use_overlay=”on” background_layout=”light” header_font_size_tablet=”51″ header_line_height_tablet=”2″ body_font_size_tablet=”51″ body_line_height_tablet=”2″ meta_font_size_tablet=”51″ meta_line_height_tablet=”2″ border_style=”solid” custom_button=”on” button_letter_spacing=”1″ button_icon_placement=”right” button_letter_spacing_hover=”1″ overlay_icon_color=”#ffffff” hover_overlay_color=”rgba(52,82,255,0.85)” hover_icon=”%%43%%” header_font=”Roboto Light||||” header_font_size=”40″ header_line_height=”1.1″ body_font=”Roboto||||” body_font_size=”16″ body_text_color=”#414141″ body_line_height=”1.7″ meta_font=”Roboto||on||” meta_font_size=”15″ meta_text_color=”#989898″ meta_line_height=”1.4″ button_text_color=”#ffffff” button_bg_color=”#3452ff” button_border_color=”#3452ff” button_border_radius=”100″ button_font=”Roboto||||” button_text_color_hover=”#3452ff” button_bg_color_hover=”#ffffff” button_border_color_hover=”#3452ff” button_border_radius_hover=”100″ custom_css_grid_item=”background: #fff;” button_use_icon=”off” /]

Himalayas

The Himalayas style for Content Intense features a 3-column layout. Himalayas starts with the featured image (thumbnail) as the background, then the title, meta data, content and Read More button.

Meta data content and styling are fully adjustable. This example has “Show Comments” turned off. The date is shown as “time ago” instead of an actual date. The “Read More” button is positioned in the center.

[et_pb_content_n10s admin_label=”Content Intense 3″ _builder_version=”3.0.64″ post_type=”post” offset_number=”0″ show_thumbnail=”on” show_author=”off” show_date=”on” show_time_ago=”on” show_categories=”off” show_comments=”off” read_more=”on” read_more_style=”on” read_more_text=”Read More” read_more_position=”center” show_pagination=”on” pagination_style=”on” pagination_prev=”Next” pagination_next=”Previous” feed_style=”ci-style-3″ use_dropshadow=”off” use_overlay=”off” background_layout=”dark” header_font_size_tablet=”51″ header_line_height_tablet=”2″ body_font_size_tablet=”51″ body_line_height_tablet=”2″ meta_font_size_tablet=”51″ meta_line_height_tablet=”2″ border_style=”solid” custom_button=”on” button_letter_spacing=”2″ button_icon_placement=”right” button_letter_spacing_hover=”2″ header_font=”Playfair Display|||on|” header_font_size=”20″ header_text_color=”#000000″ header_letter_spacing=”1px” header_line_height=”1.1″ body_font=”Playfair Display||||” body_font_size=”15″ body_text_color=”#696969″ body_line_height=”1.8″ meta_font=”Playfair Display||on||” meta_font_size=”14″ meta_text_color=”#696969″ meta_line_height=”1.1″ button_text_size=”16″ button_text_color=”#ffffff” button_bg_color=”#000000″ button_border_color=”#000000″ button_border_radius=”0″ button_font=”Playfair Display|on||on|” button_use_icon=”off” button_text_color_hover=”#000000″ button_bg_color_hover=”#ffffff” button_border_color_hover=”#000000″ button_border_radius_hover=”0″ grid_tile_bg_color=”#ffffff” button_border_width=”1″ /]

Rockies

The Rockies style for Content Intense features a vertical, 3-column layout. Rockies starts with the featured image (thumbnail) as the background. The date is in the top left corner. The rest of the meta data, title, content and Read More button, live within a container that moves up as you hover. Here, we use the word “in” as the meta data separator. The comments count is in a speech bubble.

Meta data content and styling are fully adjustable.

[et_pb_content_n10s admin_label=”Content Intense 4″ _builder_version=”3.0.64″ post_type=”post” offset_number=”0″ show_thumbnail=”on” show_author=”on” show_date=”on” show_time_ago=”off” show_categories=”on” show_comments=”on” read_more=”on” read_more_style=”on” read_more_text=”Read More” read_more_position=”flex-start” show_pagination=”on” pagination_style=”on” pagination_prev=”Next” pagination_next=”Previous” feed_style=”ci-style-4″ use_dropshadow=”off” use_overlay=”off” background_layout=”light” header_font_size_tablet=”51″ header_line_height_tablet=”2″ body_font_size_tablet=”51″ body_line_height_tablet=”2″ border_style=”solid” custom_button=”on” button_letter_spacing=”0″ button_icon_placement=”right” button_letter_spacing_hover=”0″ grid_tile_bg_color=”rgba(255,255,255,0.95)” overlay_icon_color=”#ffffff” hover_overlay_color=”#000000″ header_font=”Oswald|||on|” header_font_size=”24″ header_text_color=”#000000″ header_line_height=”1.1″ body_font=”Lato||||” body_font_size=”16″ body_text_color=”#000000″ body_line_height=”1.8″ meta_text_color=”#bf9e77″ button_text_color=”#ffffff” button_bg_color=”#bf9e77″ button_border_width=”6″ button_border_color=”rgba(0,0,0,0)” button_border_radius=”0″ button_font=”Oswald|||on|” button_use_icon=”off” button_text_color_hover=”#ffffff” button_bg_color_hover=”#000000″ button_border_color_hover=”rgba(0,0,0,0)” button_border_radius_hover=”0″ meta_date=”d F” meta_font_size_tablet=”51″ meta_line_height_tablet=”2″ meta_font=”||on||” excerpt_count=”180″ meta_separator=”in” /]

Adding Custom CSS

The demos in this section have additional custom CSS applied to them to enhance effects.

[et_pb_content_n10s admin_label=”Content Intense 1″ _builder_version=”3.0.64″ post_type=”post” offset_number=”0″ show_thumbnail=”on” show_author=”on” show_date=”on” show_time_ago=”on” show_categories=”on” show_comments=”off” read_more=”on” read_more_style=”on” read_more_text=”Read More” read_more_position=”flex-start” show_pagination=”on” pagination_style=”on” pagination_prev=”Next” pagination_next=”Previous” feed_style=”ci-style-1″ use_dropshadow=”off” use_overlay=”on” background_layout=”light” header_font_size_tablet=”51″ header_line_height_tablet=”2″ body_font_size_tablet=”51″ body_line_height_tablet=”2″ meta_font_size_tablet=”51″ meta_line_height_tablet=”2″ border_style=”solid” custom_button=”on” button_letter_spacing=”3″ button_icon_placement=”right” button_letter_spacing_hover=”3″ module_class=”contentIntenseStyleOne” overlay_icon_color=”#ffffff” hover_overlay_color=”rgba(0,0,0,0.6)” hover_icon=”%%43%%” header_font=”Raleway|on||on|” header_font_size=”18″ header_letter_spacing=”3px” header_line_height=”1.1″ body_font=”Merriweather||||” body_font_size=”13″ body_line_height=”1.8″ meta_font=”Merriweather||on||” meta_font_size=”12″ meta_text_color=”#9b9b9b” button_text_size=”12″ button_text_color=”#ffffff” button_bg_color=”#000000″ button_border_color=”#000000″ button_border_radius=”0″ button_font=”Raleway|on||on|” button_text_color_hover=”#000000″ button_bg_color_hover=”#ffffff” button_border_color_hover=”#000000″ button_border_radius_hover=”0″ button_use_icon=”off” meta_letter_spacing=”1px” /]

[et_pb_content_n10s admin_label=”Content Intense 2″ _builder_version=”3.0.64″ post_type=”post” offset_number=”0″ show_thumbnail=”on” show_author=”on” show_date=”on” show_time_ago=”on” show_categories=”on” show_comments=”on” read_more=”on” read_more_style=”on” read_more_text=”Read More” read_more_position=”flex-start” show_pagination=”on” pagination_style=”on” pagination_prev=”Next” pagination_next=”Previous” feed_style=”ci-style-2″ use_dropshadow=”off” use_overlay=”off” background_layout=”light” header_font_size_tablet=”51″ header_line_height_tablet=”2″ body_font_size_tablet=”51″ body_line_height_tablet=”2″ meta_font_size_tablet=”51″ meta_line_height_tablet=”2″ border_style=”solid” custom_button=”on” button_letter_spacing=”1″ button_icon_placement=”right” button_letter_spacing_hover=”1″ module_class=”contentIntenseStyleTwo” overlay_icon_color=”#ffffff” hover_overlay_color=”rgba(52,82,255,0.85)” hover_icon=”%%43%%” header_font=”Roboto Light||||” header_font_size=”40″ header_line_height=”1.1″ body_font=”Roboto||||” body_font_size=”16″ body_text_color=”#414141″ body_line_height=”1.7″ meta_font=”Roboto||on||” meta_font_size=”15″ meta_text_color=”#989898″ meta_line_height=”1.4″ button_text_color=”#ffffff” button_bg_color=”#3452ff” button_border_color=”#3452ff” button_border_radius=”100″ button_font=”Roboto||||” button_text_color_hover=”#3452ff” button_bg_color_hover=”#ffffff” button_border_color_hover=”#3452ff” button_border_radius_hover=”100″ custom_css_grid_item=”background: #fff;” button_use_icon=”off” /]

Alps

[et_pb_content_n10s admin_label=”Content Intense 2″ _builder_version=”3.0.64″ post_type=”post” offset_number=”0″ show_thumbnail=”on” show_author=”on” show_date=”on” show_time_ago=”on” show_categories=”on” show_comments=”on” read_more=”on” read_more_style=”on” read_more_text=”Read More” read_more_position=”flex-start” show_pagination=”on” pagination_style=”on” pagination_prev=”Next” pagination_next=”Previous” feed_style=”ci-style-2″ use_dropshadow=”off” use_overlay=”on” background_layout=”dark” header_font_size_tablet=”51″ header_line_height_tablet=”2″ body_font_size_tablet=”51″ body_line_height_tablet=”2″ meta_font_size_tablet=”51″ meta_line_height_tablet=”2″ border_style=”solid” custom_button=”on” button_letter_spacing=”1″ button_icon_placement=”right” button_letter_spacing_hover=”1″ overlay_icon_color=”#ffffff” hover_overlay_color=”rgba(52,82,255,0.85)” hover_icon=”%%43%%” header_font=”Roboto Light||||” header_font_size=”40″ header_line_height=”1.1″ body_font=”Roboto||||” body_font_size=”16″ body_line_height=”1.7″ meta_font=”Roboto||on||” meta_font_size=”15″ meta_line_height=”1.4″ button_text_color=”#3452ff” button_bg_color=”#ffffff” button_border_color=”#ffffff” button_border_radius=”100″ button_font=”Roboto||||” button_text_color_hover=”#3452ff” button_bg_color_hover=”#ffffff” button_border_color_hover=”#3452ff” button_border_radius_hover=”100″ button_use_icon=”off” grid_tile_bg_color=”#3452ff” custom_css_grid_item=”box-shadow: 0 0 100px rgba(0,0,0,.2);” /]

[et_pb_content_n10s admin_label=”Content Intense 3″ _builder_version=”3.0.64″ post_type=”post” offset_number=”0″ show_thumbnail=”on” show_author=”off” show_date=”on” show_time_ago=”off” show_categories=”off” show_comments=”off” read_more=”on” read_more_style=”on” read_more_text=”Read More” read_more_position=”center” show_pagination=”on” pagination_style=”on” pagination_prev=”Next” pagination_next=”Previous” feed_style=”ci-style-3″ use_dropshadow=”off” use_overlay=”off” background_layout=”dark” header_font_size_tablet=”51″ header_line_height_tablet=”2″ body_font_size_tablet=”51″ body_line_height_tablet=”2″ meta_font_size_tablet=”51″ meta_line_height_tablet=”2″ border_style=”solid” custom_button=”on” button_letter_spacing=”2″ button_icon_placement=”right” button_letter_spacing_hover=”2″ module_class=”contentIntenseStyleThree” header_font=”Playfair Display|||on|” header_font_size=”20″ header_text_color=”#ffffff” header_letter_spacing=”1px” header_line_height=”1.1″ body_font=”Playfair Display||||” body_font_size=”15″ body_text_color=”#ffffff” body_line_height=”1.8″ meta_font=”Playfair Display||on||” meta_font_size=”14″ meta_text_color=”#ffffff” meta_line_height=”1.1″ button_text_size=”16″ button_text_color=”#ffffff” button_bg_color=”#000000″ button_border_color=”#000000″ button_border_radius=”0″ button_font=”Playfair Display|on||on|” button_use_icon=”off” button_text_color_hover=”#ffffff” button_bg_color_hover=”rgba(0,0,0,0)” button_border_color_hover=”#ffffff” button_border_radius_hover=”0″ grid_tile_bg_color=”rgba(64,69,76,0.4)” button_border_width=”1″ /]

[et_pb_content_n10s admin_label=”Content Intense 3″ _builder_version=”3.0.89″ post_type=”post” offset_number=”0″ show_thumbnail=”on” show_author=”off” show_date=”on” show_time_ago=”off” show_categories=”off” show_comments=”off” read_more=”on” read_more_style=”on” read_more_text=”Read More” read_more_position=”center” show_pagination=”on” pagination_style=”on” pagination_prev=”Next” pagination_next=”Previous” feed_style=”ci-style-3″ use_dropshadow=”off” use_overlay=”off” background_layout=”dark” header_font_size_tablet=”51″ header_line_height_tablet=”2″ body_font_size_tablet=”51″ body_line_height_tablet=”2″ meta_font_size_tablet=”51″ meta_line_height_tablet=”2″ border_style=”solid” custom_button=”on” button_letter_spacing=”2″ button_icon_placement=”right” button_letter_spacing_hover=”2″ module_class=”contentIntenseStyleThreeStyleTwo” header_font=”Playfair Display|||on|” header_font_size=”20″ header_text_color=”#000000″ header_letter_spacing=”1px” header_line_height=”1.1″ body_font=”Playfair Display||||” body_font_size=”15″ body_text_color=”#696969″ body_line_height=”1.8″ meta_font=”Playfair Display||on||” meta_font_size=”14″ meta_text_color=”#696969″ meta_line_height=”1.1″ button_text_size=”16″ button_text_color=”#ffffff” button_bg_color=”#000000″ button_border_color=”#000000″ button_border_radius=”0″ button_font=”Playfair Display|on||on|” button_use_icon=”off” button_text_color_hover=”#000000″ button_bg_color_hover=”#ffffff” button_border_color_hover=”#000000″ button_border_radius_hover=”0″ grid_tile_bg_color=”#ffffff” button_border_width=”1″ /]