Table with Linkable Buttons

Watch the video in full screen. First time you watch it, pause frequently so that you grasp the scope & sequence of the entire procedure. Below are bullet points representing that scope & sequence.

  1. From Layout Elements drag a single-column icon to a new light green space
  2. Drag a Table Content Element into that column
  3. Click on Table to get into Edit view
  4. Click on blue buttons to add rows & columns
  5. In far left-hand column, select Button Row for each cell
  6. Click on first blue plus sign to edit first cell
  7. Add a label for first button
  8. below that add URL to which button should link
  9. Use drop-down arrow below that to decide whether web page should open in new window
  10. Select a size you wish to use for each button
  11. In Button Icon bar use drop-down arrow to decide if you want an icon within each button
  12. Click blue Save button
  13. Go through points # 6 to 12 for each cell
  14. Save
  15. Update page
  16. View page to check work.

Editing a table

Imagine you are dissatisfied with the size & colour of each button. Below it explains how to change them.

  1. Click on Table to edit it
  2. Change button size to X Large
  3. Click on Colors link
  4. Change Theme Color to Custom Color
  5. Click Select Color
  6. Select basic colour at bottom of colour chart
  7. Drag 2 areas to change colour & intensity
  8. Select 6-character hexadecimal colour code and use Cmd C to copy into clipboard
  9. Click blue Save button
  10. Go through points 2 through 9 for each button
  11. Use Cmd V to paste the hexadecimal code for the colour of each button
  12. Save
  13. Update page
  14. View page to check your work.

Working sample of table with clickable links

 

Hyperlinking to the Middle of an Enfold Page

  • Drag a single column layout element to the point above which you wish to link
  • Drag a Code Block content element into that column
  • Click on the Code Block
  • Insert the HTML code below into Code Block
    • It is okay to reverse the name & id
  • Insert a topic-specific name within the first set of quotation marks
  • Cmd C to copy name into clipboard
  • Cmd V to paste name within second set of quotation marks
  • Copy new URL into clipboard
  • Go to page that needs to link to Enfold page
  • Add the link text
  • Cmd V to change link text into a hyperlink
  • Check your work.

Watch the video below, pausing frequently to take notes.

 

How to Make 2 Columns, One with Text & One with Video

How to add two columns to an Enfold page

You will be adding two columns to a page that uses the WordPress Enfold theme. The video to the right very quickly shows you how to do it. To be able to learn a bit more slowly & thoroughly, read the bullet points below. Each time you read a bullet point, watch corresponding portion of video & click Pause.

  • In Layout Builder click Layout Elements
  • Drag 2 column element down
  • As soon as icon is near where you want columns to be & background turns green, release mouse button
  • Click Clone icon to create second column
  • Back to top & click Content Elements
  • Drag Text Block into first column
  • Back to top & click Media Elements
  • Drag Video Block into second column
  • In first column click on “Click here to add your own text”
  • Add text including a heading
  • Go down & change Font Size to 20 pixels
  • The default colour is too light. So, change it to a darker colour.
  • Select heading & change it to bold H2
  • Click Save
  • Open your video in YouTube & click in front of the URL in the address bar
  • Press Cmd C to copy URL into clipboard
  • In column 2 click on Video URL
  • Cmd V to paste URL into box beneath Insert Video button
  • Save
  • Click Choose Image
  • Open folder that has image that represents video
  • Drag image to the left panel
  • Click Choose Image
  • Click Save
  • Click Update
  • Click View Page to check your work.

Picture fades & expands upon rollover

Not only will the picture fade and expand when a mouse rolls over it, but it will open a related website when you click on it.

How to make an image fade, expand and link to a website in a new window

  • Drag Video from Media Elements into new column
  • Click on Image > Choose Image
  • Insert Image
  • Image Settings > Image Hover Effect > Yes, slightly increase the image size
  • Go to page to which you wish to link
  • Cmd C to copy URL into clipboard
  • Image Link > Set Manually > Cmd V to paste URL
  • Open New Tab/Window > Open in new window
  • Caption > Image caption > Yes
  • Enter caption
  • Caption custom font size > 26 pixels
  • Animation > Fade In
  • Save > Update > View page
  • Check your work.