This tutorial describes how to create a custom homepage like the one shown in the GeoPress360 demo using Content Blocks.

As the image below illustrates, the page consists of 7 Content Blocks :

00

Preparation

Because WordPress sometimes adds unwanted paragraphs that can break your design, it’s a good idea to disable the visual editor while developing your homepage.
From the admin dashboard go to Users > Your Profile and the very first option you’ll see lets you disable the visual editor when writing.
It is also recommended to install the plugin Toggle wpautop.

Please note that basic knowledge of HTML and CSS is needed to effectively build a page using Content Blocks.

 Step 1

  1. From the admin dashboard, click Pages > Add New Page.
  2. Type the page title.
  3. Activate Disable wpautop.
  4. Most likely you’ll need to use some custom CSS classes for your homepage. Add them to a stylesheet and upload it here.
  5. Disable comments and pingbacks.
  6. Select the Fullwidth template.
  7. Save a draft (optional but a good idea).

02

Step 2

Now, we’re ready to start adding the page content. The first element is a slider, so let’s create the slider:

01-slider

  1. In a new browser tab, go to Flexible Galleries > Add new
  2. Type the slider name.
  3. Under Gallery Type select the option Slider.
  4. Upload your images and configure the slider.
  5. Click Publish.
  6. Copy the slider shortcode

To add the slider to the homepage, simply paste the slider shortcode in the edit area.

03a
geopress_net_demo_wp-admin_post-new_php_post_type=page

Step 3

The second element on the page is just a text intro. We’ll add it using a Content Block. So, let’s create the Content Block:

02-intro

  1. In a new browser tab, go to Content Blocks > Add New
  2. Type the title.
  3. Select the Boxed layout
  4. Add any CSS classes or inline styles that apply to the entire Content Box
  5. Select the single column option
  6. Type the content
  7. Click Publish
  8. Copy the Content Box shortcode

To add the Content Box to the homepage, simply paste the Content Block shortcode in the edit area.

Step 4

Section 3 on the page contains 3 icon boxes in a dark background. We’ll add it using a Content Block with boxed layout wrapped in fullwidth container that will provide the dark background.:

  1. In a new browser tab, go to Content Blocks > Add New
  2. Type the title.
  3. Select the Boxed layout
  4. Select the option that shows 3 equal columns with gutter
  5. In the content area of each of the 3 columns we create the content using the Icon Box Shortcode
  6. Click Publish
  7. Copy the Content Box shortcode

To add the Content Box to the homepage, simply paste the Content Block shortcode in the edit area and wrap it in a appropriately styled section container (same thing as a 100%-width div).

Step 5

Sections 4, 5 and 6 are essentially the same: A Flexible Gallery with a title wrapped in a Content Box. Here we’ll see how Section 5 is built and you can apply the same process to Sections 4 and 6. Let’s start by creating the gallery:

  1. In a new browser tab, go to Flexible Galleries > Add New
  2. Type the title.
  3. Under Gallery Type select the option Gallery
  4. Configure the Gallery
  5. Click Publish
  6. Copy the Gallery shortcode
  7. Create a new Content Block with Fullwidth layout and a single column
  8. In the content area of the Content Block type the HTML for the Title and text and paste the Gallery shortcode.
  9. To add the Content Box to the homepage, simply paste the Content Block shortcode.

Sections 4 and 6 are constructed the same way as described here.

Step 6

The final section of the homepage consists of an image and some text. We’ll add it using a Content Block. So, let’s create the Content Block:

  1. In a new browser tab, go to Content Blocks > Add New
  2. Type the title.
  3. Select the Fullwidth layout and add appropriate CSS classes or inline styles that apply to the entire Content Box
  4. Select the single column option
  5. Type the content
  6. Click Publish
  7. Copy the Content Box shortcode

To add the Content Box to the homepage, simply paste the Content Block shortcode to the Homepage edit area.

07And here is the finished Homepage:

geopress_net_demo_wp-admin_post-new_php_post_type=page7

 

 

 

 

Leave a Reply

Your email address will not be published. Required fields are marked *

+ 38 = forty four

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>