1/31/2022Your comprehensive guide to e-marketing

 Professional Drupal website design

Drupal is a powerful and free content management system that lets you create custom websites, blogs, portals, and more.  It has all the features you need to create a fully functional website that is highly customizable, scalable and free to use.

 Drupal Basics

 In this step-by-step Drupal tutorial we will show you how to create a website using the latest version of Drupal CMS which at the time of writing was Drupal 9.

 However, using Drupal is not as easy as creating a website with WordPress or website builders.  Although it is not difficult to determine to truly customize your site, knowledge of HTML and CSS will come in handy.

 Websites that use Drupal

 Before we get into the tutorial part of this post let's take a quick look at what Drupal can do for you.  If this is your first time using this CMS you may be asking yourself what exactly is a suitable Drupal.  It turns out that Drupal can be used to create almost any type of website:

•  Personal or business websites

•  Blogs and news sites

•  Potfolio, art, music and multimedia sites

•  Forums

•  E-commerce websites and online stores

•  Social Media

 This diversity has led to the fact that a number of prominent users rely on Drupal to power their websites.

 Drupal web hosting

 Before you can create a website you need a place where it is located and accessible aka web hosting.

 In hosting you need to consider four main factors:

•  Uptime – The uptime percentage shows the amount of time your site will be up and running.  We recommend choosing something that meets or exceeds the industry standard by 99.9%.

•  Page Loading Speed ​​– You should choose a host that loads faster than 850ms which is the current rate.

•  Customer Support – You will have to resolve support related issues at some point.  Thus it makes sense to choose a host that has high-quality and responsive customer support.

•  Price – Prices for hosting services vary widely.  Choose a rating that you can afford and that also has satisfactory ratings for the first three factors.

 Most providers should have the correct system requirements for Drupal (see documentation).  The best ones (like Bluehost) also have a “one-click install” for CMS like Drupal and Joomla so you don't need to mess with manual installation.

 Drupal install

 There are two ways to install and set up a Drupal website: One is to use a web hosting company with an Express Install option.  The other is to download and install Drupal manually.  We will explain both options below.

 Automatically install Drupal on Bluehost.com (Quick Install)

 Let's start with a tutorial on how to install Drupal automatically.  Once you have registered and grabbed a domain at Bluehost, login to your account and click on Advanced.

 Then scroll down and click on Portals / CMS.

 From there use the search field in the upper left corner to search for Drupal and tap on the result when you find it.  Then click on Install Now.

 

 Doing so will take you to this screen:

 

 Select Express Install in the upper right corner.  This will take you here:

 

 You will notice that your Bluehost domain is already set up in the default settings.  It's best to leave everything as is unless you know what you're doing.

 Enter your administrator username, password, and email address.  After you're done, just click install.  Before the installation continues, you will likely receive a message like this:

 

 This is normal so don't worry about it.  It only talks about the default files present in your Bluehost installation.  Simply check the box and click Install again.  The installation will then start.

 After you have successfully installed Drupal on your Bluehost domain, you can use the link How to install Drupal manually s shown to verify your new site and get to the login screen.

 How to install Drupal manually

 If you are not using Bluehost or a web host that can install Drupal automatically you can also set it up manually.  It is straightforward.

 Download files

 As a first step, go to the Download section on the official Drupal website and click on the big blue button.

 Once in your hard drive, unzip the file you just downloaded.  Then connect to your server via FTP (eg using FileZilla) and start uploading its contents to the server location your domain points to (usually the root directory).  This will take a bit

 Create a Drupal database

 In the meantime go to your host admin panel for MySQL databases.  Here be sure to create a custom database for your Drupal installation.  While the process will be slightly different depending on your service provider you should end up with the following:

•  Database name

•  A username with all privileges for this database

•  User password

•  database host address

 Keep all this information handy, you will need it soon.

 Run the installation

 Once you have downloaded the files, go to the domain of your site.  Doing so will start the Drupal installation process.

 The first step is to choose the language you want your site to work in.  Choose what you want and click Save and Continue.

 Next you need to choose what is called your installation profile.  This determines whether some features of your site will be preconfigured.  The options here may vary depending on the Drupal distribution you're using.  Once again make your choice and move on.

 In this tutorial we go to the standard Drupal profile.  If you are more experienced you can also use a simple option.

 In the next step the installation checks if your environment is sufficient to run the program.  Any problems will appear as warnings so you can address them.  Continue when you are satisfied.

 Now it's time to use the database information you collected earlier.  Enter the database name, user name and password.  If your MySQL host address is not localhost you can change it under the advanced options.  In the same place you can also set a database prefix if needed (eg when you have multiple sites in one database).  Save and continue once you're done.

 After that the actual installation begins.

 

 Finalize

 The final step is to prepare some basic information about your site.

 Here's how to fill it out.

•  Website Name - The name of your website.  You can change this later so don't get too caught up in getting it right.

•  Website email address – the email address at which users will receive site notifications.

•  Username - The username of the main administrator account on your sites.

•  Password - Set a strong password to keep your account secure and don't forget to confirm it again.

