{"id":2511,"date":"2019-02-08T18:54:05","date_gmt":"2019-02-08T18:54:05","guid":{"rendered":"https:\/\/gpsites.co\/merch\/?p=2511"},"modified":"2019-02-08T18:54:05","modified_gmt":"2019-02-08T18:54:05","slug":"home-page-content","status":"publish","type":"post","link":"https:\/\/notalotofspace.com\/?p=2511","title":{"rendered":"The Home Page Content"},"content":{"rendered":"\r\n<p>Aside of the Header Element the entire home page content is built with the Block Editor ( a.k.a. Gutenberg). Combined with GeneratePress editor styles we now have a much better front end representation whilst we are editing.  Allowing each element to be given specific styles and Additional CSS classes means we don&#8217;t have to stray into HTML very often. In fact on this Site we never do.<\/p>\r\n\r\n\r\n\r\n<h2 class=\"wp-block-heading\">Page Structure<\/h2>\r\n\r\n\r\n\r\n<p>Let&#8217;s begin with looking at the hierarchy.<\/p>\r\n\r\n\r\n\r\n<ul><li>Header Element &#8211; This is covered in this <a href=\"https:\/\/gpsites.co\/merch\/building-the-home-page-header\/\">article<\/a><\/li><li>H2 Headings<\/li><li>Shop Categories<\/li><li>Latest Products<\/li><li>Call to Action Row &#8211; forty \/ sixty split<\/li><li>Call to Action Row &#8211; sixty \/ forty split<\/li><li>Sale Products<\/li><li>Sign Up <\/li><li>GP Footer &#8211; The default Theme widgets<\/li><\/ul>\r\n\r\n\r\n\r\n<h2 class=\"wp-block-heading\">H2 Headings<\/h2>\r\n\r\n\r\n\r\n<p>For our landing page I wanted some big bold H2 headings. Larger than what we have specified in our Customizer. But also make them super responsive. To make this happen I created some custom CSS using an Additional CSS Class of:<br><br><strong>large-heading<\/strong><br><br>Simply select your Heading Block,  make sure it&#8217;s a H2, open the Advanced Dropdown in the Settings Sidebar and add the class to Additional CSS Class field. Please note: You won&#8217;t see the style change in the editor. Like all CSS you will find it in the Customizer &gt; Additional CSS. It looks like this<\/p>\r\n\r\n\r\n\r\n<pre class=\"wp-block-code\"><code>h2.large-heading {\r\n    font-size: calc(28px + (86 - 28)*(100vw - 400px)\/(1600 - 400));\r\n    line-height: 1.1em;\r\n}<\/code><\/pre>\r\n\r\n\r\n\r\n<p>So this looks complicated but is what provides the responsive controls. If you want more information on what this all means then check out <a href=\"https:\/\/www.smashingmagazine.com\/2016\/05\/fluid-typography\/\">Responsive And Fluid Typography With vh And vw Units<\/a><\/p>\r\n\r\n\r\n\r\n<h2 class=\"wp-block-heading\">Shop Categories<\/h2>\r\n\r\n\r\n\r\n<p>Built using a Columns Block set to two columns. Each column contains an Image, Heading, Text and link block. Nothing fancy and real simple to edit. Adding additional columns can be done from the Column Settings. Creating additional rows is simply a case of duplicating the existing one. <\/p>\r\n\r\n\r\n\r\n<h3 class=\"wp-block-heading\">Making the image link to the category<\/h3>\r\n\r\n\r\n\r\n<p>Images Settings have a Link to Option. Just set the Link to: Custom URL and add your category link<\/p>\r\n\r\n\r\n\r\n<h3 class=\"wp-block-heading\">Custom Link Styling<\/h3>\r\n\r\n\r\n\r\n<p>Hopefully you noticed the custom style link. This is achieved using custom CSS. To add this style to any of your in content links just give the block an Additional CSS Class of: <strong> loud-link<\/strong><\/p>\r\n\r\n\r\n\r\n<h2 class=\"wp-block-heading\">Latest Products<\/h2>\r\n\r\n\r\n\r\n<p>After our Title Block we simply add a Woocommerce: Recent Products Shortcode. <\/p>\r\n\r\n\r\n\r\n<h2 class=\"wp-block-heading\">Call to Action (CTA) Rows<\/h2>\r\n\r\n\r\n\r\n<p>Once again the Columns Block comes into play. Out of the box there is no way to adjust the column widths. So within the editor you&#8217;re stuck with equally sized columns. To get around this to display unequal sized columns we added some simple CSS Classes. <\/p>\r\n\r\n\r\n\r\n<figure class=\"wp-block-table\"><table class=\"\"><tbody><tr><td><strong>Additional CSS Class<\/strong><\/td><td><strong>Resulting style<\/strong><\/td><\/tr><tr><td><strong>forty-sixty-columns<\/strong>  <\/td><td>a 40% \/ 60% two column row<\/td><\/tr><tr><td><strong>sixty-forty-columns<\/strong>  <\/td><td>a 60% \/ 40% two column row<\/td><\/tr><tr><td><strong>mobile-column-reverse<\/strong> <\/td><td>Reverse the order of the two columns on mobile. <br>Add this class along with one of the above.<\/td><\/tr><\/tbody><\/table><\/figure>\r\n\r\n\r\n\r\n<p>Please note: these classes do not apply the styles within the editor<\/p>\r\n\r\n\r\n\r\n<h2 class=\"wp-block-heading\">Sign Up<\/h2>\r\n\r\n\r\n\r\n<p>The Sign Up form is provided by the Happy Forms plugin. The form is added to the second column using a Short Code widget. The short code for your form is found in the <strong>Dashboard &gt; Happy Forms<\/strong>. A common design is to use these types of CTA to break up a page. To do this we have given it our own special styling.<\/p>\r\n\r\n\r\n\r\n<p>First off we need to make this row extend to the edge of the container ( outside of the content padding). This is done simply by selecting the Align Wide option from the Block toolbar. The rest requires some familiar CSS from our CTA Rows and a little extra. here are the classes it uses:<\/p>\r\n\r\n\r\n\r\n<ul><li><strong>sixty-forty-columns<\/strong><br>a 60% \/ 40% two column row<\/li><li><strong>column-banner<\/strong><br>this makes necessary padding adjustments<\/li><li><strong>center-vertical<\/strong><br>vertically centring any content placed within one of the CTA Columns<\/li><li><strong>bg-grey<\/strong><br>Applies the grey background color<\/li><\/ul>\r\n\r\n\r\n\r\n<h3 class=\"wp-block-heading\">Editing the Form<\/h3>\r\n\r\n\r\n\r\n<p>The form can be edited from the <strong>Dashboard &gt; Happy Forms<\/strong>. If you create a new form you will need to update the short-code used on the front page. <\/p>\r\n\r\n\r\n\r\n<h3 class=\"wp-block-heading\">Changing the rows background color<\/h3>\r\n\r\n\r\n\r\n<p>Go to the <strong>Customizer &gt; Additional CSS <\/strong>( or to your Child Theme Style sheet if you have moved it). And edit this CSS:<\/p>\r\n\r\n\r\n\r\n<pre class=\"wp-block-code\"><code>.bg-grey {\r\n    background-color: #f2f3f4;\r\n}<\/code><\/pre>\r\n\r\n\r\n\r\n<p>You can of course simply create your own classes with more relevant names for the colors you choose.<\/p>\r\n\r\n\r\n\r\n<h3 class=\"wp-block-heading\">Can i use a different form?<\/h3>\r\n\r\n\r\n\r\n<p>Of course. If you want to use another form plugin then simply go about setting that up and replacing the short code with your new one.<\/p>\r\n","protected":false},"excerpt":{"rendered":"<p>The home page content is built using the WordPress 5 Block editor a.k.a Gutenberg. It uses only Core Blocks and Woocmmerce Shortcodes. And as would be expected a little CSS has been thrown in.<\/p>\n","protected":false},"author":1,"featured_media":294,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[16],"tags":[],"_links":{"self":[{"href":"https:\/\/notalotofspace.com\/index.php?rest_route=\/wp\/v2\/posts\/2511"}],"collection":[{"href":"https:\/\/notalotofspace.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/notalotofspace.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/notalotofspace.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/notalotofspace.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=2511"}],"version-history":[{"count":0,"href":"https:\/\/notalotofspace.com\/index.php?rest_route=\/wp\/v2\/posts\/2511\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/notalotofspace.com\/index.php?rest_route=\/wp\/v2\/media\/294"}],"wp:attachment":[{"href":"https:\/\/notalotofspace.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=2511"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/notalotofspace.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=2511"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/notalotofspace.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=2511"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}