-
-
Hi,
I was wondering which block/media/servicemedia you were using to create the three cards/items just below the hero image in your fitness demo?“Crossit workout” – “New gym apparel” – “Crossfit workout”
The entire area is clickable, has an icon+heading+description and a hover-over effect with a background image.
-
Hi, are u using that demo? This style is specific to the fitness template and you cannot import it to another template. If you need I can send you some custom codes to fit your design.
Thanks
-
Hi,
We are currently using the default demo and not the fitness demo.
Please do send the code over for this as I’ll greatly appreciate it.Cheers
Susan -
Custom css:
.temp-img .media_align_left { margin-bottom: 0; } .media-over-content { position: absolute; bottom: 0; padding: 20px; } .media-over-content i { font-size: 24px!important; } .vc_btn3.vc_btn3-color-juicy-pink, .vc_btn3.vc_btn3-color-juicy-pink.vc_btn3-style-flat { background-color: #4db4c5; } .wpcf7-form-control-wrap textarea, .wpcf7-form-control-wrap input[type="text"], .wpcf7-form-control-wrap input[type="email"], .wpcf7-form-control-wrap input[type="tel"] { border: 1px solid #dddddd!important; } .media-over-content h4 { text-shadow: 1px 1px black; } #temp-img .wpb_column:hover .media_el.wpb_content_element.rounded_right_corners { transform: scale(1.03); cursor: pointer; } #temp-img .media_el.wpb_content_element.rounded_right_corners{ box-shadow: 4px 4px 20px 2px rgba(0,0,0,0.2); border-bottom-right-radius: 50px!important; margin-bottom:0; border-radius:4px; filter:brightness(); transition: 0.1s all ease-in-out; } #temp-img .media_el.wpb_content_element.rounded_right_corners::after { content: ''; background: linear-gradient(to top, rgba(0, 0, 0, 0.8) 20%, transparent 60%); width: 100%; height: 100%; position: absolute; display: block; }
shortcodes:
[vc_row text_color="light" el_id="temp-img"][vc_column width="1/3"][media rounded_right="1" image="365"][vc_column_text css_animation="fadeIn" el_class="media-over-content"]<i class="fas fa-dumbbell"></i> <h4>Crossfit workout</h4> <h5><span style="color: #4db4c5; font-weight: 600;">Push your limits</span></h5> [/vc_column_text][/vc_column][vc_column width="1/3"][media rounded_right="1" image="366"][vc_column_text css_animation="fadeIn" el_class="media-over-content"]<i class="fas fa-dumbbell"></i> <h4>New gym apparel</h4> <h5><span style="color: #4db4c5; font-weight: 600;">Look good, feel good</span></h5> [/vc_column_text][/vc_column][vc_column width="1/3"][media rounded_right="1" image="367"][vc_column_text css_animation="fadeIn" el_class="media-over-content"]<i class="fas fa-dumbbell"></i> <h4>Crossfit workout</h4> <h5><span style="color: #4db4c5; font-weight: 600;">Push your limits</span></h5> [/vc_column_text][/vc_column][/vc_row]
place it to the end of page(classic editor) then open with wpbakery to edit
Thanks
-
Hi Ludjon,
Thank you for the code. Is there anything more to this?
I’ve placed the code into the classic editor, swapped to wpbakery to edit and then previewed.It produces nothing visible in preview, see attached images(1 and 2) in link below
Something not working with the shortcodes?
Copying the elements from your demo and pasting it into classic editor works(image 3-4) suggesting the css is being read and is correct.I’ve managed to re-create the cards as individual text blocks(5-6). The entire element currently doesnt link, only the text, they zoom on hover and have a selector arrow which suggest they should be clickable so I still need the shortcodes to make this correctly.
Cheers
- This reply was modified 4 years, 6 months ago by macolighting.
- This reply was modified 4 years, 6 months ago by macolighting.
- This reply was modified 4 years, 6 months ago by macolighting.
-
Hello,
The fast solution is to share with us your wp credentials and online link (private reply) so we can check it for you.
Let me know.
Regards!
-
You must be logged in to reply to this topic.