The Northeastern BGC website is managed through WordPress, which can be challenging for beginners to navigate. Before proceeding with the instructions below, you'll need an account set up by Audrey. Once your account has been created, log in here.

Choosing a Page to Edit

To navigate to the page you want to edit, first open to your dashboard and select “Pages” from the column on the left. Next, locate the page you wish to edit and click 'Edit With Divi Builder’.

Note: Always click Save before exiting the webpage editor or your changes will be lost.

General Page Elements

Rows

Rows are what decide the layout of a page or a section of a page. To create a row, hover over the screen till you find a green plus symbol and then click it. A variety of options will appear, and select the layout you want. After you select the layout you want, an empty row will appear on the screen. A gray circle will appear on the screen, allowing you to add modules (like pictures or text) into each section.

Modules

Modules are subsections within rows where you can add different content, media, or navigating features. To add a module, ensure there is an empty section within a row- if there is, hovering over the section will cause a gray plus sign to appear. Click on the gray plus sign to option a menu with different module options.

Types of Modules

Text

Adding a New Text Box

To add a new text box, hover over the screen till you see a gray plus sign. Click the plus to create a new module. From the search bar, type in “Text” and scroll to the bottom to select the Text module option. A Text Box should appear on the screen.

Note: Text boxes may appear in different parts of the screen at different sizes depending on formatting of a “Row”. If you wish for the text box to appear differently, first change the Row’s layout.

Editing Text

Text can be edited by clicking on the contents of the text box and adding in text, but this can lead to issues with formatting. Instead, to ensure proper and consistent formatting, hover of the text box till you see a gray bar appear and click on the Gear symbol. This will open to a text box that allows for more formatting options. From here, add/adjust any content and click the green check to accept changes.

Images

Adding Images

To add an image, find and click on the gray circle in an empty row. Search and select “Image”. Click on the gray landscape, drag your photo into the Media Library, select your photo, and click Upload an Image.

Note: If you are trying to match the size of an image to others, you will have to resize the image’s dimensions (in pixels) to match the existing image. Image size cannot be changed within the website editor, so you will need to adjust this prior to upload.

Borders

Create an image border or round edges by selecting the module’s Gear icon and selecting “Design”. You can round corners by adding a pixel number to the “Rounded Corners” subsection, and change the border’s colors and width in the “Border Style” subsection. To crop the image down into a perfect circle, you will need to do a few extra steps. Your image should first be cropped to a perfect square. This can be done using this website. Once your image is a square, add the image onto the website. In the “Rounded Corners” section, change all for corners to 100%. Double check that it is a percentage, not a pixel count. Then press the check mark and check your changes.

Accordions

The Accordion module is used on our Publications page and allows you to separate boxes of text into small sections which can be expanded once clicked. To create a new accordion, click the gray plus and search for “Accordion”. From the gray bar, click the gear icon and add a new accordion item w/ relevant info.

Editing Accordion Items

To edit an item within an accordion, select that item’s gear icon within the main module’s settings. From here you can edit the design and content of a singular accordion item. Titles will appear when both collapsed and uncollapsed, while the body only appears when an item is uncollapsed. You can adjust the size and font of the title within the “Title Text” subsection of the item’s “Design” bar. Any other content can be added and edited in the body section- just like text boxes.

Articles

It’s good practice to periodically update the articles on our website (found on the home page) to ensure that they remain current. The homepage displays a total of six articles at any time, and new submissions should focus on our research or provide insights into the lab and PIs.

Adding Articles

To add an article, first select “Posts” from the left column of your dashboard. From the options given, select “Add New Post”. Type in the title of your article into the textbox above “Build Your Layout Using Divi”. Then, navigate to the column to the right and enter the following info: 1. Page Links To: From the two options, select “Custom URL”. Add in the link of the website and check off “Open in new tab” 2. Excerpt: Most articles will already have a small excerpt underneath the title that you can paste in 3. Categories: Select News 4. Tag: Type in News and click enter 5. Featured Image: Save an image from the article, select “Set Featured Image”, drag your image into the Media Library, select it, and press “Set Featured Image”. If the article doesn’t have a picture, find a relevant image online instead. Once done, click “Publish” in the top right corner. Head to the website’s home page and double check that your article has uploaded and is working properly.

Removing Articles

Articles may need to be removed if they are dated or to preserve formatting (the total number of articles should always be a multiple of 3). To remove an article, first select “Posts” from the left column of your dashboard. From the posts listed, hover over the article you are trying to delete and press “Trash”.

Advanced Website Edits

Once you have mastered the basics, you can learn more about advanced website elements that help you edit things like design, navigation, and other operational components. Many of the advanced features discussed below will require you to possess higher permissions on WordPress. To check if you have the highest level of permissions, open your WordPress Dashboard. If the column on the left does NOT include the “Appearance” tab, you will need to request additional permissions from Audrey.

Menus

Menus allow website visitors to navigate to different pages and even specific modules within a page. To edit or create menus, hover over “Appearances” found in the left column of your dashboard. Then, select “Menus”. Once on the Menus page, use the dropdown to select which Menu you would like to edit or select “Create a new menu” to make a new one. To add a menu to a page, create a Menu module.

Adding a Menu Item: Page

To add a new selection to your menu that directs users to a different page of the website, click the “Pages” dropdown on the left. Then, check the box for any pages you want to add. Once selected, click “Add to Menu”.

Once added to the Menu, you can click the drop-down arrow to edit each item’s navigation label. The navigation label is the text website viewers will see for a specific item on your menu. Click save once you are done.

Adding a Menu Item: Module

Menus can also be used to navigate to different parts of a page. To create a module item, select the “Custom Links” dropdown on the left. Then, in the URL box, type in a # and the module’s anchor link (e.g. #anchorlink). In the link text box, enter the title you would like to be seen on the menu. Once entered, click “Add to Menu”. Click save once you are done.

Structuring Menus

The order of items on the edit screen is the order in which the items will appear on the menu. To adjust the order, hover over an item and drag it to the desired location.

Menus can also have sub-items. To make an item a sub-item, drag it under the item you want it to be under. Then, drag the item slightly to the right, and it will become a sub-item. Click save once you are done. In the example below, Career’s sub–item is Research, which has a sub-item of both Graduate and Undergraduate students.

Anchor Links

Anchor Links Anchor links function similarly to URLs, and allow for hyperlinking to navigate within pages to specific modules. To create an anchor link for a module (allowing it to be hyperlinked to), open the module’s settings. Then, click on “Advanced” and select the “CSS ID & Classes” dropdown. In the CSS ID area, type in a brief and relevant tag to be the module’s hyperlink.