How to edit BlockChain Demo Theme’s Home Page Banner (blue and pink gradient)?

Posted in: Newspaper
Post count: 26

Hi,
We are planning to use BlockChain Demo (Blue and Pink gradient banner):

https://demo.tagdiv.com/newspaper_blockchain_pro/

We have a few issues with the home page banner:

1. How to reduce the height of the home page blue banner?

2. How to change the blue and pink gradient colour of the banner?

3. When we try to replace the white image (image with tab) on the right hand side of the screen, it goes to the bottom of the blue banner. How do we keep it in the middle?

4. We like to use the same colour combination in the header area of the other pages as well. It is white at the moment on the header area of the other pages. How do we use the same gradient colour combination in the header area of other pages?

Could someone please help us?

Thanks

Post count: 35449

Hello,

1. Edit teh page with tagDiv Composer and click on left size on color, after that in the composer sicebar will be open a RAW HTML element and look in css tab – https://prnt.sc/q3tmReUrt_dg there you have set 880 px to top, you can adjust it to reduce the height.

2. You need to edit it using tagDiv Composer https://prnt.sc/EI3squpXkpF8 select the Raw HTML. There is a script that combines more colors over the main blue color that is set as the background on the column https://prnt.sc/9vrn-WaHfN6o https://prnt.sc/-DJI_RCZprvf

3. You should replace the image with an image that has the same height if you want to look the same https://prnt.sc/ki3r43B-oi4e or at least the height to be bigger than the width for that image

4. To have similar background for the header color, use the gradient color that comes with the demo – https://prnt.sc/oDyNbLr7fxfY you can adjust it according to your needs.
Thank you!

Post count: 26

Hi Calin,
Thank you for your reply.
We cannot open screenshots in the UK on https://i.imgur.com .
Would it be possible to share the screenshots in any other website?
Thanks,

Post count: 35449

Hi,
I’ve just changed the images from Imgur; I hope everything is working properly now.

Post count: 26

Thank you so much Calin,

Regarding your below answer about changing the image on the home page of Blockchain Demo:

(“3. You should replace the image with an image that has the same height if you want to look the same https://prnt.sc/ki3r43B-oi4e or at least the height to be bigger than the width for that image”), whatever size we replace it goes to the bottom of the home page blue banner.

I was wondering whether you can let us know the size of the image you used in the above answer? We tried with different sizes, but all of them go to the bottom part of the blue area.

Also, could you please let us know how we can hide the image on Mobile View – the image on the right hand side of the blue home page banner of Blockchain Demo?

Thanks

Post count: 35449

Hi,

The image from my example is 312×424, the image should be a format 3×4

To hide an element per viewport, you first need to select the viewport – https://prnt.sc/YyMqF9AnImhs after that the element and in css tab, look for the display option – https://prnt.sc/JhtF_D7GUTLJ

Post count: 26

Hi Calin,
We removed the image on the Home Page banner of the BlockChain Demo and then added the same image, it goes to the bottom of the banner and the size is really small. It looks like there is something else we need to set up to replace image on the homepage.
Thanks

Post count: 35449

Hi,
Please make sure that you load the full image, not the thumb as you did now with the full image https://imgur.com/VWb7lSV will look like this – https://i.imgur.com/WX1iczr.png

  • This reply was modified 6 months by Calin.
Post count: 26

Hi Calin,
Thank you for your reply.
Would it be possible to remove the link to our website from this forum? It is the link for our test site.
We cannot open imgur.com in the UK. Could you please upload the example on another URL?
Many thanks

Post count: 26

Hi Calin,
Thank you for your reply.
Would it be possible to remove the link to our website from this forum? It is the link for our test site.
We cannot open imgur.com in the UK. Could you please upload the example on another URL?

We tried the options you suggested, but the clarity of the image is lost, it is going blur. We removed the image of the iPad and added it again, immediately its clarity is lost and size is reduced.

Many thanks

Post count: 35449

Hi,
I edited the reply and teh link is now removed. Also, I attached the screenshots for how to set the image in full size – https://prnt.sc/Q1o1_k2xjxWZ with an image set in full size should look like this – https://prnt.sc/CRBk0ZCUsXJM

Post count: 26

Thank you so much Calin for your help.
The image is working now.
Many thanks

Viewing 12 posts - 1 through 12 (of 12 total)
The forum ‘Newspaper’ is closed to new topics and replies.