Testimonial Block
The Testimonial block is designed to create a layout that highlights customer feedback and enhances brand credibility. Within this block, you’ll need to add "Testimonial item" blocks—each "Testimonial item" represents an individual piece of customer feedback.
Testimonial Block - Settings Guide
This guide explains all available settings for the Testimonial block in order from top to bottom as they appear in the Theme Editor.
Here, you can adjust settings such as Layout Types, Layout Configuration, Carousel Configuration, etc.
Note that in this block, you can only add "Testimonial item" blocks.
Testimonial Block - Settings Guide
Layout Settings
Direction
Select
Column
Content flow direction: • Vertical - Stack items vertically • Horizontal - Arrange items horizontally
-
Direction on Mobile
Select
Column
Mobile layout direction: • Vertical - Stack items vertically • Horizontal - Arrange items horizontally
-
Alignment
Select
Left
Horizontal alignment when direction is Row: • Left - Align to left • Center - Center alignment • Right - Align to right • Space Between - Distribute space
When Direction is Row
Mobile Alignment
Select
Left
Mobile horizontal alignment when direction is Row: • Left - Align to left • Center - Center alignment • Right - Align to right • Space Between - Distribute space
When Direction is Row
Position
Select
Center
Vertical alignment when direction is Row: • Top - Align to top • Center - Center alignment • Bottom - Align to bottom
When Direction is Row
Align Baseline
Checkbox
No
Align text to baseline
When Position is Bottom
Alignment (Column)
Select
Left
Horizontal alignment when direction is Column: • Left - Align to left • Center - Center alignment • Right - Align to right
When Direction is Column
Position (Column)
Select
Center
Vertical alignment when direction is Column: • Top - Align to top • Center - Center alignment • Bottom - Align to bottom • Space Between - Distribute space
When Direction is Column
Gap
Range
12px
Spacing between child elements (0-100px)
-
Display Type Settings
Type
Select
Carousel
Display mode: • Carousel - Sliding carousel with navigation • Marquee - Continuous scrolling animation
Carousel Settings
Only visible when Type is Carousel
Columns
Range
3
Number of testimonials per view (1-4, with 0.1 steps)
Carousel only
Mobile Columns
Select
1
Number of columns on mobile (1, 1.3, or 2)
Carousel only
Loop
Checkbox
No
Enable infinite loop scrolling
Carousel only
Centered Slides
Checkbox
No
Center active slide in view
Carousel only
Navigation
Select
Arrows
Navigation style: • None - No navigation • Arrows - Previous/Next arrows • Pagination - Dots/Progress • Arrows + Pagination - Both
Carousel only
Arrows Position
Select
Inside
Arrow placement: • Inside Slide - Over content • Bottom Slide - Below content
When navigation includes arrows
Pagination Type
Select
Bullets
Pagination style: • Dots - Bullet dots • Dynamic - Dynamic dots • Progress - Progress bar • Counter - Numeric counter
When navigation includes pagination
Marquee Settings
Only visible when Type is Marquee
Motion Direction
Select
Reverse
Scrolling direction: • Forward - Left to right • Reverse - Right to left
Marquee only
Animation Type
Select
Auto
Animation trigger: • Auto - Continuous animation • Scroll - Triggered by scroll
Marquee only
Speed
Range
20
Animation speed (5-50)
Marquee only
Size Settings
Width
Select
Fill
Block width behavior: • Fit Content - Width based on content • Fill - Take full available width • Custom - Custom width percentage
-
Custom Width
Range
100%
Custom width percentage (0-100%)
When Width is Custom
Width Mobile
Select
Fill
Mobile width behavior: • Fit Content - Width based on content • Fill - Take full available width • Custom - Custom width percentage
-
Custom Width Mobile
Range
100%
Custom mobile width percentage (0-100%)
When Mobile Width is Custom
Appearance Settings
Inherit Color Scheme
Checkbox
Yes
Use parent section's color scheme
-
Background
Color
#FFFFFF
Background color with alpha support
When not inheriting color scheme
Background Gradient
Color Background
-
Background gradient overlay
When not inheriting color scheme
Headings
Color
#000000
Heading text color with alpha support
When not inheriting color scheme
Text
Color
#000000
Body text color with alpha support
When not inheriting color scheme
Primary Color
Color
#000F9F
Primary/accent color with alpha support
When not inheriting color scheme
Primary Hover Color
Color
#000000
Primary hover state color with alpha support
When not inheriting color scheme
Borders
Color
#E6E6E6
Border color with alpha support
When not inheriting color scheme
Shadow Color
Color
#000000
Shadow color with alpha support
When not inheriting color scheme
Background Media Settings
Background Media
Select
None
Background media type: • None - No background • Image - Background image • Video - Background video
-
Background Image
Image Picker
-
Upload background image
When media is Image
Background Video
Video URL
-
External video URL (YouTube/Vimeo)
When media is Video
Content Overlay
Checkbox
No
Show content over background media
When background media is set
Image Ratio
Select
Adapt
Media aspect ratio: • Adapt - Natural ratio • Square - 1:1 ratio • Portrait - 3:4 ratio • Landscape - 4:3 ratio
When media is set and overlay enabled
Border Settings
Borders Style
Select
None
Border style: • None - No borders • Solid - Solid border
-
Border Width
Range
1px
Border thickness (0-10px)
When Borders Style is not None
Border Radius
Range
0px
Corner roundness (0-100px)
-
Overlay Settings
Background Overlay
Checkbox
No
Enable background overlay
-
Overlay Color
Color
#00000026
Overlay color with alpha support
When overlay is enabled
Overlay Style
Select
Solid
Overlay type: • Solid - Solid color overlay • Gradient - Gradient overlay
When overlay is enabled
Gradient Direction
Select
To Top
Gradient direction: • Up - Bottom to top • Down - Top to bottom
When overlay is gradient
Shadow Settings
Shadow Color
Color
#00000000
Shadow color with alpha support
Horizontal Offset
Range
0px
Horizontal shadow position (-12 to 12px)
Vertical Offset
Range
0px
Vertical shadow position (-12 to 12px)
Blur
Range
0px
Shadow blur amount (0-20px)
Spread
Range
0px
Shadow spread radius (0-100px)
Margin Settings
Margin Top
Range
0px
Top margin spacing (0-100px)
Margin Top Mobile
Range
0px
Top margin on mobile (0-100px)
Margin Bottom
Range
0px
Bottom margin spacing (0-100px)
Margin Bottom Mobile
Range
0px
Bottom margin on mobile (0-100px)
Margin Left
Range
0px
Left margin spacing (0-100px)
Margin Left Mobile
Range
0px
Left margin on mobile (0-100px)
Margin Right
Range
0px
Right margin spacing (0-100px)
Margin Right Mobile
Range
0px
Right margin on mobile (0-100px)
Padding Settings
Padding Top
Range
0px
Top padding spacing (0-100px)
Padding Bottom
Range
0px
Bottom padding spacing (0-100px)
Padding Left
Range
0px
Left padding spacing (0-100px)
Padding Right
Range
0px
Right padding spacing (0-100px)
Testimonial Item Block
The "Testimonial item" block can be combined with other blocks to create a layout such as Heading, Text, Button, Image, Group, etc.
Child Blocks Supported
image- Image blocksicon- Icon blockstext- Text content blocksrating- Rating/star blocksimage-with-content- Combined image and content blocks@app- App blocksgroup- Nested group blocksgroup-basic- Basic group blocksspacer- Spacing blocks_divider- Custom divider blocks
Testimonial Item Block - Settings Guide
It is a flexible block used to create testimonial items with customizable layout and styling, and it can contain other child blocks. This block is rendered through the group snippet and fully supports Flexbox layout features.
Testimonial Item Block - Settings Guide
Link Settings
link
url
-
Optional link URL for the testimonial item
open_in_new_tab
checkbox
false
Open link in new tab
Layout & Direction Settings
content_direction
select
"column"
column, row
-
Main content flow direction
content_direction_mobile
select
"column"
column, row
-
Mobile content flow direction
horizontal_alignment
select
"flex-start"
flex-start, center, flex-end, space-between
content_direction == 'row'
Horizontal alignment for row layout
horizontal_alignment_mobile
select
"flex-start"
flex-start, center, flex-end, space-between
content_direction == 'row'
Mobile horizontal alignment
vertical_alignment
select
"center"
flex-start, center, flex-end
content_direction == 'row'
Vertical alignment for row layout
align_baseline
checkbox
false
-
vertical_alignment == 'flex-end'
Align content to baseline
horizontal_alignment_flex_direction_column
select
"flex-start"
flex-start, center, flex-end
content_direction != 'row'
Horizontal alignment for column layout
vertical_alignment_flex_direction_column
select
"center"
flex-start, center, flex-end, space-between
content_direction == 'column'
Vertical alignment for column layout
gap
range
12
0-100px (step: 1)
-
Gap between child elements
Size Settings
width
select
"fill"
fit-content, fill, custom
-
Desktop width behavior
custom_width
range
100
0-100% (step: 1)
width == 'custom'
Custom width percentage
width_mobile
select
"fill"
fit-content, fill, custom
-
Mobile width behavior
custom_width_mobile
range
100
0-100% (step: 1)
width_mobile == 'custom'
Custom mobile width percentage
height
select
"fit"
fit, fill, custom
-
Height behavior
custom_height
range
100
0-100% (step: 1)
height == 'custom'
Custom height percentage
Color Scheme Settings
inherit_color_scheme
checkbox
true
-
-
Use parent color scheme
scheme_background
color
"#FFFFFF"
-
!inherit_color_scheme
Custom background color
scheme_background_gradient
color_background
-
-
!inherit_color_scheme
Background gradient
scheme_foreground_heading
color
"#000000"
-
!inherit_color_scheme
Heading text color
scheme_foreground
color
"#000000"
-
!inherit_color_scheme
Body text color
scheme_primary
color
"#000F9F"
-
!inherit_color_scheme
Primary color
scheme_primary_hover
color
"#000000"
-
!inherit_color_scheme
Primary hover color
scheme_border
color
"#E6E6E6"
-
!inherit_color_scheme
Border color
scheme_shadow
color
"#000000"
-
!inherit_color_scheme
Shadow color
Background Media Settings
background_media
select
"none"
none, image, video
-
Background media type
video
video
-
-
background_media == 'video'
Background video file
video_position
select
"cover"
cover, contain
background_media == 'video'
Video positioning
background_image
image_picker
-
-
background_media == 'image'
Background image
background_image_position
select
"cover"
cover, fit
background_media == 'image'
Image positioning
content_overlay
checkbox
false
-
background_media == 'image' || background_media == 'video'
Enable content overlay
image_ratio
select
"adapt"
adapt, portrait, square, landscape
background_media != 'none' && content_overlay
Image aspect ratio
Border & Overlay Settings
border
select
"none"
none, solid
-
Border style
border_width
range
1
0-10px (step: 0.5)
border != 'none'
Border width
border_radius
range
0
0-100px (step: 1)
-
Border radius
toggle_overlay
checkbox
false
-
-
Enable background overlay
overlay_color
color
"#00000026"
-
toggle_overlay
Overlay color with alpha
overlay_style
select
"solid"
solid, gradient
toggle_overlay
Overlay style type
gradient_direction
select
"to top"
to top, to bottom
toggle_overlay && overlay_style == 'gradient'
Gradient direction
Shadow Settings
shadow_color
color
"#00000000"
-
Shadow color with alpha
shadow_horizontal_offset
range
0
-12 to 12px (step: 2)
Horizontal shadow offset
shadow_vertical_offset
range
0
-12 to 12px (step: 2)
Vertical shadow offset
shadow_blur
range
0
0-20px (step: 5)
Shadow blur radius
spread_radius
range
0
0-100px (step: 1)
Shadow spread radius
Margin Settings (Desktop & Mobile)
margin-block-start
range
0
Top margin desktop (0-100px)
margin-block-start-mobile
range
0
Top margin mobile (0-100px)
margin-block-end
range
0
Bottom margin desktop (0-100px)
margin-block-end-mobile
range
0
Bottom margin mobile (0-100px)
margin-inline-start
range
0
Left margin desktop (0-100px)
margin-inline-start-mobile
range
0
Left margin mobile (0-100px)
margin-inline-end
range
0
Right margin desktop (0-100px)
margin-inline-end-mobile
range
0
Right margin mobile (0-100px)
Padding Settings
padding-block-start
range
0
Top padding (0-100px)
padding-block-end
range
0
Bottom padding (0-100px)
padding-inline-start
range
0
Left padding (0-100px)
padding-inline-end
range
0
Right padding (0-100px)
Need More Help?
If you experience any difficulties or require extra support with your Ella theme, feel free to contact our support team through our Ticket System — we’ll get back to you within 24 hours.
Simply scan the QR code below to join our Facebook community and stay updated with the latest news, tips, and announcements.
Last updated