Blog

Featured

Responsive Image Text – Text Image or vice versa

Nulla non mollis ante. In vel massa porta, euismod orci in, venenatis nisl. Mauris congue nec tellus eget tristique. Fusce scelerisque aliquam tincidunt.

Quisque vel lectus efficitur, dictum libero malesuada, eleifend justo. Phasellus efficitur eros metus, nec convallis ipsum bibendum vitae.

Nulla non mollis ante. In vel massa porta, euismod orci in, venenatis nisl. Mauris congue nec tellus eget tristique. Fusce scelerisque aliquam tincidunt.

Quisque vel lectus efficitur, dictum libero malesuada, eleifend justo. Phasellus efficitur eros metus, nec convallis ipsum bibendum vitae.

Themeco Splash Page

Theme.co is using a very nice splash page. Sadly, they have made it custom and designed without using Cornerstone. If you love their splash page and want to copy it, now is your chance. I have spent a few minutes trying to mimic the page.

Theme Splash page

You can check it here: https://www.cstemplates.com/page-templates/themeco-splash/

Reminders:
To use this template, always remember to add this as Page template layout.

If you do have some content, it will be overwritten.

The Instructions


1] Upload and insert the template as a page template.

2] Include the custom css in the Settings Tab > Custom CSS.

The CSS


I also included the Google font that they are using in the css below. You can completely remove it if it is not necessary to your site’s design. I also added responsive block that removes the borders on smaller screens.

@import url('https://fonts.googleapis.com/css?family=Lato|Pacifico');

body #cs-content {
  font-family: 'Lato', sans-serif;
}

#cs-content .overlay {
  position: relative;
  overflow: hidden;
}

#cs-content .overlay:before{
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  

  /* add your background color overlay here */
  background-color: rgba(0, 0, 0, 0.45);
}

@media(max-width: 767px){
  #cs-content .x-column {
    border: none !important;
  }
}

I would love to know if you guys love this template. You can message me in the comments below.

Same Column Heights

Have you ever wondered how can you have the same column heights in your Cornerstone page layout? You will need a little bit of Javascript so that the columns will have the same heights. Please check out the examples below.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer scelerisque eros eu pulvinar dictum. Nunc egestas massa at elit bibendum, cursus fringilla nunc faucibus. Proin dignissim efficitur nunc a cursus. In luctus mi in nisi condimentum, sed ornare enim tempor.

Proin dui metus, fringilla ut viverra id, consequat nec ex. Curabitur consequat sem ac ipsum tincidunt, vel vehicula arcu euismod. Donec pellentesque turpis sed gravida pretium. Aliquam pulvinar eleifend rhoncus. Praesent aliquet aliquam pellentesque. Ut aliquam, risus sit amet luctus blandit, ligula est ullamcorper nulla, in gravida nisi augue vitae nisl.

Maecenas in erat magna. Vivamus in aliquet arcu.

Proin dui metus, fringilla ut viverra id, consequat nec ex. Curabitur consequat sem ac ipsum tincidunt, vel vehicula arcu euismod. Donec pellentesque turpis sed gravida pretium.

Ut aliquam, risus sit amet luctus blandit, ligula est ullamcorper nulla, in gravida nisi augue vitae nisl. Nam vitae porttitor sem, et porttitor massa.

Ut aliquam, risus sit amet luctus blandit, ligula est ullamcorper nulla, in gravida nisi augue vitae nisl.

Headline

Nam vitae porttitor sem, et porttitor massa.

The most common setting in Cornerstone for you to have equal column heights is to enable the marginless column options in the row settings. The problem with marginless columns is that there is no gap in between your columns. That is why, it is better to have the ordinary columns and just add a little Javascript to make the height of the columns be equal.

The Instructions


1] Upload the example templates as a block template. Or you can create your own section with your desired number of columns.

Reminders:
Please always remember to add the template as Block template layout.

2] Go to the Settings tab and insert the Javascript below.

The Javascript


(function($){
  $(window).on('load resize ready', function() {
    $(".x-section").each(function(index, el) {
    var max = 0;
    $(this).find(".x-column").css('height', 'auto');
    $(this).find(".x-column").each(function(index, el) {
      if( $(this).height() > max ){
        max = $(this).height();
      }
    });
    $(this).find(".x-column").css('height', max);
    });
  });
})(jQuery);

You can always re use this JS code in other pages so that the other pages will have same column heights too. If you want to apply this code in your entire site, please insert the JS code in your customizer, or somewhere where it will be applied globally.

Section Overlay

With this block template, you can simply insert a background image and have a color overlay.


Section overlays for modern design,
made easy

Deploy modern static websites with Cornerstone page builder.
Easily add sections with overlays and other page elements
using our unique block templates.

Get them all now!

Most of the time, you’ll insert a background image within your section. And sometimes you wish that you could add a color overlay to your image with your color of choice. A common practice is to add the color overlay by editing the image itself. That process though is so tedious. You have to open an image editor and edit the image which would take several of your time. But then if you change your mind and change the background image, you have to edit the image again back in the editor.

With this block template, you can simply insert a background image and have a color overlay. And if ever you want to change the background, you can change it easily without having to edit your image. The color overlay is separate and independent to the background image. You can change the color overlay also.

Since Cornerstone doesn’t have the overlay feature by default, the color overlay effect can be achieve by adding a custom css.

Reminders:
Please always remember to add this as Block template layout.

The Instructions


1] Upload and insert the template as a block template.

2] Include the custom css in the Settings Tab > Custom CSS.

3] And Feel free to change the color of the background overlay. You can always use hex to rgba converter.

The CSS


I included a Google font in my css below because I want it styled a little bit. You can completely remove it if it is not necessary to your site’s design

@import 'https://fonts.googleapis.com/css?family=Roboto:100,300,400,700';

#cs-content {
  font-family: 'Roboto', sans-serif;
}

#cs-content .overlay {
  position: relative;
  overflow: hidden;
}

#cs-content .overlay:before{
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  

  /* add your background color overlay here */
  background-color: rgba(77, 154, 191,0.75);
}

And that’s all folks, I am hoping that this template has little effect and get you inspired in spicing up your sections.

Fullscreen Section

There are times that you need a fullscreen header on top of your page. Most people a use fullscreen slider but doing so could affect page performance since you will be loading all the resources of the slider plugin. This is a great solution for you!

You can check out the fullscreen section demo here:
Fullscreen Section Cornerstone Block Template


Fullscreen Section

Lorem ipsum dolor sit amet, consectetur adipiscing elit.


The fullscreen section demo page is using a blank page template which is custom-made template for Twenty Sixteen theme. Cornerstone Templates are best used if you are using a page template that doesn’t have a container around the page content.