tagDiv

Our themes are primarily news based themes providing elements destined for creating an online newspaper and news magazine. However, what if you need to show your content creatively beyond the standard news magazine based website? What if you need elements to help you present your business or your team members? What if you need a fancy homepage with creative elements beyond the actual articles of your website? We included a range of multipurpose elements to help you create the ultimate design for your website.

Multipurpose elements

• Column content – This element has all the functionality of the call-to-action element but adds an image to the content providing extra image controls.
• Fancy text with image – As fancy as the name suggests, this element adds a stylish approach to an image and text while providing a unique design perfect for presenting your content.
• Hero – No, not the Marvel/DC kind, but rather a hero scene with an image and overlay. A description as well as buttons for a call to action functionality. An eye-catching section to draw your reader’s attention.
• Image infobox – Similar to the hero element, but with a narrower content area showing the text and buttons upon mouse hover.
• Text with image – A variation of the fancy text with an image but without the fancy look. It’s a more traditional way of presenting your content with a title, description, button and image on the side.
• Title over image – Allows you to use an image with an overlay title and subtitle providing positioning controls for both the image and titles, with the possibility to show the title only on image hover.
• Inline single image – Perfect for when you need to place an image on the page with proper control over the size and position. The element also provides styling options for the image itself like brightness, contrast, hue, saturation and much more. You don’t need a photo editor to provide an ‘edge’ for your image.

Call-to-actions and more

• Call to action – This is a text and button based element. Place a title text description and a button. Style them with size, heading tags, fonts, colors, button URL, button text, button shape or size, and much more.
• Column title – This title tag allows you to place a title and subtitle inside the page content for defining separate sections of the page.
• Inline text – A simple text element which allows a quick text to be added to the page with alignment, font controls, link colors, and link hover colors.
• List – A creative way to style a simple HTML list element by adding an icon implementation instead of the standard bullet. You can select different icons in different colors so you can create stylish lists for your content.
• Menu product – destined for a product presentation featuring a product image, title, and description as well as price.

Icons, buttons, counters for multipurpose use

• Button – The base button element helps you lead your viewers to the desired section of the site or external URL’s.
• Icon – A quick and easy way to add an icon to your content. Choose from a wide range of icons included in the theme (over 1500 icons to chose from).
• Icon box – Lead your readers to the desired section presented with an icon, description, and call-to-action button.
• Social icons – Choose to show social icon links for the following networks: Behance, Blogger, Dribbble, Facebook, Flickr, Google+, Instagram, Lastfm, LinkedIn, Pinterest, RSS, Soundcloud, Tumblr, Twitter, Vimeo, YouTube or VKontakte.
• Progress bar – Insert the element, choose the name, style, color, and set the percentage to show off your stats.
• Numbered counter – Once in a while you may need to show off your number of sales, customers or products provided. So, no matter the number, this element has you covered.

Involve your clients

• Client – an element that lets you creatively present your most valued clients with a text and image possibility.
• Pricing table – play an important role for every company that offers products or services. Efficient and straightforward in differentiating between features and prices of different products or services.
• Team member – style your team members with this element providing an image, name, job title, description as well as the team member social networks.
• Testimonial – highlight your favorite customer testimonials in style.

For each domain, there are certain best practices generally accepted by developers. One such rule for news, magazine, and other related sites is to display featured posts at the top of the page using large images and big, bold titles. This is where the Big Grids come in and provide the needed options in multiple formats and color styles.

There are a total number of 10 Big Grid Flex elements you can choose from to create unique layouts and show off your highlighted posts. You can also choose the exact size for your thumbnails, the column layout, the number of posts shown and many more.

All the available Big Grid Flex elements have 5 Settings Tabs (General, Filter, Layout, Style, and CSS) so that you can highly customize them as you want.

1. General

Before diving into the actual settings, the Big Grid Flex elements have a set of pre-made styles you can choose under the General tab for a quick setup of your chosen Big Grid Flex, without going in too deep into the settings.

This is the perfect tool for a quick and easy setup of your grid element if you do not have the skills or the time to dig deeper into grid customization. It provides a panel to set the overall fonts, text alignment, and grid style.

For example, in this section, Big Grid Flex 1 also provides options for grid height and column count for you to choose the preferred number of posts to show in a row.

However, for a more in-depth look at the settings available, each section appears below.

• Content-Length – You can select the title length for each of the modules used on the Big Grid.
• Offset posts – Start the count with an offset for the posts that display on the grid. If you have a block that shows five posts before this one, you can make this one start from the 6th post (by using offset 5). This means you can make the Big Grid jump over a set number of posts to avoid duplication.
• Extra class – Add a particular or unique class for your grid in the input field. This, in turn, allows you to add additional customizations to the grid.

2. Filter Tab

