Page Layouts – Part 1

Configuring Theme Options

The first task one should accomplish after creating a brand new NoSpin WordPress site is login to their Dashbord and change the password emailed by our system. Dashboard login and password change is discussed in Dashboard Login. If you haven’t yet created a NoSpin WordPress site, please sign up now.

The subject of this four part series on page layouts is setting up your new WordPress site with Divi Theme or Builder. This article, Page Layouts – Part 1: Configuring Theme Options, introduces the Theme Options page and uploading files to the Media Library in preparation for the following articles in this series.

This series includes:
Part 2: Adding LayoutsPart 3: Layout PacksPart 4: Creating Pages

ePanel aka ET’s Theme Option Page

Upon logging in for the first time, your brand new WordPress Dashboard will appear similar to the following left hand screen capture. There will be a message at the top of the window we shall tend to in a moment; but first, we’d like to mention our current default theme for all new NoSpin WordPress sites is Nexus (green ellipse) by ElegantThemes (ET), rather than the typical WordPress default Year Themes (Twenty Ten, Twenty Eleven, etc). At the end of this series, we demostrate how to change themes; however, if this is your first experience configuring a WordPress site, please accept our default theme for now. Nexus is easily customized within the Dashboard and more flexible than the WordPress Year Themes. It is also created and maintained by the same designers and developers who are responsible for the Divi Builder plugin, which you will likely appreciate with use. For information on WooCommerce compatible themes, please visit the WooCommerce article.

Open the Nexus Theme Option page by clicking the ePanel link indicated by the green arrow in the left hand screen capture. This will take you to the Nexus Theme Options page depicted in the right hand screen capture below. The Theme Options page discussed here is consistent throughout our collection of 80+ themes by Elegant Themes (ET); therefore, understanding a single ET Theme Options interface is equivalent to understanding them all. Details will be available soon on the article Theme Selection demonstrating how to change your site’s theme with respect to theme author.

We are going to do a couple things from within the Theme Options page, but first notice that you shall be able to return here using the Appearance > Nexus Theme Options menu indicated by the green arrow in the following right hand screen capture. If you later decide to change ET themes, your new ET theme name will be substituted for Nexus in the previous path. Other theme manufacturers may not include the name of their theme in their Theme Options page menu item; i.e, the menu item may be simply Theme Options. One example is AccessPress Parallax by accessPress themes, which is the theme we currently use on our NoSpin Web Hosting site. The WordPress Year Themes, to date, do not have a Theme Options page.

Step 1

Reference the right hand screen capture. The first thing we’re going to do is substitute your company logo for the Nexus logo. If you do not currently have a company logo in a suitable web format, create an empty PNG, GIF or JPEG image file to replace the Nexus logo. If you need help, please send an Email. If you would like to come back to this step, you may continue to Step 2. The Nexus theme is similar to all ET themes and shall display its logo by default even though the address field (green ellipse) is empty. Click the UPLOAD button to open your Media Library and proceed to the Uploading Media section below.

Step 2

Scrolling to the bottom of the Themes Options page reveals the interface depicted to the right. Here we shall change the default value of Use excerpts when defined (green ellipse) from its default DISABLE to ENABLE. Clicking anywhere on the switch indicated by the left-pointing green arrow toggles the value from DISABLE to ENABLE. Now we shall enter a little bit of Cascading Styles Sheet (CCS) code to remove the breadcrumbs under your menus. This modification is optional; however, we have received several customer requests to remove breadcrumbs from the Nexus theme. Copy and paste the following line of code into the Custom CSS box depicted in the following right hand screen capture:

#breadcrumbs {display:none;}

When you have the CSS code pasted into the Custom CSS box as depicted in the right hand screen capture, click the Save Changes button (green arrow) to secure your modifications. Those changes are more than enough to remove the message depicted in our first Dashboard screen capture.

If you have already read the Uploading Media section below, you may now proceed to Getting Started – Part 2: Adding Layouts.

Uploading Media

Assuming you have not previously uploaded images to your Media Library, it should look like the following left hand screen capture. However, if your Media Library it is not actually empty and it contains no suitable substitution for the Nexus logo, use the Upload Files link in the upper left corner of the Choose an Image interface. Clicking the Upload Files link will produce a window similar to the one depicted by the left hand screen capture. When you are ready to upload your Nexus logo replacement, click the Select Files button (green arrow) and navigate to the location of your image file on your desktop computer; or, drag and drop the image file from your desktop computer to the Media Library window as shown in the right hand screen capture. When time is of the essence, we set up our work space to utilize the drag and drop method.

Either click the Select File button or drag a file from your desktop and drop it anywhere within the Media Library window as shown. Clicking the Select button will return you to the Theme Options interface. Similarly, you may now either upload a favicon for your website or click the Save Changes button and continue to the next step.

From the Nexus Theme Options page, go to the Pages menu and click on Add New. This shall load the following interface into your Dashboard where we are going to change the Template under Page Attributes from Default Template to Full Width Page (screen capture below). As a note for future reference, the Excerpt field mentioned earlier is located at the bottom of this screen capture.

After your file has been successfully uploaded to the Media Library, as depicted in the following left hand image, clicking the Select button returns you to the Theme Options page depicted on the right. Examination of the Theme Options page Logo text field now reveals the location of your uploaded image file on the server (green ellipse). You may now repeat this process with respect to the Favicon which shall save a smaller version of your logo in the browser tab of your web page. Make sure you click the Save Changes button (left-pointing green arrow) before leaving the Nexus Theme Options page.

You may now return to Step 2 under the Theme Options Page section above if you have not completed configuring your Nexus Theme Options.

Conclusion

This brief introduction to the ET Theme Options page and the Media Library concludes Part 1 of our Getting Started with WordPress and Divi Builder series. You may now continue to Part 2: Adding Layouts.

NoSpin Logo