Jump to content


Photo

How To Add Full-Width Screenshots Thats Bleed Off The Page To A Landing Page


  • Please log in to reply
3 replies to this topic

#1 Alex

Alex

    Kolakube Staff

  • Kolakube Admin
  • 3,484 posts

Posted 05 April 2016 - 12:01 PM

One of the most common things I get asked about the Marketers Delight landing page is how to create the right / left aligned screenshot areas with text besides them. This type of area has been one of my goto layouts for years because it gives me plenty of space to write copy as well as show off full-size screenshots and images without creating too advanced of a layout or having to shrink down images (pixelating them in the process).

 

Here's a screenshot of the area I'm talking about on the MD landing page:

 

Attached File  Screen Shot 2016-04-05 at 11.38.38 AM.png   636.38KB   0 downloads

 

I built the MD landing page entirely in a custom template as I prefer to work with raw code while designing pages like this just so I have unlimited flexibility with the direction I can take the design.

 

You can implement this feature into your own custom template as well. Here's how:

 

-----

 

Step 1: Create custom template file in your Child Theme

 

I've talked about creating page-specific custom templates in Child Themes before, and for this case I simply took the slug of my the MD landing page and created a new file in my Child Theme called page-marketers-delight.php.

 

This will overwrite the entire template of that page, and if left empty, will result in an empty canvas for you to start coding.

 

 

Step 2: Paste Sample Template into Child Theme

 

Attached File  page-test-template.php   3.63KB   17 downloads

 

I put together a basic template file you can use to get started on your empty page. This has the featured screenshot code in it, as well as an area for a large headline. Download the template file from this post and either rename it to match your page (as per step 1) or copy and paste the contents into your Child Theme template file.

 

You'll also need to paste this small bit of CSS into your child theme's style.css file (tweak as needed):

.feature {
	overflow: hidden;
}

.feature-screenshot {
	position: absolute;
	top: 0;
}


@media all and (min-width: 1000px) {

	.feature-content {
		width: 626px;
	}

	.feature-left .feature-content {
		float: right;
	}

	.feature-left .feature-screenshot {
		left: -700px;
	}

	.feature-right .feature-screenshot {
		right: -700px;
	}

	.home .feature-right .feature-screenshot {
		right: -800px;
	}

	.md-popup-design .feature-screenshot {
		right: -260px;
		top: 40px;
	}


}

@media all and (max-width: 1118px) {

	.feature .inner {
		padding-left: 26px;
		padding-right: 26px;
	}

}


@media all and (max-width: 1000px) {

	.feature {
		height: auto !important;
	}

	.feature-screenshot {
		left: 0;
		opacity: 0.1;
		z-index: -1;
	}

}

Note that you can swap the position of the screenshot to either the left or right by simply changing the feature-* class in the opening <div> tag in the template file. I've commented the code in the template file so you can see, but notice how each section alternates between the feature-right and feature-left classes.

 

This area is fully responsive and any screenshot you post will fade out into the background to fit on mobile. You have full control over how this stuff works, so feel free to make any modifications as you need.

 

The code examples should be more than enough to get you on your way to implementing a feature like this into your own custom templates, and let me know if you need any further explanation.

 


- Alex
Check out the Kolakube blog or follow me on Twitter.

#2 greatsun0

greatsun0

    Advanced Member

  • + Legacy Member
  • PipPipPip
  • 42 posts

Posted 07 April 2016 - 10:38 AM

This is great Alex.

I'm trying to work on this. Hope to see it built-in for future update, so we can easily choose it from the custom template instead of building our own amateur page (less coding is better for us writers).



#3 Alex

Alex

    Kolakube Staff

  • Kolakube Admin
  • 3,484 posts

Posted 07 April 2016 - 11:29 AM

Agreed! This would make a great Page Lead. I like to write these tutorials here and gauge how interested people around the community are about it. Eager to see what you make with this.


- Alex
Check out the Kolakube blog or follow me on Twitter.

#4 Ken Bernock

Ken Bernock

    Advanced Member

  • + Legacy Member
  • PipPipPip
  • 104 posts

Posted 07 April 2016 - 11:30 AM

I'm going to work on this as well. Don't completely understand the copying of the index.php






0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users