Create a Website with Responsive Blog Layout with WordPress – Lucid

by Elaine on September 2, 2012

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 magazine template lucid 1 Create a Website with Responsive Blog Layout with Wordpress   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’
install lucid responsive blog wordpress theme 1 Create a Website with Responsive Blog Layout with Wordpress   Lucid Appearances, Themes to install theme

 

install lucid responsive blog wordpress theme 2 Create a Website with Responsive Blog Layout with Wordpress   Lucid Install Lucid Wordpress Theme

 

install lucid responsive blog wordpress theme 3 Create a Website with Responsive Blog Layout with Wordpress   Lucid 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 responsive blog wordpress theme 1 Create a Website with Responsive Blog Layout with Wordpress   Lucid Customize Lucid WordPress Theme

 

customize lucid responsive blog wordpress theme 2 Create a Website with Responsive Blog Layout with Wordpress   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 responsive blog wordpress theme 3 Create a Website with Responsive Blog Layout with Wordpress   Lucid Customize Lucid WordPress Theme

 

lucid elegant themes control panel responsive blog layout general 1 Create a Website with Responsive Blog Layout with Wordpress   Lucid 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 lucid wordpress theme responsive blog layout 1 Create a Website with Responsive Blog Layout with Wordpress   Lucid 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>
change footer lucid wordpress theme responsive blog 0 Create a Website with Responsive Blog Layout with Wordpress   Lucid Lucid WordPress Themes Editor

 

change footer lucid wordpress theme responsive blog 1 Create a Website with Responsive Blog Layout with Wordpress   Lucid Lucid Change Footer

 

change footer lucid wordpress theme responsive blog 2 Create a Website with Responsive Blog Layout with Wordpress   Lucid 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

 Create a Website with Responsive Blog Layout with Wordpress   Lucid

Elaine

Elaine is the founder of CmsMind, an online blog providing Joomla and WordPress tutorials. Elaine lives in Toronto and when she is not online, she is either Marathon and Triathlon training or travelling and racing somewhere in the world. Find her also at: Save Money, Premium Themes and Templates, and at Webhosting Tips.

More Posts - Website

{ 5 comments… read them below or add one }

Eliseo GN September 20, 2012 at 5:50 pm

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.

Reply

Elaine September 21, 2012 at 2:19 am

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

Reply

Eliseo GN September 21, 2012 at 3:23 pm

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

Reply

Aaron Molina January 15, 2013 at 3:58 pm

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?

Reply

Elaine January 16, 2013 at 7:28 pm

Hi Aaron,
You will have to contact ElegantThemes for help as they are more knowledgable with the Theme. Thanks for your visit,
Elaine

Reply

Leave a Comment

Captcha Captcha Reload

Older Post:

Newer Post: