How do I best place three clickable images at the bottom of a parallax page.

[direys]

I have created a parallax home page http://www.direys.com via “page with posts” (and noting the posts for use on a plx page) but am having difficulty with how to place three clickable images in a single row at the bottom of the parallax page.  This is essentially a horizontal, pictorial menu.  The pictures will be static.  I have created the photos with the text included so the widget or column..or whatever method at the bottom of the page just needs to present the three images side by side with clickable links.  If possible it would be nice to have that “pictorial menu” be always visible at the bottom of the page with the parallax effect scrolling behind it. I’ve been reading and studying options for three days now so I’m clearly not going to make much progress on my own!  Thanks for your help.  It is much appreciated.

[scrambler]

If you want these 3 images to be in a fixed area at the bottom of the page, then you can use the Fixed bottom HTML Insertion area for it.

If they will be on all pages, use Advanced options > Head Section > HTML Insertion > Fixed Bottom box.

If you only want them on that page you will need to use that are in the form of a page custom field. If not familiar with page custom field, read the thread below

http://forum.weavertheme.com/discussion/1281/custom-fields-on-pages-what-to-use-them-for-and-how-to-use-them

As for how to structure the content, you can use 3 divs and the 3 column classes as described below, and place an image in each column

http://forum.weavertheme.com/discussion/11220/weaver-xtreme-tips-and-tutorial-part-5

It will look something like

<div>
<div class=”content-3-col”> <a href=”linkUrl“><img src=”ImageUrl” style=”max-width:100%;” /></a> </div>
<div class=”content-3-col”> <a href=”linkUrl“><img src=”ImageUrl” style=”max-width:100%;” /></a> </div>
<div class=”content-3-col”> <a href=”linkUrl“><img src=”ImageUrl” style=”max-width:100%;” /></a> </div>
</div>
<div style=”clear:both;”></div>

[direys]

Thanks so much for your specific answer. I’d say that my question was answered but:  I have implemented it on my site and can see that it works only when I use the “preview” page button.  If I “visit” the site or log out and visit the site the changes are not evident.  I religiously empty caches.  I use Cloudflare and put it in “development mode”.  I’m seeing the same effect in both Chrome and Firefox.  Are there conflicts elsewhere in my settings causing this or just my general lack of experience?

[Gillian]

As well as putting CloudFlare into development mode, did you also purge its cache? I’ve found that I need to do both before some changes are reflected on my sites.

[scrambler]

I see nothing put in the fixed bottom are in the site you linked to.

Have you implemented what I said?

In order to figure out any issue, we need things to be in so we can look at them

If you have put things in, then you need to explain in detail what you did. Right now, do you have the divs in advanced options > HTML Insertion > Fixed bottom area, or do you have them in a custom field named fixedbottom, inside the page editing page?

[direys]

I have the following as the value in a “custom field” for the home page:

<div>

<div class=”content-3-col”> <a href=”http://direys.com/port”><img src=”http://direys.com/wp-content/uploads/2016/01/Portfolio-e1453075048323.png&#8221; style=”max-width:100%;” /></a> </div>

<div class=”content-3-col”> <a href=”http://direys.com/about/”><img src=”http://direys.com/wp-content/uploads/2016/01/HOW-WE-WORK-e1453075093468.png&#8221; style=”max-width:100%;” /></a> </div>

<div class=”content-3-col”> <a href=”http://direys.com/contact/”><img src=”http://direys.com/wp-content/uploads/2016/01/Contact-Us-e1453075126193.png&#8221; style=”max-width:100%;” /></a> </div>

</div>

<div style=”clear:both;”></div>

The name for the custom field is prefooter.  It works great (showing the photos and links in the proper prefooter position) as long as I get there by selecting the “Preview Changes” button at the top of the page.

I tried purging the cache at Cloudflare as per Gillian (thanks for the suggestion Gillian) but to no avail.

[direys]

To add a bit more weirdness to the diagnostic symptoms:

I can see the prefooter pictures and links when I go from “preview changes” button.  If I navigate to another page and come back I will still see the prefooter as it should be.  But now, the text from the three posts that make up the plx page does not show.  The photos from those posts show fine.  If I edit the posts, the text will show in the “text” editor window, but is blank in the “visual” editor window…before posting this and making a fool of myself I find that the text is still, in fact, there but it’s color has changed to match the background (which is a black to gray gradient)  No, I didn’t change the color of the text.  I’m at a loss.  Thanks so much for your help.

[scrambler]

If I add your code in a new custom field named prefooter, it works fine on my test site.

Right now your site has nothing in the prefooter.

So either you have a cache problem, or you are creating the custom field wrong.

Make a test with just some text on a test page.

• Create a test page
• In the “Add New Custom Fiedl section”, click “Enter New”
• In the name box type prefooter
• in the value box type some text XXXXXXX
• Click “Add Custom Field”
• Update the page
• View the page.

If still not working, test deactivating ALL non weaver plugins (including the cache)  and see if it changes something

[direys]

Thanks so much scrambler.  Like a scared cat escaping to safety, I found my way out but can’t exactly identify how I did it!  I made some changes regarding the “front page” both in Weaver and in the WP options.  It’s working fine now.  Thanks for hanging in with me.

[scrambler]

AHAH!!  if your page was a default wordpress blog page that would explain it.

In settings reading, front page must be set to static, and NOTHING should be selected under post page (showing –select–) or else none of the weaver options work on that page

[Author]

Posts