Create better landing pages in WordPress more efficiently by learining a little bit of code. This document is created for digital marketers who are ready to take their creative visions to the next level, and stop relying puring on the user intface based digital publishing platforms. We will keep this simple, focusing on frontend code that will allow you to create customized layouts based on preformatted styles available in your WordPress theme. Digimix WordPress themes are built on Bootstrap, the worlds leading frontend framework, so many of the pricinples you learn here can be applied to other websites and digital products.
This document uses Lorem Ipsum as placeholder content for example purposes. Any text beinging with Lorem ipsum should be replaced with your real content.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
From any post or page editor screen on WordPress, the main editor section has two tabs: 1. Visual, 2. Text. The Text tab opens a basic html text editor. You can only add html code and markdown code to this editor. Javascript and PHP will not be recognized (it's a security and performance thing). The following instructions assume you are operating in the WordPress Text Editor.
Whenever I'm working on content that has more than a few lines of code, I typically switch to a real code editing app then past into the WordPress text editor. This makes it easier for me to read the code, and most code editors have error checkers, autocompletion, and coloring built in, making it way easier to read and wrtie code.
My favorite free code editor is Atom by Github. If you're feeling super confident, you cad add extension packages to Atom. Here's an Atom package for Boostrap 4 that will supercharge your coding workflow.
How to create compressed text blocks with lot's of white space in margins. As shown on the Video module on the homepage.
From the body editor, wrap your text using this div tag and classes.
<div class="col-md-5 mx-auto">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
Simply add the Vimeo, YouTube, or Wista video url into the text editor, and wrap it with a div tag. I'm using the col-md-8 class on this site because it looks the best in the design. But you can select any size from 2 - 10. After 10 you should just leave it with out a div tag as it will go to col-12 by default.
<div class="col-md-8 mx-auto">
https://reis.wistia.com/medias/jp6u999upj
</div>
This document is made by the Digimix WordPress Developer NYC Team and is intended for use by Digimix clients.