•  Email Address - The email address associated with the main user.  Drupal will automatically fill in the site's email address and change it as needed.

•  Default Country - The default country for your location.

•  Default time zone – The time zone your site will use to display dates and similar information.

 Ultimately you need to decide if your site should check for updates automatically and notify you if any are available.  When you are satisfied, save again and finish installing.

 User Interface ‎Drupal Site

 After the installation process is done this is what your newly created Drupal site will look like:

 When you log in (you can always access the login screen via http://yourdomain.com/user/login) at the top of the screen you will see links to all parts of the back end where you can make changes to a site.  We'll be using a bunch of them in this Drupal tutorial course but for the sake of understanding let's quickly highlight what each contains:

•  Content – ​​Here you can create basic content such as posts and pages.  It's also where you care about comments and finding your site's media library.

•  Structure – This is where you manage all the structural elements of your site including blocks, forms, content types, menus, and taxonomies.

•  Appearance – Contains theme settings and other options related to appearance as well as site updates.

•  Extension – Within this menu you can install, update and uninstall Drupal modules.

•  Configuration - Allows you to access site settings.

•  People – Contains options for users, roles, and permission levels.

•  Reports - Find logs, update information, status reports, errors, search terms and other information about your site here.

•  Help - The central hub for useful information about basic site management as well as any modules installed on your site.

 By the way under shortcuts you can define your own links to parts of the admin interface that you use often.

 This way you can improve your workflow and make it faster.  Clear?  Then let's make good use of this new knowledge.

 Change the appearance of the Drupal site

 At the bottom you see the front end of your site which means what your visitors will see.  For now it's still a bit bland so the first thing you'll want to do is change the default theme your site comes with to something else.  You can find an option for this under Appearance > Install New Theme.

 Search for a theme in the directory

 However unlike other CMS it is not possible to find themes from within the Drupal backend.  For that you need to go to the official Drupal theme guide.

 At the time of writing you have a choice of over 2,900 themes.  The guide gives you several ways to filter so you can find what you're looking for.

 Install a theme on the Drupal website

 When you find the right option, installing it on your site is very easy.  Download the theme from the directory (you find the options at the bottom) or right-click on the download link and copy its location.

 Then you can use the file or URL to upload the theme to your site.

 When you do that and come back to your site (there is a button in the upper left corner) you can see the new theme in action.

 theme . composition

 Once you install and activate a new website theme you will find it at the top of the list in the Appearance menu.  Most themes come with configuration options that you can access by clicking on the settings link next to them.  Alternatively use the Settings tab at the top and then choose the theme you want to edit.

 Both take you to this screen.

 Here you can make any changes your theme offers and depending on your theme you can even preview it at the same time.  This can be to change the color scheme, enable/disable user images, upload favorite logos and shapes, set backgrounds and filters, and much more.  When building a website with Drupal definitely make sure to swing by here so you can take advantage of all that your theme has to offer.

 Change Admin Theme

 Drupal not only allows you to change the front end of your site with themes but it also provides the same capability for the backend.  One thing you can try is the new experimental default back-end theme called Claro that comes with Drupal 9. You can find it under Uninstalled Themes in the Appearance menu.

 To use it click on the install link to bring it to your site (you will have to confirm your choice because it is currently beta) and wait for the installation to finish.  After that you can choose the new backend theme from the dropdown menu under the management topic.

 When saving the composition now the back end looks more modern and elegant.

 Set up a new front page

 Your site now looks better but is still somewhat empty.  Change is the next step in our Drupal lessons.

 Create a page and fill it with content

 For starters we want to create a front page so that visitors can see something when they swing.  So go to Content > Add Content > Primary Page.  It will take you to this screen:

 Here you can create content using a basic editor.  At the top you have the option to select the page title that will also appear on your site.

 Below that you find a link that says Edit Summary.  When you click on it it gives you the option to provide a summary of your post or page.  This is a type of snippet that will appear on certain parts of your site.

 Below that is an option to enter and format body text.  For example, you can make text bold and italic, add and remove links, create lists, select quotes, insert images, and use the dropdown menu to select headings.  Additional options such as inserting tables or horizontal separators are available when you switch to full HTML at the bottom.

 If you've ever worked with a word processor or any other content management system, you should find your way around quickly and be able to put together the content you want.

 Once done make sure that on the right side under URL Alias ​​you can select the slug or end of your page URL.  This happens simply by entering something like /front-page into the field.

 Then at the bottom Save Post and make sure to check the box before publishing.

 Mark as first page

 In order to use your new page as a front page you now have to go to Configuration > System > Basic Site Settings.  Here under the default first page enter the same approximate link you just specified for your new page.

 Once you do this and save the configuration your content should appear on the first page of your Drupal site.

 Create another page and add it to the list

 As the next step we now want to create an about page and add it as a menu item.  The first few steps are the same as before.  Create a base page, populate it with content, and set a static Slug (eg /about).

 However this time before posting make sure you click on Menu Settings and check the box that says Provide Menu Link.

 Here's how to populate the settings that appear:

•  Menu link title – This is the link text that users will see in the navigation menu.  Make it something instantly recognizable.  In this case "me" is a good choice.

•  Description - An optional description that will appear when someone hovers their mouse over a menu link.  It could say something like find out more about what I have to offer.

•  Parent Item - If you already have other menu items, this setting allows you to create child items.

•  Weight – With this setting you can specify the order of menu items.  The higher the number, the more they appear in the foreground.

 Once you're satisfied with your settings, save the page (with posting active).  Drupal should automatically return you to your front end where you will see your new page and new menu item.

 Navigation menu configuration

 But wait, what if the list is in the wrong order?  No problem, just hover over it and tap on the pen icon that appears.  This should give you the option to choose the Edit menu.

 When you do that you will reach the screen below.

 Here you can simply drag and drop the menu items in the order you want via the icon on the left.  Save when you're done to translate the changes to your site.

 Create and publish a blog

 Of course many people who want to make a website also want to start a blog.  Of course as a proper CMS Drupal also has functionality for that which is what this tutorial will deal with next.

 Writing the first article

 To create a blog we will first create some content.  Because what is a blog without content?  blank page.

 Creating blog content in Drupal is not that difficult.  When we were grouping pages together earlier you might have already seen that in addition to the canonical page there is a second type of content called an article.

 This is to create less static content like press releases, updates, and blog posts – you guessed it.  It works pretty much the same way as Pages: just create a new article, enter the title, summary, content, add the end of the URL, and publish it.

 However there are some differences.  Unlike the main pages, articles also come with comments settings on the right (by default comments are enabled) and the ability to add tags and a featured image at the bottom (browse, load, and add alt text).

 Additionally within the URL alias you should consider including the blog title in the URL so something like /blog/post-title if that's how you want to organize your content.  Otherwise, your blog posts will simply appear under http://yourdomain.com/post-title.  Within the authoring information the date and time of publication can also be changed if this becomes appropriate.

 Here is the end result:

 Set up a blog page

 Once a blog post has been created, it now needs to be displayed on the page.  So now anyone who knows the link can see it however wouldn't it be nice to display all blog posts in one place and arrange them chronologically?  exactly.

 So we have to create something called a view.  This is what Drupal calls content lists and creating them is not that difficult.  You can find the option for them under Structure > Views.

 view . configuration

 Here click Add View to access this screen:

 Here's how to fill out the basic information display:

•  Display name - This is the name that will appear in the list of views to help you identify it.

•  Description - This appears again in the Views list as an explanation of what the view does.  Fill it out optional.

 Under Display settings you want to choose to show article type content sorted by most recent first.  This way your latest blog posts will always be at the top.

 Then it's time to go to the page settings:

•  Create Page - Enable this option to have Drupal create a single page for this view.

•  Page title - the title of the page.  In this case a blog might be appropriate.

•  path – the end of the page URL.  Again the blog is an obvious choice.  Make sure to make it the same as what you chose in the post if you enter anything there.

•  Page display settings – choose the format in which you want to display posts (grid, HTML list, table, or unformatted list) and what part you want to show ( teasers, titles, linked titles, or fields).  In this case we chose an unformatted list and teasers.

•  Items to display – How many posts you want to display on the page.

•  Use pager – to specify whether to include pagination for this view.

•  Create Menu Link – We covered this earlier in the tutorial part of Drupal Menus.  Just don't forget to choose the main navigation from and configure the link address.

 Click Save and Edit and then you will find the newly created blog on the front end of your page.

 Delete and modify content in Drupal

 If you want to make changes or get rid of any of the pages or articles you have created, there is nothing easier than that.  Simply go to the content menu to see a list of all the content on your site.

 If you have a lot of them, use the filter options at the top to find what you're looking for by title, content type, post status, or language.

 On the right side click the Edit button to return to the editing screen for an individual piece of content.  Alternatively click on the dropdown button to access the delete option.

 You can also make changes to multiple items at once by checking the little boxes on the left side and choosing an action from the dropdown menu above.

 Besides publishing, unpublishing and deleting content you can also make it static and not sticky, promote it to the first page or remove it from there as well as save the content to update its timestamp.  Don't forget to click the Apply to Selected Items button to actually implement your changes.

 Activate and deactivate virtual units

 Well at this point in the tutorial you should have a basic understanding of how to get around Drupal.  If you have ever worked with a CMS or website builder before then it should be very familiar.  However the system can do a lot and can be extended for any kind of purpose.

 So you are more likely to use modules. As we mentioned these are small programs that can add all sorts of features and functionality to your Drupal site. The basic software comes with a set of them that you can find under Extend.

 Not all modules will be installed and activated by default. To change that just check the front box then scroll down and hit install. Your Content Management System (CMS) will take care of the rest.

 Conversely any modules you no longer need you can get rid of under the Uninstall tab.

 Final thoughts

 While the above tutorial is enough to give you a solid foundation for building a website with Drupal keep in mind that it takes some patience to fully harness its power. The learning process takes time and is one of the best ways to gain more experience playing around with the tools and system and figuring out how to do the things you want on your site.