FACEBOOK FEED CAROUSEL OVERVIEW

by Shariful Islam | Dec 8, 2023 | Uncategorized | 0 comments

Getting Started

The Facebook Feedback Carousel module is like a special tool inside the Facebook plugin. It’s here to make your website look awesome and work really well. Especially if you’re a web designer, it helps you showcase feedback in a super smooth and easy way.

This module is famous for its easy way of doing things, making displaying feedback look smooth and saving you time. It has lots of tools that are made to fit what designers need, like feedback items, settings, design choices, fancy customizing features, and more. And don’t forget, the feedback item feature lets you add special things to each feedback, while the overall settings change how the whole module looks.

Child Item 

Before diving into the advanced features of the Facebook Feedback Carousel, let’s take a closer look at the Child Item, which empowers you to personalize each feedback individually. The Child Item has three primary sections:

• Content Options
• Design Options
• Advanced Options

Child Item Content Tab

Within the Content tab of the Facebook Feedback Carousel Child Item, you’ll find essential elements that provide designers with the tools to tailor individual feedback within the module. Here’s a breakdown of these elements:

Facebook Page:

• Facebook Page ID: This is the link to your Facebook page id. Everyone has their unique Facebook ID you need to provide your Facebook id here.
• Facebook Page Access Token: Facebook page access token means with this token website can access your facebook feed. Provide this token to this field.

• Show image : If you want your images in display , you can enable this help of this option.
• Show content:If you want your content in display , you can enable this help of this option.
• Show page name:Decide whether you’d like to display the name of your Facebook Page on the Carousel. “Yes” to show it, “No” to hide it.
• Show post date: You can display every facebook feedback post by selecting to yes in this option.
• Show button: Here you can add button to every carousel by enable it to yes.
• Button(string field): If you’ve chosen “Yes” for the button option, specify the label or text that should appear on the button. For example, you can write “Learn More” or “Show more.”

Order Item:

This section lets you specify the order of elements within each Carousel item.

• Image: Assign a number to set the position of the image within the Carousel item.
• Author and Date Indicate the number that determines where the author and date information should be displayed.
• Content: Specify a number for the content to determine its position within the Carousel item.
• Button: Assign a number to set the placement of the button within each Carousel item.

Carousel:

In the Carousel section, you can configure various settings for your Divi  Facebook Feedback  carousel

• Carousel Type: Here, you can pick the style for your carousel. You have two choices – Coverflow or Slider.
• Slider per View:  You can specify how many slides are visible simultaneously in your carousel.
• Carousel Speed: Here, you decide how quickly or slowly your carousel moves.
• Item Space Between: Here, you can set space between each item in the carousel.
• Autoplay: Autoplay means your carousel scrolls automatically with this option. Here, you can enable this option.
• Autoplay Delay: Define the delay between slides.
• Slider Loop: Here, with this option you can make your carousel to play in an endless loop.
• Center Slider: Choose whether a slide should be centered within the carousel.
• Auto Height: Enable or disable the automatic adjustment of carousel height based on content.
• Pause on Hover: Determine whether the carousel should pause when a user hovers their mouse pointer over it.

Navigation:

• Navigation Show/Hide: Decide whether to display navigation arrows for your carousel.
• Custom Arrow Icon: Pick where you want the navigation arrows to be placed vertically—center, top, or bottom.
• Vertical Position: Here, pick where you’d like the navigation arrows to be vertically located, whether in the middle, at the top, or at the bottom.
• Horizontal Position: You can set arrow alignment with this option. There are some options like left, right, centered, evenly spaced, or spaced around.
• Icon Size: You can set the arrow icon size if you like. Here with this option, you can customize arrows.
• Background Size: Here with this option, you can customize the arrow background as you like.
• Background Size Hover: Define the background-size for the arrows when hovered over.
• Radius: Adjust how round or sharp the arrow icons appear.
• Icon Color: Icon Color means you can set any color as your preference for your navigation icon arrow.
• Icon Color Hover: Set the color of the icons when hovered over.
• Background Color: Set color for the background of you navigation arrows as you like.
• Background Color Hover: Choose the background color when the arrows are hovered over.

