How to Make a Drupal Website, How to Build a Website with Drupal

How to Make a Drupal Website

How to Make a Drupal Website

How to Make a Drupal Website, How to Build a Website with Drupal

Drupal is a great system to use when you want to quickly set up a website. Instead of trying to learn how to code or paying a third party to build a site for you, Drupal provides all the components for an online presence. Whether you’re building an attractive site for business or just need a personal blog, it can be done with this open-source content management system.

After installing Drupal, it’s time to start building. In this tutorial, I’m going to walk you through the initial stages of building a website with the system. Pretty soon, you’ll have a piece of internet real estate that looks amazing and is ready to drive traffic.

Setting Up Drupal with Basic Components

The first step is to find a website hosting that will support Drupal. There are a few requirements you’ll need to follow, such as making sure you have the correct PHP version. Not all hosting platforms use the same software.

In previous versions of Drupal, the WYSIWYG editor had to be installed separately from the system. However, Drupal 8 comes with the most popular text editor module as well as an image uploader. If you are using an older version of Drupal, I would recommend upgrading or installing the TinyMCE module and changing the configuration.

To edit Drupal's text editor settings, click the "Configuration" link in the toolbar above.

Drupal Configuration Link

On the Configuration screen, find and click the "Text Format and Editor" control.

Drupal Text Editor

On this next screen, you can control how others edit the content of the website by setting the role of the preferred text editor. By default, Drupal gives you basic HTML controls and tools when writing text. This can be changed from the Text Format and Editor screen. It uses a drag-and-drop interface to arrange which editor will be used primarily.

For now, you just want to configure the administrator control. Click and hold the mouse on the four-pointed arrow for "Full HTML" and drag it to the top. Click the "Save" button in the bottom left.

Drupal Primary Text Editor

Next, click the "Configure" button in the full HTML editor. This will open a window to further fine-tune your settings.

Configure Drupal Editor

From this screen, you can change settings and how the editor appears when writing text. You can:

Set user roles: Based on who you want to allow to write on your site.

Determine which text editor to use: If you installed a different text editing module, you can change this from the drop down.

Drag-and-drop toolbar configuration: Drag and drop the editing tools you want to use and remove the ones you don't need.

Change image upload settings: Directory, file size, and maximum dimensions can be changed here.

Enable filters: Use the check boxes to determine how the editor behaves, such as automatically converting URLs to links or aligning images.

Change the order of filter processing: Using drag-and-drop, you can change the way Drupal handles your orders.

Drupal Full HTML Editor

Click the "Save Configuration" button below when you're done.

Drupal Save Edit Configuration

Now your website is ready for content using a customized text editor. If you don't like the default CKEditor within Drupal 8, you can find plenty of editing systems on the internet. However, it is a good platform and stable.

Choosing a Layout and Theme

The next step is to decide on a layout and theme for the website. This is where some of the more interesting aspects begin.

The appearance of your site is going to play a major role in how visitors respond. It can improve business relationships as well as increase the amount of time a person stays on your site while reading content.

Click the "Appearance" link at the top of the admin toolbar.

Drupal Appearance

From this screen, you can edit each theme by clicking the Settings button for any of the installed ones. The customization available with each theme can vary as developers provide different components. However, most will allow for great customization in colors as well as changes to page elements.

In this tutorial, I will show you how to install a new theme. We will move on to customization at a later date. For now, click the "Install New Theme" button above your list of themes.

Drupal New Theme

In this new window, you can install a theme directly from a website URL or upload one directly from your computer. Drupal supports files in ZIP, TAR, TGZ, GZ, and BZ2 formats. Once you have selected a new theme, click the "Install" button in the lower left.

After uploading the theme, go back to the Appearance area and click the "Install and Set as Default" link.

Drupal Set Default Theme

You can find themes in many areas of the Internet, but I would recommend checking Drupal's website first. These have the highest chance of being stable, with a reduced risk of security issues.

Note: Some older themes cannot be ported to Drupal 8 due to specific files required by the new version.

Drupal Theme Search

How to Make a Drupal Website, After installing a theme, you can now go to its settings and make your custom changes.

Customizing a Drupal Theme

Developing the Homepage

The homepage is the first thing people will see when they visit your domain. In this Drupal site building tutorial, I will show you how to set up a static page to work on the front end. This is an easy way to get your site ready for traffic right away.

The first thing you need to do is create a static page. Click on the “Content” link in the admin toolbar at the top.

Add Drupal Content

Next, you will see a button labeled “+ Add Content”. Click on it and then select the option to create a “Basic Page”.

Add a title to the article and fill in the body with the text you want to display on the front end. Once you have added your content, click on “Promotion Options” on the right to expand the window. Select the check box next to “Promote to Front End”.

Once you are done, click on the “Save & Publish” button at the bottom left of the text editor screen.

Promote Drupal Front End

After saving the content, note the URL from the page in the browser address bar. You will need it for the next part. For example, my URL displays the domain and "/node/1" as follows. This is the part you want to take note of.

Go back to the configuration menu in the admin bar at the top and click on "Basic Site Settings" under the System window.

Drupal Basic Site Settings

Input the URL you created for the homepage and click on the "Save Configuration" button.

Save the Drupal Home

Now, you have a homepage ready and waiting for visitors.

Adding Informational Pages

How to Make a Drupal Website, The next step in building a site with Drupal is to set up your static pages. Things like "About Us" or descriptions of the services you offer inform curious visitors and increase engagement.

To get started, go back to the content area and create a new basic page as described above.

Drupal Static Page

In this example, I'm creating an "About Us" page. On the right side of Drupal, look for the URL Path Settings option and click on it. This will expand the window to show the URL alias. I'll change the alias to "/about". You'll want this alias to be something related to what you're creating. For example, you might use "/services" for a services page.

