Loading...
Wordpress Themes

Create a Website with Responsive Blog Layout with WordPress – Lucid

Responsive Blog/Magazine/News Website – Lucid by ElegantThemes

I recently created a responsive blog with Lucid Wordpress Theme from ElegantThemes.   I wanted to share with you what that process was like from installation to customizing to actual presentation and finished product.   The whole process took me about 30 minutes.  Here are the steps below that I will be covering.

  • Installing Lucid Wordpress Theme
  • Change Site Title & Tag Line in Frontend Control Panel
  • Customizing Lucid in Backend Themes Control Panel
  • Creating a logo and Uploading Logo in Themes Control Panel
  • Editing the Lucid Wordpress Theme Footer
  • Finished Product
Responsive Blog Magazine Theme - Lucid
Responsive Blog Magazine Theme – Lucid

1.  Installing Lucid Wordpress Theme

The Lucid.ZIP file you download from ElegantThemes is the exact file you will upload to your Wordpress Themes.  Do not unzip the file.

  • Login to your WordPress admin panel
  • In Left navigation – Click on Appearance, Themes
  • In Manage Themes – Click on Install Themes, Upload, Choose File, Choose the lucid.ZIP file, Click on ‘Install Now’
  • In Installing Theme from uploaded file, click on ‘Activate’
Installing Lucid WordPress Theme Responsive Blog/Magazine Layout
Appearances, Themes to install theme

 

Install and Upload the Lucid WordPress Theme
Install Lucid Wordpress Theme

 

Activate Lucid WordPress Theme
Activate Lucid WordPress Theme

 2.  Change Site Title & Tag Line in Frontend Control Panel

You can also customize your Site title & Tagline in your WordPress Settings.  This is just another way to change your site title and tagline.  In the Frontend customize, you can also change colours, background and if you want to choose a page saved in your wordpress to be your Frontpage.

  • In Manage Themes – Click on ‘Customize’
  • In Frontend – Click on the twisty for Site Title & Tagline
  • Enter your own site name & tagline and click on ‘Save & Publish’
Customize Lucid WordPress Theme
Customize Lucid WordPress Theme

 

Change Site name & Tag Line in Lucid
Change Site name & Tag Line in Lucid

3.   Customizing Lucid in Backend Themes Control Panel

There are 8 categories of options to set in Lucid WordPress Theme.  Below are screenshots you of the settings.  To get the basics setup for my site, I didn’t really make any changes here yet.  This is in the Manage Themes, Lucid Theme Options

  • General settings – to Change the logo, favicon, colour scheme, homepage layout, featured slider options, display social media icons, grab the first post image to use as a thumbnail and more.
  • Navigation settings – Easily exclude pages, enable/disable dropdown menus, order page links, include/exclude categories, show categories in drop down menus, and more.
  • Ad Management – enable/disable single post banner, enable/disable 486×60 ad header, enable/disable 728×90 ad footer, Adsense code, banner codes, banner images,
  • Colorization – Change font colors, link colors, Menu colors, sidebar colors, footer colors
  • SEO – Enable/disable single post SEO, Enable/disable META keywords, Enable/disable META descriptions, Homepage meta, define character to separate blog name and post title and more.
  • Integration – Ability to add header code, body code (such as google analytics code).   Add explicit code to top of posts and footer (before comments) of single posts.
  • Support Docs – ElegantThemes Lucid support documents.  It has online videos and tutorials on how to setup your theme.
Customize Lucid WordPress Theme
Customize Lucid WordPress Theme

 

General Settings in Lucid WordPress Theme
General Settings in Lucid WordPress Theme

 4.  Creating a logo and Uploading Logo in Themes Control Panel

I’m not that creative so I googled for an online logo creator.   I found logomaker.com.  I just selected the image I wanted and formatted the title.  This was all free.  You don’t need to pay for anything although they want you to pay something before downloading.  You can just easily take a screenshot and save it to a file and use it as your logo.  After you save your logo file to your computer:

  • In Left navigation – Click on Appearance, Themes
  • In Manage Themes, Lucid Theme Options
  • In General Settings, Click on ‘Upload Image’, select the logo file you created and it will start uploading automatically
Change logo in Lucid WordPress Theme
Change logo in Lucid WordPress Theme

 

 5.  Editing the Lucid WordPress Theme Footer

At the bottom of your site is the standard ElegantThemes footer pointing to their website and WordPress’s website.  I want to keep the credits there, but don’t want that many links going out of my site.  So you can go into the themes editor and edit the footer.

  • Click on Appearance, Editor
  • On the right side, click on ‘Footer’ (footer.php)
  • Search for code:
<p id=”copyright”><?php printf( __(‘Designed by %s | Powered by %s’, ‘Lucid’), ‘<a href=”http://www.elegantthemes.com” title=”Premium Wordpress Themes”>Elegant Themes</a>’, ‘<a href=”http://www.wordpress.org”>WordPress</a>’ ); ?></p>
  • Replace with whatever text you want, for example:
<p id=”copyright”><?php printf( __(‘Designed by %s | Created by %s’, ‘Lucid’), ‘<a href=”http://www.me.com” title=”Me”>Me</a>’, ‘<a href=”http://www.cmsmind.com”>Elaine</a>’ ); ?></p>
Lucid WordPress Themes Editor
Lucid WordPress Themes Editor

 

Lucid Change Footer
Lucid Change Footer

 

Lucid Change Footer Text
Lucid Change Footer Text

 

That’s all the basics I’ve done so far.  I’ve also created some posts and removed the featured slider.  In the general settings I also chose to ‘grab the first image’ as the post thumbnail so I won’t have to explicitly paste a link to the image in a custom field for every post.

Lucid WordPress Theme Price = $39

Demo | Download | Features

Thanks,

Elaine

5 comments
  1. Eliseo GN

    Hi Elain, I have already installed this great theme and I did all what I want to view on it. but, I have a problem with the post order, I saw that your posts are index by date desc, in my case the post order is asc, I mean, the last post is published at bottom.

    Do you have idea what do I do to set properly this feature ?

    Thanks a lot.

    Regards from Mexico City
    Eliseo

    PS. Sorry for my poor english.

    1. Elaine

      Hi Eliseo,

      I checked out your site and your posts are ordered in DESC order. Your last (most recent) post is at the top while your older post (dated in the past) is at the bottom.

      Thanks for your visit,
      elaine

  2. Eliseo GN

    Hi Elaine.

    The error I had was that I assigned the first entry as fixed, I realized when I posted another entry. my mistake.

    I appreciate so much you answer

    Regards.
    Eliseo

  3. Aaron Molina

    Everything is working great im wanting to add a video and a picture on the body portion of the page under the current video slideshow and recent posts. Is there a way to do this?

Leave a Reply

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

Captcha Captcha Reload