Viewing 30 posts - 1 through 30 (of 34 total)
  • Author
    Posts
  • #437507

    Header Widget, Page Design, Buttons behavior and more…

    Hi.

    i am working on my website and i am facing many problems / stuff that i dont know how to handle it so i have few questions:

    1. i would like to have part of the page to be designed with a parallax background image with some content separated on the same section.
    example: http://www.laurentperezdelmar.com/ (i liked the scrolling effect). i know that the “color section” provides parallax option with a cutom image but didn’t find the way to separate between sections. also tried the “Background Image” on the “enfold” settings, General styling but it didn’t supplied the solution for it.

    2. i would like to add some links in the footer like the “Enfold Latest News”, the links should be shown like the “testimonials” balloons with some text in the left side like the “Enfold Latest News”.

    3. when i am adding many page links on the menu it overlays the Logo. need to fix it.

    4. i want to add a GAP wothout any lines or icons in the middle of the page but the separator doesn’t provide a solution for it.

    5. i want to add “Transposh” translation widget to the header near the “Extra Elements” Section.didn’t find how to do that.

    6. i want to add “Partner/Logo Element” slider and i have many logos that each one has different sizes but it cuts the images, need to fix it as well.

    7. i want to force all images in a slider to be shown in the same size on a “FullWidth Easy Slider” without the need to change their resolution manually each one (some images are shown in a zoom…).

    8. i want to force all images in a “Image” media element to be shown in the same size without the need to change the image resolution.

    9. on enfold there is no “maintenance” or “coming soon page” so i have created one and i would like to add a line of social icon buttons on bellow the “countdown” how can it be done?

    10. on the “icon box” i want to have the “Icon Hover effect” without having any Hyperlink behind it. how can it be done?

    11. i want to automate some “Color section” by pasting it like a “shortcode” on pages but there is no shortcode for “Color section”.

    i will highly appreciate any assistance.
    need help

    many Thanks!

    BR,

    Ben

    #438221

    Hey bendosda!

    1. You mean you want a color section with parallax, some content after it, and then another section with parallax using the same image beneath it? I’m not sure if that is going to be possible.

    2. The easiest way to do this would be to copy the “Latest News” HTML and then paste it inside a text widget in the footer and change the links to whatever you need.

    3. Add this to your custom CSS.

    @media screen and (max-width:1000px) {
    nav.main_menu { display: block !important; }
    #advanced_menu_toggle { display: none !important; }
    }

    4. The separator has a “whitespace” style which does not have any borders.

    5. See here for how to add a widget area to your header, http://kriesi.at/documentation/enfold/adding-a-widget-area-to-the-header/.

    6. Hmm, it shouldn’t be cutting them. The default behaviour is to set their width to 100% of the column and their height to auto so they scale nicely inside the columns. Send us a link and we’ll take a look.

    7. Which slider are you using? Send us a link and we’ll take a look.

    8. You’ll have to crop the images for this one. If you force their size with CSS they will look distorted.

    9. We do have a coming soon page, http://kriesi.at/themes/enfold-coming-soon/. If you want to display social buttons then you could use our icon shortcodes and add links manually, use a codeblock element with HTML inside, or use the “Social Share Buttons” element in the layout builder.

    10. Do not set a link on the title if you do not want a link to be displayed.

    11. You can do this, http://kriesi.at/documentation/enfold/enable-advanced-layout-builder-debug/, to view the shortcodes being used in the layout builder.

    Best regards,
    Elliott

    • This reply was modified 6 years ago by  Elliott.
    #438307

    Hi Elliott, many thanks for your reply.

    regarding the answers:

    1. bummer. why not can’t it be done on a sofisticated way?

    2. yes but how can i make the balloon icons with images inside it?

    3. didn’t helped, still overlays, see attached file.

    4. thanks! works like a charm!

    5. i followed the guide and it place the flags right below the logo. i want to place it on the “Extra elements” section in the other side of the phone number.

    6. sending the link on private, the partner element is in the bottom.

    7. sending the link on private. the slider changes his size as well. i want it to be fixed without croping or zooming images.

    8. OK.

    9. i did created my own page and add the “social icons” but it was showing it on different lines and no all of them aligned one the same line.

    10. already tried it but i want to use the hovver effect, and once i remove the hyperlink (even on a blank) it disables the hover effect from the icon.

    11. will check it later.

    Thanks!

    Ben

    #438308
    This reply has been marked as private.
    #438825
    This reply has been marked as private.
    #439814

    Hey!

    1. I suppose it might be possible with lots of changes to the code. That would have to be considered custom work though and it would be best to hire a freelancer to help you out with that.

    2. Right click your page and view source and then copy the HTML for the widget and paste that inside a text widget in your footer widget areas. You can then edit the HTML to suit your purposes.

    3. That should be working. Perhaps you have a typo somewhere in your custom CSS.

    5. Hmm, I don’t see any classes being output with it. Try switching the code to this.

    add_action( 'ava_after_main_menu', 'enfold_customization_header_widget_area' );
    function enfold_customization_header_widget_area() {
            echo '<div class = "header_widget">';
    	dynamic_sidebar( 'header' );
            echo '</div>';
    }

    And let us know when your done so we can take another look.

    6. In the shortcode options set the image size to 300 x 300 or something similar instead of No scaling.

    7. You can add this to your custom CSS.

    .avia-fullwidth-slider, .avia-fullwidth-slider img {
      height: 500px !important;
    }

    But that may make some of your images look distorted. It would be best to crop them before uploading.

    9. Send us a link.

    In the future I recommend creating separate topics for your questions. Asking so many all at once makes it confusing and difficult to answer.

    Regards,
    Elliott

    #440047
    This reply has been marked as private.
    #441032

    Hi!

    5. It’s the same as in the instructions in the link I provided, just switch the code. Take a screenshot and highlight the exact area your wanting it to be and we’ll give you some CSS.

    For your other questions go ahead and create separate topics for them. It’s getting way too confusing trying to answer them all at once. Be sure to include links to the pages and screenshots highlighting your intentions so we know exactly what your trying to do.

    Best regards,
    Elliott

    #441033

    Hi!

    3. We would need admin access to check your Quick CSS field. Post login details here as private reply.

    5. Put Elliott’s code into your functions.php. You can find it via FTP or go to Appearance->Editor and choose “functions.php” to put the code inside of it.

    6. Please clear browser cache and refresh your website a few times afterwards.

    7. You could try to use a plugin like this: https://wordpress.org/plugins/simple-image-sizes/

    Make sure to use newest theme (Enfold v3.1.5) and WordPress version.

    Best regards,
    Andy

    #441319
    This reply has been marked as private.
    #442424

    Hey!

    you did not give us admin access, so we can’t check anything.
    Please update to the newest theme and WordPress version and let us know when you are done.

    Cheers!
    Andy

    #442553

    access granted.
    done.
    done.

    BR,

    Ben

    #443895

    Hey!

    you are still using v3.1.3, please update to Enfold v3.1.5

    Use this for you language flags:

    .no_translate.transposh_flags {
    float: right;
    }
    

    To control your logo use this:

    strong.logo {
    top: -59px;
    }
    

    To hide your widgettitle remove it in the widget section or use this code:

    h3.widgettitle {
    display: none;
    }
    

    Your menu items:

    nav.main_menu {
    top: 2px;
    }
    

    To control your navigation:

    .inner-container {
    top: 20px;
    }
    

    11 points in one thread instead of opening different tickets are really a lot. Please hire a freelancer for further customization.

    Try also to deactivate all plugins, to see if one is causing the problems.

    Best regards,
    Andy

    • This reply was modified 6 years ago by  Andy.
    #444055

    Hi Andy.

    thanks for the reply. did the update.
    regarding the flags they still doesn’t appear to be on the “extra elements” section.
    moreover is that when i scroll the menu overlays on the slider.

    you right regarding the “too many questions on same post” – most of them i already solved.
    just still missing the flags issue and questions #7 and #8.

    Cheers.

    BR,

    Ben

    #445378

    Hey!

    for your main menu use this:

    nav.main_menu {
    top: top: -6px;
    }
    

    and adjust as needed by yourself.

    Where exactly do you want the language flags to be? I thought you want them on the right side. Please provide us a screenshot/mockup showing what you want to achieve. However, as I said in my previous post use this code to put the flags on the right side:

    .no_translate.transposh_flags {
    float: right;
    }
    

    Best regards,
    Andy

    #445399

    Hi andy.

    here is how it is now.
    and an example how i want them to be.

    currently it is like this:

    current

    i want it to be located like this:
    future

    please note that it is obvious that when translating the page to RTL they should be in the other side.

    Thanks man!

    BR,

    Ben

    #447047

    Hey!

    use this code for your flags:

    .no_translate.transposh_flags {
    position: relative;
    top: -51px;
    }
    div#header_meta {
    z-index: 1;
    }
    

    and adjust “top” value as needed.

    For creating RTL WordPress sites with WPML please check this tutorial:
    https://wpml.org/documentation/theme-compatibility/build-rtl-wordpress-themes/
    although I think you are using a different language plugin, right? in this case you would need to ask the plugin’s author.

    Regards,
    Andy

    #447073

    Hi Andy.

    thanks!

    much better but still it is not on the “extra elements” section, it is below.

    and i have the menu overlay when scrolling done (marked in red).

    any other suggestions?

    BR,

    Ben

    #447165

    Hey!

    Please add following code to Quick CSS as well

    .header-scrolled nav.main_menu {
      top: -15px;
    }

    It seems like you have already figured out flag positioning issue?

    Cheers!
    Yigit

    #447246

    Hi.

    many thanks Yigit! it solved the overlay issue.
    regarding the flags positioning i still need to fix it. i want it to be on the “extra elements” section near the phone number or in the other side..
    but still it needs to be a little bit more up.

    BR,

    Ben

    #448557

    Hi Ben!

    Check it now, i edited the flags position in includes/helper-main-menu.php.

    Cheers!
    Josue

    #449089

    Hi Josue.

    thanks but where is the code?

    BR,,
    Ben

    #449100

    Hi Ben!

    It’s inside #header_meta container, around line 25-30.

    Cheers!
    Josue

    #449288

    Hi josue.

    thanks! i see it now.2 things:

    1. the logo is overlaying now on the “extra elements” section. how can we fix it?
    2. how can i add a gap between the phone number to the flags?

    also how can i implement it in another copy that i have of the site?
    can you supply the code?

    BR,

    Ben.

    #449292

    Hey!

    1. Can you post a screenshot/mockup of how it should look?

    2. Add this to Quick CSS:

    .no_translate.transposh_flags {
       margin-left: 10px;
    }

    Regarding re-implementing this, simply copy includes/helper-main-menu.php.

    Best regards,
    Josue

    #450141
    This reply has been marked as private.
    #450381

    Hey!

    1. It looks like that right now, i asked a mockup of how it should look.

    3. Use this tool to do a quick comparison between your modded helper-main-menu and a un-modded one.

    Best regards,
    Josue

    #450488
    This reply has been marked as private.
    #450833

    Hi Ben!

    Try enabling this option: http://a.pomf.se/tcyuhb.png

    Regards,
    Josue

    #451012

    Hi Josue.

    didn’t help.

    BR,

    Ben

Viewing 30 posts - 1 through 30 (of 34 total)

The topic ‘Header Widget, Page Design, Buttons behavior and more…’ is closed to new replies.