Creating an awesome website has to have a blog, news, or posts inside the website for your users to get the latest updates or news. By using Wadi Posts Widget For Elementor you can easily create a filterable posts page.

Using Wadi Addons For Elementor Posts Widget you can easily make a blog page for your blog posts or a Recipes Page for your latest recipes.

Also, you can Filter your posts and build your custom query easily.

Wadi Posts for Elementor pagination gives you the option to set numbered Pagination, Infinite Scroll, or Load More on Button Click.

Wadi Posts For Elementor Tutorial will go through all the options available and how you can use them.

Features

• Layout Settings
• Query
• Display Options
• Featured Image
• Post Display
• Filter Tabs

Layout Settings

Skins (Elementor Posts): Select Preset Skin for Elementor Posts, available Skins are:

• Classic
• Cards
• On Side

Columns: Using Columns Select you can choose how many columns Elementor Posts should have. You can have up to 6 columns of Posts per Row.

Posts Per Page: Set the number of posts to be displayed by Posts Widget.

Layout: Select which layout you can for your Posts from the available options:

• Grid [Default]
• Masonry
• Even
• Carousel (Posts)

Pagination

IF Pagination Enabled

Pagination: Allows you to select a pagination type for your posts there are two available:

• Numbers (Pagination) [Default]
• Infinite (Pagination)

