Kadence How-To: How to have a text block overlay an image
As dedicated advocates of Kadence, we take pride in curating a comprehensive collection of questions posed by Kadence users within the community. Our commitment extends to providing expert solutions, accompanied by step-by-step guidance, to address these queries effectively.
Join us in unlocking the full potential of Kadence as a powerful tool to build excellent WordPress websites, empowering you to achieve your business goals with confidence and efficiency.
Question from the community
How can I re-create the text box overlaying the image using Elementor Pro and Kadence?
Solution: What you will learn to build in this article
In this article, we want to create a text content that overlays partially on top of an image. We will use a Split Content Kadence block to achieve what you are seeing below.
Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam nulla velit, pretium et consequat vel, convallis eu massa. Praesent molestie fringilla risus, id pretium libero aliquam sed. Sed ornare, dolor in cursus sodales, nunc ligula placerat felis, in rutrum purus magna in purus. Cras scelerisque felis et erat imperdiet, at venenatis neque commodo. Sed neque ex, bibendum eu elit in, semper congue turpis.
Duis rhoncus tincidunt maximus. Morbi pharetra quam ut mi cursus, sed imperdiet mi pharetra. Aliquam pellentesque enim in ante euismod dignissim. Integer finibus tempus interdum. Maecenas eget augue urna. Morbi venenatis at lacus eu ultricies. Morbi consectetur risus lorem, sit amet elementum dolor porta ut. Nulla facilisi.
Here is our step-by-step guide
In this article, we want to create a text content that overlays partially on top of an image using a Split Content Kadence block.
Step 1: Add a Split Content Kadence block
Click on the “+” icon and search for “Split Content”. Select the Split Content Kadence block
Once selected, a Split Content Kadence block will be added to your page.
Step 2: Move media to the right side
To achieve the same look that we want in our solution, go to the “General” tab in the Split Content block and select “Right” in the “MEDIA SIDE” dropdown menu.
Step 3: Input copy and image
Add the copy and image that you want to use in the Split Content block. Adjust the size of the text based on your preference. We used “Size S” under Typography in our example.
Step 4: Change background color of Content Area
Go to the “Style” tab in the Split Content block and select a Content Area Background Color to make your Content Area more stand out from the background.
Step 5: Add drop shadow to Content Area (optional)
Go to the “Style” tab in the Split Content block and expand the Content Shadow accordion. Toggle “Enable Shadow” to add a drop shadow to make your Content Area more stand out even more.
Step 6: Adjust Content Margin of Split Content block
Go to the “Advanced” tab in the Split Content block and modify the Content Margin so overlay part of the Content Area above the image.
Step 7: Adjust Content Margin of Split Content block
Go to the “General” tab in the Split Content block and modify the Minimum Height and set it to 0 to reduce the height of the Content Area.
We’re done!
We hope you’ve found this guide helpful and that it has helped you to have a text block overlay an image using a Split Content Kadence block. If you have any questions or need further assistance, don’t hesitate to reach out. We hope you enjoy building your WordPress website with Kadence.