![]() So you just scroll down to the bottom and it's all one file. So if you're watching this video on YouTube, you'll find a link in the description to the blog article. Now to install this theme you just want to come over to our blog article. So let's go over to our theme and install this section. So, so that's the section and I'm going to show you how to install now. So you can unselect that and you have that option as well. Now, if you're using this banner lower down on your page, maybe you don't want it to be a H one. So you can come down here to our H one setting. If you're using this banner as you're the main homepage banner, you might wanna have this heading be H one element. And then there's a couple more features here. We still have the full paragraph on desktop. We can do that.Īnd it won't affect the text, the displays on desktop. And then we can also come in here and let's say we only wanna show this much text on mobile. Now we can control that directly on mobile. Now, if we want to make this a little bit shorter, just so it fits in right inside this blue area. So here we can see, this is the height of the text box. So let's to make that clear, let me just give the text box a background color. ![]() ![]() We can also control the height of this text box. Now we choose our mobile image and we choose our mobile content so we can choose, you know, different content for desktop and mobile. So here we have the desktop settings, which is our desktop image, all, all the desktop content, the same settings we had before, but now we also can come down here and we have we have our mobile settings. So let's go ahead and look at the settings available in this section, we made image with text overlay responsive. So that's what we've fixed in our section. So for example, on mobile here, our background image it has this blue area at the bottom that there's just no way with these settings to to fit this overlay into that box because we don't have individual control here over the text on mobile versus the desktop. The problem is then when we switch to mobile sometimes it's just impossible to to get it to fit where you want on mobile. So we can get it to fit nicely on desktop. So we have this we can horizontal position left or right, and then we can control the width of the tax box here Now we can control the position of this box, just fine on desktop. Now, the problem with the original image with text overlay section. And we have this background image with this blue area on the right, and that's where we're overlaying the text. So here's an example, we're using it as the homepage banner on this store. So let's take a look at the image with text overlay section. Hey, it's Michael here with Jade Puma in this video, I'm going to show you how to make your image with text overlay sections in the flex theme more responsive. ![]() ![]() Add the section below to your theme files.In this tutorial we show you how to add a new section which makes it easier to configure this section for mobile view, allowing separate content for mobile and desktop ensuring your page looks greater on any device. # Add your HTML to a custom HTML widget in the front page 3 widget area.The image-with-text-overlay section in the Flex theme is great for banners, but it has some some shortcomings regarding mobile responsiveness.# Copy & paste the CSS to the end of your Altitude Pro child themes style.css file and clear caching.The code has been modified on lines 130 and 131. # Upload the front-page.php file to your Altitude Pro theme folder replacing your default front-page.php file.Tested using the Altitude Pro child theme by StudioPress however will work in any widget area in any Genesis child theme. Shows the front page 3 widget area content displaying on a semi transparent background over half of the background image. On smaller hand held screens, the transparent background covers your entire image and your widget content is positioned over the centre of your image as seen in the following demo video. This solution positions your widget content over half of your background image with a semi transparent background text on desktops like this : ![]()
0 Comments
Leave a Reply. |
Details
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |