Add a Pin Photo and reveal Text or Parallax- Standard Sections

When you first look at the section types you only see one option listed for Standard Section:

Once you have selected the Standard section and have clicked Add another section, you will see a few more options and will have to choose which one you want:

The first 2 options Pin Photo and revel text and Parallax have the same set up steps. 

They will both contain set up for a background image, a text box and CTA button.

  • The Parallax type will show all 3 items at the same time 
  • The Pin Photo and Reveal Text will show the background image first, then the text box and CTA button will slowly appear.

The fields for setting up these 2 types are as follows:

The first thing you need to do in the Content area is choose an image

Refer to the Using the Media Browser to Add Images page if you need assistance with this part.
When the image is successfully added, it will appear in the Content area where the Browse button used to be.

The next part is the Content text. This is where you will enter the description that goes with the image.

Enter a description into the box and use the toolbar options to format the text as needed.

The next part is to set up the CTA button. CTA means Call to Action, and it is a clickable link to another page or website.
NOTE: If you leave these fields empty, the button will not show up.  If you want to add link to another location, then fill in the details as required.  In the example below, I added a button that opens a new window at the National Geographic web page about Green Iguanas.
You should fill out the Link "title" box with a short description of where the link is sending the user
On the finished page, when the user hovers their mouse over the button, it will show the text you entered.

The last part to complete is the Display Settings:

The check box for Full Height can be used if your image is getting cropped when the saved page is displayed.
The first example is with Full Height selected and the second example does not have the box checked.
  

Try your page with both options then stick with the option that looks the best.

The next thing to figure out is what to choose for Text Colour Theme. Your choices are as follows:

The examples below will show how each option looks when the page is saved. (NOTE: Full Height is selected)

Light Text on Primary Colour background:

Light Text on Secondary Color Background – the only noticeable difference is the colour of the CTA button

Dark text on Light Background – this option washes out the chosen image.

Preview your page with the different options and choose the one that looks best for the image you picked.

Text Pull is the next thing to consider, your options are as follows:

The default for this is Pull text to the left.  Even if you do not choose anything, this will be the default. Left Pull looks like this:

Right Pull looks like the example below and might not be a good position for this particular image.

When you have set up the all the required fields you can save the web page.  
If you chose Parallax, you will see the image and text at the same time.  With Pin Photo and Reveal Text you will see the image first then after a few seconds the text and CTA button will appear.

MENU
CLOSE X Drupal