Flip Boxes with ACF/Posts
This example demonstrates multiple ways to create flip boxes with ACF repeaters and the HTML/Posts module. All ACF examples have the same CSS and the same goes for the Posts method as well. The only difference is the HTML.
Changing the Rotation: All boxes flip vertically on hover, but if you want them to flip horizontally instead, just replace transform: rotateX(180deg) with transform: rotateY(180deg).
Using ACF Repeaters
Icon in the Front, Title in the Back (ACF)
Icon in the Front, Title and Text in the Back (ACF)
I'm Box #1
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.
And I'm Box #2
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
You Can Call Me Box #3
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
Hello, I'm Box #4 and I Have More Lines
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard.
Lastly, I'm Box #5
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it.
Icon and Title in the Front, Text in the Back (ACF)
I'm Box #1
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.
And I'm Box #2
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
You Can Call Me Box #3
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
Hello, I'm Box #4 and I Have More Lines
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard.
Lastly, I'm Box #5
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it.
Alternative Method Using Posts
Icon in the Front, Title in the Back (Posts)
Shopify Buy Button
Quickly integrate Shopify products with WordPress websites with a built-in customizable Shopify feature.
One Image Centered, Text Around
Centered image with text around it
Pre-styled Masonry Using the Posts Module
Masonry layout for a listing of categories/pages/post types. Pre-styled.
Full-width Posts Slider
A responsive full-height and full-width posts slider.
Arrow on Button Hover
How to add an arrow or icon after hovering on a button.
Posts Module With Pages
Using the posts module to list specific pages (post type alternative)
Lists with Connectors
How to make vertical lists with connectors using repeaters.
Image center and text on the outer sides
Module with the images centered and text wrapped around it
Testimonials Slider with Advanced Posts
Testimonials slider with Advanced Posts (1, 2, or 3 items at a time)
Team
Team layout
Icon in the Front, Title and Text in the Back (Posts)
Shopify Buy Button
Quickly integrate Shopify products with WordPress websites with a built-in customizable Shopify feature.
One Image Centered, Text Around
Centered image with text around it
Pre-styled Masonry Using the Posts Module
Masonry layout for a listing of categories/pages/post types. Pre-styled.
Full-width Posts Slider
A responsive full-height and full-width posts slider.
Arrow on Button Hover
How to add an arrow or icon after hovering on a button.
Posts Module With Pages
Using the posts module to list specific pages (post type alternative)
Lists with Connectors
How to make vertical lists with connectors using repeaters.
Image center and text on the outer sides
Module with the images centered and text wrapped around it
Testimonials Slider with Advanced Posts
Testimonials slider with Advanced Posts (1, 2, or 3 items at a time)
Team
Team layout
Icon and Title in the Front, Text in the Back (Posts)
Shopify Buy Button
Quickly integrate Shopify products with WordPress websites with a built-in customizable Shopify feature.
One Image Centered, Text Around
Centered image with text around it
Pre-styled Masonry Using the Posts Module
Masonry layout for a listing of categories/pages/post types. Pre-styled.
Full-width Posts Slider
A responsive full-height and full-width posts slider.
Arrow on Button Hover
How to add an arrow or icon after hovering on a button.
Posts Module With Pages
Using the posts module to list specific pages (post type alternative)
Lists with Connectors
How to make vertical lists with connectors using repeaters.
Image center and text on the outer sides
Module with the images centered and text wrapped around it
Testimonials Slider with Advanced Posts
Testimonials slider with Advanced Posts (1, 2, or 3 items at a time)
Team
Team layout