How to Create and Edit Your Site with Site Builder
Creating a site for your group comes with a long list of benefits. Your site acts as the official public face of your organization, allowing you to increase visibility and share information with your members, prospects, and anyone else who interacts with your group. Site Builder is a feature that empowers you to create and maintain a site -- including multiple pages within it -- and you don’t have to be an expert in design or HTML to use it. Whether you’re a group admin, chapter officer, or any other type of volunteer leader, Site Builder’s drag-and-drop functionality is intuitive and easy to learn.
How to Create a New Site
Before getting started, log in to your memberplanet admin portal. Your club admin permissions will allow you to have access to the Site Builder once you are logged in.
- In the left navigation sidebar, click Site Builder
2. Select the New Site button
3. Select a theme
Themes are skins or visual styles that can be applied to your site without affecting your content. When you first create your site, you pick a starting theme, but at any time you can change your theme to change your site’s look and feel. Even if you have added your content and decide to change your theme, you will not lose the content you’ve added.
Your new site will be set up and you’ll be taken to the editor.
Important notes:
Draft mode
Your site will be in draft mode until you are ready to publish it. Until you publish the site, it will remain hidden. Be sure to fill in all of the blank areas and add some images to your banner before you click the Publish button, or they will not be included when you publish your site.
Locked content
Several pages on your site will not be editable, since they contain mandatory text that was written by headquarters. For example, the “About Pi Beta Phi” page that serves as your site home page is not editable, but the “About Our Chapter” page is completely blank by default and allows you to add your own text and images to personalize the page.
Your new site will be set up and you’ll be taken to the editor.
Important notes:
Draft mode
Your site will be in draft mode until you are ready to publish it. Until you publish the site, it will remain hidden. Be sure to fill in all of the blank areas and add some images to your banner before you click the Publish button, or they will not be included when you publish your site.
Locked content
Several pages on your site will not be editable, since they contain mandatory text that was written by headquarters. For example, the “About Pi Beta Phi” page that serves as your site home page is not editable, but the “About Our Chapter” page is completely blank by default and allows you to add your own text and images to personalize the page.
Edit and Publish Your Site
Your site is made up of one or more pages. Each page has these main editable components:
Site name/brand
The site name or brand is at the top of every page. This is usually where you would put the name or your chapter or university – just click the text “At Our University” to change it to personalize it.
Site name/brand
The site name or brand is at the top of every page. This is usually where you would put the name or your chapter or university – just click the text “At Our University” to change it to personalize it.
Navigation menu
This list contains one or more navigation links. The navigation menu has been determined by headquarters and cannot be edited.
Banner
You can choose one of three banner types for your site by clicking on the “Banner type” button in the top-left corner of the banner area. These include Single Image, Sliding Banner, and Polaroid Banner. The banner type and banner images you choose will be shown on every page of your site.
This list contains one or more navigation links. The navigation menu has been determined by headquarters and cannot be edited.
Banner
You can choose one of three banner types for your site by clicking on the “Banner type” button in the top-left corner of the banner area. These include Single Image, Sliding Banner, and Polaroid Banner. The banner type and banner images you choose will be shown on every page of your site.
Sliding banner: This banner shows a slideshow of multiple images that fade in and out in the order you determine. After you click the Add Images button and select your images, you can change the order of the images, remove images, or use the Image Editor to customize the images in the slideshow.
Polaroid banner: This banner takes multiple images that you upload and displays them as though they were a loose pile of polaroid photographs scattered across a table. Just like the slideshow banner, upload your images, put them in order, and edit them as desired.
Single image: This banner type just displays a single featured image.
Main content section
This is the area where you can add your own text and images using the Elements tab.
Footer
The footer content has been determined by headquarters and cannot be edited.
Polaroid banner: This banner takes multiple images that you upload and displays them as though they were a loose pile of polaroid photographs scattered across a table. Just like the slideshow banner, upload your images, put them in order, and edit them as desired.
Single image: This banner type just displays a single featured image.
Main content section
This is the area where you can add your own text and images using the Elements tab.
Footer
The footer content has been determined by headquarters and cannot be edited.
Types of editors in Site Builder
You have an array of site editing tools at your fingertips to create a professional site, including these four main editors:
- Elements editor
- Page navigation
- Style editor
- Settings editor
Elements editor
Select Elements in the top navigation bar. From here you can add, edit, or remove content such as text and images to a page on your site. The Elements editor lets you edit content on one page at a time.
The Elements editor is divided into two main parts:
Select Elements in the top navigation bar. From here you can add, edit, or remove content such as text and images to a page on your site. The Elements editor lets you edit content on one page at a time.
The Elements editor is divided into two main parts:
- Content palette
- Page canvas
When you add content to a page, you do it one chunk at a time. For example, you might first add some text to the page, then add an image second, and then add social media links third. Each chunk of content is called a content block and each type of content block is represented by a box in the left-hand sidebar. This sidebar is called the content palette.
Add content
To add content to your page:
Note: You can only drag content blocks to the main content area, and you can only add content blocks onto pages that are not locked; the site name and banner edited in different ways. Most content must be edited after you drag the component onto the canvas. For example, text blocks are empty by default, and images are placeholder icons until you add your own text and images.
b. Image blocks: Double-click the block to change the image, or click the block and then select the Edit button to use the Image Editor to customize your image.
c. Social and Button blocks: Click the block and then click the Edit button.
- Click a content block on the content palette and drag it to the right, onto the page or canvas
- Drop it into the place on the page that you want it to appear by releasing the mouse button
- To add the actual content: Click on the component itself or the edit icon
Note: You can only drag content blocks to the main content area, and you can only add content blocks onto pages that are not locked; the site name and banner edited in different ways. Most content must be edited after you drag the component onto the canvas. For example, text blocks are empty by default, and images are placeholder icons until you add your own text and images.
- To add the actual content:
b. Image blocks: Double-click the block to change the image, or click the block and then select the Edit button to use the Image Editor to customize your image.
c. Social and Button blocks: Click the block and then click the Edit button.
Edit existing content
Each content block has a few different things you can customize by clicking the edit or pencil icon on its component block on the canvas.
Images
If you’ve already added an image to an image block, when you double-click the edit icon, you’ll have the option to swap out a new image. You can also resize an image by clicking on the image and clicking and dragging the blue boxes on the corners and sides.
Clicking the Edit button will open the Image Editor, which includes graphic design controls for color balancing, adding fun graphics to the image, and adding frames.
Images
If you’ve already added an image to an image block, when you double-click the edit icon, you’ll have the option to swap out a new image. You can also resize an image by clicking on the image and clicking and dragging the blue boxes on the corners and sides.
Clicking the Edit button will open the Image Editor, which includes graphic design controls for color balancing, adding fun graphics to the image, and adding frames.
Text
Upon clicking on a text block, some basic formatting tools will appear for you to style your text and add links.
Upon clicking on a text block, some basic formatting tools will appear for you to style your text and add links.
Social media icons
When you click on the content block and click the Edit button, you will be able to add the URL for each social media icon and re-order them. If you don’t have URLs for all of the social media sites, just uncheck the checkbox next to them and they will be removed from your page.
Buttons
Once you click on the content block, you will be able to add a URL to your button. Any URL, including external links or links to forms, can be added.
When you click on the content block and click the Edit button, you will be able to add the URL for each social media icon and re-order them. If you don’t have URLs for all of the social media sites, just uncheck the checkbox next to them and they will be removed from your page.
Buttons
Once you click on the content block, you will be able to add a URL to your button. Any URL, including external links or links to forms, can be added.
Move content around on page
To change where something is on your page, you can click and hold the move icon on the content block and drag it to a different place.
You can move content above, below, or next to another block of content. If you move a block next to another block, the editor will try to resize all of the blocks on that row to fit as nicely as possible.
Remove content from the page
To remove a block of content from the page, click the block and click the Delete button in the upper right corner.
Save changes
Changes you make in the Elements editor are auto-saved. This will save changes to your draft, but they won’t be visible to site visitors until you publish the site. Your changes will also be saved any time you click off of a content block or leave the Elements editor to go to a different part of the Site Builder.
Note: Because changes are saved automatically and frequently, there is no undo button or a way to revert to an earlier draft.
Note: Because changes are saved automatically and frequently, there is no undo button or a way to revert to an earlier draft.
Preview your site
At any time, you can preview your changes by clicking on the Preview button on the top right. In the Device dropdown menu, you also have the option to preview what your site looks like on desktop, tablet, mobile landscape, and mobile portrait views.
Page navigation
You can use the page navigation to go to a selected page and edit the content on the page.
You can use the page navigation to go to a selected page and edit the content on the page.
- In the top navigation bar, click Pages
- Select the desired page you wish to edit
You can also navigate to another page by clicking on the nav menu link in the canvas itself.
Theme selection
The Themes tab allows you to change the theme that your site is using:
Note: Changing your theme or visual style will NOT delete your content; your content will be preserved and carried over to the new theme. Remember that this change won’t be seen by visitors on your site until you re-publish your site.
The Themes tab allows you to change the theme that your site is using:
- Click the Themes tab
- Click the Change Site Theme link
- Select the new theme you’d like to use on your site
Note: Changing your theme or visual style will NOT delete your content; your content will be preserved and carried over to the new theme. Remember that this change won’t be seen by visitors on your site until you re-publish your site.
Publish and re-publish your site
Before you publish, it is a best practice to preview your site by clicking the Preview button near the top right. When you are ready to make your site visible to visitors, you can publish it for the first time by clicking the Publish button, which is next to Preview.
Important note: After you’ve published your site, you will always have two versions of it that exist at the same time: a draft version and the published version. When you edit your site and your changes are saved, only the draft version will be changed and stored. When you click the Publish button to re-publish your site, all of your saved changes will be copied from your draft version to the published version, meaning that the changes become visible to visitors on your site. This allows you to make multiple changes to the site and release them all at once instead of exposing your visitors to the changes as you make them one at a time.
Important note: After you’ve published your site, you will always have two versions of it that exist at the same time: a draft version and the published version. When you edit your site and your changes are saved, only the draft version will be changed and stored. When you click the Publish button to re-publish your site, all of your saved changes will be copied from your draft version to the published version, meaning that the changes become visible to visitors on your site. This allows you to make multiple changes to the site and release them all at once instead of exposing your visitors to the changes as you make them one at a time.
Settings editor
The Settings editor is for the behind-the-scenes changes to your site. You can change your favicon, tweak the ways that your site shows up on search engines like Google, or change the URL that visitors use to come to your site. Headquarters can also track the traffic on your site with Google Analytics.
The Settings editor is for the behind-the-scenes changes to your site. You can change your favicon, tweak the ways that your site shows up on search engines like Google, or change the URL that visitors use to come to your site. Headquarters can also track the traffic on your site with Google Analytics.
Edit Your Site Settings
The settings of your website help determine its visibility to the public, the look of your website icons, and how easy it is for potential visitors to locate your website in search engine results. Adjusting these to your desired specifications with search engine optimization (SEO) in mind will enable you to customize how people view and find your site.
Change your favicon
Your site’s favicon is the small image that is displayed on the far-left edge of the browser tab when someone is visiting your site. Favicons are also displayed in a user’s bookmark bar or list. Your favicon will appear as a blank page until you customize it.
- Go to the General tab of the settings editor
- Click the image icon in the favicon section to change or upload a new image
Pro Tip: Your favicon is a small but important detail that affects the first impressions of your site’s visitors; it’s vital to establishing credibility and just as important as the other branding elements on your site. Use one that reflects your group’s logo or brand. Optimal size is 64 x 64 pixels. The best format is .png. If your favicon has a transparent background and it is saved as .jpg, the background will appear white.
Change how people can find your site (search engine settings)
Key factors that affect traffic to your site include how it appears in search engine results, and how accurate its search engine description is. Editing your site description and meta tags to take advantage of keywords is considered an SEO best practice. Meta tags are snippets of text placed within your site’s HTML code (not visible on the page itself), which help tell search engines what your web page is about. If you do not edit your site description or meta tags, search engines will display text based on relevancy to a search query.
To hide your site in search engine results, go to the Marketing tab of the settings editor and click the toggle button in the search engine section. You should see it switch from Enabled to a Disabled setting.
To hide your site in search engine results, go to the Marketing tab of the settings editor and click the toggle button in the search engine section. You should see it switch from Enabled to a Disabled setting.
Pro Tip: Your site description is sometimes used as the snippet of text that appears beneath a link when you share your site on social media. Keep your description concise to avoid having it appear truncated in search results and on social media. The limit is usually 160 characters or less.
Track your site (Headquarters admins only)
In order to track who is coming to your site, you can link a Google Analytics account to your site on the Site Traffic tab of the settings editor. You will need to create a Google Analytics account if you don’t already have one. To track your site, Google uses a tracking ID, which you can get by following these steps:
5. In Site Builder, click on the Site Traffic tab of the settings editor
6. Copy and paste your Google Analytics tracking ID in the field provided
7. Click Save
- In your Google Analytics account, click Admin
- Select an account from the menu in the Account column
- Select a property from the menu in the Property column
- Under Property, click Tracking Info > Tracking Code
5. In Site Builder, click on the Site Traffic tab of the settings editor
6. Copy and paste your Google Analytics tracking ID in the field provided
7. Click Save
Change how people visit your site (Headquarters admins only)
The benefit of having an easily recognizable URL for your website is that it is easier for visitors to remember. You have the ability to change your subdomain, which is content you can put in part of your URL, to ensure that it is directly reflective of the type of site you have. Your subdomain can also help you build your brand, better organize your existing website categories, and impact your SEO. Your default site URL will appear as [GroupName].memberplanet.com.
Headquarters has also set up a more personalized URL for all chapter websites that follows the formula [GroupName].pibetaphi.org. This URL is predetermined and must be entered exactly, so after you have created your site, a headquarters admin will take care of setting up your custom domain.
Headquarters has also set up a more personalized URL for all chapter websites that follows the formula [GroupName].pibetaphi.org. This URL is predetermined and must be entered exactly, so after you have created your site, a headquarters admin will take care of setting up your custom domain.
Glossary
Domain name: any name registered in the Domain Name System (DNS).
Meta tags: snippets of text placed within your site’s HTML code (not visible on the page itself), which help tell search engines what your web page is about.
Navigation bar: the area located near the top of your site where your visitors can click a link to move to different pages on your site. Nav bar links can also be used to send visitors to other sites outside of your own. By default, every page on your site is shown as a link in the nav bar.
Navigation menu: a list that contains one or more navigation links.
Site name or brand: the site name or brand is at the top of every page. Depending on which template and theme you’re using, you can add text, images, or both. This is usually where you would put the name or your site, your group, and/or your logo.
Subdomain: the content you can put within your URL to better brand your website or impact search engine optimization (SEO).
Themes: skins or visual styles that can be applied to your site without affecting your content.
Meta tags: snippets of text placed within your site’s HTML code (not visible on the page itself), which help tell search engines what your web page is about.
Navigation bar: the area located near the top of your site where your visitors can click a link to move to different pages on your site. Nav bar links can also be used to send visitors to other sites outside of your own. By default, every page on your site is shown as a link in the nav bar.
Navigation menu: a list that contains one or more navigation links.
Site name or brand: the site name or brand is at the top of every page. Depending on which template and theme you’re using, you can add text, images, or both. This is usually where you would put the name or your site, your group, and/or your logo.
Subdomain: the content you can put within your URL to better brand your website or impact search engine optimization (SEO).
Themes: skins or visual styles that can be applied to your site without affecting your content.
|
© 2020 memberplanet, LLC. All rights reserved.