How to build a WordPress web page using Cornerstone in X Theme

How to build a WordPress web page using Cornerstone in X Theme

Are you looking to build a WordPress web page using the Cornerstone plugin in X Theme? Well, you’re in luck! In this video tutorial by Income School, Ricky will guide you through customizing your web page step-by-step. First, Ricky highlights the benefits of Cornerstone being a separate plugin from the X Theme, allowing you to keep your customization even if you decide to switch to a different theme in the future. He then explains how Cornerstone makes web page customization easy with its drag-and-drop feature, allowing you to add sections, rows, and columns and customize various elements like background color and text alignment. Ricky also demonstrates how you can add elements such as accordions, embedded videos, and text boxes to make your web page truly unique. Templates are available for different types of web pages, and all elements and icons are customizable within the Cornerstone plugin. Just remember to save your work frequently to avoid any loss of progress. Ricky also advises editing pages created in Cornerstone within Cornerstone itself to prevent content from being overwritten. He demonstrates how to remove the sidebar on specific pages and emphasizes that Cornerstone can be an invaluable tool for creating attractive and customizable web pages. So, if you’re ready to learn how to build a WordPress web page using Cornerstone in X Theme, sit back, relax, and let Ricky guide you through the process.

Introduction

Welcome to this comprehensive guide on how to build a WordPress web page using Cornerstone in X Theme! Cornerstone is a powerful plugin that allows for easy customization of web pages using a drag-and-drop feature. In this article, we will walk you through the installation process, creating a new page, understanding the Cornerstone interface, customizing your web page, editing an existing page, removing the sidebar, and provide some tips for using Cornerstone effectively. Let’s dive right in and get started!

Installing Cornerstone

Before we can start building our web page, we need to install the X Theme and activate the Cornerstone plugin. Here’s a step-by-step guide on how to do that:

Downloading the X Theme

To get started, head over to the X Theme website and download the theme files to your computer. Make sure to save it in a location where you can easily access it later.

Installing the X Theme

Now that you have the X Theme file, it’s time to install it on your WordPress website. Here are the steps to follow:

  1. Log in to your WordPress dashboard.
  2. Go to Appearance > Themes.
  3. Click on the “Add New” button at the top.
  4. Click on the “Upload Theme” button.
  5. Choose the X Theme file you downloaded and click “Install Now”.
  6. Once the installation is complete, click on the “Activate” button.

Activating the X Theme

After activating the X Theme, you will be prompted to enter your license key. Enter the key and click on the “Verify Purchase” button to activate the theme fully.

Installing the Cornerstone Plugin

With the X Theme installed and activated, it’s time to install the Cornerstone plugin. Here’s how to do it:

  1. Go to Plugins > Add New.
  2. Search for “Cornerstone” in the search bar.
  3. Click on the “Install Now” button next to the Cornerstone plugin.
  4. Once the installation is complete, click on the “Activate” button.

Congratulations! You have successfully installed the Cornerstone plugin and are ready to start building your web page.

Creating a New Page

Now that Cornerstone is installed, it’s time to create a new page for your website. Here’s a step-by-step guide to help you through the process:

Navigating to the Pages Section

  1. Log in to your WordPress dashboard.
  2. Go to Pages > Add New.

Clicking on Add New

Once you’re in the “Add New Page” screen, you can add a title for your page and start building your web page using Cornerstone.

Choosing a Template

Cornerstone provides templates for different types of web pages, such as about pages or sales pages. You can choose a template that suits your needs or start with a blank canvas. Simply click on the “Templates” button in the Cornerstone interface and select the desired template. This will load the template onto your new page, and you can customize it further.

Understanding the Cornerstone Interface

Now that you have a new page ready to be customized, let’s take a closer look at the Cornerstone interface and understand how to use it effectively.

The Edit Mode

When you open your page in Cornerstone, you will be in the edit mode. This is where you can add, edit, or delete sections, rows, and columns.

Adding Sections, Rows, and Columns

To start building your web page, you can add sections, rows, and columns. A section is a container that holds rows, and rows contain columns. Columns can be used to arrange different elements within a row. Simply click on the respective buttons in the Cornerstone interface to add sections, rows, or columns.

Customizing Element Settings

To customize various elements on your web page, such as background color or text alignment, simply click on the element you want to customize. This will open a settings panel where you can make changes as desired.

Using Templates

Cornerstone provides templates and blocks that you can use to speed up the customization process. Simply click on the templates button in the Cornerstone interface and choose the desired template or block. This will load the pre-designed elements onto your web page, which you can then customize further.

Customizing the Web Page

Now that you understand the basics of the Cornerstone interface, let’s dive into the customization process. Here are some key aspects you can customize on your web page:

Changing Background Colors

To change the background color of a section or element, simply click on the element and navigate to the settings panel. Look for the background color option and choose the desired color from the color picker.

Customizing Text Alignment

Text alignment plays a crucial role in the overall aesthetics of your web page. To change the text alignment of a specific element, click on the element and navigate to the settings panel. Look for the text alignment option and choose left, center, or right alignment.

Adding Elements

Cornerstone offers a wide range of elements that you can add to your web page to enhance its functionality and visual appeal. Some popular elements include accordions, embedded videos, text boxes, and more. Simply click on the elements icon in the Cornerstone interface and choose the desired element from the options available.

Customizing Elements

Once you add an element to your web page, you can customize it further to suit your needs. Click on the element and navigate to the settings panel. From here, you can make changes to the element’s content, appearance, and behavior. Experiment with different settings to achieve the desired look and functionality.

Saving Your Work

It’s crucial to save your work frequently to prevent accidental loss of progress. Click on the save button in the Cornerstone interface to save your changes. Don’t forget to click the update button on the WordPress editor screen as well to save the overall changes to the page.

Editing an Existing Page

If you already have a web page created using Cornerstone and you want to make edits to it, follow these steps:

Navigating to the Pages Section

  1. Log in to your WordPress dashboard.
  2. Go to Pages.

Clicking on the Page to Edit

Find the page you want to edit and click on the page title to open it in the editor.

Opening the Page in Cornerstone

Once the page editor is open, click on the “Edit with Cornerstone” button to access the Cornerstone interface. From here, you can make any necessary edits or customize the page further.

Removing the Sidebar

If you want to remove the sidebar from a specific page created using Cornerstone, here’s what you need to do:

Opening the Page in Cornerstone

Find the page you want to edit and click on the page title to open it in the editor.

Navigating to the Page Settings

Once the page editor is open, click on the “Edit Page Settings” button. This will open a settings panel where you can make changes to the page settings.

Selecting No Sidebar

In the page settings panel, look for the sidebar option and select “No Sidebar” from the available options. Save your changes, and the sidebar will be removed from the specific page.

Tips for Using Cornerstone

To make the most out of Cornerstone and ensure a smooth web page customization experience, here are some helpful tips:

Frequent Saving

Remember to save your work frequently by clicking on the save button in the Cornerstone interface. This will prevent any accidental loss of progress and keep your changes intact.

Avoiding Content Overwriting

If you have created a page using Cornerstone, it’s essential to make edits and customizations within the Cornerstone interface itself. Editing a Cornerstone page using the standard WordPress editor can lead to content overwriting. Always stick to Cornerstone for making changes and updates.

Conclusion

Cornerstone is a valuable tool for creating attractive and customizable web pages within the X Theme for WordPress. With its drag-and-drop feature, templates, and a wide range of customization options, you can create stunning web pages easily. Remember to install the X Theme, activate the Cornerstone plugin, and follow the steps outlined in this guide to get started on your web page customization journey. Happy building!