Drupal Static Page Alias

It's important to know this alias later. Be careful not to lose the name by typing in the alias somewhere.

Once you're done creating the page, click the "Save and Publish" button at the bottom.

Drupal About Us Save Button

Adding a Blog to Your Site

A blog is one of the most important parts of driving traffic and content marketing. It plays such a vital role that most businesses host it when they create a Drupal website.

In previous versions of Drupal, the blog was a core part. However, the developers removed this capability to improve the overall functionality of the core. Fortunately, this module is available in Drupal and can be installed on websites. I recommend finding a good module to add a blog to your site.

To install the blog module, go to the "Extend" area of ​​Drupal and click the "Install New Module" button.

Install a new module in Drupal

Open a new tab and download the blog module from the Drupal website. It may be easier to save it to your desktop. Once your file has downloaded, go back to the Drupal Admin tab in your browser and select the file. Click Install.

Install Drupal Blog

How to Make a Drupal Website, Go back to the Drupal Extensions area and scroll down until you see the "Blog" module under the "Other" section. Click the check box next to Blog and click Install.

Drupal Install Blog

Go to the "Content" area of ​​Drupal. You will see a new type called "Blog Post". Create your first blog post and click the "Save & Publish" button. In this tutorial, I am making a simple post and adding a blog tag.

Drupal Save Blog

Now that you have a blog post ready, it is time to link the blog to the menu. Go to the "Structure" area of ​​Drupal and click "Menu".

Drupal Blog Menu

Click on the drop down for "Main Navigation" and select "Add Link".

Drupal Blog Link

From this screen, enter "Blog" as the menu link title and "Blog" as the link. You can add a description of the link that will appear when you hover over it.

When you are finished filling in the information, click the "Save" button.

Save Drupal Blog Link

Adding a "Contact Us" Page

A contact page gives your visitors a way to contact you. This is a great addition if the site is for a business or just to add interaction.

Drupal 8 comes with a contact module already installed that is ready to go. However, if you want to make sure the module is activated, it can be found in the extensions area.

To create a contact form, go to the Structure area of ​​Drupal and click the "Contact Form" link.

Drupal Contact Form

Click the "Add Contact Form" button to create a new form. Fill in the information and click the "Save" button at the bottom.

Save Drupal Contact

Once the form is complete, go to the Structure area of ​​Drupal 8 and click the menu. Again, you will change the drop down for the main navigation to add a link. Fill in the information, but this time use "Contact Us" as the link title and "/Contact" as the link. Click Save when you are done.

Drupal Contact Us Save

Now, it is time to make sure that the permissions are set for your visitors. Go back to the Extend area of ​​Drupal and expand the controls for contact by clicking on its details. Here, you can change the permission settings for different aspects of Drupal.

Drupal Contact Details

How to Make a Drupal Website, The Anonymous User check box for "Use site-wide contact form" should be selected in the system. If not, add a check in the Anonymous User column to use the site-wide contact form and click "Save Permissions" at the very bottom.

Drupal Contact Form Permissions

Developing the Main Menu

A good navigation menu setup helps visitors find content. It will play a prominent role in how others use your website. After you have created your Drupal website using the steps above, it is time to create this layout.

First you need to go to the Structure section of Drupal and click on the Menu link. In this tutorial, I am only going to edit the main navigation which is already available. To do this, click on the "Edit Menu" button to the right of "Main Navigation".

Editing the Drupal Main Nav

On this next screen, you will see that most of the files we created above are already available. The only thing missing is the "About Us" page. Click on the "+ Add Link" button at the top. Input the information for the menu link, including the link name.

Remember when I told you to write that part? In this example, I will put "/about" in my "About Us" link title and the link. Once you have filled in the link information, click on the "Save" button.

About Us Drupal Links

Once you have all your links available, you can arrange them using drag-and-drop. For example, I'm dragging "Home" to the top because I want it to appear first.

After arranging the links, click the Save button. Your menu is now ready.

Drupal Nav Save

Social Media Linking

How to Make a Drupal Website, Many themes come with the ability to link social media to your website. In this tutorial, I'll show you where this feature is located in the Drupal Website Business Responsive theme.

Go to Appearance in Drupal's admin dashboard. Locate your theme and click on the link for "Settings." Scroll down until you find the Social Media or similar options. Every developer is different, and social links may be labeled something else. In this example, I'll click on the Social Media link to expand the options and enter the profile URLs.

Once that's done, click the "Save Configuration" button at the bottom.

Save Drupal Social Settings

What about adding a feed from Twitter or other social sites?

You can add a feed from your social media by adding a block and pasting the code directly. Here's how you can implement those feeds on your website.

Get the code from Twitter or Facebook to display your feed. This is done by going directly to these websites and setting up an account. Once you’ve customized your settings, the social site will give you a code to copy.

Go to Drupal’s Structure area and click on “Block Layout.” Each theme will have a different block to choose from. In this example, I’m going to use a right sidebar for the feed. Click on the “Place Block” button next to the right sidebar option.

This will open a pop-up window that will give you different options for pre-built content. Click on the “+ Add Custom Block” button at the top.

Add Drupal Custom Block

Give a description for the block. In this case, I’m describing it as “Social Media Feed.” Click on the “Source” control in the right sidebar and paste your code. Click on the Save button.

Drupal Source Code Button

In the next window, select the area where you want the code block to appear. Remember, this is theme-specific. In this example, my theme has the right sidebar available, so I’m selecting that location. Click "Save Block" when you're done.

Drupal Save Code Block

And there you have it. This tutorial covers how to build a website with Drupal 8 and the various functions you can use. However, there's a lot more to this system. That was a basic outline of the initial steps. After that comes the fun part of developing content and adding functionality.