Newsletter pop up - by ahmadtalal - on WordPress WooCommerce support

This topic has 12 replies, 2 voices, and was last updated 6 years, 7 months ago ago by Rose Tyler

  • Avatar: ahmadtalal
    ahmadtalal
    Participant
    April 1, 2018 at 12:11

    Hi,
    I have turned on pop up at my website but i want to modify it. I have mailchimp shortcode for email input form and a submit button only.
    I tried to design the pop but couldn’t.
    https://prnt.sc/iz905b
    in the link above i have designed the layout in photoshop but I dont know how to do it at website.
    I want responsive popup according to that design with full width of submit button and input form.
    Can you please tell me how to do it or direct me in the right direction then i shall be thankful.

    11 Answers
    Avatar: Rose Tyler
    Rose Tyler
    Support staff
    April 2, 2018 at 12:45

    Hello,

    Please read our documentation https://www.8theme.com/demo/docs/legenda/#!/newsletters and https://www.8theme.com/demo/docs/legenda/#!/static_blocks
    Let us know if you need any further assistance.

    Regards

    Avatar: ahmadtalal
    ahmadtalal
    Participant
    April 3, 2018 at 08:00

    Hi,
    I have created the static block before but the problem was that the input form and submit button width was not full. I try to write something like FULL-WIDTH in css but didnt work.

    and also right now i have only an image pop up, which is ok at desktop browsers but its not responsive at mobile.
    please check the linked images below.
    desktop version:
    https://prnt.sc/j03ec6

    Mobile version:
    https://prnt.sc/j03emb

    as you can see in the linked images that the pop up image is not full in the mobile version.
    thnx

    Avatar: Rose Tyler
    Rose Tyler
    Support staff
    April 3, 2018 at 11:30

    Hello,

    Change background-size to contain and height to 357px.
    Also, it would be better if you provide temporary wp-admin access so I can take a closer look.

    Regards

    Avatar: ahmadtalal
    ahmadtalal
    Participant
    April 3, 2018 at 18:02

    Can you please tell me how i can achieve such pop up result “the layout i have sent in my first msg”
    I tried to create a static block and then add an image to a row and then add a widgetized sidebar and add the widget to which i have attached mailchimp form.

    when i add the static block id in the pop up section in theme option.
    then when i check the popup looked horrible.

    here is the screen shot.
    https://prnt.sc/j0cn1h

    I want the input email form goes below the picture and then the submit button goes below the input form.
    as i have shown in my layout.
    thanks

    Avatar: Rose Tyler
    Rose Tyler
    Support staff
    April 4, 2018 at 09:08

    Hello,

    To achieve the desired result you need to use also custom css code. On your site, the popup doesn’t have the form now, so I can’t inspect the form via browser console and give you appropriate css code.

    Regards

    Avatar: ahmadtalal
    ahmadtalal
    Participant
    April 4, 2018 at 11:20

    Hi,
    yes i have removed the form bcoz it was looking very bad.
    i will attach the login credentials so that u can have a look.
    please design something according to the layout i have sent so that if i want to change the pic in future then i will b able to replace the image in future with the same dimensions.
    thanks a lot

    Please, contact administrator
    for this information.
    Avatar: Rose Tyler
    Rose Tyler
    Support staff
    April 4, 2018 at 13:16

    I’ve made some changes, please add this custom css code in custom.css file:

    #etheme-popup .vc_row {
        position: absolute;
        width: 100%;
        right: 2%;
        bottom: 0px;
    }
    #etheme-popup .checkbox-label {
        bottom: -10px;
        left: 2%;
    }

    How to create custom.css you can watch in this tutorial – https://www.youtube.com/watch?v=Qok2zRedRMY.
    The result should be – http://prntscr.com/j0q43o

    Regards

    Avatar: ahmadtalal
    ahmadtalal
    Participant
    April 4, 2018 at 13:40

    Hi,
    I have added those codes to Custom.css and it has worked.
    Thank you so much, i really really appreciate it.
    but just one more thing, when i make the screen smaller to mobile size then still the background image is not responsive.

    Avatar: Rose Tyler
    Rose Tyler
    Support staff
    April 4, 2018 at 13:47

    Hello,

    You’re welcome!
    Please add this code:

    #etheme-popup {
        background-size: contain;
    }

    and set Popup background color in Theme Options > Promo Popup to get – http://prntscr.com/j0qmn6

    Regards

    Avatar: ahmadtalal
    ahmadtalal
    Participant
    April 5, 2018 at 07:01

    Hi,
    I have added the codes and it looks perfect now.
    I really appreciate your help and i am glad that i have purchased and choose Legenda theme over other themes.
    Thanks a lot again.

    Avatar: Rose Tyler
    Rose Tyler
    Support staff
    April 5, 2018 at 08:14

    Hello,

    You’re welcome!
    Thank you very much for such good thoughts! Have a nice day 🙂

    Regards

  • Viewing 12 results - 1 through 12 (of 12 total)

You must be logged in to reply to this topic.Log in/Sign up

8theme customization service
We're using our own and third-party cookies to improve your experience and our website. Keep on browsing to accept our cookie policy.