• 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"

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

mei2020

Active member
Nov 23, 2020
188
31
28
Hi guys i want to make POSTS Design Customization
Actually, I want to make something like
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:
.elementor-post__text
{
    margin-top: -84.5% !important;
    margin-bottom: auto !important;

    background-color: white;
    background-size: cover;

    align-content: center;
    min-height: 254px !important;
    margin-left: -94%;
    z-index: 1;
    position: relative;
 
   -webkit-transition: margin-left 0.7s;
   transition: margin-left 0.7s;
   display: inline-block;
   vertical-align: auto;
   white-space: normal;
   overflow: inherit;
   opacity: 0.8;
}

.elementor-post__text:hover{
    margin-left: -1%;
    max-width: 150%;
}

[/css]
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


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: 59
Last edited:
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.
 
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
 
Wait... why is the loading time suddently take sooo long?

Did my site get hacked (Infiltrated by malware)?
 
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)?
 
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'?
 
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
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:
AdBlock Detected

We get it, advertisements are annoying!

However in order to keep our huge array of resources free of charge we need to generate income from ads so to use the site you will need to turn off your adblocker.

If you'd like to have an ad free experience you can become a Babiato Lover by donating as little as $5 per month. Click on the Donate menu tab for more info.

I've Disabled AdBlock