How can we help?
< All Topics
Print

How to use

Step 1

WPMozo Blog for Elementor tool provides advanced options that enable users to effortlessly display blog post layouts beautifully on their website using the powerful Elementor page builder.

Move to your WP admin panel >> Page >> Add New >> Select Edit with Elementor

Now on the left side, under WP Mozo, you’ll find the Blog widget, to add it simply drag and drop it onto the desired section of the page.

Step 2

Content

Within the content settings, you will find options to select the layout for your blog, pagination type, and elements you want to display on your blog posts. These settings allow you to customize the functionality of your blog page according to your preferences.

Layout

In the WPMozo blog, you will find a variety of blog layout options to choose from. These include grid extended, box extended, full width, block extended, full-width background, classic, and masonry layouts. Each layout offers a unique presentation style for your blog, allowing you to select the one that best suits your needs.

In the Blog Extended layout you have the option to choose the number of columns and adjust the column gap. This allows you to customize the appearance and structure of your blog’s content.

In the masonry layout, you have additional options that include masonry variants these are:

  • Vertical Grid
  • Grid Extended
  • Block Extended
  • Background Cover

Row Gap

By utilizing the Row Gap setting, you have the flexibility to adjust the row gap between two posts according to your specific preferences. This means that you can decrease or increase the space between each post, tailoring it to your specific requirements.

Query

Post Type: You can specify the type of posts. This can be posts, pages, media, landing pages, templates, products, or any other custom post types you have on your website.

Categories: You have the option to filter the related posts based on specific categories. By selecting one or more categories, you can ensure that only posts belonging to those categories are shown as related content.

Taxonomies Relation: This feature allows you to determine the relationship between different taxonomies when filtering related posts.

Formats: The available post formats for users to choose from are as follows:

  • Aside: Typically styled without a title, similar to a Facebook note update.
  • Gallery: A collection of images. The post may include a gallery shortcode and image attachments.
  • Link: A hyperlink to another website. The first <a href=""> tag in the post content can be considered the external link. If the post consists solely of a URL, that URL becomes the link, and the post title is used as the anchor text.
  • Image: A single image. The first <img /> tag in the post is often considered the main image. Alternatively, if the post contains only a URL, that URL becomes the image source, and the post title serves as the image’s title attribute.
  • Quote: A quotation. This format may include a blockquote containing the quoted content. Alternatively, the quote itself may be content, with the source or author included as the post title.
  • Status: A brief status update, similar to a Twitter post.
  • Video: A single video or video playlist. The first <video /> tag or <object>/<embed> element in the post content is typically considered the video. If the post consists solely of a URL, that URL becomes the video source. Additionally, the video may be attached to the post as an attachment, if video support is enabled.
  • Audio: An audio file or playlist. This format can be used for podcasting purposes.
  • Chat: A transcript of a conversation.

Post Count: This allows you to control the quantity of related content shown to visitors.

Order By: This option enables you to define the criteria for ordering the related posts. You can choose to order them by post ID, post author, title, date, last modified date, parent ID, random order, comment count, or menu order. This helps you determine the sequence in which the posts appear.

Order: You can specify whether the posts should be displayed in ascending or descending order based on the selected order by criteria.

Include Posts by ID: If there are specific posts you want to ensure are included then you can provide their IDs to include them in the results.

Exclude Posts by ID: Conversely, if there are certain posts you want to exclude, you can specify their IDs to ensure they are not shown.

Meta Date Format: This option allows you to define the format in which the post dates are displayed within the related posts section. You can choose from various date formats or customize it according to your preferences.

Ignore Sticky Posts: If you have sticky posts (posts that are pinned to the top of your blog or archive pages), you can choose whether or not to include them.

Content: You can decide whether to show an excerpt or the full content of the posts.

Elements

Elements setting in blog elementor
  • Feature image size: Choose from medium, large, or full size for the featured image.
  • Show read more link: Set it as “yes” to display the “Read More” link.
  • Read more text: Provide your own custom text for the “Read More” link.

To include additional information in the post display, you have the following options:

  • Show author: Display the author of the post.
  • Show date: Display the publication date of the post.
  • Show categories/terms: Display the categories or terms associated with the post.
  • Show comment count: Display the number of comments on the post.
  • Show read time: Show the estimated reading time for the post.
  • Read time text: Customize the text that appears alongside the read time.

For situations when there are no search results, you can set the following option:

  • No results text: Provide a custom message to display when there are no search results.

Pagination

  • Pagination Type: Choose between “Ajax Load More” or “Numbered” pagination.
  • Load More Button Text: Provide custom text for the load more button.
  • Show Less Button Text: Provide custom text for the show less button.

If you are using the “Numbered” pagination type you can customize the labels for the previous and next buttons.

