About parallax

Posted in: Newspaper
Post count: 98

I am a little confuse. I have a raw with a picture as background on my page.

Reading Parallax details I found this:

“Add parallax type background for row (Note: If no image is specified, parallax will use background image from Design Options).”

I tried to use None on parallax but no background was added. Just a white box as result.

My page is http://www.thehikers.ro. It’s possible to use that none setting on parallax on my raw to create a “transparent” effect?

At this moment the effect is created using two overriden images.

Post count: 98
Post count: 22421

Hello Nicolai,

If you want your row to be transparent you will get the white box as there is a container underneath it with a white background (the main page wrap): http://screencast.com/t/ScR33wJO2Yx
In order for the background image of the page to be visible through the container, you will need to create a gap in the container.
This will require some css tricks to work. You can use this code:

.home .td-main-page-wrap{
position:relative;
top:530px!important;
}
.td-travel .td-travel-header{
height:0!important;
opacity: 0!important;
}

I think this is the result you are looking for: http://screencast.com/t/jvyjjHhbM
I hope this helps.
Thank you!

Post count: 98

I liked Newspaper theme from first moment. You make me love it 🙂 . Perfect support as allways!

  • This reply was modified 10 years by nicolai.
Post count: 98

.home .td-main-page-wrap{
position:relative;
top:530px!important;
}

This part bug the final block. If scroll down to the footer will see how the HOT NEWS block will override footer.

In same time LATEST ARTICLES aren’t displayed well (the final part).

I belive that new top possiton value must be added somehow to the homepage height.

Post count: 22421

Hello,

Sorry about that, you will need to add an extra padding to compensate for the top part: please add this to the code:
padding-bottom: 530px;
Now the full code should look like this:

.home .td-main-page-wrap{
position:relative;
top:530px!important;
padding-bottom: 530px!important;
}

Thank you!

Post count: 98

Fixed, thx!

Post count: 98

http://www.thehikers.ro/page/2/

Now have to much space 🙂 Can reduce that space for next pages? to say …

top:530px!important;

for main page

top:330px!important;

for next.

Or better keep using the block 5 from main page (with different posts if possible).

Post count: 22421

Hi,
You could do something of the sort but you will need to add the code for every page. The simplest solution would be to add a load more button to your latest articles so the page will not change every time you want to vies more posts. In order to do this, you will need to change the page template and not use the pagebuilder+latest but rather the pagebuilder+title or the default page template and then use a block 12 for your latest articles. This way you can add the load more animation from the pagination settings in visual composer (like our travel demo uses: http://demo.tagdiv.com/newspaper_travel/)
Thank you!

Post count: 98

Used default template setting. Thx for support!

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