Use this tab to order your posts. You can filter posts in-depth using individual Posts IDs, Categories, Tags, Authors, Post Types, and a variety of custom sort order options.

• Post ID filter – Specific posts can be filtered to your block by using the post ID. You can get the post ID by accessing Wp Admin > Posts section, hover the post title and check the link displayed on the browser left-bottom area. Use the URL to extract the IDs. To exclude posts from a Big Grid add a ‘-’ symbol in front of each ID.
• Category filter – Choose a category for the block from a drop-down menu containing all the existing categories.
• Multiple categories filter – This option allows you to filter the posts by multiple categories. The procedure is similar to the one used on Post ID filter. Add the category IDs separated by commas (ex: 13,23,18). If you want to exclude categories,  just a ‘-’ symbol in front of each ID. If you want to display posts from a category and remove the posts included in one of its sub-categories, first add the parent category ID (ex. Fashion category: 341) and after it places the sub-category ID (ex. Daily subcategory id: 342) with a ‘-’ symbol in front, like it’s shown in the image. If you decide to use the ‘multiple categories filter,’ the standard Category Filter is ignored.
• Filter by tag slug – Filter the grid posts by their labels and enter the tag slugs separated by commas (ex: tag1, tag2, tag3).
• Multiple authors filter – This allows you to filter the posts by author(s). Enter the author IDs separated by commas (ex: 13, 23, 18).
• Post type – Use this filter if you want to display custom post types. Add the name of the post type provided by the plugin used to create the CPT, or by the user, if it’s custom-made. Usage: post, page, event – write 1 or more post types delimited by commas.

Sort order

This option lets you order the posts inside the grid. Most of these options are self-explanatory, but there are a few options that have requirements:

• Standard sorting options:
  • Latest posts – Shows posts from newest to oldest.
  • Oldest posts – Reverses of the previous sorting option.
  • Alphabetical A > Z – Your posts are sorted in alphabetical order by their name.
  • Random posts – This sorting option brings up posts randomly on each loading of the page. Every time you refresh the page, the posts are different. As a note: do not use the random posts sorting options together with pagination as it could result in duplicate articles.
  • Random posts from the last 7 days – This field brings up random posts based on the articles published in the last 7 days.

• Sorting options that feature extra requirements:

  • Popular (all time) – This sorting option requires the post views to be active. If views are disabled, this option does not work.
  • Popular (last 7 days) – You have to enable the 7 days post sorting from Theme Panel > Block Settings > 7 Days Post Sorting.
  • Popular (jetpack + stats module required) – Does not work with other settings/pagination and it requires Jetpack – Stats Module to be installed.
  • Featured – It displays posts included in the Featured category which is available through the theme. If you delete this category and you want to restore it,  create a new category with the name of ‘Featured,’ and a slug ‘featured.’
  • Random posts today – Requires the post views to be active.
  • Highest rated – It requires review posts, to see how you can set a review please check the following guide.
  • Most commented – You need comments to be active on posts. Enable/disable the comments from Theme Panel > Post Settings > Post and Custom Post Types.

3. Layout

The layout tab is the section where you create the layout for your content. A Big Grid Flex layout can be made out of 1 or more modules. You can find the settings in this section not only for the Big Grid Flex element in particular but for every module used on the particular Big Grid Flex as well.

Individual Big Grid Flex elements have the following options more or less, depending on the selected block type. For the sake of keeping this guide as short as possible, we only mention the most important ones as there are lots of customization options to choose from.

• Overall layout

Big Grid Flex 1 is the exception as it offers 2 extra controls in this section regarding the grid layout where you can choose between 1 and 5 posts per row and the container width section in percentage.

The overall layout lets you choose the gap between modules, the alignment of the meta information, the category tag position as well as the option to turn on or off the zoom effect.

• Per module settings

Set different options for each module in particular for your grid. The image size lets you control the thumbnails shown for your content. There are 4 thumbnail sizes that Big Grid Flex element uses, namely: small, default, large or full.

After you choose the image size, you can also play around with its vertical alignment, image width, and height (in percentage). Among the controls in this section, we can mention the meta information width, margin and padding, article title space, and padding, category tag spacing and padding, the option to show or hide the category tags, the post author, and publishing date.

There are separate sections for each module allowing you better control over each element of the grid.

4. Style

The style tab is all about design. Change fonts and colors for your newly created grid element.

• Module fonts

The top section allows you to change the font size, font family, line height, font weight, letter spacing, and text transform. Alter the module title, category tag, meta information as well as the mobile versions of the fonts in particular.

• Colors

The color settings allow you to change individual colors for each of the layout sections. You can change the general or individual overlay color, meta info colors, review stats color, as well as add the “lightsky” hover effect.

5. CSS

This section allows you to change the CSS for the overall grid element. It includes a box model where you can control the margins, padding, and border for the grid.