WP-PageNavi plugin: Set as yes to use WP page navigation.

  • Install and activate the WP-PageNavi plugin on your WordPress website.
  • Once the plugin is activated, navigate to the plugin’s settings page (usually located under “Settings” -> “PageNavi”).
  • In the settings, you will find options to customize the labels for the previous and next buttons:
    • Prev label: Modify the text for the previous button label.
    • Next label: Change the text for the next button label.
  • Update the settings according to your preferences and save the changes.
  • By configuring these settings in WP-PageNavi, you will be able to customize the labels for the previous and next buttons in your numbered pagination.

Links

To set the target for single post links, determining whether they open in the same window or a new tab, you can use the following options:

  • Open in the same window: Select this option if you want the single post links to open within the same browser window.
  • Open in a new tab: Choose this option if you prefer the single post links to open in a new browser tab.

Step 3

Style

Title Customization

Typography

  • Font Family: Choose the desired font family for your text element. It provides a wide range of Google Fonts and system fonts to select from, or you can upload custom fonts if needed.
  • Font Size: Adjust the size of the text by specifying the font size in pixels (px), em, rem, or percentages (%).
  • Font Weight: Control the thickness or weight of the text, such as normal, bold, or other available variations depending on the selected font family.
  • Line Height: Determine the vertical spacing between lines of text. You can set it as a multiple of the font size or provide a specific value.
  • Letter Spacing: Adjust the spacing between individual characters within the text. Positive values increase spacing, while negative values decrease it.
  • Text Transform: Change the capitalization of the text, such as uppercase, lowercase, capitalize, or leave it as the default setting.
  • Text Decoration: Add or remove text decorations like underline, overline, line-through, or none.
  • Text Shadow: Apply a shadow effect to the text by specifying the color, horizontal and vertical offsets, blur radius, and opacity.
  • Text Alignment: Set the alignment of the text element, including left, center, right, or justified.

Title Heading Level: This option allows you to choose the HTML heading level for your post titles.

Title Alignment: This option allows you to control the alignment of your post titles. You can typically choose from alignment options such as left, center, right, or justify.

Body

  • Font Family: Choose the desired font family for the body text.
  • Font Size: Adjust the size of the body text by specifying the font size in pixels (px), em, rem, or percentages (%).
  • Font Weight: Control the thickness or weight of the body text, such as normal, bold, or other available variations.
  • Line Height: Determine the vertical spacing between lines of the body text by setting it as a multiple of the font size or providing a specific value.
  • Letter Spacing: Adjust the spacing between characters in the body text. Positive values increase spacing, while negative values decrease it.
  • Text Transform: Change the capitalization of the body text, such as uppercase, lowercase, capitalize, or leave it as the default setting.
  • Text Decoration: Add or remove text decorations like underline, overline, line-through, or none.
  • Text Shadow: Apply a shadow effect to the body text by specifying the color, horizontal and vertical offsets, blur radius, and opacity.
  • Text Alignment: Set the alignment of the body text, including left, center, right, or justified.

Overlay

  • Featured Image Overlay: Enable this option to add an overlay to the featured image.
  • Overlay Icon Color: Choose the color for the overlay icon. This icon is displayed on top of the featured image.
  • Hover Overlay Color: Set the color for the overlay that appears when hovering over the featured image.
  • Hover Icon Picker: Select an icon to display as the overlay icon when hovering over the image. Elementor provides a library of icons to choose from.

Post Meta

  • Meta Text Color: This option allows you to choose the color of the meta text. You can select a color from a color picker or enter a specific color code.
  • Typography: With the typography settings, you can adjust various aspects of the meta text’s font style, size, weight, and other properties. These settings are similar to the typography settings described earlier for titles and body text.
  • Meta Alignment: This setting allows you to specify the alignment of the meta information. You can choose between left, center, right, or justified alignment.
  • Padding: The padding setting enables you to add spacing around the meta information. You can set the padding values for the top, bottom, left, and right sides to create the desired spacing.

Pagination

Loader Color: This option allows you to choose the color of the loader used during pagination, typically displayed when additional content is being loaded. You can select a color from a color picker or enter a specific color code.

Category

  • Category/Term color: Color of text or font in a category or term.
  • Category/Term background: Background color or image behind a category or term.
  • Category/Term hover color: Color when hovering over a category or term.
  • Category/Term hover background: Background color or image when hovering over a category or term.
  • Category alignment: Positioning or arrangement of categories or terms in a layout.

Read More

  • Read More Button: Indicates whether it is set to “yes” to display on the interface.
  • Read More Alignment: Specifies the positioning or arrangement of the read more button within the layout.
  • Custom Style for Read More Button: Allows customization of the visual appearance (such as color, font, size, etc.) of the read more button to match specific design preferences.

Mobile

Hide Featured Image (Mobile): This control allows hiding the featured image specifically on mobile devices.

Border

Border Radius: Border radius refers to the rounding of corners. By providing values for the top right, bottom right, bottom left, and top left corners, you can create different degrees of curvature for each corner.