Tips and Guides for Users

These tips, guides and instructions are in addition to the Videos and Stylesheet pages provided.

Start Here:

Step One: Watch the Training Video

Complete Basic Training Webinar given by Hester Designs for Chapters
https://communities.rmhcradar.org/p/do/sd/sid=2794&type=0

Step Two: Gather What You Need

1. Content or Text for the site. This should be unformatted plain text.
2. Your photos or images for the site.
3. An image or photo editor that will allow you to size and crop images for web use.
4. Review the entire Stylesheet page for reference. This will help you adjust your images before adding them to the media library.

Step Three: Learn Even More

1. Review the related training videos on specific operations.
2. Review the additional resource information below.

Step Four: Use the Page Builder Blocks

1. Always start with a Row Block.
2. Take the approach that everything can exist in it’s own block, instead of putting multiple items in one block. EXAMPLE: Instead of putting a headline, subhead, body text and photo into one text block… Make a text block for the headline, then another for the subhead, another for the body text. Use a Single Image block for the Image. Button block for a button and so on.
3. If something looks strange, or doesn’t work quite right, stop, and ask for help.

Specific Tips & Instructions

Adding Your Logo:

Prep your logo file as a JPG cropped to 305 px X 120 px. Upload this to the media library. Be sure to include an ALT tag.

In the dashboard, navigate to Qode Options > General. In the Logo Image – normal option, if there is a logo there, click the Remove button. Next click the Upload button and select your logo file from the media library. Save the changes.

Donate Button in Main Menu:

In the dashboard, navigate to Appearance > Menus. At the very top-right of the screen click the Screen Options button to reveal more options. Make sure CSS Classes is checked in the Show advance menu properties section.

On the same screen below look for Select a menu to edit and make sure the Header Menu (Top Navigation) is selected.

Add a Custom Link to the menu from the Custom Links section on the left. Insert your donation page URL and the link text Donate. Then click the Add to Menu button. Your new menu item will appear at the very bottom of the list.

Find the Donate item, and expand it by clicking on the far right down-arrow. Find the option for this item that is called CSS Classes (optional). In this field insert the following… donate_button – Then click the Save Menu button.

Helpful instructional video is here >

Page Set Up:

On each new blank page you will need to review the following to make sure your page will operate as intended. Navigate to a page’s Edit Page screen, and then review;

1. 1. Hide Page Title – In the section called Qode Title, set the Hide Title Area to Yes.Tip: If your page heading is doubled or too thick, check this setting.
   2. Set Template to Full Width – In the section called Page Attributes > Template, select Full Width in the drop-down menu.
   3. Use Backend Editor – When working on page content, you will mostly use the Backend Editor. You can toggle between Backend Editor and Classic Mode using the large blue button under the Permalink area at the top.
   4. Load a Template – When using a blank page, you may want to start with an existing template. Under WPBakery Page Builder click the 3rd icon to the right with the three colored blocks. Next select a template you wish to start with. The page will fill in from the template blocks. Here you can edit the blocks as needed.

Helpful instructional video is here >

I Messed Up a Page, Now What?

Here is how you can start over on a page…
1. Duplicate the page to use the duplicate draft page as reference.
2. On the Edit Page screen of the original, switche to Classic mode of the editor, and erase all the content.
3. Double check all Template and Title settings.
4. Load a fresh Interior Page Template.
5. Copy and paste text from the reference draft, into text blocks as needed. Create Single Image blocks for photos.

Open New Window with Links

To enable links to open a new window (select target), you must change a setting in the WP Accessibility area. Go to Settings > WP Accessibility > Miscellaneous Accessibility Settings > then uncheck Remove target attribute from links.

Changing Text for Breadcrumbs:

Go to Yoast SEO > Search Appearance > Breadcrumbs – In this tab is all the text settings.

Breadcrumbs Link to Wrong Page or Site:

Go to the Parent Page or Actual page with the wrong link, and re-publish it by clicking the blue update button.

Adding a Site Logo (Favicon):

Site Icons are what you see in browser tabs, bookmark bars, and within the WordPress mobile apps. Site Icons should be square and at least 512 × 512 pixels. The first step is to add this image into the Media Library. Download one here. Next, navigate to Appearance > Customize. Next click on Site Identity. AT the bottom you can see the area where you Remove or Change or image. Once you change your image, click the Publish button at the top. The X at the upper left will take you back to the Dashboard.

