Before we begin:
Below you’ll find the step-by-step detailed guide. If you’d prefer the briefer Quick Answer to this question, please see: How do I add my own content into the Focus?
Customizing the content of your Focus is how you make it your own. Choose your own images, write your own content, and play with the style to get the results you want.
General Notes on Editing Elements:
In general, to edit any element (such as a title, image, textbox, button, etc.) on your web-page, whether it’s part of Focus, a Module you added, or an element from the template, click on the element, and an edit bar will appear beneath that element.
In this example, the title box for “Project” has been clicked on, revealing the Edit bar below.
If the element contains text, once you click on it, a cursor will appear in the text box, and you should be able to start editing the text. To edit a background image, click the button in the top left corner of the image, called “Background”. Doing so will open the image editing options in the left sidebar area.
Customizing Focus Elements
Once you have added a Focus to a page in your website, you can edit all the different individual elements of that Focus in the main window of the website builder.
Step 1: Go to the page you want to edit in the Website Builder
For example, here’s the Teams page for the Elenore Designs template, with the default Quote Focus added, and scrolled down to:
The Quote Focus is a simple Focus with just a few elements: the background image and the quote box. Each of these elements can be customized to your wishes.
Step 2: Click on the element you want to edit
The next image shows the Quote Focus with the editing options active. As mentioned earlier, to begin editing, click on the element you wish to edit, and the edit options bar will appear below it.
In the image above, clicking anywhere inside the Quote Box did two things: it placed the cursor in the text, so it can be edited, and it displayed the editor bar just beneath it.
Step 3: Make the desired change to the element
Now we can type a different quote into the quote box. For example, this quote from Shakespeare’s play, As you Like It:
If you wanted to, you could use the editing options to make more changes to this text box, such as align text to left, align text to center, align text to right, change the type or size of the quotation marks, add padding, or add a border.
Tip: The editing options that appear will vary depending on the type of element it is.
Step 4: Click the Save button
An extremely important step when making changes to your web pages is to save those changes. Bookmark’s website builder does not automatically save changes. You must click the Save button in order to save your work.
Step 5: Repeat the process for other elements you wish to change.
Let’s also change another element in this Focus: the background image.
As soon as you hover your mouse anywhere on the Focus background, a small button called Background will appear in the top left corner of the image.
When you click the Background button, the background edit options appear in the left sidebar area.
In the image below, the circled area highlights the fact that there are two tabs: the Image tab, which is the one being displayed, and a Color tab. The Color tab lets you choose a color for your background, instead of an image. You can experiment with the different options. For this example, we will choose a new image from the My Drive storage area.
Clicking the My Drive button opens the My Drive window. Double-click the image you want to use.
By choosing a different image from My Drive for the background, and typing in a different quotation, the Quote Focus now looks like this:
Follow this procedure for whatever elements you wish to update in the Focus sections you add to your web pages.
Other Guides you might be interested in:
Have questions or comments about this guide? Check out our Expert Community.