Pagination:

• Pagination Show/Hide: Decide whether to display pagination bullets.
• Use Grab Cursor: Enable or disable the “grab” cursor effect for the bullets.
• Use Keyboard Navigation: You can choose whether people can move through the carousel using their keyboard.
• Use Mouse Navigation: Decide if users can navigate the carousel with their mouse.
• Pagination Alignment: Pick where you want the pagination bullets to be: left, center, or right.
• Bullet Type: Select the style of the bullets, whether simple bullets, fractions, or long active bullets.
• Dynamic Bullet: Decide if the bullets should change dynamically based on the active slide.
• Bullet Color: With this option, you can set your bullet color as. you like.
• Bullet Size: With this option, you can set your bullet size as. you like.

Effect:

• Slider Shadow: Enable or disable a shadow effect for the carousel.
• Slider Rotate: Adjust the rotation of the carousel.
• Slider Stretch: Change the stretching effect of the carousel.
• Slider Depth: Control the depth effect of the carousel items.

Link:

You can make each carousel have its own special web link. When someone clicks on a carousel, it can take them to a particular spot on your website or even open a completely new tab with a different webpage. This is really useful if you want each carousel to send people to different places when they click on it. It makes your carousel clickable and interactive. Inside the Link Option, there are two important things:

• Module Link URL:  The module link URL is like the web address you choose for your item. It’s where you decide where visitors go when they click on your Carousel. It’s like setting the path to where you want them to go on the internet.
• Module Link Target: Here, you have two choices. One option is to make it so that when someone clicks on the carousel, the new page opens in the same window. The other option is to make it open in a completely new tab or window. It’s up to you how you want it to 

Background:

In the Carousel’s background settings, you’ve got some amazing tools to make your design stand out and grab attention! Here’s what you can do:

• Background Color: You can set the color for the background here. Using this option you can choose any color for the background.
• Add Images or Videos: Here, you can choose the image for the carousel background as you like. Also, you can choose videos for the background of the carousel
•  Patterns: You can make your background look stylish by adding patterns. It’s like giving it a cool design. 
• Background Masks: You can make your carousel background more interesting by adding it background mask.

Admin Label:

This label is used to identify and manage the Instagram Carousel module in the admin area of your website. It helps you quickly locate and work with this specific module when editing your site’s content.

Child Item Design Tab

Within the Design Tab for each piece of feedback in the Facebook Feedback Carousel, you have the power to enhance the appearance of each feedback item. There are various design options at your disposal that are very user-friendly. You can easily create engaging effects like changing the look when someone hovers over a feedback item, fine-tuning captions and buttons, adjusting spacing around the feedback, and even applying borders or filters to alter how the feedback appears. Don’t be intimidated; it’s much simpler than it may seem. Just follow the guidance below.

Slide Item

In the Slide Item, you have the flexibility to add background color, background hover color also border radius, customize the border style, and even apply a unique box style. These options give you the freedom to create visually appealing designs for your slides.

Image:

Carousel Image Settings allow you to customize the appearance of your carousel images to match your preferences.

• Image Size: Use this to adjust the size of your carousel images.
• Image Alignment (left, center, right): Select where you want your  images to align on the carousel.
• Image Border Rounded Corners: Round the edges of your images for a smoother look.
• Image Border Styles: Pick your preferred border style for images.
• Image Border Width: Decide if you want a thick or thin border around your images.
• Image Border Color: Choose any color you like for the border around your images.
• Image Border Style: Select the style of the border (solid, continuous line, or dashed).
• Box Shadow: Add a shadow effect to give your images a 3D appearance.

Content:

In this section, you can easily change the text styles for your content. Whether you want to adjust the font, size, color, or other styling elements, this feature allows you to customize the appearance of your heading text to match your design preferences.

View Post :

In this section, you can easily change the text styles for your post also can change the button alignment, background color and background hover color. Whether you want to adjust the font, size, color, or other styling elements, this feature allows you to customize the appearance of your heading text to match your design preferences.

