WPML Translation Issue with First Container of Homepage

  • Posted in : Mindi
  • beenerds
    Participant

    Dear Support Team,

    I have translated my English homepage into Greek and set the Greek version as the primary language.

    However, I am experiencing a layout issue on the Greek homepage.

    The first section (container) does not adjust correctly on different devices and displays an unexpected large top margin, creating excessive space below the header.

    This issue only occurs on the Greek version; the English version displays correctly.

    Could you please assist in identifying the cause of this behavior?

    Thank you in advance.

    Best Regards,
    beenerds

    beenerds
    Participant

    Dear Support,
    Any update?
    Thank you
    Best Regards,
    beenerds

    beenerds
    Participant

    Dear Support,
    Any update regarding my request?
    Many days have passed
    Thank you
    Best Regards,
    beenerds

    serkan
    Moderator

    Hi,
    Apologies for the delay in getting back to you, and thanks for your patience.
    You’re right that this is connected to the WPML translation rather than the page content itself. Since the English page displays correctly, the difference on the Greek version almost always comes down to one of two things:

    The page template of the translated page

    Open the Greek homepage in the WordPress editor and check Page Attributes → Template, and also Elementor’s page settings (the gear icon at the bottom-left of the editor). Make sure both match the English version exactly — for example “Elementor Full Width” or Canvas, with the page title hidden. If the Greek page reverted to the default template, the theme adds its standard title/header spacing, which produces that large gap at the top.
    The first container’s spacing, including the responsive values

    In Elementor, click the first container on the Greek page and compare its Margin and Padding against the English page — paying particular attention to the tablet and mobile values (the device icons next to each setting). Elementor stores separate spacing per device, so if the desktop value carried over but the tablet/mobile values didn’t, the section won’t adjust correctly across devices. Matching the top margin/padding to the English version usually clears it.

    To help me pinpoint the exact cause: how did you create the Greek translation — through WPML’s Translation Editor, or by editing the page directly in Elementor (for example after duplicating it)? When a page is translated with WPML’s Translation Editor, the design stays identical to the original, so layout differences like this usually appear when the translation has been edited manually in Elementor. If that’s what happened, re-copying the layout from the English version (or re-creating the translation through the Translation Editor) is the cleanest fix.
    If it still shows after checking the two points above, feel free to share temporary admin access or a staging link, and I’ll take a closer look at the exact setting causing it.
    Thanks,

    Serkan

    beenerds
    Participant

    Dear Serkan,

    The issue has been resolved.

    Thank you

    Best regards,
    beenerds

    serkan
    Moderator

    You are welcome :) We’d be very happy if you can spare a minute to rate the theme on ThemeForest. Your feedback will boost our motivation and help us to work harder on future updates.

    https://themeforest.net/downloads

    Thank you for your support.

    beenerds
    Participant

    Dear Serkan,

    I hope you are doing well!

    Can you please help me with the following on the Mindi theme?

    – When the user scrolls down the page: Two buttons should appear at the bottom right next to each other:
    1. One button to make a phone call when clicked
    2. One button to go to the contact page form

    Please let me know how I can set this up.

    Thank you for your support.

    Best Regards,
    beenerds

    serkan
    Moderator

    Hi,
    Sure, this can be done. Floating buttons that appear on scroll aren’t a built-in option in Mindi, but if you have Elementor Pro you can build this without any custom code using the Popup Builder — a popup with the overlay disabled behaves exactly like a floating button bar. Here is how:

    Go to Templates → Popups → Add New and name it something like “Floating Buttons”.
    In the popup settings (the gear icon at the bottom-left): under Layout set Width to around 340px and Height to Fit To Content, set Horizontal position to Right and Vertical position to Bottom, then turn off both Overlay and Close Button. Under Style you can leave the background transparent, and under Advanced add a Margin of about 25px on the right and bottom so the buttons don’t touch the screen edge. You can also pick Fade In Up as the Entrance Animation for a smooth appearance.
    Inside the popup, add a container with Direction set to Row and a gap of about 12px, then place two Button widgets in it:
    – First button: text “Call Us”, link tel:+30XXXXXXXXXX (your number in international format), phone icon.
    – Second button: text “Contact”, linked to your contact page, envelope icon.
    Style them as you like — a Border Radius of 50px gives the rounded pill look.
    Click Publish. In the publish settings, set the Display Condition to Entire Site, and under Triggers enable On Scroll with Direction: Down and Within: 20%. Leave the Advanced Rules off so the buttons appear on every visit. Save, and you’re done — the buttons will fade in at the bottom right once the visitor scrolls down the page.

    A nice bonus of this method for your site: since the popup is a regular Elementor template, you can translate it with WPML, so the Greek version of the popup can link directly to your Greek contact page and the English one to the English page — no extra setup needed.
    Two small notes: with this approach the buttons stay visible once they’ve appeared (they don’t hide again when scrolling back to the top), and if they overlap the theme’s back-to-top arrow you can simply increase the bottom margin (for example to 90px). Also, if you’d rather have the buttons visible at all times instead of only after scrolling, an even simpler alternative is adding the same two buttons to a container with Position: Fixed in your footer template.
    If you don’t have Elementor Pro, just let me know — in that case I’ll send you a small self-contained code snippet that does the same thing.
    Thanks,
    Serkan

    beenerds
    Participant

    Dear Serkan,

    Thank you for your reply.

    We will check and revert.

    Thank you

    Best Regards,
    beenerds

    serkan
    Moderator

    You are welcome :) We’d be very happy if you can spare a minute to rate the theme on ThemeForest. Your feedback will boost our motivation and help us to work harder on future updates.

    https://themeforest.net/downloads

    Thank you for your support.

Viewing 10 posts - 1 through 10 (of 10 total)

You must be logged in and have valid license to reply to this topic.

License required for the following item
Login and Registration Log in · Register