What is the Flip Box widget?
The Flip Box widget allows you to create animated boxes of all shapes and sizes that flip, fade or wipe when a user hovers over them. It’s a great tool for livening up your site with eye-catching movement while also offering visitors the opportunity to interact with your content.
Why use the Flip Box widget?
We all try to avoid walls of text on our landing pages, but it can be a challenge. Animation and interactivity are great ways to make otherwise static content fun and lively—and flip boxes can add all that.
Add excitement to your page
Use a flipbox widget
When should I use the Flip Box widget?
Use the Flip Box widget when you want to:
- Draw attention to an important feature, option, opportunity, or service that might otherwise get buried in text.
- Allow your user to interact with the content
- Pull your user into a conversation with your content.
- Offer a fun, unique experience that can be changed up whenever you want to refresh your content.
- Answer key questions your user may have with a quick, intuitive flip.
- Provide creative interactions with the touch of a mouse.
Here are some ideas for putting the Flip Box to work:
Offer a discount and flip the widget to show how much the user will save.
30%Off!!
Take off with savings
Pay as little as $199 for our mobile phones
Show a picture on one side of the widget; flip to learn more about a destination or service.
Tempt users with intriguing text and surprise them with a video on the flip.
Want to stir up trouble?
Learn the art of stir fry in ten easy lessons.
Gallery
Each one of the Flip Boxes below uses the Flip Box customizing tools to create a different look and a different flipping experience. Users can flip up, down, or sideways—and the transition can fade, zoom, shift, sideswipe, or turn, in 2-D or 3-D.
Common use cases
The Flip Box widget has a wide range of uses, and creative developers are coming up with more ideas every day. Here are some of the most popular:
Products and Services:
Put the name of a feature or service on one side and their description or benefits on the other
Clogged sink?
We'll clear your drains for only $99
Store fronts:
Display images of items for sale on one side with a list of features and pricing on the other.
This week
Cherries - $2.50 lb.
Potatoes - $.25 lb.
Honey - $4.00
Strawberries - $$3.00 lb.
Potatoes - $.25 lb.
Honey - $4.00
Strawberries - $$3.00 lb.
Travel services:
Show images of destinations with the destination names on one side and descriptions on the other.
Medical and other services:
Show photos of staff on one side with specialties and bios on the other.
Fully staffed - 24/7
We're there when you need us
Team Profiles:
Put names, titles, and photos of team members on one side and their profile information on the other
Adele Jones
Chief Technical Officer
BSc. Computer Science
MSc. Data Analysis
Artists’ Portfolios:
Display artistic works on one side and provide a description on the other.
Interesting use cases
While a standard flip-for-more-information use can really spice up a website, there are more creative ways to use the widget. Here are just a few we’ve seen:
Quiz Maker:
Ask a quiz question on the front and provide the answer on the back. You can create flashcards for learning a new language or solving a math problem—or engage your user in a fun trivia quiz.
What is the capital of France?
Paris
Animation Display:
Flip Boxes can be set to display animations on hover, so you can include several animated GIFs on a page without them playing all at once. Make the front of the flip box a static image from the GIF, and put the animated version on the back. When users hover over the front, the animation will play. (You can see this effect in our Valentine’s Day kit).
Travelog:
Where can users go, and what will they see when they get there? The front of the Flip Box can show a photo of a destination while the back can give visitors a virtual tour.
I love Paris in the...
What can I edit in my Flip Box?
The Flip Box widget is highly customizable: you can change shapes, sizes, colors, images, interaction styles, and more. The widget comes with default text, images and other elements. You can simply delete any elements you don’t want in the edit panel and they won’t appear in your flip box.
Click the elements below for an explanation of how they work.
The Content tab - Front
icons, <br \/>or you can skip adding a graphic element.<\/p><p>Learn more about <a href=https://elementor.com/"https:////elementor.com//help//add-graphic-element///">adding graphic elements<\/a>.<\/p>","hotspot_offset_x":{"unit":"%","size":38,"sizes":[]},"hotspot_offset_y":{"unit":"%","size":18,"sizes":[]},"hotspot_icon":{"value":"fas fa-plus","library":"fa-solid"},"hotspot_custom_size":"","hotspot_width":null,"_id":"3f43027","hotspot_label":"","hotspot_link":{"url":"","is_external":"","nofollow":"","custom_attributes":""},"hotspot_icon_position":null,"hotspot_icon_spacing":null,"hotspot_height":null,"hotspot_horizontal":"left","hotspot_vertical":"top","hotspot_tooltip_position":"no","hotspot_position":null,"hotspot_tooltip_width":null,"hotspot_tooltip_text_wrap":null},{"hotspot_tooltip_content":"<p>Click here to select the icon or image you'd like to use in the flip box.\u00a0<\/p><p>Learn more about\u00a0<a href=https://elementor.com/"https:////elementor.com//help//add-graphic-element///">adding graphic elements<\/a>.<\/p>","hotspot_offset_x":{"unit":"%","size":68,"sizes":[]},"hotspot_offset_y":{"unit":"%","size":37,"sizes":[]},"hotspot_icon":{"value":"fas fa-plus","library":"fa-solid"},"hotspot_custom_size":"yes","hotspot_width":{"unit":"px","size":0,"sizes":[]},"_id":"8416e3c","hotspot_label":"","hotspot_link":{"url":"","is_external":"","nofollow":"","custom_attributes":""},"hotspot_icon_position":null,"hotspot_icon_spacing":null,"hotspot_height":{"unit":"px","size":"","sizes":[]},"hotspot_horizontal":"left","hotspot_vertical":"top","hotspot_tooltip_position":"no","hotspot_position":null,"hotspot_tooltip_width":null,"hotspot_tooltip_text_wrap":null},{"hotspot_tooltip_content":"<p>Allows you to put a frame around a Flip Box icon.<\/p><p><strong>Stacked<\/strong> puts a filled frame around the icon. You choose between a circular or square frame.<\/p><p><b>Framed <\/b>puts an unfilled frame around the icon. You choose between a circular or square frame.<\/p>","hotspot_offset_x":{"unit":"%","size":16,"sizes":[]},"hotspot_offset_y":{"unit":"%","size":52,"sizes":[]},"hotspot_icon":{"value":"fas fa-plus","library":"fa-solid"},"hotspot_custom_size":"yes","hotspot_width":{"unit":"px","size":0,"sizes":[]},"_id":"ecdf739","hotspot_label":"","hotspot_link":{"url":"","is_external":"","nofollow":"","custom_attributes":""},"hotspot_icon_position":null,"hotspot_icon_spacing":null,"hotspot_height":{"unit":"px","size":"","sizes":[]},"hotspot_horizontal":"left","hotspot_vertical":"top","hotspot_tooltip_position":"no","hotspot_position":null,"hotspot_tooltip_width":null,"hotspot_tooltip_text_wrap":null},{"hotspot_tooltip_content":"\t\t<div data-elementor-type=\"page\" data-elementor-id=\"33066\" class=\"elementor elementor-33066\">\n\t\t\t\t\t\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-1710cfd4 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"1710cfd4\" data-element_type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-13b3a80c\" data-id=\"13b3a80c\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t\t\t<div class=\"elementor-element elementor-element-55fbb3a2 elementor-widget elementor-widget-text-editor\" data-id=\"55fbb3a2\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<p>Choose a title that grabs your user\u2019s interest and clearly states your message.<\/p><p>It should be short and to the point.\u00a0<\/p><p>Type it into the box labeled\u00a0<strong>Title<\/strong>,\u00a0<\/p><p>and it will appear in the size, font, and color you select using\u00a0<a href=https://elementor.com/"https:////elementor.com//help//what-is-typography///">Typography./t/t/t/t/t/t/n/t/t/t/t/n/t/t/t/t/t/n/t/t/n/t/t/t/t/t/t/t/n/t/t/n/t/t/t/t/t/t/t/n/t/t","hotspot_offset_x":{"unit":"%","size":14,"sizes":[]},"hotspot_offset_y":{"unit":"%","size":60,"sizes":[]},"hotspot_icon":{"value":"fas fa-plus","library":"fa-solid"},"hotspot_custom_size":"yes","hotspot_width":{"unit":"px","size":0,"sizes":[]},"_id":"9f53461","__dynamic__":{"hotspot_tooltip_content":"[elementor-tag id=\"bfdf151\" name=\"shortcode\" settings=\"%7B%22shortcode%22%3A%22%5Belementor-template%20id%3D%5C%2233066%5C%22%5D%22%7D\"]"},"hotspot_label":"","hotspot_link":{"url":"","is_external":"","nofollow":"","custom_attributes":""},"hotspot_icon_position":null,"hotspot_icon_spacing":null,"hotspot_height":{"unit":"px","size":"","sizes":[]},"hotspot_horizontal":"left","hotspot_vertical":"top","hotspot_tooltip_position":"no","hotspot_position":null,"hotspot_tooltip_width":null,"hotspot_tooltip_text_wrap":null},{"hotspot_tooltip_content":"\t\t<div data-elementor-type=\"page\" data-elementor-id=\"33074\" class=\"elementor elementor-33074\">\n\t\t\t\t\t\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-a87b95d elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"a87b95d\" data-element_type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-568fe0d7\" data-id=\"568fe0d7\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t\t\t<div class=\"elementor-element elementor-element-3cd4c7f4 elementor-widget elementor-widget-text-editor\" data-id=\"3cd4c7f4\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<!-- wp:paragraph -->\n<p>Your description will elaborate on your title but should still remain relatively short <br \/>depending on the size and shape of the widget you\u2019re using. <br> While you can change the <a href=https://elementor.com/"https:////elementor.com//help//what-is-typography///">typography of your description it\u2019s usually best to stick <br> with one look and feel within a given widget. Check out our article on\u00a0<a href=https://elementor.com/"https:////elementor.com//help//how-do-i-set-global-fonts-and-colors///">global fonts and colors<\/a>\u00a0<br>for more information about keeping a consistent look and feel.\u00a0<\/p>\n<!-- \/wp:paragraph -->\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t\t\t\t<\/div>\n\t\t","hotspot_offset_x":{"unit":"%","size":42,"sizes":[]},"hotspot_offset_y":{"unit":"%","size":60,"sizes":[]},"hotspot_icon":{"value":"fas fa-plus","library":"fa-solid"},"hotspot_custom_size":"yes","hotspot_width":{"unit":"px","size":0,"sizes":[]},"__dynamic__":{"hotspot_tooltip_content":"[elementor-tag id=\"bfdf151\" name=\"shortcode\" settings=\"%7B%22shortcode%22%3A%22%5Belementor-template%20id%3D%5C%2233074%5C%22%5D%22%7D\"]"},"hotspot_tooltip_position":"","_id":"68107d4","hotspot_label":"","hotspot_link":{"url":"","is_external":"","nofollow":"","custom_attributes":""},"hotspot_icon_position":null,"hotspot_icon_spacing":null,"hotspot_height":{"unit":"px","size":"","sizes":[]},"hotspot_horizontal":"left","hotspot_vertical":"top","hotspot_position":null,"hotspot_tooltip_width":null,"hotspot_tooltip_text_wrap":null}],"hotspot_sequenced_animation":"no","tooltip_position":"top","tooltip_trigger":"click","tooltip_animation":"e-hotspot--fade-in-out"}" data-widget_type="hotspot.default">
Use backgrounds to make your flip box pop.
Many flip boxes put images in the background
instead of using them as content.
You can insert two types of graphic elements
in the flip box front - images and icons,
or you can skip adding a graphic element.
Learn more about adding graphic elements.
Click here to select the icon or image you'd like to use in the flip box.
Learn more about adding graphic elements.
Allows you to put a frame around a Flip Box icon.
Stacked puts a filled frame around the icon. You choose between a circular or square frame.
Framed puts an unfilled frame around the icon. You choose between a circular or square frame.
Choose a title that grabs your user’s interest and clearly states your message.
It should be short and to the point.
Type it into the box labeled Title,
and it will appear in the size, font, and color you select using Typography.
Your description will elaborate on your title but should still remain relatively short
depending on the size and shape of the widget you’re using.
While you can change the typography of your description it’s usually best to stick
with one look and feel within a given widget. Check out our article on global fonts and colors
for more information about keeping a consistent look and feel.
The Content tab - Back
Typography.","hotspot_offset_x":{"unit":"%","size":"14","sizes":[]},"hotspot_offset_y":{"unit":"%","size":"37","sizes":[]},"__dynamic__":{"hotspot_tooltip_content":"[elementor-tag id=\"e9b6feb\" name=\"global-text\" settings=\"%7B%22key%22%3A%22title_snippet%22%7D\"]"},"hotspot_label":"","hotspot_link":{"url":"","is_external":"","nofollow":"","custom_attributes":""},"hotspot_icon":{"value":"","library":""},"hotspot_icon_position":null,"hotspot_icon_spacing":null,"hotspot_custom_size":"no","hotspot_width":null,"hotspot_height":null,"hotspot_horizontal":"left","hotspot_vertical":"top","hotspot_tooltip_position":"no","hotspot_position":null,"hotspot_tooltip_width":null,"hotspot_tooltip_text_wrap":null},{"hotspot_tooltip_content":"<p>Your description will elaborate on your title but should still remain relatively short<br \/> depending on the size and shape of the widget you’re using.<br \/> While you can change the <a href=https://elementor.com/"https:////elementor.com//help//what-is-typography///">typography of your description it’s usually best to stick<br \/> with one look and feel within a given widget. Check out our article on <a href=https://elementor.com/"https:////elementor.com//help//how-do-i-set-global-fonts-and-colors///">global fonts and colors<\/a> <br \/> for more information about keeping a consistent look and feel. <\/p>","hotspot_offset_x":{"unit":"%","size":"41","sizes":[]},"hotspot_offset_y":{"unit":"%","size":"37","sizes":[]},"_id":"ca8631d","__dynamic__":{"hotspot_tooltip_content":"[elementor-tag id=\"2f61119\" name=\"global-text\" settings=\"%7B%22key%22%3A%22description_snippet%22%7D\"]"},"hotspot_label":"","hotspot_link":{"url":"","is_external":"","nofollow":"","custom_attributes":""},"hotspot_icon":{"value":"","library":""},"hotspot_icon_position":null,"hotspot_icon_spacing":null,"hotspot_custom_size":"no","hotspot_width":null,"hotspot_height":null,"hotspot_horizontal":"left","hotspot_vertical":"top","hotspot_tooltip_position":"no","hotspot_position":null,"hotspot_tooltip_width":null,"hotspot_tooltip_text_wrap":null},{"hotspot_tooltip_content":"<p>You can include a button on the back of your flip box. <br \/>Use <strong>Link\u00a0<\/strong> to determine if the button will take the user to a new page, <br \/>trigger a popup, or take other actions.<\/p>\n<p>Use Link Attributes to determine <br \/>whether or not links open in a new window or use nofollow.<\/p>\n<p><span style=\"font-weight: 400\">Learn about <\/span><a href=https://elementor.com/"https:////elementor.com//help//custom-link-attributes///">dynamic tags<\/a> to add even more <br> functionality to your button.<\/p>","hotspot_offset_x":{"unit":"%","size":"28","sizes":[]},"hotspot_offset_y":{"unit":"%","size":"83","sizes":[]},"_id":"e50d550","hotspot_label":"","hotspot_link":{"url":"","is_external":"","nofollow":"","custom_attributes":""},"hotspot_icon":{"value":"","library":""},"hotspot_icon_position":null,"hotspot_icon_spacing":null,"hotspot_custom_size":"no","hotspot_width":null,"hotspot_height":null,"hotspot_horizontal":"left","hotspot_vertical":"top","hotspot_tooltip_position":"no","hotspot_position":null,"hotspot_tooltip_width":null,"hotspot_tooltip_text_wrap":null},{"hotspot_tooltip_content":"<p>Use\u00a0<a href=https://elementor.com/"https:////elementor.com//help//?p=33051&elementor-preview=33051&ver=1670935696#frontbackground\">backgrounds<\/a> to make your flip box pop. <br \/>Many flip boxes put images in the background <br \/>instead of using them as content.<\/p>","hotspot_offset_x":{"unit":"%","size":"88","sizes":[]},"hotspot_offset_y":{"unit":"%","size":"30","sizes":[]},"_id":"320029e","hotspot_label":"","hotspot_link":{"url":"","is_external":"","nofollow":"","custom_attributes":""},"hotspot_icon":{"value":"","library":""},"hotspot_icon_position":null,"hotspot_icon_spacing":null,"hotspot_custom_size":"no","hotspot_width":null,"hotspot_height":null,"hotspot_horizontal":"left","hotspot_vertical":"top","hotspot_tooltip_position":"no","hotspot_position":null,"hotspot_tooltip_width":null,"hotspot_tooltip_text_wrap":null}],"hotspot_sequenced_animation":"no","tooltip_position":"top","tooltip_trigger":"click","tooltip_animation":"e-hotspot--fade-in-out"}" data-widget_type="hotspot.default">
Choose a title that grabs your user’s interest and clearly states your message.
It should be short and to the point.
Type it into the box labeled Title,
and it will appear in the size, font, and color you select using Typography.
Your description will elaborate on your title but should still remain relatively short
depending on the size and shape of the widget you’re using.
While you can change the typography of your description it’s usually best to stick
with one look and feel within a given widget. Check out our article on global fonts and colors
for more information about keeping a consistent look and feel.
You can include a button on the back of your flip box.
Use Link to determine if the button will take the user to a new page,
trigger a popup, or take other actions.
Use Link Attributes to determine
whether or not links open in a new window or use nofollow.
Learn about custom link attributes.
Find out more about using dynamic tags to add even more
functionality to your button.
Use backgrounds to make your flip box pop.
Many flip boxes put images in the background
instead of using them as content.
Note: In order to embed video in a flip box, you can paste the YouTube embed link in the Description field.
The Content tab - Settings
Flip defines how the
flip box transitions from the front to back
side. There are several ways for this transition to take place:
- The classic Flip, which can go
in one of four directions - Up,
Down, Right or Left. You can
also add a 3D effect to the flip
to really make the box stand
out. - Slide, which can go in one of
four directions - Up, Down,
Right or Left. - Push, which can go in one of
four directions - Up, Down,
Right or Left. - Zoom in
- Zoom out
- Fade
The Style tab - Front
<span style=\"font-weight: 400\">color picker<\/span><\/a><span style=\"font-weight: 400\"> or <br \/>use a<\/span><a href=https://elementor.com/"https:////elementor.com//help//how-do-i-use-global-fonts-and-colors///"> <span style=\"font-weight: 400\">global color<\/span><\/a><span style=\"font-weight: 400\">.<\/span><\/p>","hotspot_offset_x":{"unit":"%","size":"32","sizes":[]},"hotspot_offset_y":{"unit":"%","size":"45","sizes":[]},"_id":"e50d550","hotspot_label":"","hotspot_link":{"url":"","is_external":"","nofollow":"","custom_attributes":""},"hotspot_icon":{"value":"","library":""},"hotspot_icon_position":null,"hotspot_icon_spacing":null,"hotspot_custom_size":"no","hotspot_width":null,"hotspot_height":null,"hotspot_horizontal":"left","hotspot_vertical":"top","hotspot_tooltip_position":"no","hotspot_position":null,"hotspot_tooltip_width":null,"hotspot_tooltip_text_wrap":null},{"hotspot_tooltip_content":"<p><span style=\"font-weight: 400\">Use the slider to increase or decrease your <br> icon\u2019s size. Create an <br> interesting design by making <br> the icon even larger than the widget itself.<\/span><\/p>","hotspot_offset_x":{"unit":"%","size":"24","sizes":[]},"hotspot_offset_y":{"unit":"%","size":"49","sizes":[]},"_id":"e61e6c9","hotspot_label":"","hotspot_link":{"url":"","is_external":"","nofollow":"","custom_attributes":""},"hotspot_icon":{"value":"","library":""},"hotspot_icon_position":null,"hotspot_icon_spacing":null,"hotspot_custom_size":"no","hotspot_width":null,"hotspot_height":null,"hotspot_horizontal":"left","hotspot_vertical":"top","hotspot_tooltip_position":"no","hotspot_position":null,"hotspot_tooltip_width":null,"hotspot_tooltip_text_wrap":null},{"hotspot_tooltip_content":"Rotate your icon to create an <br> interesting diagonal design.\n","hotspot_offset_x":{"unit":"%","size":"28","sizes":[]},"hotspot_offset_y":{"unit":"%","size":"56","sizes":[]},"_id":"dabccfc","hotspot_label":"","hotspot_link":{"url":"","is_external":"","nofollow":"","custom_attributes":""},"hotspot_icon":{"value":"","library":""},"hotspot_icon_position":null,"hotspot_icon_spacing":null,"hotspot_custom_size":"no","hotspot_width":null,"hotspot_height":null,"hotspot_horizontal":"left","hotspot_vertical":"top","hotspot_tooltip_position":"no","hotspot_position":null,"hotspot_tooltip_width":null,"hotspot_tooltip_text_wrap":null},{"hotspot_tooltip_content":"Use the slider to increase or <br> decrease the space between <br> your title and the Flipbox <br> widget\u2019s border.\n","hotspot_offset_x":{"unit":"%","size":"21","sizes":[]},"hotspot_offset_y":{"unit":"%","size":"68","sizes":[]},"_id":"bee5c5b","hotspot_label":"","hotspot_link":{"url":"","is_external":"","nofollow":"","custom_attributes":""},"hotspot_icon":{"value":"","library":""},"hotspot_icon_position":null,"hotspot_icon_spacing":null,"hotspot_custom_size":"no","hotspot_width":null,"hotspot_height":null,"hotspot_horizontal":"left","hotspot_vertical":"top","hotspot_tooltip_position":"no","hotspot_position":null,"hotspot_tooltip_width":null,"hotspot_tooltip_text_wrap":null},{"hotspot_tooltip_content":"<p><span style=\"font-weight: 400\">Choose any color for the text in your header. <br> <\/span><span style=\"font-weight: 400\">To use a color, either use the<\/span><a href=https://elementor.com/"https:////elementor.com//help//?p=129\%22> <span style=\"font-weight: 400\">color picker<\/span><\/a><span style=\"font-weight: 400\"> or <br> use a<\/span><a href=https://elementor.com/"https:////elementor.com//help//how-do-i-use-global-fonts-and-colors///"> <span style=\"font-weight: 400\">global color<\/span><\/a><span style=\"font-weight: 400\">.<\/span><\/p>","hotspot_offset_x":{"unit":"%","size":"26","sizes":[]},"hotspot_offset_y":{"unit":"%","size":"77","sizes":[]},"_id":"80e3b07","hotspot_label":"","hotspot_link":{"url":"","is_external":"","nofollow":"","custom_attributes":""},"hotspot_icon":{"value":"","library":""},"hotspot_icon_position":null,"hotspot_icon_spacing":null,"hotspot_custom_size":"no","hotspot_width":null,"hotspot_height":null,"hotspot_horizontal":"left","hotspot_vertical":"top","hotspot_tooltip_position":"no","hotspot_position":null,"hotspot_tooltip_width":null,"hotspot_tooltip_text_wrap":null},{"hotspot_tooltip_content":"<p><span style=\"font-weight: 400\">You can adjust your font, type size, and <br> many aspects of your typography to create a <br> desired look or mood. Learn more about <br><\/span><a href=https://elementor.com/"https:////elementor.com//help//what-is-typography//#!\"><span style=\"font-weight: 400\">typography<\/span><\/a><span style=\"font-weight: 400\">.<\/span><\/p>","hotspot_offset_x":{"unit":"%","size":"28","sizes":[]},"hotspot_offset_y":{"unit":"%","size":"81","sizes":[]},"_id":"5efab10","hotspot_label":"","hotspot_link":{"url":"","is_external":"","nofollow":"","custom_attributes":""},"hotspot_icon":{"value":"","library":""},"hotspot_icon_position":null,"hotspot_icon_spacing":null,"hotspot_custom_size":"no","hotspot_width":null,"hotspot_height":null,"hotspot_horizontal":"left","hotspot_vertical":"top","hotspot_tooltip_position":"no","hotspot_position":null,"hotspot_tooltip_width":null,"hotspot_tooltip_text_wrap":null},{"hotspot_tooltip_content":"If you were using a marker or fountain pen <br> and paper, you could increase the width <br> of each letter just by pressing down while <br> writing. Text stroke allows you to do the same thing digitally. <br> After selecting the editing tool you can use a <br> slider to define the width of your text, which <br> means you can create a bold, semi-bold, <br> or delicate look depending on your style <br> and message.","hotspot_offset_x":{"unit":"%","size":"28","sizes":[]},"hotspot_offset_y":{"unit":"%","size":"86","sizes":[]},"_id":"606c262","hotspot_label":"","hotspot_link":{"url":"","is_external":"","nofollow":"","custom_attributes":""},"hotspot_icon":{"value":"","library":""},"hotspot_icon_position":null,"hotspot_icon_spacing":null,"hotspot_custom_size":"no","hotspot_width":null,"hotspot_height":null,"hotspot_horizontal":"left","hotspot_vertical":"top","hotspot_tooltip_position":"no","hotspot_position":null,"hotspot_tooltip_width":null,"hotspot_tooltip_text_wrap":null},{"hotspot_tooltip_content":"Choose any color for the text in your header. <br> To use a color, either use the color picker or <br> use a global color.","hotspot_offset_x":{"unit":"%","size":"26","sizes":[]},"hotspot_offset_y":{"unit":"%","size":"96","sizes":[]},"_id":"4973adc","hotspot_label":"","hotspot_link":{"url":"","is_external":"","nofollow":"","custom_attributes":""},"hotspot_icon":{"value":"","library":""},"hotspot_icon_position":null,"hotspot_icon_spacing":null,"hotspot_custom_size":"no","hotspot_width":null,"hotspot_height":null,"hotspot_horizontal":"left","hotspot_vertical":"top","hotspot_tooltip_position":"no","hotspot_position":null,"hotspot_tooltip_width":null,"hotspot_tooltip_text_wrap":null}],"hotspot_sequenced_animation":"no","tooltip_position":"top","tooltip_trigger":"click","tooltip_animation":"e-hotspot--fade-in-out"}" data-widget_type="hotspot.default">
Padding is the space between the content
and the border of an element. Use padding
to maintain a set distance between
elements in a website. Learn more about
padding and margins.
Shift your content to the left, middle,
or right of the widget.
or right of the widget.
Shift your content to the top, center, or
bottom of the widget.
bottom of the widget.
Set off your Flip Box widget
with a solid, dotted, double, dashed, or grooved border.
Learn more about border types.
If you’ve added an icon to
your Flip Box widget, use the
spacing slider to adjust the distance between the icon and any other
element or text.
your Flip Box widget, use the
spacing slider to adjust the distance between the icon and any other
element or text.
Choose any color to make your icon pop. To
use a color, either use the color picker or
use a global color.
Use the slider to increase or decrease your
icon’s size. Create an
interesting design by making
the icon even larger than the widget itself.
Rotate your icon to create an
interesting diagonal design.
interesting diagonal design.
Use the slider to increase or
decrease the space between
your title and the Flipbox
widget’s border.
decrease the space between
your title and the Flipbox
widget’s border.
Choose any color for the text in your header.
To use a color, either use the color picker or
use a global color.
You can adjust your font, type size, and
many aspects of your typography to create a
desired look or mood. Learn more about
typography.
If you were using a marker or fountain pen
and paper, you could increase the width
of each letter just by pressing down while
writing. Text stroke allows you to do the same thing digitally.
After selecting the editing tool you can use a
slider to define the width of your text, which
means you can create a bold, semi-bold,
or delicate look depending on your style
and message.
and paper, you could increase the width
of each letter just by pressing down while
writing. Text stroke allows you to do the same thing digitally.
After selecting the editing tool you can use a
slider to define the width of your text, which
means you can create a bold, semi-bold,
or delicate look depending on your style
and message.
Choose any color for the text in your header.
To use a color, either use the color picker or
use a global color.
To use a color, either use the color picker or
use a global color.
The Style tab - Back
<span style=\"font-weight: 400\">color picker<\/span><\/a><span style=\"font-weight: 400\"> or <br> use a<\/span><a href=https://elementor.com/"https:////elementor.com//help//how-do-i-use-global-fonts-and-colors///"> <span style=\"font-weight: 400\">global color<\/span><\/a><span style=\"font-weight: 400\">.<\/span><\/p>","hotspot_offset_x":{"unit":"%","size":"24","sizes":[]},"hotspot_offset_y":{"unit":"%","size":"77","sizes":[]},"_id":"80e3b07","hotspot_label":"","hotspot_link":{"url":"","is_external":"","nofollow":"","custom_attributes":""},"hotspot_icon":{"value":"","library":""},"hotspot_icon_position":null,"hotspot_icon_spacing":null,"hotspot_custom_size":"no","hotspot_width":null,"hotspot_height":null,"hotspot_horizontal":"left","hotspot_vertical":"top","hotspot_tooltip_position":"no","hotspot_position":null,"hotspot_tooltip_width":null,"hotspot_tooltip_text_wrap":null},{"hotspot_tooltip_content":"<p><span style=\"font-weight: 400\">You can adjust your font, type size, and <br> many aspects of your typography to create a <br> desired look or mood. Learn more about <br><\/span><a href=https://elementor.com/"https:////elementor.com//help//what-is-typography//#!\"><span style=\"font-weight: 400\">typography<\/span><\/a><span style=\"font-weight: 400\">.<\/span><\/p>","hotspot_offset_x":{"unit":"%","size":"26","sizes":[]},"hotspot_offset_y":{"unit":"%","size":"86","sizes":[]},"_id":"5efab10","hotspot_label":"","hotspot_link":{"url":"","is_external":"","nofollow":"","custom_attributes":""},"hotspot_icon":{"value":"","library":""},"hotspot_icon_position":null,"hotspot_icon_spacing":null,"hotspot_custom_size":"no","hotspot_width":null,"hotspot_height":null,"hotspot_horizontal":"left","hotspot_vertical":"top","hotspot_tooltip_position":"no","hotspot_position":null,"hotspot_tooltip_width":null,"hotspot_tooltip_text_wrap":null},{"hotspot_tooltip_content":"If you were using a marker or fountain pen <br> and paper, you could increase the width <br> of each letter just by pressing down while <br> writing. Text stroke allows you to do the same thing digitally. <br> After selecting the editing tool you can use a <br> slider to define the width of your text, which <br> means you can create a bold, semi-bold, <br> or delicate look depending on your style <br> and message.","hotspot_offset_x":{"unit":"%","size":"26","sizes":[]},"hotspot_offset_y":{"unit":"%","size":"95","sizes":[]},"_id":"606c262","hotspot_label":"","hotspot_link":{"url":"","is_external":"","nofollow":"","custom_attributes":""},"hotspot_icon":{"value":"","library":""},"hotspot_icon_position":null,"hotspot_icon_spacing":null,"hotspot_custom_size":"no","hotspot_width":null,"hotspot_height":null,"hotspot_horizontal":"left","hotspot_vertical":"top","hotspot_tooltip_position":"no","hotspot_position":null,"hotspot_tooltip_width":null,"hotspot_tooltip_text_wrap":null}],"hotspot_sequenced_animation":"no","tooltip_position":"top","tooltip_trigger":"click","tooltip_animation":"e-hotspot--fade-in-out"}" data-widget_type="hotspot.default">
asked to set a border width.
Padding is the space between the content
and the border of an element. Use padding
to maintain a set distance between
elements in a website. Learn more about
padding and margins.
Shift your content to the left, middle,
or right of the widget.
or right of the widget.
Shift your content to the top, center, or
bottom of the widget.
bottom of the widget.
Set off your Flip Box widget
with a solid, dotted, double, dashed, or grooved border.
Learn more about border types.
asked to set a border width.
Use the slider to increase or decrease the
space between your title and the
Flip Box’s border.
Choose any color for the text in your header.
To use a color, either use the color picker or
use a global color.
You can adjust your font, type size, and
many aspects of your typography to create a
desired look or mood. Learn more about
typography.
If you were using a marker or fountain pen
and paper, you could increase the width
of each letter just by pressing down while
writing. Text stroke allows you to do the same thing digitally.
After selecting the editing tool you can use a
slider to define the width of your text, which
means you can create a bold, semi-bold,
or delicate look depending on your style
and message.
and paper, you could increase the width
of each letter just by pressing down while
writing. Text stroke allows you to do the same thing digitally.
After selecting the editing tool you can use a
slider to define the width of your text, which
means you can create a bold, semi-bold,
or delicate look depending on your style
and message.
<span style=\"font-weight: 400\">color picker<\/span><\/a><span style=\"font-weight: 400\"> or use a<\/span><a href=https://elementor.com/"https:////elementor.com//help//how-do-i-use-global-fonts-and-colors///"> <span style=\"font-weight: 400\">global color<\/span><\/a><span style=\"font-weight: 400\">.<\/span><\/p>","hotspot_offset_x":{"unit":"%","size":"25","sizes":[]},"hotspot_offset_y":{"unit":"%","size":"17","sizes":[]},"_id":"236ec05","hotspot_label":"","hotspot_link":{"url":"","is_external":"","nofollow":"","custom_attributes":""},"hotspot_icon":{"value":"","library":""},"hotspot_icon_position":null,"hotspot_icon_spacing":null,"hotspot_custom_size":"no","hotspot_width":null,"hotspot_height":null,"hotspot_horizontal":"left","hotspot_vertical":"top","hotspot_tooltip_position":"no","hotspot_position":null,"hotspot_tooltip_width":null,"hotspot_tooltip_text_wrap":null},{"hotspot_tooltip_content":"<p><span style=\"font-weight: 400\">You can adjust your font, type size, and <br> many aspects of your typography to create a <br> desired look or mood. Learn more about <br><\/span><a href=https://elementor.com/"https:////elementor.com//help//what-is-typography//#!\"><span style=\"font-weight: 400\">typography<\/span><\/a><span style=\"font-weight: 400\">.<\/span><\/p>","hotspot_offset_x":{"unit":"%","size":"27","sizes":[]},"hotspot_offset_y":{"unit":"%","size":"25","sizes":[]},"_id":"5efab10","hotspot_label":"","hotspot_link":{"url":"","is_external":"","nofollow":"","custom_attributes":""},"hotspot_icon":{"value":"","library":""},"hotspot_icon_position":null,"hotspot_icon_spacing":null,"hotspot_custom_size":"no","hotspot_width":null,"hotspot_height":null,"hotspot_horizontal":"left","hotspot_vertical":"top","hotspot_tooltip_position":"no","hotspot_position":null,"hotspot_tooltip_width":null,"hotspot_tooltip_text_wrap":null},{"hotspot_tooltip_content":"Hover will allow you to apply different <br> settings when a visitor hovers over the <br> button \n","hotspot_offset_x":{"unit":"%","size":"80","sizes":[]},"hotspot_offset_y":{"unit":"%","size":"52","sizes":[]},"_id":"606c262","hotspot_label":"","hotspot_link":{"url":"","is_external":"","nofollow":"","custom_attributes":""},"hotspot_icon":{"value":"","library":""},"hotspot_icon_position":null,"hotspot_icon_spacing":null,"hotspot_custom_size":"no","hotspot_width":null,"hotspot_height":null,"hotspot_horizontal":"left","hotspot_vertical":"top","hotspot_tooltip_position":"no","hotspot_position":null,"hotspot_tooltip_width":null,"hotspot_tooltip_text_wrap":null},{"hotspot_tooltip_content":"Choose any color for the button text. To choose a color, either use the color picker <br> or a global color.","hotspot_offset_x":{"unit":"%","size":"25","sizes":[]},"hotspot_offset_y":{"unit":"%","size":"59","sizes":[]},"_id":"4973adc","hotspot_label":"","hotspot_link":{"url":"","is_external":"","nofollow":"","custom_attributes":""},"hotspot_icon":{"value":"","library":""},"hotspot_icon_position":null,"hotspot_icon_spacing":null,"hotspot_custom_size":"no","hotspot_width":null,"hotspot_height":null,"hotspot_horizontal":"left","hotspot_vertical":"top","hotspot_tooltip_position":"no","hotspot_position":null,"hotspot_tooltip_width":null,"hotspot_tooltip_text_wrap":null},{"hotspot_tooltip_content":"<p>Adjust the look of your button by selecting a <br \/>\u201cclassic\u201d solid background or a gradient. <br \/>Learn more about your <a href=https://elementor.com/"https:////elementor.com//help//background///">background options.<\/p>","hotspot_offset_x":{"unit":"%","size":"38","sizes":[]},"hotspot_offset_y":{"unit":"%","size":"66","sizes":[]},"_id":"475f714","hotspot_label":"","hotspot_link":{"url":"","is_external":"","nofollow":"","custom_attributes":""},"hotspot_icon":{"value":"","library":""},"hotspot_icon_position":null,"hotspot_icon_spacing":null,"hotspot_custom_size":"no","hotspot_width":null,"hotspot_height":null,"hotspot_horizontal":"left","hotspot_vertical":"top","hotspot_tooltip_position":"no","hotspot_position":null,"hotspot_tooltip_width":null,"hotspot_tooltip_text_wrap":null},{"hotspot_tooltip_content":"<p>Select from extra small, small, medium, <br \/>large, and extra large button sizes.<br \/>The button will automatically expand or shrink.<\/p>","hotspot_offset_x":{"unit":"%","size":"13","sizes":[]},"hotspot_offset_y":{"unit":"%","size":"38","sizes":[]},"_id":"1ada88f","hotspot_label":"","hotspot_link":{"url":"","is_external":"","nofollow":"","custom_attributes":""},"hotspot_icon":{"value":"","library":""},"hotspot_icon_position":null,"hotspot_icon_spacing":null,"hotspot_custom_size":"no","hotspot_width":null,"hotspot_height":null,"hotspot_horizontal":"left","hotspot_vertical":"top","hotspot_tooltip_position":"no","hotspot_position":null,"hotspot_tooltip_width":null,"hotspot_tooltip_text_wrap":null},{"hotspot_tooltip_content":"Choose any color for the button text. To choose a color, either use the color picker <br> or a global color.","hotspot_offset_x":{"unit":"%","size":"25","sizes":[]},"hotspot_offset_y":{"unit":"%","size":"59","sizes":[]},"_id":"3f4940c","hotspot_label":"","hotspot_link":{"url":"","is_external":"","nofollow":"","custom_attributes":""},"hotspot_icon":{"value":"","library":""},"hotspot_icon_position":null,"hotspot_icon_spacing":null,"hotspot_custom_size":"no","hotspot_width":null,"hotspot_height":null,"hotspot_horizontal":"left","hotspot_vertical":"top","hotspot_tooltip_position":"no","hotspot_position":null,"hotspot_tooltip_width":null,"hotspot_tooltip_text_wrap":null},{"hotspot_tooltip_content":"<p><span style=\"font-weight: 400\">Adjust the look of your button <br \/>by selecting a\u00a0 \u201cclassic\u201d solid background <br \/>or a gradient. Learn more about your <\/span><a href=https://elementor.com/"https:////elementor.com//help//background///"> <span style=\"font-weight: 400\">color picker<\/span><\/a><span style=\"font-weight: 400\"> or a<\/span><a href=https://elementor.com/"https:////elementor.com//help//how-do-i-use-global-fonts-and-colors///"> <span style=\"font-weight: 400\">global color<\/span><\/a><span style=\"font-weight: 400\">.<\/span><\/p>","hotspot_offset_x":{"unit":"%","size":"29","sizes":[]},"hotspot_offset_y":{"unit":"%","size":"73","sizes":[]},"_id":"6be513c","hotspot_label":"","hotspot_link":{"url":"","is_external":"","nofollow":"","custom_attributes":""},"hotspot_icon":{"value":"","library":""},"hotspot_icon_position":null,"hotspot_icon_spacing":null,"hotspot_custom_size":"no","hotspot_width":null,"hotspot_height":null,"hotspot_horizontal":"left","hotspot_vertical":"top","hotspot_tooltip_position":"no","hotspot_position":null,"hotspot_tooltip_width":null,"hotspot_tooltip_text_wrap":null},{"hotspot_tooltip_content":"<p>Define the width of the top, right, bottom, <br \/>and left borders. Each can be adjusted <br \/>independently.<\/p>","hotspot_offset_x":{"unit":"%","size":"30","sizes":[]},"hotspot_offset_y":{"unit":"%","size":"81","sizes":[]},"_id":"3b6e02b","hotspot_label":"","hotspot_link":{"url":"","is_external":"","nofollow":"","custom_attributes":""},"hotspot_icon":{"value":"","library":""},"hotspot_icon_position":null,"hotspot_icon_spacing":null,"hotspot_custom_size":"no","hotspot_width":null,"hotspot_height":null,"hotspot_horizontal":"left","hotspot_vertical":"top","hotspot_tooltip_position":"no","hotspot_position":null,"hotspot_tooltip_width":null,"hotspot_tooltip_text_wrap":null},{"hotspot_tooltip_content":"","hotspot_offset_x":{"unit":"%","size":"32","sizes":[]},"hotspot_offset_y":{"unit":"%","size":"91","sizes":[]},"_id":"8da44da","__dynamic__":{"hotspot_tooltip_content":"[elementor-tag id=\"634b8d1\" name=\"shortcode\" settings=\"%7B%22shortcode%22%3A%22%5Belementor-template%20id%3D%5C%2232655%5C%22%5D%22%7D\"]"},"hotspot_label":"","hotspot_link":{"url":"","is_external":"","nofollow":"","custom_attributes":""},"hotspot_icon":{"value":"","library":""},"hotspot_icon_position":null,"hotspot_icon_spacing":null,"hotspot_custom_size":"no","hotspot_width":null,"hotspot_height":null,"hotspot_horizontal":"left","hotspot_vertical":"top","hotspot_tooltip_position":"no","hotspot_position":null,"hotspot_tooltip_width":null,"hotspot_tooltip_text_wrap":null}],"hotspot_sequenced_animation":"no","tooltip_position":"top","tooltip_trigger":"click","tooltip_animation":"e-hotspot--fade-in-out"}" data-widget_type="hotspot.default">
Use the slider to increase or decrease the
space between your title and the
Flip Box’s border.
space between your title and the
Flip Box’s border.
Choose any color for the text.
To use a color, either use the color picker or use a global color.
You can adjust your font, type size, and
many aspects of your typography to create a
desired look or mood. Learn more about
typography.
Hover will allow you to apply different
settings when a visitor hovers over the
button
settings when a visitor hovers over the
button
Choose any color for the button text. To choose a color, either use the color picker
or a global color.
or a global color.
Adjust the look of your button by selecting a
“classic” solid background or a gradient.
Learn more about your background options.
Select from extra small, small, medium,
large, and extra large button sizes.
The button will automatically expand or shrink.
Choose any color for the button text. To choose a color, either use the color picker
or a global color.
or a global color.
Adjust the look of your button
by selecting a “classic” solid background
or a gradient. Learn more about your background options.
Choose any color for the button border.
To choose a color, either use the
color picker or a global color.
Define the width of the top, right, bottom,
and left borders. Each can be adjusted
independently.
Next steps
To get the most out of Elementor, check out the Elementor Academy and our YouTube channel for helpful learning resources. If you come across any issues or need help, please contact our Support Center.