{"id":372,"date":"2011-06-18T23:33:43","date_gmt":"2011-06-18T23:33:43","guid":{"rendered":"http:\/\/www.infinitee-designs.com\/webdesign\/drupal-website-ckeditor-tutorials-adding-blog-posts-images-web-pages-ckeditor-module\/"},"modified":"2022-02-06T12:27:33","modified_gmt":"2022-02-06T12:27:33","slug":"drupal-website-ckeditor-tutorials-adding-blog-posts-images-web-pages-ckeditor-module","status":"publish","type":"page","link":"https:\/\/www.infinitee-designs.com\/webdesign\/drupal-website-ckeditor-tutorials-adding-blog-posts-images-web-pages-ckeditor-module\/","title":{"rendered":"Drupal Website CKeditor Tutorials &#8211; Adding Blog Posts, Images &#038; Web Pages with the CKEditor module"},"content":{"rendered":"<div class=\"bgwhite\">\n<p class=\"cent\"><img fetchpriority=\"high\" decoding=\"async\" class=\"wp-image-299 size-full aligncenter\" src=\"https:\/\/www.infinitee-designs.com\/webdesign\/wp-content\/uploads\/2010\/01\/ckeditor-interface.jpg\" alt=\"Drupal website CKeditor tutorial - The Drupal CKEditor Interface\" width=\"745\" height=\"413\" srcset=\"https:\/\/www.infinitee-designs.com\/webdesign\/wp-content\/uploads\/2010\/01\/ckeditor-interface.jpg 745w, https:\/\/www.infinitee-designs.com\/webdesign\/wp-content\/uploads\/2010\/01\/ckeditor-interface-300x166.jpg 300w\" sizes=\"(max-width: 745px) 100vw, 745px\" \/><\/p>\n<p class=\"cent\">The Drupal CKEditor Interface<\/p>\n<p class=\"cent\"><img decoding=\"async\" class=\" size-full wp-image-362\" src=\"https:\/\/www.infinitee-designs.com\/webdesign\/wp-content\/uploads\/2011\/06\/d6-info.gif\" alt=\"Drupal 6\" width=\"28\" height=\"18\">= Drupal 6 | <img decoding=\"async\" class=\" size-full wp-image-363\" src=\"https:\/\/www.infinitee-designs.com\/webdesign\/wp-content\/uploads\/2011\/06\/d7-info.gif\" alt=\"Drupal 7\" width=\"28\" height=\"18\">= Drupal 7<\/p>\n<p>&nbsp;<\/p>\n<h2>Drupal website CKeditor tutorial &#8211; Creating and Editing Content and Blog Posts<\/h2>\n<p>&nbsp;<\/p>\n<p><strong>In a nutshell&#8230;<\/strong><\/p>\n<ol>\n<li>Log in<\/li>\n<li>Go to a page and hit &#8220;Edit&#8221; or, from the very top admin menu (in black) Content &gt; Add Content.<\/li>\n<li>Add your Title, click on and use the &#8220;Summary&#8221; and add a 150 character Meta Tag description for the search engines.<\/li>\n<li>Add text and images. (To add images&#8230; Refer to the tutorial further down.)<\/li>\n<li>On the bottom of the page, hit &#8220;Meta tags&#8221; and type or, paste in the 65-70 character page title. for the search engines.<\/li>\n<li>DO NOT FORGET TO HIT &#8220;SAVE&#8221;!!!<\/li>\n<\/ol>\n<p>&nbsp;<\/p>\n<p><strong>In detail&#8230;<\/strong><\/p>\n<p>&nbsp;<\/p>\n<p class=\"p-icon-orange-arrow blubu\">&#8220;LOGGING IN&#8221;<\/p>\n<p>You must log in before you can edit or add content to your site. You can log in at:<\/p>\n<pre>http:\/\/www.Your-Infinitee-Website.com\/user<\/pre>\n<pre><span class=\"red\">(Replace \"<strong>http:\/\/www.Your-Infinitee-Website.com<\/strong>\" with your website's URL address)<\/span><\/pre>\n<p>&nbsp;<\/p>\n<p class=\"p-icon-orange-arrow blubu\">&#8220;FINDING ALL YOUR CONTENT&#8221;<\/p>\n<p>All content, pages, blog posts, articles etc&#8230; are listed on the Content page and links to edit these pages are there as well:<\/p>\n<p id=\"d6-info\">Content management &gt; Content<\/p>\n<pre>http:\/\/www.Your-Infinitee-Website.com\/admin\/content<\/pre>\n<p id=\"d7-info\">Content<\/p>\n<pre>http:\/\/www.Your-Infinitee-Website.com\/admin\/content<\/pre>\n<p>&nbsp;<\/p>\n<p class=\"p-icon-orange-arrow blubu\">&#8220;CREATING NEW PAGES, BLOG POST&#8221;<\/p>\n<p><strong>Note:<\/strong> Microsoft Word and other text editors add a lot of unnecessary code and non conforming formatting styles. It is best to just type out your initial page and blog text in Notepad (All programs&gt; Accessories&gt; Notepad) or preferably Notepad++ (my text editor of choice&#8230; Free &amp; open source available at: <a href=\"http:\/\/notepad-plus-plus.org\/\">http:\/\/notepad-plus-plus.org\/<\/a>) If you already have a word document or are copying content from a website that has it&#8217;s own HTML and CSS formatting, it is best to copy (Ctrl+C) and past (Ctrl+V) the text into Notepad then copy that text from Notepad and past it into the CKEditor text field. This will remove all formatting and the will result will be ideal WWW code conforming textual output.<\/p>\n<p>&nbsp;<\/p>\n<p><strong>1.<\/strong> Go to one of the Add content type pages that best fits the type of addition you want to add. Usually Blog or Page. From the administration menu: <a id=\"colorbox-info\" class=\"colorbox-load\" title=\"The administration menu can be found on the top of every page once you are logged in. I contains quick links to many of the site editing and administration areas of your website.\" href=\"https:\/\/www.infinitee-designs.com\/webdesign\/wp-content\/uploads\/2011\/06\/admin-menu.jpg\">Content &gt; Add content &gt;<\/a><\/p>\n<p><strong>Direct link path Drupal 6:<\/strong><\/p>\n<p id=\"d6-info\">Content management &gt; Create content &gt; Blog entry<\/p>\n<pre>http:\/\/www.Your-Infinitee-Website.com\/node\/add\/blog<\/pre>\n<p id=\"d6-info\">Content management &gt; Create content &gt; Page<\/p>\n<pre>http:\/\/www.Your-Infinitee-Website.com\/node\/add\/page<\/pre>\n<p>&nbsp;<\/p>\n<p><strong>Direct link path Drupal 7:<\/strong><\/p>\n<p id=\"d7-info\">Content &gt; Add content &gt; Blog entry<\/p>\n<pre>http:\/\/www.Your-Infinitee-Website.com\/node\/add\/blog<\/pre>\n<p id=\"d7-info\">Content &gt; Add content &gt; Page<\/p>\n<pre>http:\/\/www.Your-Infinitee-Website.com\/node\/add\/page<\/pre>\n<p>&nbsp;<\/p>\n<p><strong>2.<\/strong> <strong>Add a Title<\/strong> (*Make it descriptive and use keywords that might be used by someone searching for this page. No more than 60 characters including spaces!)<\/p>\n<p>Example: About Us, FAQ or Frequently Asked Questions about what we do.<\/p>\n<p>*It is very important for search engine optimization that the title contain <strong>no more than 60 characters<\/strong> including spaces and punctuation and utilize as many keywords that pertain to the page as possible and still be coherent English.<\/p>\n<p><strong>3. Summery<\/strong> &#8211; <em>Drupal 7 sites only<\/em>. <span class=\"red\">IMPORTANT<\/span>&#8230; Click (Edit summery) to open the summery field. The summery field is used by the search engines as the description of the page. Due to strict restritions by the search engines,<strong> the description should not be more than 150 characters including spaces and puncuation<\/strong>. Create the description using as many keywords pertaining to the page as possible and still be coherent English.<\/p>\n<p><strong>4.<\/strong> <strong>Body<\/strong> &#8211; Using the Text Editor &#8211; Add your textual content and or, an image. Type in your text or copy (Ctrl + C) and paste (Ctrl + V) text from another text program like Notepad (Start &gt; All Programs &gt; Accessories &gt; Notepad) Do not use MS Word or Wordpad. If your text was created in Word or Wordpad, copy (Ctrl + C) and paste (Ctrl + V) the text from word to Notepad to remove formatting and then copy and paste it into the CKeditor text area. (do not to USE ALL CAPS, this is considered SHOUTING, (except maybe to emphasize title headers) and use a spell checker!!<\/p>\n<p>&nbsp;<\/p>\n<h2><a id=\"image-import\" name=\"image-import\"><\/a>Uploading images from your computer with the File Browser.<\/h2>\n<p>&nbsp;<\/p>\n<p class=\"cent\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-365 size-full\" src=\"https:\/\/www.infinitee-designs.com\/webdesign\/wp-content\/uploads\/2011\/06\/image-browser.jpg\" alt=\"Drupal website CKeditor tutorial - The Drupal CKEditor\" width=\"757\" height=\"598\" srcset=\"https:\/\/www.infinitee-designs.com\/webdesign\/wp-content\/uploads\/2011\/06\/image-browser.jpg 757w, https:\/\/www.infinitee-designs.com\/webdesign\/wp-content\/uploads\/2011\/06\/image-browser-300x237.jpg 300w\" sizes=\"(max-width: 757px) 100vw, 757px\" \/><\/p>\n<p><strong>Note:<\/strong> You can create thumbnails while you are uploading your images&#8230; Check mark the thumbnail sizes that you would like to create before you hit &#8220;Upload&#8221;.<\/p>\n<p><strong>4a.<\/strong> To add an image, click on the small &#8220;Image Icon&#8221; <img loading=\"lazy\" decoding=\"async\" class=\" size-full wp-image-366\" src=\"https:\/\/www.infinitee-designs.com\/webdesign\/wp-content\/uploads\/2011\/06\/image-icon.jpg\" alt=\"Image editor button\" width=\"26\" height=\"26\"> (Mountains and Sun icon) see diagram above. More details on adding images below.<\/p>\n<p><strong>4b.<\/strong> To make an image or a piece of text into a link, select the text or image to activate it and then click on the &#8220;Link Icon&#8221; <img loading=\"lazy\" decoding=\"async\" class=\" size-full wp-image-367\" src=\"https:\/\/www.infinitee-designs.com\/webdesign\/wp-content\/uploads\/2011\/06\/link-icon.jpg\" alt=\"Create Link button\" width=\"27\" height=\"26\"> (Earth with chain links). Input the desired link.<\/p>\n<p>Example:<\/p>\n<pre>www.Your-Favorite-Website.com\/my-favorite-link.html<\/pre>\n<p>Note that the <strong>http:\/\/<\/strong> is already in place so, do not add a full link address with the http:\/\/<\/p>\n<p>Example:<\/p>\n<pre>http:\/\/<\/pre>\n<p>&nbsp;<\/p>\n<pre>www.Your-Favorite-Website.com\/my-favorite-link.html<\/pre>\n<p><strong>just add <\/strong><i><\/i><\/p>\n<pre>www.Your-Favorite-Website.com\/my-favorite-link.html<\/pre>\n<p>.<\/p>\n<p><strong>4c.<\/strong> If you have a blog post that is very long and want to shorten it&#8217;s length on the front page you can click at the point in which you want to create a teaser and then click the &#8220;Teaser&#8221; button. This will cut off the rest of the post and leave a &#8220;Read more&#8221; link to the rest of your post.<\/p>\n<p>&nbsp;<\/p>\n<p class=\"p-icon-orange-arrow blubu\">&#8220;ADDING THE PAGE AS A LINK TO THE PRIMARY MAIN MENU&#8221;<\/p>\n<p><strong>1.<\/strong> To add a new pageor post to a menu, click the <a id=\"colorbox-info2\" class=\"colorbox-load\" title=\"The Provide a menu link interface at the bottom of every page and post while in edit mode.\" href=\"https:\/\/www.infinitee-designs.com\/webdesign\/wp-content\/uploads\/2011\/06\/link-gui.gif\">&#8220;Menu settings&#8221;<\/a> link and give the link a title. For a &#8220;Parent item&#8221; (top level menu link) select Primary links and hit Save. Once you have created a Primary link you can add Sub menu links to it. While editing a page or post, you can add the page as a primary or, a child link. (For a <a id=\"colorbox-info\" class=\"colorbox-load\" title=\" While editing a page, on the bottom you will find the menu interface. Depicted here is a the pages link being added as a sub sub category (Grand child to the sub category (child) of the primary (Parent) under &quot;e;Main menu&quot;e;\" href=\"https:\/\/www.infinitee-designs.com\/webdesign\/wp-content\/uploads\/2011\/06\/edit-page-menu-gui.gif\">&#8220;Child link&#8221;<\/a> (under a primary link) hit the down arrow under &#8220;Parent item&#8221; and scroll to the parent item and select it. <strong>Note:<\/strong> A Primary must be created first.)<\/p>\n<p>&nbsp;<\/p>\n<p><strong>2b.<\/strong> Once you have created a primary link and you want to add a sub menu link (child link) to it you need to got to:<\/p>\n<p id=\"d6-info\">Site building &gt; Menus &gt; Primary<\/p>\n<pre>http:\/\/www.Your-Infinitee-Website.com\/admin\/build\/menu<\/pre>\n<p id=\"d7-info\">Structure &gt; Menus &gt; Main<\/p>\n<pre>http:\/\/www.Your-Infinitee-Website.com\/admin\/structure\/menu\/manage\/main-menu<\/pre>\n<p>and click the &#8220;Expanded&#8221; check box to enable sub links capability.<\/p>\n<p class=\"cent\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-309 size-full\" src=\"https:\/\/www.infinitee-designs.com\/webdesign\/wp-content\/uploads\/2010\/02\/link-order.jpg\" alt=\"Drupal website CKeditor tutorial - Re-ordering links and enabling sub menu links.\" width=\"609\" height=\"525\" srcset=\"https:\/\/www.infinitee-designs.com\/webdesign\/wp-content\/uploads\/2010\/02\/link-order.jpg 609w, https:\/\/www.infinitee-designs.com\/webdesign\/wp-content\/uploads\/2010\/02\/link-order-300x259.jpg 300w\" sizes=\"(max-width: 609px) 100vw, 609px\" \/><\/p>\n<p class=\"cent\"><strong>Primary links interface &#8211; Re-ordering links and enabling sub menu links.<\/strong><\/p>\n<p class=\"cent\">&nbsp;<\/p>\n<p><strong>2c.<\/strong> To add a sub menu link item (Child) to a Primary link, go to:<\/p>\n<p id=\"d6-info\">Site building &gt; Menus &gt; Primary<\/p>\n<pre>http:\/\/www.Your-Infinitee-Website.com\/admin\/build\/menu<\/pre>\n<p id=\"d7-info\">Structure &gt; Menus &gt; Main<\/p>\n<pre>http:\/\/www.Your-Infinitee-Website.com\/admin\/structure\/menu\/manage\/main-menu<\/pre>\n<p>Add a Title for the link then select the menu item to sub it under.<\/p>\n<p><strong>Note:<\/strong> You can change the position of the link in the menu list by click and dragging the control handle <img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-1988\" src=\"https:\/\/www.infinitee-designs.com\/webdesign\/wp-content\/uploads\/2022\/02\/menu-mover.jpg\" alt=\"Click, hold and drag handle icon to re-order the position of menu links\" width=\"13\" height=\"13\">&nbsp;icon to re-order the position of menu links. Then, click &#8220;Save configuration&#8221; on the bottom of the page.<\/p>\n<p><strong>2d.<\/strong> To add a sub menu link to a sub menu, (Sub sub link &#8211; Grand child) repeat the previous steps except, select the sub menu item to add another menu to. Remember to check &#8220;Expanded&#8221; and &#8220;Save configuration&#8221; on the<\/p>\n<pre>http:\/\/www.Your-Infinitee-Website.com\/admin\/build\/menu<\/pre>\n<p>page so the sub menus will be initiated.<\/p>\n<p>&nbsp;<\/p>\n<table class=\"cent\" width=\"100%\">\n<tbody>\n<tr>\n<td><strong>Creating a Primary Link<\/strong><\/td>\n<td><strong>Adding a Sub Menu Link to a Primary<\/strong><\/td>\n<td><strong>Adding a Sub Menu to a Sub Menu<\/strong><\/td>\n<\/tr>\n<tr>\n<td><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-311 size-full\" src=\"https:\/\/www.infinitee-designs.com\/webdesign\/wp-content\/uploads\/2010\/02\/add-to-primary-links.jpg\" alt=\"Drupal website CKeditor tutorial - Add a Primary Link\" width=\"222\" height=\"510\" srcset=\"https:\/\/www.infinitee-designs.com\/webdesign\/wp-content\/uploads\/2010\/02\/add-to-primary-links.jpg 222w, https:\/\/www.infinitee-designs.com\/webdesign\/wp-content\/uploads\/2010\/02\/add-to-primary-links-131x300.jpg 131w\" sizes=\"(max-width: 222px) 100vw, 222px\" \/><\/td>\n<td><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-312 size-full\" src=\"https:\/\/www.infinitee-designs.com\/webdesign\/wp-content\/uploads\/2010\/02\/sub-menu.jpg\" alt=\"Drupal website CKeditor tutorial - Adding a Sub Menu Link to a Primary\" width=\"223\" height=\"510\" srcset=\"https:\/\/www.infinitee-designs.com\/webdesign\/wp-content\/uploads\/2010\/02\/sub-menu.jpg 223w, https:\/\/www.infinitee-designs.com\/webdesign\/wp-content\/uploads\/2010\/02\/sub-menu-131x300.jpg 131w\" sizes=\"(max-width: 223px) 100vw, 223px\" \/><\/td>\n<td><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-313 size-full\" src=\"https:\/\/www.infinitee-designs.com\/webdesign\/wp-content\/uploads\/2010\/02\/sub-sub-menu.jpg\" alt=\"Drupal website CKeditor tutorial - Adding a Sub Menu to a Sub Menu\" width=\"220\" height=\"513\" srcset=\"https:\/\/www.infinitee-designs.com\/webdesign\/wp-content\/uploads\/2010\/02\/sub-sub-menu.jpg 220w, https:\/\/www.infinitee-designs.com\/webdesign\/wp-content\/uploads\/2010\/02\/sub-sub-menu-129x300.jpg 129w\" sizes=\"(max-width: 220px) 100vw, 220px\" \/><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p>&nbsp;<\/p>\n<p><strong>Note:<\/strong> You must create and save a page or post first before you will be able to re-position the link to page or post using the menu GUI.<\/p>\n<p>&nbsp;<\/p>\n<p class=\"p-icon-orange-arrow blubu\">&#8220;HOW TO ADD AND POSITION IMAGES IN POSTS&#8221;<\/p>\n<p>While you are adding new content or editing, pages, blog posts, articles etc., you can add an image by clicking on the image icon.<\/p>\n<p>&nbsp;<\/p>\n<p><strong>1.<\/strong> Once the &#8220;Image Properties&#8221; editor has loaded you can either add the URL address of an image if you know it or hit &#8220;Browse Server&#8221; to select an image that is already available on your site or click on the upload link on the upper left to upload an image from your computer.<\/p>\n<p>Tip: When adding images it is important to add a description of the image in the &#8220;Alternative Text&#8221; field. This is helpful to the visually impaired and it serves as definitions for the search engines as well.<\/p>\n<p>You can also force the image to the left or right of the page with &#8220;Align&#8221; left or right. Once you hit OK and have added your image you can click and drag it to any place in the editor. Usually if you add an image to a blog post with some text, you will need to add a &#8220;Teaser&#8221; <img loading=\"lazy\" decoding=\"async\" class=\" size-full wp-image-370\" src=\"https:\/\/www.infinitee-designs.com\/webdesign\/wp-content\/uploads\/2011\/06\/teaser-button.jpg\" alt=\"Teaser icon\" width=\"38\" height=\"34\"> break at the end point in which you would like the text and image displayed on the front page. Without the &#8220;Teaser&#8221; break your post will only display the image without text or the text without the image.<\/p>\n<p>&nbsp;<\/p>\n<p class=\"p-icon-orange-arrow blubu\">&#8220;ADDING HTML CODED CONTENT&#8221;<\/p>\n<p>Click &#8220;Switch to plane text editor&#8221; to add HTML coded content, then click again to bring up the CKeditor and you can edit text format, make text bold, add images, etc. (Only use this option lf you know your HTML code is good! There are filters that will fix most broken HTML and adding Java Script is not allowed)<\/p>\n<p>&nbsp;<\/p>\n<p class=\"p-icon-orange-arrow blubu\">&#8220;ADDING META TAG INFORMATION&#8221;<\/p>\n<p>For most of our sites we create default meta tags that will automatically be filled into the meta tag fields whenever a new page or blog post is created. It is highly recommended that you take the time and carefully adjust these fields to reflect the content of the new page or post you are creating using these guidelines. Following these steps will increase the chances of the new content to be added to the major search engines.<\/p>\n<p>&nbsp;<\/p>\n<p><strong>1.<\/strong> Click the <a id=\"colorbox-info\" class=\"colorbox-load\" title=\"The meta tags user interface - Where you can fine tune the information that the search engines use to catalog and display links to your site.\" href=\"https:\/\/www.infinitee-designs.com\/webdesign\/wp-content\/uploads\/2011\/06\/meta-tags-gui.gif\">&#8220;Meta Tags&#8221;<\/a> link and for &#8220;Title&#8221; or &#8220;Abstract&#8221; type in or copy and past in the same information you used for your page title (in the first field up top). (Should be no more than 60 characters).<\/p>\n<p><strong>2.<\/strong> For &#8220;Description&#8221;, type in or copy and past in the same information you used for your page title and then elaborate on it a little (Should be no more than 150 characters).<\/p>\n<p><strong>3.<\/strong> <strong>Note:<\/strong> <em>Keywords are no longer utilized by most search engines&#8230;<\/em> For &#8220;Keywords&#8221;, type in or copy and past in the same information you used for your page title to the beginning of the list comma separated. Example: <i>Drupal, Tutorials, Web Design Tutorials, Drupal Tutorials, Adding, Blog Post, web Pages, CKeditor, CKeditor tutorial.<\/i> If they don&#8217;t all fit you sill need to eliminate enough of the keywords from the end of the list to fit the new ones in the front.<\/p>\n<p><strong>Note:<\/strong> For a more in depth understanding of how to create Meta Tags for search engine optimization, read the <a href=\"https:\/\/www.infinitee-designs.com\/webdesign\/perfect-meta-tags-tutorial\/\">&#8220;Perfect Meta Tags&#8221; tutorial<\/a>.<\/p>\n<p><strong>Note:<\/strong> This only applies to Drupal 6 websites. All Drupal 7 websites have been pre-configured to automatically create Title and Description meta tags!<\/p>\n<p>&nbsp;<\/p>\n<p><span class=\"p-icon-orange-arrow blubu\">&#8220;OTHER FINAL STEPS&#8221;<\/span><\/p>\n<p><strong>1.<\/strong> You can leave the &#8220;URL path settings&#8221; alone and it will automatically create one for you or un-check &#8220;Automatic alias&#8221; and give the page a logical address of your choice Example: (use hyphens to separate words) faq-frequently-asked-questions.<\/p>\n<p><strong>2.<\/strong> &#8220;Publishing options&#8221; Always leave &#8220;Published&#8221; checked and optionally, if you would like the new post to be published to the front page then select that one as well. To force a post always be on the top, check &#8220;Sticky at top of lists&#8221;.<\/p>\n<p><strong>3.<\/strong> Hit submit and review your page. If you need to revise anything just hit &#8220;Edit&#8221; and make whatever changes you like again and again until it is perfect. Have fun!!! make some appropriate text bold, add some color and images&#8230; think like an advertising executive!<\/p>\n<p>&nbsp;<\/p>\n<p class=\"p-icon-orange-arrow blubu\">&#8220;SPECIFYING THE UNIQUE RESOURCE LOCATOR (URL) PAGE ADDRESS&#8221;<\/p>\n<p>Most of the site we build will have the &#8220;URL path settings&#8221; set to automatically create the address for you (this is set in a way that is best for search engine optimization) but, if you would like to specify particular address of your own,<\/p>\n<p><strong>1.<\/strong> Uncheck &#8220;Automatic alias&#8221;<\/p>\n<p><strong>2.<\/strong> Type in an alternative URL using keywords that reflect the pages content.<\/p>\n<p>&nbsp;<\/p>\n<p><strong>Note:<\/strong> Changing content and adding new pages and blog posts is fine but,<strong> it is not a good idea to change the URL\/link address&#8217; of old content.<\/strong> The URLs that have been on the site for a while have been picked up and cataloged by the search engines. If you change an address, it will take some time for the search engines to change the listings and people that try to follow the old links and bookmarks will get &#8220;404 page not found errors&#8221;.<\/p>\n<p>&nbsp;<\/p>\n<p class=\"p-icon-orange-arrow blubu\">&#8220;PROMOTING YOUR NEW CONTENT WITH SOCIAL MEDIA OUTLETS&#8221;<\/p>\n<p>I should not have to say this but&#8230; <strong>PROMOTE YOUR CONTENT!<\/strong> It is extremely advantageous to <u>frequently<\/u> add new blog posts about important updates, events and shows at least one week before the event. Just adding simple updates with minor information is valuable to show the major search engines that the site is actively participating in social media marketing.<\/p>\n<p>After creating new content or blog posts, hit the social networking buttons for each account that you have to help promote the updates to a mass market. The exposure that your content will get on social media site like Facebook and Twitter should be a major factor in your marketing strategies!<\/p>\n<p class=\"cent\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-317 aligncenter\" src=\"https:\/\/www.infinitee-designs.com\/webdesign\/wp-content\/uploads\/2010\/02\/promote-your-posts.jpg\" alt=\"Promote your posts!\" width=\"640\" height=\"442\" srcset=\"https:\/\/www.infinitee-designs.com\/webdesign\/wp-content\/uploads\/2010\/02\/promote-your-posts.jpg 640w, https:\/\/www.infinitee-designs.com\/webdesign\/wp-content\/uploads\/2010\/02\/promote-your-posts-300x207.jpg 300w\" sizes=\"(max-width: 640px) 100vw, 640px\" \/><\/p>\n<p>&nbsp;<\/p>\n<p><strong>Tip:<\/strong> Drupal 7 websites utilize contextual links to quickly access and edit block content within regions of your web pages. The contextual link icon <img decoding=\"async\" src=\"https:\/\/www.infinitee-designs.com\/webdesign\/wp-content\/uploads\/2014\/03\/gear-select.png\" alt=\"Contextual link gear select icon\"> will only be visible when you hover over these types of blocks and is not applied to all content or, older Drupal 6 websites. (See diagram below). When you click the <span class=\"cent\">&#8220;Configure block&#8221; link<\/span>, it opens the CKeditor in an overlay directly over the page you are on so, you can edit the block content without leaving the page&#8230; Nice feature!<\/p>\n<p class=\"cent\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-318 aligncenter\" src=\"https:\/\/www.infinitee-designs.com\/webdesign\/wp-content\/uploads\/2010\/02\/contextual-links-trigger.jpg\" alt=\"Drupal 7 Contexual links trigger and Configure block link\" width=\"600\" height=\"365\" srcset=\"https:\/\/www.infinitee-designs.com\/webdesign\/wp-content\/uploads\/2010\/02\/contextual-links-trigger.jpg 600w, https:\/\/www.infinitee-designs.com\/webdesign\/wp-content\/uploads\/2010\/02\/contextual-links-trigger-300x183.jpg 300w\" sizes=\"(max-width: 600px) 100vw, 600px\" \/><\/p>\n<p class=\"cent\">Drupal 7 Contextual links trigger icon and &#8220;Configure block&#8221; link.<\/p>\n<p class=\"cent\">&nbsp;<\/p>\n<p class=\"cent\">&nbsp;<\/p>\n<div class=\"right\">\n<table width=\"500\">\n<tbody>\n<tr>\n<td>\n<p class=\"blubu\">Download this Tutorial &gt;<\/p>\n<\/td>\n<td><a href=\"https:\/\/www.infinitee-designs.com\/webdesign\/wp-content\/uploads\/2022\/02\/Drupal-CKEditor-Tutorial.txt\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-319 size-full\" src=\"https:\/\/www.infinitee-designs.com\/webdesign\/wp-content\/uploads\/2010\/02\/Notepad.png\" alt=\"Download text file\" width=\"128\" height=\"36\"><\/a><\/td>\n<td>&nbsp;<\/td>\n<td><a href=\"https:\/\/www.infinitee-designs.com\/webdesign\/wp-content\/uploads\/2022\/02\/Drupal-CKEditor-Tutorial.pdf\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-320 size-full\" src=\"https:\/\/www.infinitee-designs.com\/webdesign\/wp-content\/uploads\/2010\/02\/pdf.png\" alt=\"Download PDF\" width=\"128\" height=\"37\"><\/a><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n<p><strong>Call me anytime if you have any questions and&#8230;<br \/>\nHave fun! | <a href=\"https:\/\/www.infinitee-designs.com\/webdesign\/contact\">Email<\/a><\/strong><\/p>\n<p>Ralph Manis &#8211; Infinitee Drupal Web Design<\/p>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>Drupal website CKeditor tutorial on adding blog posts, images via IMCE and web pages with the CKeditor module for beginners to expert users.<\/p>\n","protected":false},"author":1,"featured_media":299,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_eb_attr":"","site-sidebar-layout":"default","site-content-layout":"default","ast-site-content-layout":"default","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ngg_post_thumbnail":0,"footnotes":""},"vocabulary_1":[3,90,80,74,16],"class_list":["post-372","page","type-page","status-publish","has-post-thumbnail","hentry","vocabulary_1-drupal","vocabulary_1-drupal-tutorials","vocabulary_1-tutorials","vocabulary_1-web-design-tutorials","vocabulary_1-web-development"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.4 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Drupal website CKeditor tutorial Adding Blog Posts Images and Pages<\/title>\n<meta name=\"description\" content=\"Drupal website CKeditor tutorial on adding blog posts, images via IMCE and web pages with the CKeditor module for beginners to expert users.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.infinitee-designs.com\/webdesign\/drupal-website-ckeditor-tutorials-adding-blog-posts-images-web-pages-ckeditor-module\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Drupal website CKeditor tutorial Adding Blog Posts Images and Pages\" \/>\n<meta property=\"og:description\" content=\"Drupal website CKeditor tutorial on adding blog posts, images via IMCE and web pages with the CKeditor module for beginners to expert users.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.infinitee-designs.com\/webdesign\/drupal-website-ckeditor-tutorials-adding-blog-posts-images-web-pages-ckeditor-module\/\" \/>\n<meta property=\"og:site_name\" content=\"INFINITEE WEB DESIGN\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/infinitee.web.designs\" \/>\n<meta property=\"article:modified_time\" content=\"2022-02-06T12:27:33+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/i0.wp.com\/www.infinitee-designs.com\/webdesign\/wp-content\/uploads\/2010\/01\/ckeditor-interface.jpg?fit=745%2C413&ssl=1\" \/>\n\t<meta property=\"og:image:width\" content=\"745\" \/>\n\t<meta property=\"og:image:height\" content=\"413\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:site\" content=\"@Infinitee_Web\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data1\" content=\"14 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.infinitee-designs.com\\\/webdesign\\\/drupal-website-ckeditor-tutorials-adding-blog-posts-images-web-pages-ckeditor-module\\\/\",\"url\":\"https:\\\/\\\/www.infinitee-designs.com\\\/webdesign\\\/drupal-website-ckeditor-tutorials-adding-blog-posts-images-web-pages-ckeditor-module\\\/\",\"name\":\"Drupal website CKeditor tutorial Adding Blog Posts Images and Pages\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.infinitee-designs.com\\\/webdesign\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.infinitee-designs.com\\\/webdesign\\\/drupal-website-ckeditor-tutorials-adding-blog-posts-images-web-pages-ckeditor-module\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.infinitee-designs.com\\\/webdesign\\\/drupal-website-ckeditor-tutorials-adding-blog-posts-images-web-pages-ckeditor-module\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.infinitee-designs.com\\\/webdesign\\\/wp-content\\\/uploads\\\/2010\\\/01\\\/ckeditor-interface.jpg\",\"datePublished\":\"2011-06-18T23:33:43+00:00\",\"dateModified\":\"2022-02-06T12:27:33+00:00\",\"description\":\"Drupal website CKeditor tutorial on adding blog posts, images via IMCE and web pages with the CKeditor module for beginners to expert users.\",\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.infinitee-designs.com\\\/webdesign\\\/drupal-website-ckeditor-tutorials-adding-blog-posts-images-web-pages-ckeditor-module\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.infinitee-designs.com\\\/webdesign\\\/drupal-website-ckeditor-tutorials-adding-blog-posts-images-web-pages-ckeditor-module\\\/#primaryimage\",\"url\":\"https:\\\/\\\/www.infinitee-designs.com\\\/webdesign\\\/wp-content\\\/uploads\\\/2010\\\/01\\\/ckeditor-interface.jpg\",\"contentUrl\":\"https:\\\/\\\/www.infinitee-designs.com\\\/webdesign\\\/wp-content\\\/uploads\\\/2010\\\/01\\\/ckeditor-interface.jpg\",\"width\":745,\"height\":413,\"caption\":\"Drupal CKeditor and FCKeditor - Web Design Tutorials\"},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.infinitee-designs.com\\\/webdesign\\\/#website\",\"url\":\"https:\\\/\\\/www.infinitee-designs.com\\\/webdesign\\\/\",\"name\":\"INFINITEE WEB DESIGN\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.infinitee-designs.com\\\/webdesign\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.infinitee-designs.com\\\/webdesign\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/www.infinitee-designs.com\\\/webdesign\\\/#organization\",\"name\":\"Infinitee Designs\",\"url\":\"https:\\\/\\\/www.infinitee-designs.com\\\/webdesign\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.infinitee-designs.com\\\/webdesign\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/i0.wp.com\\\/www.infinitee-designs.com\\\/webdesign\\\/wp-content\\\/uploads\\\/2022\\\/01\\\/infinitee-web-design-logo.png?fit=430%2C150&ssl=1\",\"contentUrl\":\"https:\\\/\\\/i0.wp.com\\\/www.infinitee-designs.com\\\/webdesign\\\/wp-content\\\/uploads\\\/2022\\\/01\\\/infinitee-web-design-logo.png?fit=430%2C150&ssl=1\",\"width\":430,\"height\":150,\"caption\":\"Infinitee Designs\"},\"image\":{\"@id\":\"https:\\\/\\\/www.infinitee-designs.com\\\/webdesign\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/www.facebook.com\\\/infinitee.web.designs\",\"https:\\\/\\\/x.com\\\/Infinitee_Web\",\"https:\\\/\\\/www.instagram.com\\\/infiniteewebdesign\\\/\",\"http:\\\/\\\/www.linkedin.com\\\/in\\\/infinitee\"]}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Drupal website CKeditor tutorial Adding Blog Posts Images and Pages","description":"Drupal website CKeditor tutorial on adding blog posts, images via IMCE and web pages with the CKeditor module for beginners to expert users.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.infinitee-designs.com\/webdesign\/drupal-website-ckeditor-tutorials-adding-blog-posts-images-web-pages-ckeditor-module\/","og_locale":"en_US","og_type":"article","og_title":"Drupal website CKeditor tutorial Adding Blog Posts Images and Pages","og_description":"Drupal website CKeditor tutorial on adding blog posts, images via IMCE and web pages with the CKeditor module for beginners to expert users.","og_url":"https:\/\/www.infinitee-designs.com\/webdesign\/drupal-website-ckeditor-tutorials-adding-blog-posts-images-web-pages-ckeditor-module\/","og_site_name":"INFINITEE WEB DESIGN","article_publisher":"https:\/\/www.facebook.com\/infinitee.web.designs","article_modified_time":"2022-02-06T12:27:33+00:00","og_image":[{"width":745,"height":413,"url":"https:\/\/i0.wp.com\/www.infinitee-designs.com\/webdesign\/wp-content\/uploads\/2010\/01\/ckeditor-interface.jpg?fit=745%2C413&ssl=1","type":"image\/jpeg"}],"twitter_card":"summary_large_image","twitter_site":"@Infinitee_Web","twitter_misc":{"Est. reading time":"14 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.infinitee-designs.com\/webdesign\/drupal-website-ckeditor-tutorials-adding-blog-posts-images-web-pages-ckeditor-module\/","url":"https:\/\/www.infinitee-designs.com\/webdesign\/drupal-website-ckeditor-tutorials-adding-blog-posts-images-web-pages-ckeditor-module\/","name":"Drupal website CKeditor tutorial Adding Blog Posts Images and Pages","isPartOf":{"@id":"https:\/\/www.infinitee-designs.com\/webdesign\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.infinitee-designs.com\/webdesign\/drupal-website-ckeditor-tutorials-adding-blog-posts-images-web-pages-ckeditor-module\/#primaryimage"},"image":{"@id":"https:\/\/www.infinitee-designs.com\/webdesign\/drupal-website-ckeditor-tutorials-adding-blog-posts-images-web-pages-ckeditor-module\/#primaryimage"},"thumbnailUrl":"https:\/\/www.infinitee-designs.com\/webdesign\/wp-content\/uploads\/2010\/01\/ckeditor-interface.jpg","datePublished":"2011-06-18T23:33:43+00:00","dateModified":"2022-02-06T12:27:33+00:00","description":"Drupal website CKeditor tutorial on adding blog posts, images via IMCE and web pages with the CKeditor module for beginners to expert users.","inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.infinitee-designs.com\/webdesign\/drupal-website-ckeditor-tutorials-adding-blog-posts-images-web-pages-ckeditor-module\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.infinitee-designs.com\/webdesign\/drupal-website-ckeditor-tutorials-adding-blog-posts-images-web-pages-ckeditor-module\/#primaryimage","url":"https:\/\/www.infinitee-designs.com\/webdesign\/wp-content\/uploads\/2010\/01\/ckeditor-interface.jpg","contentUrl":"https:\/\/www.infinitee-designs.com\/webdesign\/wp-content\/uploads\/2010\/01\/ckeditor-interface.jpg","width":745,"height":413,"caption":"Drupal CKeditor and FCKeditor - Web Design Tutorials"},{"@type":"WebSite","@id":"https:\/\/www.infinitee-designs.com\/webdesign\/#website","url":"https:\/\/www.infinitee-designs.com\/webdesign\/","name":"INFINITEE WEB DESIGN","description":"","publisher":{"@id":"https:\/\/www.infinitee-designs.com\/webdesign\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.infinitee-designs.com\/webdesign\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.infinitee-designs.com\/webdesign\/#organization","name":"Infinitee Designs","url":"https:\/\/www.infinitee-designs.com\/webdesign\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.infinitee-designs.com\/webdesign\/#\/schema\/logo\/image\/","url":"https:\/\/i0.wp.com\/www.infinitee-designs.com\/webdesign\/wp-content\/uploads\/2022\/01\/infinitee-web-design-logo.png?fit=430%2C150&ssl=1","contentUrl":"https:\/\/i0.wp.com\/www.infinitee-designs.com\/webdesign\/wp-content\/uploads\/2022\/01\/infinitee-web-design-logo.png?fit=430%2C150&ssl=1","width":430,"height":150,"caption":"Infinitee Designs"},"image":{"@id":"https:\/\/www.infinitee-designs.com\/webdesign\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/infinitee.web.designs","https:\/\/x.com\/Infinitee_Web","https:\/\/www.instagram.com\/infiniteewebdesign\/","http:\/\/www.linkedin.com\/in\/infinitee"]}]}},"_links":{"self":[{"href":"https:\/\/www.infinitee-designs.com\/webdesign\/wp-json\/wp\/v2\/pages\/372","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.infinitee-designs.com\/webdesign\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.infinitee-designs.com\/webdesign\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.infinitee-designs.com\/webdesign\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.infinitee-designs.com\/webdesign\/wp-json\/wp\/v2\/comments?post=372"}],"version-history":[{"count":0,"href":"https:\/\/www.infinitee-designs.com\/webdesign\/wp-json\/wp\/v2\/pages\/372\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.infinitee-designs.com\/webdesign\/wp-json\/wp\/v2\/media\/299"}],"wp:attachment":[{"href":"https:\/\/www.infinitee-designs.com\/webdesign\/wp-json\/wp\/v2\/media?parent=372"}],"wp:term":[{"taxonomy":"vocabulary_1","embeddable":true,"href":"https:\/\/www.infinitee-designs.com\/webdesign\/wp-json\/wp\/v2\/vocabulary_1?post=372"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}