Skip to content

Conversation

@girishpanchal30
Copy link
Contributor

Close Codeinwp/visualizer-pro#314

@pirate-bot
Copy link
Contributor

pirate-bot commented Feb 24, 2022

Plugin build for 201b923 is ready 🛎️!

@girishpanchal30
Copy link
Contributor Author

@selul Please review upsell section design and do let me know if you have any queries.

Thanks

@selul
Copy link
Contributor

selul commented Feb 24, 2022

@girishpanchal30 will leave this for @irinelenache to do, please move it to testing.

@irinelenache
Copy link

irinelenache commented Mar 2, 2022

@girishpanchal30 Tested and found a few things:

@girishpanchal30
Copy link
Contributor Author

@irinelenache Fixed 3 points, Please retest again

@mghenciu
Copy link
Contributor

mghenciu commented Mar 2, 2022

As Irinel mentioned, @girishpanchal30, we agreed to use only the 1-column upsell message:
image

A few other things I noticed after doing a quick test with the build:

  • when opening the Get Visualizer Pro button/menu, the link should open in New Tab. That's more of a general rule for upsell messages, to open them in a New Tab - instead of the current one (because this can be annoying for users).

Screenshot 2022-03-02 at 13 52 51

  • View more features button in the upsell, should take users to this Section. I know previously it was leading to the Pricing section, but now things are different because we have the Get Visualizer Pro button in the Sidebar.

  • I noticed now that the Upsell box looks good on a <1366px width, but on bigger screens the Upsell Box looks way too empty (second image)

image

Screenshot 2022-03-02 at 14 17 40

So to not waste the work you've already done with 2 columns, I would add the logic so if the Window width is bigger than 1366px, then show all 12 Visualizer Pro benefits, but in one column, and also only if width is >1366px make the column height: fit-content;. So it would look something like this:
image

On smaller screens <1366px, we'll keep only 6 checkmarks/benefits visible, and the Column height: 100%


As always, let me know if I can help with something else.
and sorry for asking last-mile changes, I'll try to avoid them in future.

@girishpanchal30
Copy link
Contributor Author

As always, let me know if I can help with something else.

@mghenciu Sure thank you

@girishpanchal30
Copy link
Contributor Author

Hello @mghenciu, I have applied your mentioned suggestion, Please check and do let me know if you have any queries.

cc @irinelenache
Thanks

@mghenciu
Copy link
Contributor

mghenciu commented Mar 3, 2022

Hello @mghenciu, I have applied your mentioned suggestion, Please check and do let me know if you have any queries.

cc @irinelenache Thanks

Tested now and it looks good, the changes I mentioned are implemented.
Thank you!

@irinelenache
Copy link

@girishpanchal30 Tested again and the mentioned issues are fixed, thank you 👍

A single problem:

  • This is how the upsell looks on my end:

image

Tested with Safari/Chrome on Macbook pro - Built-in Retina Display 13,3-inch (2560 × 1600)

@mghenciu
Copy link
Contributor

mghenciu commented Mar 3, 2022

@girishpanchal30 Tested again and the mentioned issues are fixed, thank you 👍

A single problem:

  • This is how the upsell looks on my end:

Tested with Safari/Chrome on Macbook pro - Built-in Retina Display 13,3-inch (2560 × 1600)

@irinelenache, It may be related to the fact that the laptop is 13 inch, and the Ratio is 16:10.
With a simulation in Chrome using the Resolution you mentioned, it looks ok:
image

Maybe we could adjust/increase a bit the media query @girishpanchal30 .

Essentially the idea here is to show only 6 benefits on small screens (laptops, small displays) and 12 benefits/checkmarks on larger screens, like for example a 3440x1440 Ultrawide Monitor. Probably you know best what media queries are good for such a case, and how to also keep in mind the Retina screens Irinel mentioned.

@girishpanchal30
Copy link
Contributor Author

@irinelenache @mghenciu I'm looking into this issue, I'll update you here...

@girishpanchal30
Copy link
Contributor Author

@irinelenache @mghenciu I have fixed mentioned issue, Please retest and let me know if you have any issues.
Thanks

@mghenciu
Copy link
Contributor

mghenciu commented Mar 8, 2022

I think it looks good @girishpanchal30, from my side.
Laptop (6 checkmarks):
image

Large screen (12 checkmarks):
image

@irinelenache
Copy link

@girishpanchal30 Tested again and everything looks fine for me too, thank you 👍

@selul selul merged commit c03c4d1 into development Mar 16, 2022
@pirate-bot
Copy link
Contributor

🎉 This PR is included in version 3.7.5 🎉

The release is available on GitHub release

Your semantic-release bot 📦🚀

@pirate-bot pirate-bot added the released Indicate that an issue has been resolved and released in a particular version of the product. label Mar 17, 2022
@selul selul deleted the design/pro/314 branch October 12, 2022 15:05
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

released Indicate that an issue has been resolved and released in a particular version of the product.

Projects

None yet

Development

Successfully merging this pull request may close these issues.

6 participants