Each site has its own BLOG database, which allows each location to post articles that pertain only to them. Most of the time, however, articles will cover broader topics that are beneficial to more/all of the locations. While writing the blog post it is possible to “Broadcast” the article, which will copy the article to whichever site(s) you select.
When posting your article, you will need to choose where to broadcast to by selecting from the broadcast options box:
Each site uses taxonomies (categories) when looking at the blog database to determine what needs to be shown. When writing your blog post (no matter which site you are logged in to) needs to have the category(ies) selected so that the intended sites know if it is relevant for them to display. If you want displayed on all location sites, you can select “All Locations”.
This WordPress Mult-Site setup includes a page builder called Visual Composer that comes with a lot of pre-built shortcode widgets to allow you total control of the layout & features of your blog posts.
Let’s walk through an example post to get you up-to-speed on how to use the page builder and broadcast to the other sites in this multi-site build. In this example, I will be logging in under the base account: ser2017, but as mentioned above, you can write & post from any one of the sites.
We’ll start by navigating to Posts > New Post on the left-hand navigation pane.
The New Post editor page opens, and should look like this:
If you are planning to write a post using the standard WordPress page layout, you can just add the Title and Article copy into the provided fields (shown below), then select your categories and choose which sites to broadcast to.
For this example we are going to take advantage of Visual Composer to create our layout. To switch to the VC editor, I’ll click the blue button titled “Backend Editor”.
The VC Editor default panel is now shown in place of the WordPress wysiwyg editor.
Since we aren’t working with any templates at the moment, I’ll select the “Add Element” button to begin creating the page layout.
You can see in the panel that pops up that VC gives us a lot of tools to work with to add great looking & powerful features to the post. I highly recommend testing a few of these out on a Post Draft to see what all is possible.
Since I want to control the layout of the post, I will start by selecting “Row”.
Rows are a base structure for a grid layout. It defines a group that stays together, and the next row is stacked underneath, like so:
Now that I’ve made my first element selection in VC, we can see the editor pane shows us a canvas of our layout so far… our single row.
On the right-hand side of the Row, we are given a few tools to work with:
On the middle-top of the Row, we are given a couple more tools:
In the center of the Row, there is a plus sign that allows you to add new VC elements inside of the row; the same as we did when we added this row to the canvas.
On the left-hand side of the row, we are given the options to:
Columns fit inside rows and determine how the content is split up. By default, a Row contains 1 column. The content within the 1 column is spread across the entire row. If you want to split up your content by having, say, text on one side and an image on the other, you will need to increase the number of columns.
This site is using a base layout structure that allows for up to 12 columns per row. When you have more than 1 column in a row you can divide that space up so that 1 column takes 2/3 of the row, while the second column takes up the remaining 1/3 of the row.
The easiest way to select the column layouts is to mouse-over the Column Icon on the upper-left and choose from the options there.
I’ve gone with a nice 2/3 – 1/3 column layout. Notice that our Row is now split into 2 columns, and we are given individual options per column to edit its properties or add new VC elements within them.
Now that we’ve got our basic row laid out the way we want, lets start adding the content. I’m going to start by adding some TEXT to the left column, and I’ll do that by clicking the plus button in the center of the column. This will pull up the VC Element selection again, and this time I’ll choose the Text Block element.
The Text Block looks just like most wysiwyg editors, such as the WP default editor, Word, and so on. I’ll add the text I want for this spot on the page.
Next I’ll select the plus sign in the center of the right-hand column to add a new VC element to that section. This time I’ll select the “Single Image” element.
The Single Image options box pops up, and gives us some control over how this image will display. I’ll start by selecting my image, and I’ll do that by clicking the plus button in the image section.
I can choose from any of the images that have already been uploaded to the WP Site that I’m logged into, or I can upload my own image by clicking the “Upload Files” tab in the upper-left of that window, then clicking the Select Files button to find an image on my computer I want to upload.
For this example, I’m going to grab an image that’s already uploaded. Once selected in the selection pane, I can add or edit the image title and alt text to help with SEO.
Now that the image has been selected, I can see a little thumbnail on the Single Image element settings pane.
Under that thumbnail is a section that allows you to control image size.
You can choose default WP sizes by typing:
This tells WordPress to create an optimized version of the image at one of those default sizes.
You can also type:
This tells WP to use the image’s default size, but will scale it down to fit the column’s width.
And lastly you could type in specific dimension size (in pixels), width by height:
In the example above, WP will change the image to 250px wide by 300px high.
I’m going to type “full” for my example because I want the column to control the size. Then I’ll click “Save Changes”
Now that my first row is done, I’m going to add a new row underneath by clicking the plus button and selecting the Row element from the VC Element pane.
Since I know I want this row to be full width, I don’t need to add any columns. I want this row to contain text, so I will mouse-over the text in the row above until I see the green set of icons. I will select the duplicate option to get another text block element.
Then I’ll mouse over that element until I see the green icon list. I’ll move this element by holding down the mouse button when I am over the drag icon, and I’ll drag it down into the row below – releasing the mouse when it is placed within the row.
I’ll then add additional dummy text to fill out this section by mousing over the text element and clicking the pencil icon; make my edits and save.
I would like the first row to be a heading for this post, and VC gives us some great tools to do that.
To start, I’ll click the upper right hand corner pencil icon of our row to open the options panel.
In the Row Options panel I’ll start on the General tab and select “Stretch Row”.
Then I’ll choose the Design Options tab and set the background color that I want this row to be. I’m using the default dark color used in the Serenity sites: #1b1b1b
Now I’ll go to the Background tab. There are some cool options here, but for now I’m going to be adding a parallaxing background image. Parallaxing is when 1 item on the page scrolls slower than the rest of the items on the page. This effect adds a 3-dimensional depth to the page.
I’ll click the plus button to add my image, just as we’ve done with all of our other images, and I’ll leave the other settings as is, then click save changes.
Since we just made this background dark, I’ll need to go back to our text and change the color so that it stands out. I’ll mouse over the text block until I see the green options list, and I’ll click the pencil to edit.
I’ll select all the text, then I’ll click the font color button and change it to white, then I’ll click the Save Changes button.
I want to add a button under this text, so I’ll click the small plus icon in that column (right under the text block).
This pulls up our old friend VC Elements selection pane. I’ll scroll down and select the Button element.
Again, VC gives us an options panel with plenty of features. I want to duplicate a button I already created for the Serenity sites, so I’ll click the presets drop-down and select “serenity-grad-button”, then clicking the orange “reload” button. This will overwrite the default button with our presets.
I can change the url, button text, and icon, then click save changes.
Ok, that’s enough work to give us an idea of how it’s coming along. To preview the draft, click on the button titled “Preview” in the upper-right of the page. This will open preview of the post within a new tab.
And here’s what we have…
I can see there is too much space at the bottom of the image, so I’ll go back to the VC editor, and select the edit button on my image.
In the Design Options tab, I’ll make sure that the BOTTOM MARGIN is set to 0 pixels by typing 0px into the box, then saving the changes.
Now I’ll click the preview button again to see how it looks…
Perfect. Now it’s time to to do the final prep before I publish/broadcast this article.
Now for the final steps to wrap this up.
2. Next I need to set a Featured Image. This is the image that shows when the blogs are listed out. On the Serenity Sites, the most recent 4 blog posts are shown on the home page, and the full list is shown on the News page. This image is the attention getter, so make sure it looks good & fits the topic.
For this example, I’m going to use the same image I used within the article itself. I’ll click the “Set featured image” text, then I’ll select the image the same way we’ve done with our other images.
3. Set the broadcast options. This is where we tell WP which blog databases need to have this post written to it.
4. Now that we’re all set, I’ll click the publish button to publish this article; it will be posted to all of the blog databases we selected.
5. Double-check all of the sites you broadcasted to; you’ll want to make sure they are showing up. In this example, I’ll navigate to the Valley West site to see if it is showing on the home page…
Let’s click to see how the full article looks…