Utilizing Templates:

On a page’s Edit Page screen, you can utilize a template 1 of 2 ways…

1. Page Specific: Click the template Icon on the Page Builder. Select the template. The template elements load at the bottom of the page, and can be edited to custom fit this page. The control of these elements is controlled on this page only. Changes on these happen only on this page.

2. Global Control: Add a Templatura block to the your page, and select the template you want to appear as a Global element. These items cannot be controlled on the individual pages. Only controlled in the Templates area. Changes to these templates effect every version used Globally, and not the custom ones.

Template Tip: You can set up a page with just the items you want to use as a template. Using the Template icon in the page builder, you can save and name your template. Once saved visit the WPBakery Page Builder > Templates area to edit and tweak this section.

Call Out Boxes:

A call out box is very simple to create. You can either load one from the templates, or you can create one from any text block.

1. Add a text block to your page. In the options for this block, click on the Design Options tab. Here you will change a few settings.
2. Change the Border Color to yellow #FFC829. (or another color in the styles)
3. Change the Border Style to Solid.
4. In the CSS box area, change the border setting to 4px on all 4 areas.
5. In the CSS box area, change the border padding to 6% on top and 10% on the sides and bottom. Note: This setting may need to be adjusted depending on content.

Helpful instructional video is here >

Posts:

Posts work normally as in most WordPress sites. If you like you can use the Backend Editor to create custom post page layouts. If you do this you must use an Excerpt to fill in the text where the Post is referenced on other pages. On the Edit Post screen of a Post, scroll down to find the area called Excerpt, and add text here.

Tip: If the Post displays blank information under it’s photo and headline,
add an Excerpt.

Yellow Notice Full Width:

1. To create a full width Yellow Notice add a new Row Block and make it’s type Full Width and it’s background color Yellow (#FFC829).
2. Next inside this row add a Row Block and make it’s type In Grid and it’s text alignment Center.
3. Inside this row add a Text Block. Your message goes here.
4. To adjust spacing you can add an Empty Space Block bolow this text block. 20px should be close.

Helpful instructional video is here >

Make Logos or Icons Appear Uniform:

In order to make the logos all appear to look very uniform, you must first start with a uniform size like 600px wide by 400px tall. Each logo should be scaled within this space to be equal in size overall. It’s the same with Icons too. So in summary, every logo fits within the target space (600 x 400) but some may be wider or taller within that space depending on their design.

Tip: Set up an Adobe Illustrator file will multiple art boards all this target size. Size all the logos on the screen, and save each out for web.

Remove or Control Cookie Consent Box:

The Cookie Consent pop-up box is controlled by a Plugin called “GDPR Cookie Consent” – This can be removed by simply deactivating and/or deleting the Plugin. Documentation for the Plugin and it’s controls can be found here >

Notice Link on Home Page Not Working:

This problem actually occurs on the Row block below the notice. This is usually associated with the Home pages full-width feature photo. On this Row block, click on the Pencil Icon in the upper-right to edit the Row Settings. Look at it’s Design Options tab of this block. Remove the negative number from the “top margin” area. Save the block and Publish the page. Check the mobile version too. If there is no negative number found in the Row Settings, look in the Column Settings by clicking the Pencil Icon located in the top center of the block.

Additional Resources

Complete Basic Training Webinar given by Hester Designs for Chapters
https://communities.rmhcradar.org/p/do/sd/sid=2794&type=0

—

Bridge Theme / Qode Help Center
– https://helpcenter.qodeinteractive.com

Bridge Theme / Qode Video Tutorials
– https://www.youtube.com/channel/UC-h62vMXD5aZV5zAULD-SuA

WPBakery Page Builder Videos
– https://www.youtube.com/channel/UCDkY5di-MUoNOxWI_VfpJ7Q/videos

Using Templates with Templatura
– https://www.youtube.com/watch?v=-SpPH-xBVSY

Global Blocks with Templatura and WPBakery Page Builder
– https://www.youtube.com/watch?v=zXrgbkLv2cw

Basic Menus System Editing
– https://www.youtube.com/watch?v=qnXRQwpYiSY

9 Hidden Features in the WordPress Media Library Only Power Users Know
– https://premium.wpmudev.org/blog/wordpress-media-library-hidden-features/

WPBakery Page Builder Tutorial for Beginners

WordPress Image Editing: How to Crop, Scale, Rotate, Flip, Resize & Restore Images