The Marquee Carousel block in Frontis shows a line of logos, images, or text that scrolls smoothly from side to side, like a moving banner. It’s great for showing client logos, brand names, or important messages in a stylish and eye-catching way.

Adding Frontis Social Icon Block 

To insert the Marquee Carousel block, navigate to the post or page where you wish to include it. Next, tap the (+) plus icon located at the upper left corner of the display.

The Frontis menu bar interface will appear. Search for the Marquee Carousel block in the search box or select it from the menu bar.

After inserting the Marquee Carousel blocks, follow the steps below;

• Click on the Document Overview button, and you will be able to view the block list on the right side.
• Click on the block; all the control tabs will show here (Basic, Style, and Extra).

Basic Section

Basic > Slide items

Click on the Slider Items to open the Marquee Item settings. To customize each slider item, simply select it, and you will be able to add a logo or an image here. 

• Show Content: Turn on the “Show Content” toggle if you want to add text. You can write your text in the Text or Hover Text fields, and it will appear in the carousel.
• Add Slide: Click the Add Slide button to add more slide items to the carousel. This allows you to include as many slides as required.

Basic > General Setting

Transition Speed: The Transition Speed feature controls how quickly the items scroll across the screen. A lower number means faster movement, and a higher number means it scrolls more slowly. 

Reverse direction: The Reverse Direction feature makes the items scroll in the opposite direction. If it normally moves left to right, turning this on will make it go right to left.

Style Section

Style > Slide

• Width: The Width option allows you to define the width of the carousel section on your page. You can make it full width, half width, or set a custom size to fit your layout. 
• Padding: Padding allows you to add spaces around an object to increase the inner area. You can also add space on a single side with this feature. Click on the Link icon and add or reduce the padding on any side you want.
• Margin: Margin controls the space outside the element, helping to adjust its position on the canvas. You can add a margin to all sides or just one. Use the Link icon to manage each side separately.

Style > Content items

Image Margin: The Image Margin feature adds space around each image. It makes the carousel cleaner and easier to see.

• Typography: The typography section lets you change the font family, font size, font weight, font style, text transform, text decoration, letter spacing, and line height.
• Typography color: The Typography Color feature allows you to choose the color of the text in the carousel.

Style > Overlay

The Overlay feature applies a color layer over the background. It helps make the text or images stand out and make the section look nicer. To customize this section, enable the overlay toggle.

Start and End color: The Start and End Color feature lets you create a gradient overlay. The start color is where the gradient begins, and the end color is where it fades out.

Width: The Width setting controls how wide the overlay appears over the carousel area. You can customize the width according to your needs.

Extra Section

Z-Index: Consider the z-index as layers of sheets on a table. The greater the z-index, the more “above” the element appears. Therefore, if two elements intersect, the one with the greater z-index will be displayed in front.

However, it functions only when the element is positioned (relative, absolute, fixed, or sticky). Without it, z-index has no effect. 

Overflow section: The Overflow feature in the Advanced section of Frontis Blocks controls how extra content behaves when it goes beyond the block’s size. The overflow property determines the action to take in this scenario.

Values of overflow:

• Visible:- The visible overflow value shows all content, even if it goes outside the box. It won’t be hidden or cut off, and no scrollbars will appear. 
• Hidden: The hidden overflow value hides any content that goes outside the box. It gets cut off, and no scrollbars appear, so users can’t see the extra content.
• Scroll: The scroll overflow value always shows scrollbars. If the content is too big, you can scroll to see it. Even if there’s no extra content, scrollbars still appear.
• Auto: The auto overflow value adds scrollbars only when needed. If the content fits inside the box, no scrollbars show. If it overflows, scrollbars appear automatically.
• Clip: The clip overflow value hides any content that overflows the box without showing scrollbars. The extra content is simply cut off and cannot be seen or scrolled.

Padding: Padding allows you to add spaces around an object to increase the inner area. You can also add space on a single side with this feature. Click on the Link icon and add or reduce the padding on any side you want.

Margin: Margin enables the adjustment of an object’s placement on the canvas. With this feature, you can add a margin around an object or a single side. Click on the Link icon and add or reduce the Margin on any side you want.

Border and Shadow: You can place a border around the entire area and adjust the border color and border radius. This option allows you to apply a box shadow to the Marquee Carousel block.

Responsive Control: In this section, you will get 3 switches (Hide on Desktop, Hide on Tablet, Hide on Mobile). These switches let you show or hide the section on different devices.

Custom CSS: If you are an expert or have coding knowledge, you can add custom CSS in this section to make it responsive.