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

M

mei2020

Active member
Nov 23, 2020
181
29
28
Hi guys i want to make POSTS Design Customization
Actually, I want to make something like
>this< on >my website<
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
(https://iti.ac.id)

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:
frizzel

frizzel

Well-known member
Trusted Uploader
Jun 13, 2019
485
253
63
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.
 
M

mei2020

Active member
Nov 23, 2020
181
29
28
frizzel said:
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.
Click to expand...
Not yesterday 👀, Yesterday it was still accessible
 
M

mei2020

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

Did my site get hacked (Infiltrated by malware)?
 
M

mei2020

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

mei2020

Active member
Nov 23, 2020
181
29
28
frizzel said:
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.
Click to expand...
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.
Click to expand...
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

frizzel

Well-known member
Trusted Uploader
Jun 13, 2019
485
253
63
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
M

mei2020

Active member
Nov 23, 2020
181
29
28
But now i got new prob's ...
frizzel 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.
Click to expand...
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:
You must log in or register to reply here.

Similar threads

M
#DROPPED! #ASK SliderRevolution : How to Set Active The Timer (related: maintenance, construc...)
Replies
3
Views
662
General Tech Discussion
mei2020
M
PangeranBima
[ASK] How To Hide Half Posts Wordpress?
Replies
5
Views
479
General Tech Discussion
tradesman
tradesman
M
#SOLVED! #ASK Elementor~Wordpress : Have No images? But I Already Add It :(
Replies
14
Views
1K
General Tech Discussion
mei2020
M
M
#ASK Best Wordpress Form Maker: That Preview Images After Uploading the Images
Replies
4
Views
670
General Tech Discussion
xeric
X
M
#SOLVED! #ASK Elementor Editor : Sudden Unlimited Loading
Replies
8
Views
925
General Tech Discussion
mei2020
M

Latest posts

Forum statistics

Threads
69,234
Messages
908,491
Members
237,168
Latest member
aquahoshinoas

Share this page

Share this page

About us

  • Our community has been around for many years and pride ourselves on offering unbiased, critical discussion among people of all different backgrounds. We are working every day to make sure our community is one of the best.

Quick Navigation

Forums Contact us

User Menu

Login
Community platform by XenForo © 2010-2022 XenForo Ltd.
Top Bottom