Author:

In the Author section, you can easily change the text styles for your headings. Whether you want to adjust the font, size, color, or other styling elements, this feature allows you to customize the appearance of your heading text to match your design preferences.

Date:

This allows you to control how the  date text within your carousel looks. You can adjust various aspects of the text to suit your preferences.

• Font: You can choose a font style as your preference. Like Abel, Actor and many more as you like.
• Font Weight: You can decide how thick or thin the characters in your text appear. It’s like choosing between regular and bold.
• Font Style: You can choose the font style as your preference. If you want your font to be italic, right, underlined, or many more you can do that.
• Text Alignment: You can choose the text alignment as your preference. If you want your text to be on the left, right, or centered, you can do that too.
• Text Color: This is where you pick the color for your text. You can choose any color you like.
• Text Size: Text Size is where you can choose your text size. Here you can adjust size according to your taste.
• Letter Spacing: You can choose the letter space as your preference. With this menu, you can add custom space between letters.
• Line Height: Line Height is where custome height of text lines. With this, you can choose your custom line height for your text.
• Text Shadow: On this menu, you can add shadow to your text, there are many more options of shadow you can choose what you like.

Custome Spacing:

Caption Spacing in the Carousel is your personal design assistant for getting the look you want. It’s your tool to arrange and display your facebook feedbacks exactly the way you envision. You’re the boss, ensuring everything appears just right. This feature helps you create an appealing and well-organized facebook feedback showcase that matches your website’s style seamlessly.

Custom Spacing in the Carousel consists of two parts: “Wrapper” and “Content.” Let’s break them down for you:

Text:

Text allows you to control how the text within your carousel looks. You can adjust various aspects of the text to suit your preferences.

• Font: You can choose a font style as your preference. Like Abel, Actor and many more as you like.
• Font Weight: You can decide how thick or thin the characters in your text appear. It’s like choosing between regular and bold.
• Font Style: You can choose the font style as your preference. If you want your font to be italic, right, underlined, or many more you can do that.
• Text Alignment: You can choose the text alignment as your preference. If you want your text to be on the left, right, or centered, you can do that too.
• Text Color: This is where you pick the color for your text. You can choose any color you like.
• Text Size: Text Size is where you can choose your text size. Here you can adjust size according to your taste.
• Letter Spacing: You can choose the letter space as your preference. With this menu, you can add custom space between letters.
• Line Height: Line Height is where custome height of text lines. With this, you can choose your custom line height for your text.
• Text Shadow: On this menu, you can add shadow to your text, there are many more options of shadow you can choose what you like.

Spacing

Spacing options let you control the distance and positioning of your carousel within its container.

• Margin (Top, Bottom, Left, Right): Adjust the space between the carousel and its surroundings. You can increase or decrease the space on each side individually.
• Padding: Adjust the space between the content inside. You can increase or decrease the space on each side individually.

Border 

Borders help define the outline of your carousel.

• Rounded Corners: You can choose the appearance of the border if you want your carousel border rounder you can adjust this from this menu.
• Border Style: you can choose the appearance of the border. You can have a solid continuous line or a dashed line with gaps.
• Border Width: Control the thickness of the border around your carousel.
• Border Color: With this option, you can add custom to your carousel border which suits your carousel most.

Box Shadow 

Box Shadow can give your  Facebook Feedback carousel a subtle 3D effect.

• Box Shadow:  Add a shadow to make your carousel look like it’s floating or slightly elevated.

Filter

Filters allow you to adjust the visual properties of your Facebook Feedback carousel.

• Hue: Change the color tone of your carousel.
• Saturation: As color is added but you want to adjust the color intensity with this option you can do that also.
• Brightness:  Brightness gives you the control to make your Facebook Feedback appearance darker or brighter as you like.
• Contrast: Contrast is used to make darker and lighter areas more even. We have that menu also with this you can make your Facebook Feedback more even.
• Invert: Using invert you can make your Facebook Feedback dark areas light and light areas light. 
• Sepia: Apply a warm brownish tone to your carousel.
• Opacity: Control how transparent or solid your carousel appears.
• Blur: With this blur customization you can add softness to your Facebook Feedback carousel, and make it more smooth using this menu.
• Blend Mode: You can choose your own preference mode that blends your Facebook Feedback to the background more smoothly. We have many different options of blend mode you can choose what you like.

Transform

Transform options allow you to change the position and orientation of your Facebook Feedback carousel.

• Transform options allow you to change the position and orientation of your Facebook Feedback carousel.
• Transform Scale:  With this option, you can resize your Facebook Feedback carousel as you prefer.
• Transform Translate: Using this translation you can move your Facebook Feedback carousel horizontally or vertically.
• Transform Rotate: On this menu, you can rotate your Facebook Feedback as you like. We have multiple options where you can adjust your Facebook Feedback as you like.
• Transform Skew: Skew your carousel to create a slanted effect.
• Transform Origin: Set the point around which your carousel is scaled, rotated, or skewed.

Animation: 

The animation effect setting is a part of all Divi default modules, including the Divi Facebook Feedback Carousel. It offers seven different effects and additional options to make your animated section look visually appealing.That’s happening in a photo. So, you can choose whether to have these captions visible or not in your carousel. It’s a neat way to give your website visitors some extra info and make your feedbacks more engaging.

Divi Facebook Feedback Carousel Advance Tab

You can do everything you need in the Content and Design tabs, so use them for your convenience. But if you want even more control, the Advanced tab in Divicarousel’s Facebook Feedback Carousel lets designers fine-tune every element using CSS ID & Classes and other Custom CSS code. Plus, it offers settings for visibility, transitions, position, and scroll effects to make everything work smoothly.

Class ID & Class

CSS ID: The CSS ID is used to uniquely identify the element when you want to link, script, or style it separately.

CSS Class: You can assign one or more CSS classes to the element, separated by spaces. These classes allow you to apply custom CSS styles either from your child’s theme or Divi’s custom CSS inputs.

Custom Css

In the Divicarousels Facebook Feedback Carousel module, there are various places where you can add your custom CSS code. Each CSS input box has a “?” symbol, which indicates the targeted class for your reference.

Condition:

Conditions help you control when and where the child item appears on your website.

Visibility:

Visibility settings in Facebook Feedback Carousel are about controlling when and where the carousel appears.

• Disable On (Phone, Tablet, Desktop): This feature allows you to choose on which devices (phone, tablet, desktop) you want to hide or show your carousel. For example, you can hide it on phones and display it only on tablets and desktops.
• Horizontal Overflow (Visible, Scroll, Hidden, Auto): It determines what happens when the carousel’s content extends beyond the available horizontal space. You can choose to make it visible, enable scrolling, hide it, or let the browser handle it automatically.
• Vertical Overflow (Visible, Scroll, Hidden, Auto): Similar to horizontal overflow, this setting controls what occurs when the carousel content extends beyond the vertical space. You can decide to make it visible, allow scrolling, hide it, or let the browser manage it automatically.

Transitions:

Transitions and scroll effects are what give your Facebook Feedback Carousel its unique flair, making your feedback pop and engage your audience. Transitions are like the smooth moves for your feedback, making it appear and disappear in a cool way.

• Transitions Duration: This determines how fast or slow your feedback appears.
• Transitions Delay: Decide if there should be a little pause before your feedback starts to move.
• Transitions Speed Curve: This defines how your feedback moves, whether it starts slow and goes fast or the other way around.

Position:

Position is about deciding where your feedback should sit on your webpage.

• Position:  Here, you can adjust you facebook feedback position.
• Z Index: You can decide where your feedback item should appear compared to other things on your webpage. 

Scroll Effects:

• Sticky Position: It’s like making your feedback stick in one place as people scroll, ensuring it stays on the screen.
• Scroll Transform Effect: Add special effects to your feedback as people scroll, making it visually captivating.
• Enable Vertical Motion: Make your feedback movable to create a dynamic effect.
• Motion Effect Trigger: Decide when these special up-and-down movements should happen as people scroll, adding an extra layer of engagement.