1. PROMO Upgrade to Pro Membership @ $99 / Lifetime & access all our 16+ premium Divi extensions: Divi Block, Carousel Toolkit, etc.LEARN MORE
Dismiss Notice
NEW Divi.Help Pro Carousel AI Toolkit - Magically turn your Divi design into carousel, simply by using our online toolkit. No plugins needed. Now it works with Divi 5 as well!Try our carousel AI toolkit
BEST Divi Block - A revolutionary drag & drop tool to easily mix & match 960+ premade blocks (Light & Dark) to kick start your Divi site design. Special module designs are included as well. Also newly added AI generator & color. Now it works with Divi 5 as well!
Learn More About Divi BlockFree Version ~ 340+ Free Blocks

set image above text in fullwidth slider

Discussion in 'Free Divi Community Forum' started by cwly, Aug 6, 2020.

  1. cwly

    cwly Member

    Hey,

    when creating a new slide within the full width slider module, an image is set to the left of the text by default.

    How can I set the image above the text?

    Thanks!
     
    1. PRO MEMBER PERKS Divi Block Pro - Premade slide in bar design for your Divi site without using any plugins:View Demo
  2. Problemizer.com

    Problemizer.com Divi Expert

    I don't think there is such an option to set. You can set the background image and then center the text on the slide.
     
  3. cwly

    cwly Member

    I already have an background image. It is part of the full width slider which is set to full screen. On top of it I have a text and our logo. But this logo must be positioned above the text, not on the left side.

    I can't believe there is no solution for this. Isn't it obvious to do something like this?

    Any other suggestions are much appreciated.
     
    1. PRO MEMBER PERKS Divi Powerful Child Theme - Power up your Divi sites with tons of new functionalities & premade elements:Learn More
  4. Problemizer.com

    Problemizer.com Divi Expert

    I suppose you can do it like this.

    Go to your media library and copy URL of that logo you want to put above text in the fullwidth slider.
    upload_2020-8-8_15-22-20.png

    Then go to the content of the slide you want to change, click on the text and add this.
    upload_2020-8-8_15-26-8.png

    You need to delete title otherwise it will appear above the image. If you want it, you can put h3 tab bellow the image code in the text area.
    <img width="ADJUST_THE_PROCENTILE" src="URL_OF_THE_LOGO">

    Hope this helps. Maybe there are better ways but this is a hack from the top of my head. Never seen anybody had the need for image to be on top of text on the slider in divi. :D
     
  5. cwly

    cwly Member

    well, this looks really like I want to have.

    But there is another small issue with this. Since I have to disable the title I have to do something like this in the text field:

    <img src="myImage" />
    <h1 style="font-size: 40px;">My Title</h1>

    I can't control the size of the headline using the divi settings but rather I have to make use of CSS. How can I now set different sizes of h1 for Desktop and Mobile?
     
    1. PRO MEMBER PERKS Custom Color Scheme + Premade Layouts - A perfect combination to boost productivity:Try Now
  6. Problemizer.com

    Problemizer.com Divi Expert

    You just give your h1 a class like this. <h1 class="awesome-heading">My Title</h1>

    Than write media queries.
    /*DESKTOP*/
    .awesome-heading {
    font-size: 40px;
    }

    /*TABLET*/
    @media (max-with: 980px) {
    .awesome-heading {
    font-size: 30px;
    }
    }

    /*SMALLER TABLETS AND PHONES*/
    @media (max-with: 767px) {
    .awesome-heading {
    font-size: 20px;
    }
    }