Extra settings include border settings (color, style, radius, and width), shadows (shadow size, color, offset), the block overall background color or image (as well as their position and opacity).

The color overlay feature adds a gradient on top of your block. Choose multiple colors to add all new creative gradients to take your grid style to the next level.

The display option allows you to show or hide a particular block. This is useful if you want to hide a particular block for a specific device using the top device tabs.

When you start building a website it’s important to use a structure that is suited for your content with the optimal impact on your visitors. Through this guide, you can learn how to use the theme’s tagDiv Composer Flex Block elements. With the tagDiv Composer plugin open, add a Flex Block on a page.

There’s a total of 5 Flex Block elements you can choose from to create your very own customized blocks. You can alter the size of your thumbnails, the column layout, the number of posts shown and much more. The tagDiv Composer Flex Block elements are versatile and will help you make your site to stand out from the crowd. Why don’t we get into more details?

Add a Flex Block to the page just by dragging it onto the row into the preview area. Choose the type of Flex Block you want to use, based on the General style shown by the small thumbnail. Each of the small thumbs offers a general quick look at the style of the block you can create.

The block settings are divided into 5 tabs: General, Filter, Layout, Style, and CSS. However, don’t confuse the Flex Blocks with the Flexible Big Grids as they have a different layout.

1. Pre-Made Style Presets

Before diving into the actual settings, the Flex Blocks have a set of premade styles you can choose under the General tab. Use this option for a quick setup of your Flex block without going in too deep into the block settings.

If you do not have the skills or the time to dig deeper into the block customization, this is the perfect tool for a quick and easy setup of your Flex Block element

This section provides a quick panel to set the overall fonts, text alignment, image format, a quick global color accent, the number of columns for your block. You can also choose the actual layout style and select to show or hide individual meta information. The panel shows different options based on the chosen Flex Block.

For a more in-depth look at the settings, there’s a presentation for each section below.

General Settings

The General tab offers broad settings and it’s the same across all of the Flex Blocks. It includes the following:

• Custom title (optional) – Set a title for this block, if you leave it blank the block does not display any title.
• Title URL (optional) – Set a custom URL for the block title.
• Header template – You can choose from one of the 17 available header styles. If you’ve set a title for the block, this changes the style of that section.
• Title background color (optional) – Choose a custom title background color for this block. The title background color also affects the hover color of the posts displayed as well as the Ajax filter hover color.
• Title text color (optional) – Choose a custom title text color.
• Content-Length –  Select the title and excerpt length for each of the modules used on the block.
• Limit post number – If the field is empty, the limit post number is the number from WordPress Settings > Reading
• Offset posts – Start the count with an offset. If you have a block that shows five posts before this one, you can make this one start from the 6’th post (by using offset 5)
• Extra class – This input field can be used to add a specific or unique class for your block which can be used to add additional customizations to the block.

2. Filter

The Filter tab is the section where you can choose which content to show for your block.

• Post ID filter – Use the posts’ ID to filter your block by specific posts. You can get the post ID by accessing WP Admin > Posts section, hover the post title and check the link displayed on the browser left-bottom area. Use the URL to extract the IDs. To exclude posts from a block add a ‘-’ symbol in front of each ID.
• Category Filter – Choose a specific category for the block from a drop-down menu containing all the existing categories.
• Multiple categories filter – This option allows you to filter the posts by multiple categories. The procedure is similar to the one used on Post ID filter. Add the category IDs separated by commas (ex: 13,23,18). If you want to exclude categories, add a ‘-’ symbol in front of each ID. If you want to display posts from a category and remove the posts included in one of its sub-categories, first add the parent category ID (ex. Fashion category – 341) and after it places the sub-category ID (ex. Daily subcategory id: 342) with a ‘-’ symbol in front. If you decide to use the ‘multiple categories filter,’ the standard Category Filter is ignored.
• Filter by tag slug – Filter the posts by their tags and enter the tag slugs separated by commas (ex: tag1, tag2, tag3).
• Multiple authors filter – This allows you to filter the posts by author(s). Enter the author IDs separated by commas (ex: 13,23,18).
• Post type – Use this filter if you want to display custom post types. Add the name of the post type. This is provided by the plugin used to create the CPT, or by the user if it’s custom-made. Usage: post, page, event – write 1 or more post types delimited by commas.

