The HTML Module

Hi Guys, Do you have any tutorials on using the HTML module?

Or better still are you able to explain how to add html and CSS to a page with BB.

I’m using Genesis - dynamik website builder & builder beaver to build my pages.

I’m trying to create 2 images with a css effect on them but cannot get the styling to work.

Thanks in advance

Jason

Here is the HTML that im adding to the html module

<html>
	<head>
		<meta charset="UTF-8" />
		
		<title>Hover Effect Idea 1</title>
	
		<link href='http://fonts.googleapis.com/css?family=Raleway:400,800,300' rel='stylesheet' type='text/css'>
		<link rel="stylesheet" type="text/css" href="css/boxeffect.css" />
	
	</head>

	<body>	
				<div class="grid">
					<figure class="effect-bubba">
						<img src="img/jayhead.jpg" alt="img02"/>
						<figcaption>
							<h2>massage <span>courses</span></h2>
							<p>Click here for massage courses.</p>			
							<a href="#">View more</a>
						</figcaption>			
					</figure>
					<figure class="effect-bubba">
						<img src="img/jay1.jpg" alt="img16"/>
						<figcaption>
							<h2>Office <span>Massage</span></h2>
							<p>click here to see our rates.</p>
							<a href="#">View more</a>
						</figcaption>			
					</figure>
				</div>
	</body>
</html>

================================================
Here is the CSS That ive added to the bottom of Dynamik - Custom Options

=================================================


@font-face {
	font-weight: normal;
	font-style: normal;
	font-family: 'feathericons';
	src:url('../fonts/feathericons/feathericons.eot?-8is7zf');
	src:url('../fonts/feathericons/feathericons.eot?#iefix-8is7zf') format('embedded-opentype'),
		url('../fonts/feathericons/feathericons.woff?-8is7zf') format('woff'),
		url('../fonts/feathericons/feathericons.ttf?-8is7zf') format('truetype'),
		url('../fonts/feathericons/feathericons.svg?-8is7zf#feathericons') format('svg');
}

.grid {
	position: relative;
	margin: 0 auto;
	padding: 1em 0 4em;
	max-width: 1000px;
	list-style: none;
	text-align: center;
}

/* Common style */
.grid figure {
	position: relative;
	float: left;
	overflow: hidden;
	margin: 10px 1%;
	min-width: 320px;
	max-width: 480px;
	max-height: 360px;
	width: 48%;
	background: #3085a3;
	text-align: center;
	cursor: pointer;
}

.grid figure img {
	position: relative;
	display: block;
	min-height: 100%;
	max-width: 100%;
	opacity: 0.8;
}

.grid figure figcaption {
	padding: 2em;
	color: #fff;
	text-transform: uppercase;
	font-size: 1.25em;
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
}

.grid figure figcaption::before,
.grid figure figcaption::after {
	pointer-events: none;
}