Number Pagination: allow you to have two text fields to set the Next Page Text and Previous Page Text. Which will appear on pagination. (If pagination is available [If there is more than one page].

Infinite Pagination: allows you to have Infinite Load Event Select:

• Load Button Click: Loads more button to load more posts if clicked (if there are more posts).
• Load On Scroll: Load more posts when scrolling beyond the last post.

Query

Content Type: Select the content type (WordPress Custom Post Type) you want to query for instance: posts, pages, recipes (if you have a recipe custom post type), etc.

Categories Filter Rule: If specific Post Types have categories then you be able to Select Match Categories or Exclude Categories

Categories Filter, you can select one or more categories to match or exclude posts from.

Tags Filter Rule: If specific Post Types have Tags then you be able to Select Match Tags or Exclude Tags

Tags Filter, you can select one or more Tags to match or exclude posts from.

Filter By Author Role: Select Match Author or Exclude Author

Authors, you can select one or more authors to match or exclude posts from.

Posts Filter Rule: Select Match Posts or Exclude Posts

Post Type Filter [Post Type], you can select one or more posts to match or exclude posts from the custom post type which can be any post type, for instance, posts, pages, recipes, or any other custom post type based on post type selected in Content Type.

Ignore Sticky Posts: Enable or Disable to ignore sticky posts from the query.

Offset: Set the number of posts to offset, before the query start.

Exclude Current Post: Enable or Disable to remove the current post from the query (in case you used Wadi Posts for Elementor inside a post in a specific post type).

Items Order: Set the orders of posts (items) based on one of the several options to order posts:

• None
• ID
• Author
• Title
• Name
• Date
• Last Modified
• Random
• Comments Count

Order: in which order display posts in Wadi Posts Widget for Elementor

• Ascending
• Descending

Not Found Posts

Not Found & No More Posts: enable or disable Not Found, which will allow you to display a text instead of an empty query. Show Not found Text in case of the query does not contain any further posts.

Not Found items Text: set the text to show when there are no posts based on specific query settings.

Display Search Box: Enable or Disable search box with Not Found allowing users to search the website.

Display Options

Title Tag: select what HTML tag to wrap post titles in the posts query (HTML tag for Title [Default is H2]), from available HTML tags:

• DIV
• SPAN
• P
• H1
• H2
• H3
• H4
• H5
• H6

Row Spacing: Set the row spacing for Posts Query.

Column Spacing: Set the column spacing for Posts Query.

Alignment: Set the alignment of posts text (inside the box of the elements) from alignments options:

• Left
• Center
• Right
• Justify

Featured Image

Show Featured Image: Enable or Disable featured image allows you to show or hide the featured image from posts.

Link Featured Image: Enable or Disable the link featured image makes the featured image clickable, Links the featured image to the post.

Image Size: set the size of the image.

Image Size available options are:

• Thumbnail
• Medium
• Medium Large
• 1536×1536
• 2048×2048
• Full
• Custom

Image Height: Set the height of the featured image in the post box.

Image Fit: Set the image fit property

Image Fit available options are:

• Cover
• Contain
• Auto

Image Scale: Set the image Scale of the image on Hover.

Post Display

Post Content: Enable or Disable the post content, it will enable the Content Type of the post.

Content Type: options for post content there are: Excerpt and Post Content.

Excerpt Length: set the number of letters for excerpt length.

Excerpt Link Type: Select the excerpt link type.

Excerpt Link Type from available options:

• None
• Dots
• Link

IF Excerpt Link Type is Link

Excerpt Link Text: set the Excerpt Link Text for the post.

Post Meta

Post Author: Enable or Disable post author in the post box.

Avatar: Enable or Disable Author Avatar in the post box.

Author Name: Enable or Disable Author Name in the post box.

Post Date: Enable or Disable Post Date in the post box.

Post Comments: Enable or Disable Post Comments (Number) in the post box.

Post Categories: Enable or Disable Post Categories in the post box

Post Tags: Enable or Disable Post Tags in the post box.

Filter Tabs

Show Filters: Enable or Disable Filter tabs for Elementor Posts to filter using Categories, Tags, and other taxonomies.

Filters By: Select which filter type to filter posts by for instance for posts you can filter by Categories, and Tags.

First Tab: Set the first filter tab name (Default is All).

Styling Tab

Filter

Typography: Adjust the typography for Filter Tabs in Wadi Posts Widget for Elementor.

Alignment: Set the alignment for Filter Tabs inside Wadi Posts Widget for Elementor.

Style Wadi Posts Filter Using Three available tabs for style: Normal, Hover, and Active.

Each one of the Styling Tabs contains the following settings:

Text Color: Change the Text Color of the text in the filter tabs.

Background Type: Adjust the Background Type filter tabs.

Border Type: Set the border type of the Posts for Elementor Filter Tabs.

Border Radius: Adjust the border radius for Filter Tabs.

Filter Padding: Set the filters padding.

Filter Items Spacing: Set the spacing between the Filter Tabs.

Filter Container

Background Type: Set the background for Filter Tabs Container.

Padding: Set the Padding for Filter Container.

Margin: Set the Margin for Filter Container for Wadi Posts for Elementor.

Blog Post

Background Type: Set the background for the Blog Post Box.

Post Padding: Set the Padding for Blog Post Box.

Text Post Padding: Set the Padding for the Blog Post text part without the thumbnail image

Border Type: Set the border type for the Blog Post Box.

Border Radius: Adjust the border radius for the Blog Post Box.

Box Shadow: Set the box shadow for the Blog Post Box.

Title

Typography: Adjust the typography styling for the Blog Post Title.

Color: Set the Color for Blog Post Title.

Hover Color: Set the Hover Color for Blog Post Title.

Margin: Set the Margin for Blog Post Title.

Padding: Set the padding for Blog Post Title.

Meta

Typography: Adjust the typography styling for the Blog Post Meta.

Color: Set the Color for Blog Post Meta.

Links Hover Color: Set the Links Hover Color for Meta Links.

Bottom Spacing: Set the Bottom Spacing (Bottom Margin) for Meta Links.

Inner Meta Spacing: Set the Inner Meta Spacing (Right Margin) for Meta Links.

Excerpt

Typography: Adjust the typography styling for the Blog Post Excerpt.

Color: Set the Color for the Blog Post Excerpt.

Bottom Spacing: Set the Bottom Spacing ( Bottom Margin) for the Blog Post Excerpt.

Call To Action

Alignment: Set the alignment for Call To Action (Read More).

Typography: Adjust the typography styling for Call To Action.

Style Wadi Posts Call To Action Using Two available tabs for style: Normal, and Hover.

Each one of the Styling Tabs contains the following settings:

Text Color: Set the Text Color for Call To Action.

Background Type: Set the background for Call To Action.

Border Type: Set the border type for Call To Action.

Border Radius: Set the Border Radius for Call To Action.

Width: Set the Width for Call To Action.

Padding: Set the Padding for Call to Action.

Margin: Set the Margin for Call To Action.

The post Wadi Posts For Elementor Tutorial appeared first on Wadiweb.

Build your interactive pages with Wadi Media Carousel For Elementor, the widget will help you build the best version of the Elementor carousel you dream of with simple steps and extensive features.

This tutorial will go through all the options available and what you can achieve with each effect.

You can start by checking out Wadi Media Carousel For Elementor Demo Page.

Requirements:

• Install the Latest version of Elementor (free)
• Install Wadi Addons For Elementor Pro (Purchase from Wadi Addons For Elementor Pro Plans).

Activate Wadi Media Carousel

After you have installed both Elementor and Wadi Addons For Elementor Pro, you will need to make sure that Media Carousel is active from the dashboard

• Go to the WordPress admin dashboard.
• Navigate to Wadi Addons For Elementor (Plugin)
• Click on Widgets.

• Enable Media Carousel Widget for Elementor if not already Enabled.

• Now Go to Elementor Templates and Start by creating Elementor Template (Section or Page).
• Choose Wadi Media Carousel For Elementor and Drag and Drop to Start Media Carousel Widget For Elemetnor.

Features

• Media Carousel Content
• Settings
• Advanced Settings

Media Carousel Content

Media Skin

1. Carousel: Display basic carousel slides.
2. Slideshow: Display images (Media) slides allowing users to navigate through these images (Media) easily and interactively.

Slides

It is a repeater to add Media (images or videos) to your Media Carousel.

Slides content

• Content Slide Type:
  • Image: Choose an Image to be added to your Media Carousel.
  • Video: Add Video to Media Carousel.
• Slide Title: name each slide
• Image: Select the image that will display on Media Carousel
• Link:
  • None: Not link to anything.
  • Media File: will link to Image URL. (will generate Lightbox Effect for the image when clicked)
  • Custom URL: Redirect to Custom URL (Internal or External) when clicked.

Width: Set the width of Media Carousel [PX, REM, %, EM] (Responsive).

Height: Set the height of Media Carousel [PX, REM, %, EM] (Responsive).

Image Size: set the size of the image.

Image Size available options are:

• Thumbnail
• Medium
• Medium Large
• 1536×1536
• 2048×2048
• Full
• Custom

Image Fit: Set the image fit property

Image Fit available options are:

• Cover
• Contain
• Auto

Image Position: Set the image position property

Image Position available options are:

• Center Center
• Center Left
• Center Right
• Top Center
• Top Left
• Top Right
• Bottom Center
• Bottom Left
• Bottom Right

Settings

Extra Class: Add an extra class name that will be applied to the media carousel, and you can use this class for your customizations.

Initial Slide: Set the starting slide index, by default it is the first slide with index 0. If changed to 1 the second slide will display initially (zero-indexed).

Transition Speed: Set the Duration of transition between slides (in ms), when increased it will move the slides in slower transition.

Carousel Direction:

• Horizontal: Move Slides from Left to Right horizontally.
• Vertical: Move Slides from Bottom to Top vertically.

Pagination

Dots Navigation: Enable (or Disable) Media Carousel Dots Navigation which will show or hide dots navigation from Media Carousel for Elementor.

IF Dots Navigation Enabled

Dots Navigation:

• Bullets
• Fraction
• Progress Bar

IF Dots Navigation is set to Bullets

Navigation Dots Clickable: Make Dots Navigation Clickable allowing you to navigate the Media carousel by Navigation Dots.

Hide Navigation Dots Clickable: Enable (or Disable) Hide and Show Navigation Dots by Click.

Vertical Offset: Set the position of Dots Navigation Bullets vertically.

Arrow Navigation: Enable (or Disable) Media Carousel Arrow Navigation which will show or hide arrow navigation from Media Carousel for Elementor.

IF Arrow Navigation Enabled

Next Icon: Set the Next icon for Arrow Navigation on Media Carousel.

Previous Icon: Set the Previous icon for Arrow Navigation on Media Carousel.

Scrollbar

Scrollbar: Enable (or Disable) the Scrollbar navigation indicator of Media Carousel for Elementor.

IF Scrollbar Enabled

Scrollbar Draggable: Enable (or Disable) make scrollbar draggable that allows you to control the slider position using the scrollbar.

Hide Scrollbar: Enable (or Disable) Hide scrollbar automatically after user interaction.

Scrollbar Snap: Enable (or Disable) Snap slider position to slides when you release the scrollbar.

Slides View

Slides Per View: Set the number of slides per view ( Note that Carousel Effects only works for Slide and Coverflow effects.).

Slides to Scroll: Set the number of slides to slide per interaction (default is one slide [1] ). (Set numbers of slides per swipe. Useful to use with Slides Per View more than 1. Please note that Carousel Effects only works for (Slide) and (Coverflow) effects).

Carousel Space Between: Set the space between slides for the carousel.

Carousel Breakpoints: Set the carousel breakpoints (use carefully).

Centered: Enable (or Disable) Centered, Active slide will be centered, not always on the left side.

Grab Cursor: Grab Cursor may a little improve desktop usability. If enabled, the user will see the “grab” cursor when hovering on Carousel.

Additional Settings

Lazyload: Enable (or Disable) Lazyload mode for Media Carousel, lazyload will load media only when they are on the screen.

Loop: Enable (or Disable) Loop mode, Makes the carousel loop through the slides.

Mousewheel: Enable (or Disable) Mousewheel mode, Make the carousel slide on the mouse scroll.

Autoplay

Autoplay: Enable (or Disable) Autoplay mode, makes the carousel slide automatically without interaction, if disabled carousel will only interact on user actions.

IF Autoplay Is Enabled

Autoplay Delay: Set the Delay of Autoplay when sliding. Delay between slides on autoplay of Carousel in ms (milliseconds).

Disable Autoplay on Interaction: Disable autoplay on interaction with the carousel, if enabled autplay will stop, if disabled it will continue after the interaction.

Puase Carousel on Mouse Enter: Enable (or Disable) Carousel autoplay will pause on mouse enter. If Disable On Interaction is also enabled, it will stop autoplay.

Reverse Direction: Enable (or Disable) Autoplay Reverse Direction Carousel Autoplay.

Carousel Effects

1. Slide
2. Coverflow
3. Fade
4. Flip
5. Cube
6. Cards

IF Media Carousel Effect is Coverflow

Coverflow slide Shadows: Enable (or Disable) will enable Coverflow Slide Shadows.

Coverflow Depth: Set the depth of Coverflow Media Carousel, Depth offset in px (slides translate in Z axis).

Coverflow Modifier: Set the Coverflow space between slides.

Coverflow Scale: Set Scale of Coverflow Carousel Slides.

Coverflow Stretch: Stretch space between slides (in PX).

IF Media Carousel Effect is Flip Effect

Flip Slide Shadows: Enable (or Disable) Flip Carousel Slide Shadows.

Flip Rotation Limit: Enable (or Disable) Limit edge slides rotation.

IF Media Carousel Effect is Cube Effect

Cube Shadow: Enable (or Disable) Media Carousel Cube Effect Shadow.

IF Cube Shadow is Enabled on Media Carousel Cube Effect

Cube Shadow Offset: Set Shadow Offset in PX for Media Carousel Cube Effect.

Cube Shadow Scale: Set Shadow Scale Ratio for Media Carousel Cube Effect.

Cube Slide Shadows: Enables Slide Shadows for Media Carousel Cube Effect.

IF Media Carousel Effect is Cards Effect

Cards Slide Shadows: Enables Slide Shadows for Media Carousel Cards Effect.

Thumbs Settings

IF Media Skin set to Slideshow

Thumb Slides Per View: Set the number of Thumb Slides to appear on Slideshow Media Carousel.

Space Between: Adjust the space between Thumb Slides on Slideshow Media Carousel.

Ratio: Set the ratio for Thumb Slides Image on Slideshow Media Carousel.

Styling Tab

Space Between: (IF Media Carousel Skin is Slideshow) Set the space between the Main Media Carousel and the Slideshow Thumbnail Slides.

Background Color: Set Background Color for Media Carousel Slides Media (Images).

Border Size: Set the Border Size (thickness) for Media Carousel Slides.

Border Radius: Adjust the border radius for Media Carousel Slides.

Border Color: Set the Border Color for Media Carousel Slides.

Padding: Set Padding for Media Carousel Slides.

Navigation

Dots

Size: Set the Size for Media Carousel Navigation Dots.

Color: Choose The Color of the Navigation dots on Media Carousel.

Active Color: Choose the Active Color of The Navigation dots on Media Carousel.

Hover Color: Choose the Hover Color of The Navigation dots on Media Carousel.

Arrows

Size: Set the Size for Media Carousel Navigation Arrows.

Color: Choose The Color of the Navigation Arrows on Media Carousel.

Hover Color: Choose the Hover Color of The Navigation Arrows on Media Carousel.

Previous Arrow: Set the Position of the Previous -Navigation- Arrow on Media Carousel.

Next Arrow: Set the Position of the Next -Navigation- Arrow on Media Carousel.

Scrollbar

Scollbar Line Color: Choose the Color for Scrollbar Line on Media Carousel.

Scrollbar Draggable: Choose the Color for Scrollbar Draggable on Media Carousel.

Scrollbar Size: Set the Scrollbar Size [ Height or Width depending on Media Carousel Direction (Horizontal, or Vertical) ] on Media Carousel.

Lightbox

Lightbox Background Color: Choose Media Carousel Lightbox Background Color.

Lightbox Elements Color: Choose Media Carousel Lightbox Elements Color.

Lightbox Elements Hover Color: Choose Media Carousel Lightbox Elements Hover Color.

Video Icon Color: Set the Color for Media Carousel Video Icon.

Lightbox Video Width: Set the Width of Video on Media Carousel Lightbox.

The post Wadi Media Carousel For Elementor (Pro) Tutorial appeared first on Wadiweb.