• Sort order

  – This option lets you order the posts. Most of these options are self-explanatory, but there are a few options that have requirements:

  • Standard sorting options:
    • Latest posts – It shows articles from newest to oldest.
    • Oldest posts – It is the reverse of the previous sorting option.
    • Alphabetical A > Z – Your articles are sorted by their name in alphabetical order.
    • Random posts – This sorting option brings up posts randomly on each loading of the page. Every time you refresh the page, there are different articles on it. As a note. Do not use this sorting option together with pagination as it could result in duplicate posts.
    • Random posts from the last 7 days – This field brings up random posts based on the ones published in the last 7 days.

  • Sorting options that feature extra requirements:

    • Popular (all time) – this sorting option requires the post views to be active. If views are disabled, this option does not work.
    • Popular (last 7 days) – you have to enable the 7 days post sorting from Theme Panel > Block Settings > 7 Days Post Sorting.
    • Popular (jetpack + stats module required) – does not work with other settings/pagination and it requires Jetpack – Stats Module to be installed.
    • Featured – it displays posts included in the Featured category which is automatically created by the theme. If you delete this category and you want to restore it,  create a new category with the name of ‘Featured’ and a slug ‘featured’.
    • Random posts today – this field requires the post views to be active.
    • Highest rated – requires review posts, to see how you can set a review please check the following guide.
    • Most commented – requires comments to be active on posts. You can enable/disable the comments from Theme Panel > Post Settings > Post and Custom Post Types.

Ajax Categories Dropdown:

Filter type – Display a list of Categories, Authors or Tags next to the title. The user is able to see posts filtered on this block, that are dynamically loaded with Ajax without leaving the page. The Ajax filters (except by popularity) require an additional parameter.

• Show the following IDs – the Ajax drop down shows only the (author ids, categories IDs or tag IDs) that you enter here separated by commas. If no IDs are provided in the input below, the filter shows all the available items (ex: all authors, all categories etc..)
• Filter drop-down text – lets you choose the name for the first item from the drop-down Ajax list. By default, this is named ‘All.’
• Content preloading – When the preloading section is active, the theme loads the first page content for each of the Ajax filters at the initial page load.

Extra:

• Pagination – You can choose to add pagination to your block.
  • Next Prev ajax – adds two navigation arrows to navigate through posts.
  • Load More button – the “Load more” button appears at the bottom of the Flex Block allowing users to see more posts
  • Infinite Load – automatically loads more posts when the user gets to the end of the Flex Block.
  • Infinite load show ‘Load more’ after x pages –  if you select infinite load you can use this option to make it stop after some pages, the “Load more” button appears at the page bottom allowing users to load more posts. Notice: For the Infinite Load you may need to specify after how many pages a button shows up, otherwise it loads posts until they are finished.

3. Layout

The layout tab is the section allows you to customize your Flex Block’s form. A Flex Block layout can be made out of 1 or 2 modules. You can find settings in this section not only for each Flex Block in particular but for every module used on the particular Flex Block as well.

Individual Flex Blocks have more or less the following options depending on the Flex Block type selected. For the sake of keeping this guide as short as possible, we only mention the most important ones as there are lots of customization options to choose from.

• Overall layout

This section allows you to choose the number of columns or modules per column your block displays, the spacing (in pixels) between each module, setting margins and padding around your columns and adding a divider between elements.

If the Flex Block you’ve chosen is made out of 2 modules, there is a second layout section for the second module for more in-depth customization of the block.

• Article image

This section lets you control the thumbnails shown for your content. There are 4 thumbnail sizes for the Flex Block element you can choose in this section appropriately named small, default, large or full.

After you choose the image size, you can also play around with its vertical alignment, image width, and height (in percentage), image position, image radius, or select to hide the image altogether if you choose to.

• Article meta information

The meta information refers to the post titles, author, date, excerpt and other information about the post shown in a particular block.

You can choose the meta info positioning, alignment, as well as set margins and padding for each of the individual elements such as article title, category tag, author, date, and excerpt. If you want to hide certain elements, you can do it, too.

The author section allows you to use the author image as well as adjust its size.

Flex blocks 1 and 5 can also have a read more button added in this section.

4. Style

The style tab is all about styling the layout allowing you to change fonts and colors for your newly created block element.

• Block fonts

The top section allows you to change the font size, font family, line height, font weight, letter spacing, and text transform. This section covers the fonts for the Block header, Ajax categories and the load more button.

• Module fonts

The module fonts section controls the font settings for each module in particular for the article title, the category tags, the meta information, excerpts as well as the read more button if present.

• Colors

The color settings allow you to change individual colors for each of the layout sections. You can change the text color, background colors, hover colors, as well as adding a shadow effect and shadow offset.

5. CSS

The CSS tab refers to the block CSS as a whole and allows you to change it accordingly. This section includes the CSS box model where you can control the margins, padding, and border for the block.

Extra settings include border settings (color, style, radius, and width), shadows (shadow size, color, offset), the block overall background color or image (as well as their position and opacity).

The color overlay feature adds a gradient on top of your block where you can choose multiple colors to add all new creative gradients to take your block style to the next level.

The display option allows you to show or hide a particular block. This is useful if you want to hide a particular block for a specific device using the top device tabs.