#DROPPED! #ASK Elementor Addon : POSTS Design Customization - How to Make It Looks Alike Desktop Preview OR If Possible Using Ready to Use Widget

  • You MUST read the Babiato Rules before making your first post otherwise you may get permanent warning points or a permanent Ban.

    Our resources on Babiato Forum are CLEAN and SAFE. So you can use them for development and testing purposes. If your are on Windows and have an antivirus that alerts you about a possible infection: Know it's a false positive because all scripts are double checked by our experts. We advise you to add Babiato to trusted sites/sources or disable your antivirus momentarily while downloading a resource. "Enjoy your presence on Babiato"

mei2020

Active member
Nov 23, 2020
187
26
28
Hi guys i want to make POSTS Design Customization
Actually, I want to make something like
You don't have permission to view the spoiler content. Log in or register now.
1615354009034.png
But, i don't know if there is an Elementor Widget that can be used directly set like that.

So, im tryng to modify how elementor addon 'POSTS' looks like on my site.
I have already successfull make it on desktop device (although not quite exactly what I wanted *mouse over img).
Preview (using desktop) :
1615353550596.png
Note:
*When mouse hovering the rectangle body part it'll expand the text like in the img.

But not in phone device ...
Preview (using phone) :
1615355105376.png


How do i make it on desktop? just by adding this 'custom css' to make how it looks on desktop preview
CSS:
You don't have permission to view the code content. Log in or register now.
What part that iam miss, so it happens like on the phone preview ?

Note:
SUGGEST ME: if there is an Elementor Addon that can be used right away that looks like in

You don't have permission to view the spoiler content. Log in or register now.

EDIT:
I dropped this idea, but if anyone knows any css tricks to make it happen, I hope you can share them here (in this thread). Because your knowledge might be able to help someone someday.
 

Attachments

  • 1615355150484.png
    1615355150484.png
    730.7 KB · Views: 58
Last edited:

frizzel

Well-known member
Trusted Uploader
Jun 13, 2019
862
564
93
Wherever my imagination takes me
Well, first of all, before you do some more design work, check your server configuration as I cannot even access your website getting a 500 Internal Server Timeout Error.

Second: you should be very careful setting hardcoded values to 'hide' elements and show them on hover. These are normally done dynamically (via javascript) because different screen sizes need different values.

Third, touch devices like phones do not have a 'hover' function. Your example website also does that wrong in phone view, showing the text briefly after clicking on the item. On a phone, it's better to have that text in a space underneath the post's featured image.
 

mei2020

Active member
Nov 23, 2020
187
26
28
Well, first of all, before you do some more design work, check your server configuration as I cannot even access your website getting a 500 Internal Server Timeout Error.

Second: you should be very careful setting hardcoded values to 'hide' elements and show them on hover. These are normally done dynamically (via javascript) because different screen sizes need different values.

Third, touch devices like phones do not have a 'hover' function. Your example website also does that wrong in phone view, showing the text briefly after clicking on the item. On a phone, it's better to have that text in a space underneath the post's featured image.
Not yesterday 👀, Yesterday it was still accessible
 

mei2020

Active member
Nov 23, 2020
187
26
28
Wait... why is the loading time suddently take sooo long?

Did my site get hacked (Infiltrated by malware)?
 

mei2020

Active member
Nov 23, 2020
187
26
28
Are you using The Plus Addons for Elementor? See the other thread about a site being hacked because of a vulnerability in this addon.
Likely I used 'Plus Addons for Elementor', why didn't I find the thread before (in a similar thread list)?
 

mei2020

Active member
Nov 23, 2020
187
26
28
Second: you should be very careful setting hardcoded values to 'hide' elements and show them on hover. These are normally done dynamically (via javascript) because different screen sizes need different values.
Can we use 'java script on elementor editor'?

Third, touch devices like phones do not have a 'hover' function. Your example website also does that wrong in phone view, showing the text briefly after clicking on the item. On a phone, it's better to have that text in a space underneath the post's featured image.
But, i still want to use that method...
How about i use different method for desktop & mobile phone? How to sett it like that 'responsive thing'?
 

frizzel

Well-known member
Trusted Uploader
Jun 13, 2019
862
564
93
Wherever my imagination takes me
Just make the text underneath the posts image the default (mobile first) and then hide and show it on hover on desktop. You don't necessarily need javascript for that, you can do it with CSS, e.g. with a change in width (and/or height) plus a transition effect.
 
  • Like
Reactions: mei2020

mei2020

Active member
Nov 23, 2020
187
26
28
But now i got new prob's ...
Just make the text underneath the posts image the default (mobile first) and then hide and show it on hover on desktop. You don't necessarily need javascript for that, you can do it with CSS, e.g. with a change in width (and/or height) plus a transition effect.
From your words I will have 2x post widget.
1 Used the default (for mobile device),
1 Used the modified (for desktop device).
by using responsive on elementor editor feature we can decide what to hide/ show only desktop/ phone/ etc.

But, how to made it, if i have same id that must be used on css?
.elementor-post__text {
...
}

.elementor-post__text:hover{
...
}

Meanwhile, I have to make 2 different views for 1 type of addon that has the same id, namely elementor-post__text

NOTE:
Tell me if I misunderstood

Or there's a way to make the css detec what device visitor (using css) like you said:
Just
make the text underneath the posts image the default (mobile first) and then hide and show it on hover on desktop. You don't necessarily need javascript for that, you can do it with CSS, e.g. with a change in width (and/or height) plus a transition effect.
 
Last edited:

Forum statistics

Threads
49,993
Messages
549,421
Members
135,267
Latest member
Sofiajones_898
AdBlock Detected

We get it, advertisements are annoying!

Sure, ad-blocking software does a great job at blocking ads, but it also blocks useful features of our website. For the best site experience please disable your AdBlocker.

I've Disabled AdBlock    No Thanks