So here we go. We are new to Drupal and we want to build our first very simple website. In this tutorial, we assume that you already have Drupal core installed and a basic installation running. You know how to install new modules. We also won't look at how one can theme his website.

Admin menu

First of all, to save time during this project, install the admin menu module. Disable the core Toolbar module. You have now a new drop-down administration menu at the top of your site.
Note that this step is not strictly necessary but just make things easier. Most of the people use this admin menu instead of the normal one.

WYSIWYG

Now let's continue with the WYSIWYG. In this case, we choose to go with CKEditor combined with IMCE for file handling. Read the installation notes for CKEditor very carefully to install it correctly. On the CKEditor website, do not use the Drupal version, use the normal one. When both modules are installed, go to Administration->Configuration->Content authoring->CKEditor. In Profiles, click edit for full HTML. In File Browser settings, select IMCE for the three drop-down choices. Now you have a working WYSIWYG with integrated file management.

News

With this, it will be easier to create new pages on the website, so now let's use it to create our website news. First go to Administration->Structure->Content types. Click Add Content Type. Call it News and change settings as suitable for your needs (authoring information, comments, etc.). Click on Save and add fields. Basic set-up could be enough for you (Title and body of the News) but you can add as many fields as you need, for example if you want images. After saving your content type configuration, you can now create news for your site if you go to Administration->Content->Add content->News.

Views

This is nice but we would like to put all news on the front page for easy viewing of what is new on your website. For this we will need to install the Chaos tool suite module. Then install the Views module. When this is done, go to Administration->Structure->Views and Add new view. Name it 'News', Show 'Content', of type 'News', unselect Create a Page, select Create a Block, title 'News' (possibly). Display format: Unformatted list of teasers. Change more options if needed then click Continue & edit. Change more options if needed then click Save button.

Blocks

You just created a block of news, now let's make it show on the site. Go to Administration->Structure->Blocks. Locate the block named View: News and put it on Content part of your theme. Then click on the configure button of this block. Give block title the value <none> if you don't want a title, or give an actual value. Then at the bottom, on Pages, select 'only the listed pages' and give the value <front> on the text block after. Now you have your news working on the site, and showing on the front page.

Static pages

You might want to have more than a front page. If you happen to have that sort of thinking, go to Administration->Content->Add content->Basic page. Your WYSIWYG once again come in handy to input data (don't forget to choose Text format Full HTML if you want to handle files), and when you are done, go to URL path settings and in URL alias, give the alias you want for the url address of this page (about-us, faq, etc.). Change other options as fit and then save your page. You just added a new page to your site, it became bigger and this is great, but if you return to the front page, there is no easy access to the new page you created.

Menu

You need a menu. Let's go the easy way and use the main menu. Go to Administration->Structure->Menus->Main menu and add link. Give it a title (e.g. About Us) and the path to the page you just created (e.g. about-us). Click on save and then adjust his position with drag-and-drop with other links on the main menu and save.

Slideshow

You have now a real complete website with a news system, static pages, a functional menu and a WYSIWYG. Let us go over our last step, which is a little bit more "advanced". Yes, we don't know why, but we want to create a slideshow. Because slideshows are cool. And we certainly do not want to touch some JavaScript (what is that anyway?). So we will use the Views Slideshow module. After installation, create a new content type called 'Slideshow' and put another image field. Create as much new content of type 'Slideshow' as you want for your slideshow. When this is done create a new view called 'Slideshow'. This view shows fields of type 'Slideshow', is a block and has as unique field (in FIELDS) Content: Image. Now the interesting part. In Format, select 'Slideshow'. There is a bunch of options. Choose what feeling you want for your slideshow, and if you need more, see the two libraries you can install for more options. Save your options, and save your view. As before, go to the Blocks and activate the block View: Slideshow where you want it to appear on the website and on which pages. You have now a working slideshow on your website.

This tutorial is now complete and if people like it, I can make a similar one for more advanced level stuff and complicated modules. If you have any question, leave a comment or contact me directly. Feedback is also always welcome.

Comments

sagehassan’s picture

this is a "WOW" tutorial in a nutshell,i like it

hardik jayeshbhai hihoriya’s picture

I like it, i also practice basic web-site created

atria.harsha@gmail.com’s picture

Hello
I followed the tutorials, i couldnt get the block to appear in the front page, I tried again and again it doesnt work any help please, when i list the content only second page content will appear the first page block never gets into the list of content

casaran’s picture

Hi,

Remember that you have to put your block in a place where it can appear visible on your site. On my example, the most obvious choice is to put it into "content", but depending on your theme and what you want to do exactly, it can be different. You can try to play around and putting it on different regions to see where it appears and how it looks like.

Unless you messed up with the view settings, the first page should always the one to appear first. Just on case, you can check your settings in the category "Pager" (at the bottom of the middle column) in your view.