Return to previous page

Need block example - by MJ - on WordPress WooCommerce support

This topic has 15 replies, 3 voices, and was last updated 4 years, 3 months ago ago by MJ

MJ

Participant

August 24, 2021 at 07:55

Hi,
I’d like to make a block like this https://prnt.sc/1qgllnp
Is there any template in xstore demos?

#299716 Copied Theme version: 8.0.4

14 Answers

John Holden

Participant

August 24, 2021 at 08:19

Hello

Thank you so much for contacting us!

There is no specific template to to design page same like your mentioned page, but in elementor page builder you can create ghis grid format accordingly.

John Holden

#299721 Copied

MJ

Participant

August 24, 2021 at 09:51

Hi
I am not using elementor in my website. how about WP-bakery?
Thanks

#299743 Copied

Rose Tyler

Support staff

August 24, 2021 at 12:32

Hello,

In this case, just use WPBakery to display content depends on your needs. For example, https://gyazo.com/f06c375941d510830161422f11dc62c3 > https://gyazo.com/ed2e04fe4e8bfc77be93037ac6fba508

Regards

#299780 Copied

MJ

Participant

August 25, 2021 at 04:08

Hi Rose,
i have made one but still have some issues:
1. the fancy buttons alignment is off. how can i move them to center and add some paddings at top and down? + and underline animation on hover
2. I want the single image to be a bit under the border and move up on hover.
3. whole box background change color on hover.
4. how to create space between the blocks https://prnt.sc/1qhhful.
You can refer to themeforest.net. im trying to replicate that.
5. can you give me a css to make ibox smaller and the hover comes in square shape. https://prnt.sc/1qhhvl5 (there is a code in Theme’s Global CSS for ibox hover)

FYI, i have provided the login details here.

Please contact administrator
for this information.

#299845 Copied
Rose Tyler

Support staff

August 25, 2021 at 10:04
Hello,

1/ https://gyazo.com/424c1f40a221d598fe5ca4885273c8bd – custom class “text-center”, size – “Custom” for the button, then you will be able to add paddings.
Add the next code in Custom CSS for page area:

.button-wrap a:hover { text-decoration: underline; }

2/ There is no such option. You can try to achieve the desired result using Custom CSS code. Add a custom class for the image, and try different codes, you can find examples online.
3/ Add custom class (Extra class name) for column https://gyazo.com/c75b5968fc7674741c4ca88bf5f729a7 and use the next custom CSS code:

.custom-box > .vc_column-inner:hover { background-color: #5b5b5b !important; }

4/ Row settings > Columns gap
5/ Sorry, but your request is a bit unclear for me.

Regards
#299895 Copied
MJ

Participant

August 25, 2021 at 11:43

Hi
Thanks for fast reply.
1. the hover works well. but i did padding for left and right but apparently no change. i want those buttons to be close to center. check the first box on left with padding of 20px.
3. works well. can i delay the hover animation for 1s. i used below and it didnt work.
.custom-box > .vc_column-inner:hover {
animation-delay: 1s;
background-color: #5b5b5b !important;
}
5. ignore it. instead can you help me with CSS for my in page menu https://prnt.sc/1qhrw6c
i want to create hover box like what i have on secondary menu (rounded shaped square on hove appears) https://prnt.sc/1qhryjn

#299923 Copied
Rose Tyler

Support staff

August 25, 2021 at 16:08
Hello,

1/ As i can see, padding 25px works – https://gyazo.com/630980e6087c2a488dc1a6ef1fdf4230
Describe in more detail what exactly result do you want to achieve.
3/ I do not see the custom class for your columns. Add the clas, custom CSS https://gyazo.com/4848601bd8c19b7e989dcbeeee8869b8 and

.custom-box > .vc_column-inner { transition: all .5s ease-in-out; }

5/

.menu-element .menu li>a:hover { background-color: #e1e1e1; border-radius: 6px; }

Regards
#299983 Copied
MJ

Participant

August 26, 2021 at 09:07

Hi,
1. i want to achieve this https://prnt.sc/1qjez2m

6. i replaced the img with banner. the issue is the size of banner cannot be changed https://prnt.sc/1qjh7p3
7. how can i reduce the size of whole box. there are 6 boxes now and they are huge.
8. and i created secondary menus which i want to hide in mobile. the issue is when used below CSS, the padding of mobile header was gone.
now: https://prnt.sc/1qjfe49
if remove the CSS: https://prnt.sc/1qjfh0q
is there any way to fix it?

@media only screen and (max-width:750px){
.menu-element .menu {
display: none;

}

}

#300029 Copied
Rose Tyler

Support staff

August 26, 2021 at 11:11
Hello,

1/ Here is an example – https://gyazo.com/84c9cc3daf06ae4ae76d392b4d99e813 + https://gyazo.com/7971587789b0e9afff7ceaa923b19db2 + https://gyazo.com/9b5ee6b3002f0643a6b63b1e20b3a6c9 = https://gyazo.com/1c54a2f9549048cd5b8a1c411129be3a
6,7/ Here is size example 300×150 , not * but x https://prnt.sc/1qjlc5y
Set px here http://prntscr.com/1qjlg8l and add the next code in Custom CSS for page area:

.banner img { width: auto; }

https://gyazo.com/1d1f2f2388a72d19376aefde6c026a99
+ http://prntscr.com/1qjlj37
8/ Open up new topics for new questions, please – https://www.8theme.com/forums/xstore-wordpress-support-forum/
Delete the custom and use this option – https://gyazo.com/d473fd37242a94d684721a6102efce1a
and set 0px margin for mobile here – https://gyazo.com/fb4f23ae65002179590c2fcc8bb43acc

Regards
#300054 Copied
MJ

Participant

August 27, 2021 at 06:49

Hi, Thank you very much for your clear explanations.
All ok now. except 2 things:
#7. maybe i could not explain it well.
What i am looking for is to reduce the size of whole blocks. means 6 square shapes same size and smaller. now the 6 boxes are too big. maybe this helps https://prnt.sc/1qlc1m0 or themeforest.net real execution.

and for fancy button, its perfect in desktop now. but in mobile i get this https://prnt.sc/1qlcjyi
how can i set it in mobile?

BTW, you provided some classes to be used in this setup. do you have a list all classes in your theme? it would be a helpful document for all users. something like tabulated guide:
class: text-right function: text alignment Use: fancy button
Thanks

#300145 Copied

Rose Tyler

Support staff

August 27, 2021 at 15:00

7/ Check now https://gyazo.com/cbe0ba7d40dd9a7d68d22ec9046ca697

Check now – https://gyazo.com/b5d8dd056232bf777ef4937951ae4b74 > https://gyazo.com/22cd1f8c594a2e9a94c238bd7fd2098e

There is no such list, right now.

Regards

#300230 Copied

MJ

Participant

August 30, 2021 at 02:32

That is perfect. thank you
please let me know how you did it. is this due to these lines?
/* banners */
.banner img {
width: auto !important;
}
.banner {
margin-bottom: 0px !important;
}

And i want to have one staging site, can i create it on my spare domain teccnix.com?

#300436 Copied

Rose Tyler

Support staff

August 30, 2021 at 07:46

You’re welcome!
1/Yes, that custom CSS code and set size for banner images.
2/ Yes, you can. Just remember that 1 license = 1 end project.

Regards

#300449 Copied

MJ

Participant

August 30, 2021 at 09:19

Great thank you

#300458 Copied
Viewing 15 results - 1 through 15 (of 15 total)