Drupal is a great system to use when you need to set up a website quickly. Instead of trying to learn programming or paying someone else to build a site for you, Drupal offers all the elements for an online presence. Whether you’re creating a compelling business site or just need a personal blog, it can all be done with this open source content management system.
After installing Drupal, it’s time to start build. In this tutorial, I’ll go over the initial stages of creating a website with the system. In no time, you’ll have a piece of Internet real estate that looks great and is ready for traffic.
Setting Up Drupal with the Basics
The first step is to have a site web hosting that will be compatible with Drupal. There are a few requirements you’ll need to follow, such as making sure you have the correct version of PHP. Not all hosting platforms use the same software.
In earlier versions of Drupal, the WYSIWYG editor had to be installed separately from the system. However, Drupal 8 comes with the most popular text editing module, as well as the image uploader. If you are using an older version of Drupal, I suggest you upgrade or install the TinyMCE module and make changes to the settings.
To edit Drupal text editor settings, click the “Settings” link ” in the top toolbar.
Locate and click the “Editors and Text Formatting” control on the settings screen.
On the next screen, you can control how others edit content on the website while setting roles for preferred users. text editor. By default, Drupal gives you basic HTML tools and control when writing text. This can be changed from the Text Formats and Editors screen. It uses a drag-and-drop interface to organize which editor is used primarily.
For now, you just want to set up admin control. Hold down the mouse button, click the four-headed arrow for “Full HTML” and drag it to the top. Click the “Save” button at the bottom left.
Next, click the “Configure” button in the full HTML editor. This will open a window to further adjust your settings.
From this screen, you can modify the settings and how the editor appears when typing text. You can:
- Set user roles – This is based on the permissions you want to give to others writing on your site.
- Determine which text editor to use – If you install a different text editing module, you can change it from the dropdown menu.
- Drag and drop toolbar settings: Drag the editing tools you want to use and remove the ones you don’t.</ li
- Change image upload settings: directory, file sizes and maximum dimensions can be changed here.
- Enable filters: use checkboxes to assign how the editor behaves, such as convert URLs to links automatically or align images.
- Change filter processing order: By dragging and dropping, you can modify the way Drupal performs its orders.
Click the “Save Settings” button at the bottom when you’re done.
Now your website is ready for content using a custom text editor. There are many editing systems you can find on the internet if you don’t like the default CKEditor inside Drupal 8. However, this is one of the better platforms and it is stable.
Choose a layout and theme
The next step is to decide on a design and theme for the website. This is where some of the fun stuff starts.
The look and feel of your site will play a huge role in how visitors react to it. You can improve business relationships and increase the amount of time a person spends on your site reading content.
Click the “Appearance” link at the top of the admin toolbar.
From this screen, you can edit each theme by clicking the settings button of any one you have installed. The available settings may be different with each theme as developers offer different components. However, most will allow extensive customization in colors, as well as modifications to page elements.
In this tutorial, I’ll just show you how to install a new theme. We will make adjustments at a later date. For now, click the “Install New Theme” button above your theme list.
In this new window, you can directly install a theme from a website URL or load one directly from your computer. Drupal supports archives in ZIP, TAR, TGZ, GZ, and BZ2 formats. Once you select the new theme, click the “Install” button at the bottom left.
After loading the theme, go back to the Appearance area and click the “Install and configure as Default”.
<img src="https://www.greengeeks.com/tutorials/wp-content/uploads/2017/03/DrupalSetDefaultTheme.jpg" alt="Drupal Set Default Theme" /
You can find topics in many areas of the Internet, but I suggest you check the Drupal website first. These have the best chance of being stable with a reduced risk of security issues.
NOTE: Some older themes will not be portable to Drupal 8 due to specific files needed . for the latest version.
After installing the theme, you can now access its settings and make your custom changes.
Developing the home page
The home page it’s the first thing people will see when they visit your domain. In this Drupal site building tutorial, I’ll show you how to set up a static page to act as the front end. It’s one of the easiest ways to immediately get your site ready for traffic.
The first thing you need is to create a static page. Click the “Content” link in the top admin toolbar.
Next, you will see a button to “Add Content“. Click here 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 main page. Once your content is added, click “Promotion Options” on the right to expand your window. Select the checkbox next to “Promoted to Front Page”.
Once you’re done, click the “Save and Publish” button on the left below the text editor screen.
After saving the content, make a note of the page’s URL in the browser’s address bar. You will need this for the next part. For example, my URL shows the domain and “/node/1” below it. It is this part that you want to take note of.
Go back to the Settings menu on the top admin bar and click on “Basic Site Settings” in the System window.
Enter the URL you created for the homepage and click the “Save Settings” button.
You now have a home page ready and waiting for visitors.
Add informational pages
The next step in building a site with Drupal is to set up your static pages. Things like “About Us” or the description of the services you provide provide information to curious visitors and increase engagement.
To get started, return to the Content area and create a new basic page as described previously.
</ p
In this example, I’m creating an “About Us” page. On the right side of Drupal, find 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 want this alias to be something related to what you are creating. For example, you can use “/service” for a services page.
This alias will be important to know later. Make a note by writing the alias somewhere where you won’t lose the name.
Once you’ve finished creating the page, click the “Save and Publish” button at the bottom.
Adding a blog to your site
A blog is one of the most important parts of traffic generation and content marketing.It plays such a vital role that most companies host it when they build a Drupal website.
In earlier versions of Drupal, the blog was part of the core. However, the developers have since removed this capability to improve the overall functionality of the kernel. Fortunately, this module can be found on Drupal and installed on the website. I suggest looking for a good module to add a blog to the site.
To install the blog module, go to the “Extend” area of Drupal and click the “Install new module” button.
Open a new tab and download the Blog module from the Drupal website. It may be easier to keep it on your desktop. Once you have downloaded the file, go back to the Drupal admin tab of your browser and choose the file. Click install.
Go back to the Drupal Extender area and scroll down until you see the “Blog” module under the “Other” category. Click the checkbox next to Blog and click Install.
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 and Publish” button. In this tutorial, I make a simple post and add a blog tag.
Now that you have a blog post ready, it’s time to link the blog to the menu. Go to the “Structure” area of Drupal and click “Menus”.
Click the dropdown for “Main Navigation” and select “Add Link”.
From this screen, enter ” Blog” as the title of the menu link and “blog” as the link. You can add a description of the link that will be displayed when you mouse over it.
When you finish filling in the information, click the “Save” button.
Add a “Contact Us”
A contact page gives your visitors a way to get in touch with you.It’s a great addition if the site is for a business or just to add interaction.
Drupal 8 is coming with the contact module already installed and ready to go, however it can be found in the Extend area if you want to make sure the module is activated.
To create a contact form, go to the Structure area Drupal and click the “Contact Forms” link.
Click the “Add Contact Form” button to create a new form. Fill in the information and click the “Save” button at the bottom.
Once the form is complete, go to the Drupal 8 Structure area and click Menus. Again, it will change the main navigation dropdown 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’re done.
Now, it’s time to make sure the permissions are set for your visitors. Go back to the Drupal Extender area and expand the Contact control by clicking its description. Here you can change permission settings for various aspects of Drupal.
The system must have the Anonymous User checkbox selected for “Use contact form site-wide”. If not, add a check in the Anonymous User column to use the site-wide contact form and click “Save Permissions” at the bottom.
Main Menu Development
Settings Good navigation menus help visitors find content. It will play a prominent role in how others will use your website. After creating the Drupal website using the steps above, it’s time to create this layout.
First, you’ll need to go to the Drupal Structure section and click the Menus link. In this tutorial, I’ll just edit the main navigation that’s already available.To do this, click the “Edit Menu” button to the right of “Main Navigation”.
On the next screen, you’ll see that most of the files we created earlier are already available. The only thing missing is the “About Us” page. Click the “Add Link” button at the top. Enter the information for the menu link, including the name of the link.
Remember when I said to write that part? In this example, I’ll put the title of my link “About Us” and the “/about” in the link. Once you have filled in the link information, click the “Save” button.
Once you have all your links available, you can arrange them however you like 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.
Linking to social networks
Many themes come with the ability to link social networks to the website. In this tutorial, I’ll demonstrate where this feature is found in the Business Responsive Drupal website theme.
Go to Appearance in the Drupal admin panel. Locate your theme and click the “Settings” link. Scroll down until you find Social Media or similar options. Every developer is different, and social links can be tagged as something else. In this example, I’ll click the social media link to expand the options and enter the profile URLs.
Once done, click the “Save Settings” button at the bottom.
How about adding a feed from Twitter or another social site? You can add a feed from your social networks by adding a block and pasting the code directly into it. This is how you implement those feeds on your website.
Get the code from Twitter or Facebook to display your feed. This is done by going directly to those websites and setting up the account. Once you’ve customized the settings, the social site will give you a code to copy.
Go to the Drupal Structure area and click “Lock Layout”. Each theme will have different blocks to choose from. In this case, I’m going to use a right sidebar for the feed. Click the “Place Block” button next to the option on the right sidebar.
This will open a popup window giving you several options for pre-built content. Click the “Add Custom Block” button at the top.
Provide a description for the block. In this case, I am describing it with “Social Media Feed”. Click the “Font” control on the far right of the toolbar and paste your code. Click the Save button.
In the next window, select the region in which you want the code block to display. Remember, this is topic specific. In this example, my theme has the right sidebar available, so I’m selecting that location. Click “Save Block” when you’re done.
And there you have it. This tutorial has just explained how to create a website with Drupal 8 and the different features you can use. However, there is much more that this system can do. This was just a basic design from the initial steps. After this comes the fun part of developing content and adding functionality.
.