.grid figure figcaption,
.grid figure figcaption > a {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

.grid figure figcaption > a {
	z-index: 1000;
	text-indent: 200%;
	white-space: nowrap;
	font-size: 0;
	opacity: 0;
}

.grid figure h2 {
	word-spacing: -0.15em;
	font-weight: 300;
}

.grid figure h2 span {
	font-weight: 800;
}

.grid figure h2,
.grid figure p {
	margin: 0;
}

.grid figure p {
	letter-spacing: 1px;
	font-size: 68.5%;
}

/* effects */

/*---------------*/
/***** Bubba *****/
/*---------------*/

figure.effect-bubba {
	background: #383839;
}

figure.effect-bubba img {
	opacity: 0.7
	;
	-webkit-transition: opacity 0.35s;
	transition: opacity 0.1s;
}

figure.effect-bubba:hover img {
	opacity: 0.3;
}

figure.effect-bubba figcaption::before,
figure.effect-bubba figcaption::after {
	position: absolute;
	top: 30px;
	right: 30px;
	bottom: 30px;
	left: 30px;
	content: '';
	opacity: 0;
	-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
	transition: opacity 0.35s, transform 0.35s;
}

figure.effect-bubba figcaption::before {
	border-top: 1px solid #fff;
	border-bottom: 1px solid #fff;
	-webkit-transform: scale(0,1);
	transform: scale(0,1);
}

figure.effect-bubba figcaption::after {
	border-right: 1px solid #fff;
	border-left: 1px solid #fff;
	-webkit-transform: scale(1,0);
	transform: scale(1,0);
}

figure.effect-bubba h2 {
	padding-top: 30%;
	-webkit-transition: -webkit-transform 0.35s;
	transition: transform 0.35s;
	-webkit-transform: translate3d(0,-20px,0);
	transform: translate3d(0,-20px,0);
}

figure.effect-bubba p {
	padding: 20px 2.5em;
	opacity: 0;
	-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
	transition: opacity 0.35s, transform 0.35s;
	-webkit-transform: translate3d(0,20px,0);
	transform: translate3d(0,20px,0);
}

figure.effect-bubba:hover figcaption::before,
figure.effect-bubba:hover figcaption::after {
	opacity: 1;
	-webkit-transform: scale(1);
	transform: scale(1);
}

figure.effect-bubba:hover h2,
figure.effect-bubba:hover p {
	opacity: 1;
	-webkit-transform: translate3d(0,0,0);
	transform: translate3d(0,0,0);
}

@media screen and (max-width: 50em) {
	.content {
		padding: 0 10px;
		text-align: center;
	}
	.grid figure {
		display: inline-block;
		float: none;
		margin: 10px auto;
		width: 100%;
	}
}

Hi Jason! This is going to be a bit tricky to explain. Do you have a link to an example of what you’re trying to do?

The HTML Module was designed to include HTML code within the existing HTML page. For starters, you’re going to want to remove the , , and tags from your code (including all the code that is inside the opening/closing head tag). An HTML page can only have one of those tags, and since your injecting this code into a page, they already exist.

Ultimately, it looks like this code is going to require a decent amount of HTML knowledge in order to get it working. It might be a bit easier to actually just create a new HTML page (maybe based on a tutorial), and experiment there. It will probably be faster to learn that way versus trying to do it within Beaver Builder.

If you can shoot me a link to an example of what you’re trying to accomplish, I am happy to try to help you build it using Beaver Builder.

As far as tutorials, Googling around is a good start. I have heard great things about TreeHouse. I believe they have a free HTML course. They also offer a 2 week free trial, so that could be a good option: http://teamtreehouse.com/join/first-week-free

Hope that helps…

Hey Robby

Thanks for your reply…

Here is a link to an example of what I’m trying to do?



That would be great if you can help me do it using Beaver Builder.
As far as tutorials, I was referring to beaver builder video tutorials although I appreciate the heads up on treehouse as well.

Cheers
Jason

Robbie, the link iam trying to show you don’t display on any of my browsers. .

also im not getting any subscribe notifications from the BB forum…

is there a bug at your end? Cheers

link manually http://onsiteofficemassage.co.uk/test/

EDIT: sods law the link shows up now…

Hi Jason! We are working on video tutorials, but they’re still a work in progress. We don’t have any specific to the HTML module, but you can check them out here:

http://forum.wpbeaverbuilder.com/beaver-builder-tutorial-videos/

Not sure what’s going on with the notifications. Did you check your spam folder?

Regarding your question… I took a quick pass at it. I would separate out the HTML and CSS into two different HTML modules to make it a bit easier to keep track of. In the first HTML module, put the actual HTML code:

<div class="grid">
  <figure class="effect-bubba">
    <img src="http://i.imgur.com/jpTy8mG.jpg" alt="img02">
    <figcaption>
      <h2>massage <span>courses</span></h2>
      <p>Click here for massage courses.</p>      
      <a href="#">View more</a>
    </figcaption>     
  </figure>
  <figure class="effect-bubba">
    <img src="http://i.imgur.com/jpTy8mG.jpg" alt="img16">
    <figcaption>
      <h2>Office <span>Massage</span></h2>
      <p>click here to see our rates.</p>
      <a href="#">View more</a>
    </figcaption>     
  </figure>
</div>

Then, in the 2nd HTML module, put the CSS wrapped in style tags:

<style>
*, *:after, *:before { -webkit-box-sizing: border-box; box-sizing: border-box; }
.clearfix:before, .clearfix:after { display: table; content: ''; }
.clearfix:after { clear: both; }

body {
	font-weight: 400;
	font-size: 1em;
	font-family: 'Raleway', Arial, sans-serif;
}
.grid {
	position: relative;
	margin: 0 auto;
	padding: 1em 0 4em;
	max-width: 1000px;
	list-style: none;
	text-align: center;
}

/* Common style */
.grid figure {
	position: relative;
	float: left;
	overflow: hidden;
	margin: 10px 1%;
	min-width: 320px;
	max-width: 480px;
	max-height: 360px;
	width: 48%;
	background: #3085a3;
	text-align: center;
	cursor: pointer;
}

.grid figure img {
	position: relative;
	display: block;
	min-height: 100%;
	max-width: 100%;
	opacity: 0.8;
}

.grid figure figcaption {
	padding: 2em;
	color: #fff;
	text-transform: uppercase;
	font-size: 1.25em;
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
}

.grid figure figcaption::before,
.grid figure figcaption::after {
	pointer-events: none;
}

.grid figure figcaption,
.grid figure figcaption > a {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

.grid figure figcaption > a {
	z-index: 1000;
	text-indent: 200%;
	white-space: nowrap;
	font-size: 0;
	opacity: 0;
}

.grid figure h2 {
	word-spacing: -0.15em;
	font-weight: 300;
}

.grid figure h2 span {
	font-weight: 800;
}

.grid figure h2,
.grid figure p {
	margin: 0;
}

.grid figure p {
	letter-spacing: 1px;
	font-size: 68.5%;
}

/* effects */

/*---------------*/
/***** Bubba *****/
/*---------------*/

figure.effect-bubba {
	background: #383839;
}

figure.effect-bubba img {
	opacity: 0.7
	;
	-webkit-transition: opacity 0.35s;
	transition: opacity 0.1s;
}

figure.effect-bubba:hover img {
	opacity: 0.3;
}

figure.effect-bubba figcaption::before,
figure.effect-bubba figcaption::after {
	position: absolute;
	top: 30px;
	right: 30px;
	bottom: 30px;
	left: 30px;
	content: '';
	opacity: 0;
	-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
	transition: opacity 0.35s, transform 0.35s;
}

figure.effect-bubba figcaption::before {
	border-top: 1px solid #fff;
	border-bottom: 1px solid #fff;
	-webkit-transform: scale(0,1);
	transform: scale(0,1);
}

figure.effect-bubba figcaption::after {
	border-right: 1px solid #fff;
	border-left: 1px solid #fff;
	-webkit-transform: scale(1,0);
	transform: scale(1,0);
}

figure.effect-bubba h2 {
	padding-top: 30%;
	-webkit-transition: -webkit-transform 0.35s;
	transition: transform 0.35s;
	-webkit-transform: translate3d(0,-20px,0);
	transform: translate3d(0,-20px,0);
}

figure.effect-bubba p {
	padding: 20px 2.5em;
	opacity: 0;
	-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
	transition: opacity 0.35s, transform 0.35s;
	-webkit-transform: translate3d(0,20px,0);
	transform: translate3d(0,20px,0);
}

figure.effect-bubba:hover figcaption::before,
figure.effect-bubba:hover figcaption::after {
	opacity: 1;
	-webkit-transform: scale(1);
	transform: scale(1);
}

figure.effect-bubba:hover h2,
figure.effect-bubba:hover p {
	opacity: 1;
	-webkit-transform: translate3d(0,0,0);
	transform: translate3d(0,0,0);
}

@media screen and (max-width: 50em) {
	.content {
		padding: 0 10px;
		text-align: center;
	}
	.grid figure {
		display: inline-block;
		float: none;
		margin: 10px auto;
		width: 100%;
	}
}
</style>

I took out the fonts since those probably aren’t loaded on your site. It’s not perfect, but it’s a good starting point.

I hope this helps :slight_smile:

1 Like

Hey Robbie thank you for showing me that… much appreciated!

Definitely have a playground to play now…

I’m new to learning about html and CSS

But just a thought… would it be better for SEO purposes and cleaner code to put the CSS in the CUSTOM CSS box rather then on the page? will that have any effect on better seo and cleaner code…

Thanks too for the link to the videos… and just to let you know that they do not play right now… but other videos on vimeo are playing fine…

Regards

Jason

Yeah, you could definitely put that CSS in the custom css box. Just be sure to remove the style tags, those are only needed if the CSS is put directly into the HTML code.

Not sure why the videos aren’t working!? They seem to be loading up fine on my end. Which browser are you using? If you have a sec, could you try opening another browser and seeing if that possibly fixes the issue?

the videos are playing now…

what is the difference from putting the css code in the HTML Module or CUSTOM CSS box…

or does it not make any difference!

thanks!

Hi Jason,
for the maximum of transparency and with regards to maintenance you should keep your complete CSS in a central sheet which is externally connected to your site via Dynamik’s function.php. I would never ever again put custom CSS in BB or Dynamik. I did that in the beginning and it turned out to be a nightmare when I had to change stuff.

The HTML Element in BB is great and I use it a lot. But I never put individual styling or custom CSS in BB.

As I said already you will not see in BB which elements styles you have changed because there is no indication. Imagine you have a site with 50+ pages and you changed some element styles in BB or changed styles of your HTML Elements in BB. And let’s say you want to change the font color only which is normally one easy entry in your central CSS. In your workflow you could easily spend the next days with changing the individual elements - if you find them.

Instead styling them in BB it would be better, to give “names” to those BB elements which you think are important for you. Just give them speaking classes and you’re done. I follow a structure which puts the type of element in front of the class name as fp_headline1 or fp_headline2 for the Front Page Headlines. Or a more generic name like mt_prodcuct for main text products etc.

Hope this helps,
Leo

Hey Leo will you be my Valentine…lol
Thank YOU! so much for your help to explain that…
Yes , it helps a lot
kind regards Jason

Yup, Leo is 100% correct. Couldn’t have said it better myself. Thanks Leo.

Jason, let me know if you have any more questions :slight_smile:

Hi Leo ive been playing around with styling but im just adding the changes to custom CSS in Dynamik.

I’m still not clear when you say that it’s a good idea to keep all the CSS in a central sheet which is externally connected to your site.”

Also not sure how to give BB elements speaking classes .

Would you be up for showing me in a 121 screen share session? (I’ll pay you for your time of course)
Regards, Jason…

[Content Hidden]

Hey Leo

i’m unable to see your post as it’s marked private or is that meant for Robby.

[Content Hidden]

Hey Jason! Sorry, I guesss this is a bit unclear for everyone. Private replies can only be seen by admins (us). In Leo’s reply he just said he’s on the road for 10 days and he’ll do his best to reply when he can :wink:

To answer your questions, with hindsight my suggestion to include the CSS in an HTML module wasn’t a good one. I was trying to give you the easiest way to implement the design you sent. Best practice is to keep all of your CSS in one place, either in the theme settings or in an external CSS file. That way, if you need to make a change, you only need to edit one CSS file. Imagine if you built a site with 100 pages and each page had it’s own CSS. You would need to edit each of those 100 pages individually and that would be a pain. As a matter of fact, that’s how it used to be before CSS was created. You would need to edit each one of your HTML files one by one. CSS solved that problem (this was back in the late 90s I believe).

Regarding speaking classes, I honestly don’t know what Leo meant there. I wonder if something got “lost in translation” so to speak. I think he’s just suggesting to give your page elements classes so you can reference them in CSS. Again, back to the 100 page example. If you give all of your headings the same class in beaver builder, you could modify ALL of those headings by changing one line of CSS versus having to use Beaver Builder to edit each heading individually.

Hope that helps clear things up.

That’s exactly what I meant, Robby, with so called “speaking classes”. It just means that the class name “speaks to you” telling you for what purpose it’s good.

I try an example: You could name a heading class “homepage-heading” which would tell you, that it’s purpose is to style any heading with this applied class on the home page. You could give the headings on the home page a second class with the name “general-heading” which would tell you that it’s a general heading class. Now you could style all headings with “general-heading” in a certain way and in addition the ones on the homepage with “homepage-heading”. Same applies to content.

Behind this example is just the idea to give elements class names which tell you their purpose even after years you didn’t touch them.

Here’s an article from 2013 which explains a similar concept: Classes in CSS

Regards, Leo

[Content Hidden]

Testing.

Hi Leo & Robby
Appreciate your time guys…
Yes it makes sense to only edit one CSS file instead of many.
So would I just delete the CSS styling I did for the hover effect you helped with using the html module and past it in the main styling sheet using the WordPress editor…
And bypass Dynamiks website builder custom CSS box too
I just assumed making changes that way would get wiped during an update…
Cheers
Jason