Elementor change section image on button hover on column - css

I am new to elemetor and just wanted to explore the plugin. I have seen the website of Hongkong University and there is a part there where if a user hovers over the text, the background image would change. The change depends on the text being hovered. I wanted to recreate this under elementor but can't figure how.
I tried adding a custom id to the section and button (via elementor), then adding custom CSS codes in WordPress. Unfortunately, I was unsuccessful. If this is not possible using elementor, may I know if there is a plugin that has the same function? Thank you.

I have checked the website you have mentioned above. You can make it using Elementor and some custom coding. Please check this video tutorial which will help you to understand how you can make the same as per your requirement. You need to just change it as background image and hover on text selector.
You can also check this tutorial to get another idea. Code snippets are also added there

Related

WordPress embed link doesn't react when clicked

enter image description here
Here is the website with the problem as the title.
http://gophilippines.media/itcamp02/
When I try to click the WordPress embed link card, it doesn't do anything.
Does anyone know what's wrong and perhaps some idea to fix?
I also disabled all the plugins yet the link doesn't react...
The element of the link contains an attribute target="_top". This attribute will try to open the linked document in the full body of the window (See this for more info).
You can remove the attribute or change it to another that does the work for you.

Pop-up text on image click WordPress

I am designing a wordpress site for a friend. He wants the bio text to appear after clicking on necessary image. I noticed this is straight forward with Elementor Pro. I want to keep things free for him at the mo.
I am running the Astra theme with basic Elementor. I also know how to code so if you think this is a custom css job then let me know the work around. (I'm brand new to WP)
Many thanks
Try adding an onclick event to the image and write some java script to add text where you want or may be enable a hidden textarea ??
You can check this link below for reference
How do I add a .click() event to an image?

wordpress theme - links (relative or hardcoded)

I am using a wordpress theme and am confused about links to other pages.
there are places where I can add a link to an existing button but I am not sure whether the link should be hardcoded or not.
e.g.
www.mysite/wordpress/?page=123
or
?page=123
Also if I have to hardcode it, should I be using https://??
This is not HTML, its like a textbox where you can add a link for a button, I guess the theme provides it.
Here is an image which shows how you can add a link to a button, it askes for a link, I would want to link to my contact page, what should i enter here?
Apologies this is all new to me.
As i know you can hardcode it. Like in Title
I use this code for
<?php the_title();?><?php the_permalink();?>
it will link to the page according to the title of the page/posts.
hope this helps

Wrapping title text in CSS

I am hoping to make the title of blog posts wrap onto a second line as can be seen on blog.buffer.com
I can’t find anything obvious in the code when inspecting the elements on the Buffer blog that would control this and wondered if anybody has achieved this?
Many thanks
use custom css using class name of the tittle text. Mainly custom css field found in Theme option or you can add custom css plugin available for free.

Custom CSS with Headway Theme

I'm new to building websites.
I'm currently using Headway drag and drop Wordpress builder.
I've added Testimonial Widget by Aihrus plugin for testimonials, and I've added it to a widget box.
Problem is that I want to add custom CSS to it that I've seen on this site that is built for it, but the Headway theme doesn't allow you to go in and edit the theme. I've tried adding it to the block inside of the theme but it didn't work. I ended up going into the plugin and adding it to the CSS of the plugin, and it now half works.
Could someone please tell me what I'm doing wrong?
My site is rainorshinedogwalking.com
You can edit your live CSS here:
http://docs.headwaythemes.com/customer/portal/articles/1067360-editing-css-directly
What you type gets minified and added to your site's dynamic CSS file on page load.
All you have to is go through design editor click on the element you want to edit then right click. A pop up box should come up and it say edit element choose that then you will see something like that click it and add our own css

Resources