This topic has 9 replies, 2 voices, and was last updated 7 years by Kieran_SQ.

  • Author
  • #194189
     Oceanglim
    Participant

    Hello!

    I am now getting to know Elementor….and trying things, which is fun.
    But I can’t position my background image at the top.

    How do I do that?

    I have set  Layot > Content Position > Top.

    I have set Style > Positon > Top Center

    Please take a look at my settings!

    Greatful for help! / Oceanglim

    #194192
     Kieran_SQ
    Moderator

    Hello,

    You can set the position of a background image by editing the row that contains the image, select the style tab at the top of the left panel, scroll to where the image is that you’re using the background image and select your desired position from the drop down below the image titled ‘Position’ (see screenshot).

    If you’d like me to do this for you on your site just let me know and I will be happy to login.

    All the best,

    Kieran

    Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution
    #194195
     Kieran_SQ
    Moderator

    Hi,

    I am sorry it looks like I missed half of your question. I checked the page in question and I can see that the image is aligned top center as per your settings and that the correct CSS has been output (see screenshot).

    Kieran

    Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution
    #195009
     Oceanglim
    Participant

    Hello again and thanks for your replies!

    I then realized that I had been editing in Elementor default homepage instead of the original homepage. So now I am trying to edit my original homepage with Elementor, but I can’t even see any editing box around the background image even though I click it.

    And also I can’t make the text centered even though I click the center icon. It switches back to left position. I have deactivated both Pagebuilder and other layout-plugins I used before.

    So my question is: Am I supposed to rebuild my homepage at the Elementor default page?? Or should it work to just rebuild my own homepage?

    Another question:
    Before the background image on frontpage wasn’t responsive for smartphones.
    What about today with Elementor?

    If not, is there a way to have a top image on startpage that will show on smartphones?

    #195014
     Kieran_SQ
    Moderator

    Hi,

    Is it okay if I switch the account you provided into English US? If not, please could you create a new account (using English US or UK) and share the login details here privately.

    Secondly, could you please let me know exactly which page it is you’re editing where you’re having the issues?

    Kieran

    Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution
    #195395
     Oceanglim
    Participant

    Hi Kieran,
    Thanks for your reply!
    Sure, go ahead and change to English, much more convenient!

    I am trying out thinks at staging.bildafamilj.nu/wp-admin.

    Depending on if I try to edit on page “Home Default – Elementor” or page “Hem – Startsida, Elementor” (Home – Homepage, Elementor) I have different issues.

    Home Default – Elementor:
    – Cannot make the background image to cover to the top.
    – There is a search form instead of register form, and I can’t change it.

    Hem – Startsida, Elementor:
    – Cannot edit-clic my background image( to change background image) nor register form (to edit text).
    – Cannot center my text. It bumps back to left position (not all text but the first text below background image.

    Greatful for your help!
    Jenni

    #195399
     Kieran_SQ
    Moderator

    Hi,

    Because there will be a lot to cover in my reply I am going to break each point down into numbers for ease of tracking going forward.

    1. “Home Default — Elementor” the background image that appears at the top of the page is aligned top center. You have the row of content within set to full width with little padding around it therefore it makes the area very narrow causing the image to look a little off. Check the attached images “Home Default – Wide” and “Hoem Default – Narrower” for an example of how resizing the browser changes the view of this area and that the CSS is rendered on the front-end.

    You can resolve some of the issue by making the inner content not full width, see screenshot “Home Default – Switch to boxed not fullwidth”. Also you can add padding top and bottom to the row to extend the height which will give more of an effect of aligned top-center, you can use this in conjunction with full width or not – it’s your choice, see screenshot “Home Default – Add padding to row”.

    2. “Search form / Register Form” the form is there but is not rendered as it is set for logged out users. Check the attached screenshot titled “Home Default – Register Form” for how to edit this. Hover over each form and click the pencil icon to select whether or not to show to logged in or logged out users.

    3. “Hem – Startsida” I cannot see how this element is rendered, it does not appear to be an element of Elementor. How did you add it?

    4. “Cannot center my text” you’re using a shortcode kleo_h1 which is not required. You should removed all instances of this and select H1 from the dropdown instead of paragraph after highlight the text you wish to appear as a H1 title, see screenshot titled “Text Rendering – H1”.

    I have changed this for you already, see screenshot titled “Text Render – Alt”, this should resolve the issue for you in this section but you will need to replace kleo_h1 with the correct H1 as per above.

    Kieran

    Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution
    #195541
     Oceanglim
    Participant

    Thank you very much Kieran!

    I am going through everything you wrote and try to understand.

    You wrote:”3. “Hem – Startsida” I cannot see how this element is rendered, it does not appear to be an element of Elementor. How did you add it?
    I haven’t added anything on purpose. My homepage was of course there as before updating to Sweetdate 3. And when following the instructions to add functionalities it looked like that: Pages > “Hem – Startsida, Elementor”.

    So….could you please reply to my bold question from previous message?
    Am I supposed to rebuild my homepage at the Elementor default page or rebuild my own homepage at my original homepage (Hem – Startsida, Elementor)? I need to get working so I want to make it right from start.

    Another previous question:
    Before the background image on frontpage wasn’t responsive for smartphones.
    What about today with Elementor?

    If not, is there a way to have a top image on startpage that will show on smartphones?

    Greatful for your help!
    Jenni

    #195547
     Kieran_SQ
    Moderator

    Hi Jenni,

    If the page ‘Hem – Startsida, Elementor’ is pre SweetDate 3.0 I would advise that you use the other, working, page from the theme demo import ‘Home Default — Elementor’ and customize it to your needs.

    Background images in Elementor are responsive and should scale as you adjust the browser size as well as rendering the correct image size for different devices.

    Kieran

    Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution
    #195548
     Kieran_SQ
    Moderator

    Also, I noticed a minor issue on your site when building a page with Elementor. A 60px padding was added to the main content, I have added the below CSS to WP Admin > Appearance > Editor > SweetDate Child > Style.css to remove this extra padding on pages built with Elementor

    COPY CODE
    .full-builder {
        padding-top: 0px !important;
    }

    Kieran

    Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution
Viewing 10 posts - 1 through 10 (of 10 total)

You must be logged in to reply to this topic.

Log in with your credentials

Forgot your details?