HTML & Text Modules (Team Gallery)

The Team

Lorem ipsum dolor sit amet, per nibh postulant eu, vim propriae adolescens no. Vide habemus ius eu, vix mentitum consectetuer at, usu consul vulputate et. Vide vitae ad vix. At qui integre interpretaris, reque gloriatur cum ut, eu mei dico hinc audire.

Dolorem detraxit atomorum ex mea, duo forensibus comprehensam an, no nam prima ridens vituperatoribus. Vis probo scripta ex. Primis appetere maluisset an sea.

Make an Enquiry

A Woman

Lorem ipsum dolor sit amet, cu munere labores per, ea pri enim lorem graeci, at libris integre eum. Sed ut postea timeam pericula. Choro maluisset expetendis ex mea, est eu simul diceret. His an detraxit facilisis expetenda, at rebum ornatus interpretaris cum. Mea phaedrum atomorum eu, ex dicta scribentur est, mazim detracto efficiendi quo cu.

This Chap

Another Chap

Mrs. Smith

Mr. Jones

Dicat graeci tibique id his, ferri impetus mentitum ius in. Et vis utinam deseruisse, est dolore moderatius ad.

Every Man

Meliore signiferumque sea ad, eos et postea inermis. Vis te mutat malis, quem denique principes ad sea. Sanctus laboramus definiebas an his. Sea quem convenire ea. Dicat graeci tibique id his, ferri impetus mentitum ius in. Et vis utinam deseruisse, est dolore moderatius ad. Sea quem convenire ea. Dicat graeci tibique id his, ferri impetus mentitum ius in. Et vis utinam deseruisse, est dolore moderatius ad.

A Fellow

Mrs Woman

Make an Enquiry

The code

Note: the middle column is set to display on on desktop. Also the right column has a custom CSS class of .designer-right added to Beaver Builder.

/* The JS added to the Page Builder under
 tools > Layout CSS/Javascript > JS */
jQuery(function($){
 $(document).ready(function(){
 $("#divId4").css("display","block");  // shows team person right on load
 $(".fl-builder-edit #divId1").css("display","block"); // show team person on load when in the page builder editor only
 $(".fl-builder-edit #divId2").css("display","block");
 $(".fl-builder-edit #divId3").css("display","block");
 $(".fl-builder-edit #divId5").css("display","block");
 $(".fl-builder-edit #divId6").css("display","block");
 $(".fl-builder-edit #divId7").css("display","block");
 $(".fl-builder-edit #divId8").css("display","block");
 $(".fl-builder-edit #divId9").css("display","block");
 });

$("img").on('click',function(){
 var hello = $(this).attr('data-id');
 $('.hideDivs').hide(".fadeOut");
 $('#'+hello).show(".fadeIn,slow");
 });
 });

/* The CSS added to the Page Builder under
 Tools > Layout CSS/Javascript > CSS */

@media (min-width: 992px)
 {
 .hideDivs{
 display: none;
 }
 }

@media (max-width: 991px)
 {
 .designer-right .fl-node-content .fl-rich-text
 {
 background-color: #EAEAEA;
 padding: 10px;
 }

}

/* Note the CSS below will apply to any nested group on this page.
You will need to add a custom selector if you include another */

.fl-col-group-nested .fl-node-content IMG:hover
 {
 border: 1px solid #777;
 opacity: 0.85;
 cursor: pointer;
 }
 .fl-col-group-nested .fl-node-content IMG
 {
 border: 1px solid #DDD;
 }
 .fl-col-group-nested .fl-node-content IMG:active
 {
 position: relative;
 top: 1px;
 }

...and a few affiliate links (well you never know)