Return to previous page

Newsletter pop up - by ahmadtalal - on WordPress WooCommerce support

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

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.

#189912 Copied

11 Answers

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

#190001 Copied

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

#190070 Copied

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

#190102 Copied

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

#190163 Copied

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

#190207 Copied

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.

#190238 Copied
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
#190259 Copied
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.

#190263 Copied
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
#190265 Copied
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.

#190309 Copied

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

#190324 Copied
Viewing 12 results - 1 through 12 (of 12 total)